@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/data/ListSortSelect.svelte

@@ -84,7 +84,7 @@ function handleChange(event: Event) {
 }
 </script>
 
-<div class={`list-sort-select ${className}`}>
+<div class={`list-sort-select ${className}`} data-smrt-component="ListSortSelect">
   <label class="list-sort-select__label" for={id}>{label}</label>
   <select
     {id}
@@ -99,6 +99,8 @@ function handleChange(event: Event) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .list-sort-select {
     display: inline-flex;
     align-items: center;
@@ -106,16 +108,17 @@ function handleChange(event: Event) {
   }
   .list-sort-select__label {
     font-size: 0.875rem;
-    color: var(--color-text-secondary, inherit);
+    color: var(--smrt-color-on-surface-variant, inherit);
     white-space: nowrap;
   }
   .list-sort-select__control {
     min-height: 2.75rem;
     padding: 0.25rem 0.5rem;
-    border: 1px solid var(--color-border, currentColor);
-    border-radius: var(--radius-md, 0.375rem);
-    background: var(--color-surface, transparent);
+    border: 1px solid var(--smrt-color-outline-variant, currentColor);
+    border-radius: var(--smrt-radius-md, 0.375rem);
+    background: var(--smrt-color-surface, transparent);
     color: inherit;
     font: inherit;
   }
+}
 </style>

package/dist/components/data/SortableHeader.svelte

@@ -13,8 +13,8 @@
   Use `as="div"` with `role="columnheader"` semantics for grid layouts that
   are not a `<table>`.
 
-  Style hooks (set on the header or an ancestor): `--sortable-header-padding`
-  (the control's padding) and `--sortable-header-font-weight` (default 600;
+  Style hooks (set on the header or an ancestor): `--smrt-sortable-header-padding`
+  (the control's padding) and `--smrt-sortable-header-font-weight` (default 600;
   `inherit` takes the surrounding head row's weight).
 -->
 <script lang="ts">
@@ -92,7 +92,7 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
   scope={as === 'th' ? 'col' : undefined}
   role={as === 'div' ? 'columnheader' : undefined}
   aria-sort={aria}
-  data-sort-column={columnId}
+  data-sort-column={columnId} data-smrt-component="SortableHeader"
 >
   {#if href}
     <a
@@ -119,6 +119,8 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
 </svelte:element>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .sortable-header {
     padding: 0;
     font-weight: inherit;
@@ -136,12 +138,12 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
     gap: 0.25rem;
     min-height: 2.75rem;
     width: 100%;
-    padding: var(--sortable-header-padding, 0.5rem 0.75rem);
+    padding: var(--smrt-sortable-header-padding, 0.5rem 0.75rem);
     border: 0;
     background: transparent;
     color: inherit;
     font: inherit;
-    font-weight: var(--sortable-header-font-weight, 600);
+    font-weight: var(--smrt-sortable-header-font-weight, 600);
     text-align: inherit;
     text-decoration: none;
     cursor: pointer;
@@ -156,8 +158,8 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
     text-decoration: underline;
   }
   .sortable-header__control:focus-visible {
-    outline: 2px solid var(--color-focus, var(--color-primary, currentColor));
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
   .sortable-header__icon {
     opacity: 0.35;
@@ -166,4 +168,5 @@ const actionLabel = $derived(listSortActionLabel(sort, columnId, label, spec));
   .sortable-header__icon.is-active {
     opacity: 1;
   }
+}
 </style>

package/dist/components/display/ConfidenceBadge.svelte

@@ -84,15 +84,15 @@ const valueText = $derived(
   class="confidence-badge {className}"
   class:sm={size === 'sm'}
   class:lg={size === 'lg'}
-  style:--badge-bg={colors.bg}
-  style:--badge-text={colors.text}
-  style:--bar-color={colors.bar}
+  style:--smrt-badge-bg={colors.bg}
+  style:--smrt-badge-text={colors.text}
+  style:--smrt-confidence-badge-bar-color={colors.bar}
   role="meter"
   aria-valuenow={clampedConfidence}
   aria-valuemin={0}
   aria-valuemax={100}
   aria-valuetext={valueText}
-  aria-label={ariaLabel ?? defaultLabel}
+  aria-label={ariaLabel ?? defaultLabel} data-smrt-component="ConfidenceBadge"
 >
   <span class="confidence-bar" style:width="{clampedConfidence}%"></span>
   {#if showPercent}
@@ -101,6 +101,8 @@ const valueText = $derived(
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .confidence-badge {
     display: inline-flex;
     align-items: center;
@@ -108,9 +110,9 @@ const valueText = $derived(
     padding: 0.25rem 0.5rem;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border-radius: var(--smrt-radius-sm, 4px);
-    background-color: var(--badge-bg);
-    color: var(--badge-text);
+    border-radius: var(--smrt-radius-sm);
+    background-color: var(--smrt-badge-bg);
+    color: var(--smrt-badge-text);
     position: relative;
     overflow: hidden;
     min-width: 60px;
@@ -133,7 +135,7 @@ const valueText = $derived(
     left: 0;
     top: 0;
     bottom: 0;
-    background-color: var(--bar-color);
+    background-color: var(--smrt-confidence-badge-bar-color);
     opacity: 0.3;
     transition: width var(--smrt-duration-short4, 300ms) var(--smrt-easing-standard, ease);
   }
@@ -143,4 +145,5 @@ const valueText = $derived(
     z-index: 1;
     font-variant-numeric: tabular-nums;
   }
+}
 </style>

package/dist/components/display/CurrencyDisplay.svelte

@@ -203,12 +203,14 @@ const colorClass = $derived.by(() => {
   class:lg={size === 'lg'}
   class:negative={colorClass === 'negative'}
   class:positive={colorClass === 'positive'}
-  class:invalid={formatted.invalidCode !== null}
+  class:invalid={formatted.invalidCode !== null} data-smrt-component="CurrencyDisplay"
 >
   {formatted.text}
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .currency-display {
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
@@ -224,14 +226,15 @@ const colorClass = $derived.by(() => {
   }
 
   .currency-display.negative {
-    color: var(--smrt-color-error, #dc2626);
+    color: var(--smrt-color-error);
   }
 
   .currency-display.positive {
-    color: var(--smrt-color-tertiary, #16a34a);
+    color: var(--smrt-color-tertiary);
   }
 
   .currency-display.invalid {
-    color: var(--smrt-color-error, #dc2626);
+    color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/components/display/DateDisplay.svelte

@@ -163,22 +163,25 @@ const isoString = $derived(
 </script>
 
 {#if parsedDate}
-  <time class="date-display {className}" datetime={isoString}>
+  <time class="date-display {className}" datetime={isoString} data-smrt-component="DateDisplay">
     {formatted}
   </time>
 {:else}
-  <span class="date-display date-fallback {className}">
+  <span class="date-display date-fallback {className}" data-smrt-component="DateDisplay">
     {fallback}
   </span>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .date-display {
     white-space: nowrap;
   }
 
   .date-fallback {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
     font-style: italic;
   }
+}
 </style>

package/dist/components/display/Icon.svelte

@@ -50,15 +50,18 @@ const pxSize = $derived(typeof size === 'number' ? `${size}px` : size);
   fill={color}
   aria-hidden={!isInformative}
   aria-label={ariaLabel}
-  role={isInformative ? 'img' : undefined}
+  role={isInformative ? 'img' : undefined} data-smrt-component="Icon"
 >
   <path d={finalPath} />
 </svg>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   svg {
     display: inline-block;
     flex-shrink: 0;
     vertical-align: middle;
   }
+}
 </style>

package/dist/components/display/StatusBadge.svelte

@@ -251,24 +251,26 @@ const displayLabel = $derived(label ?? status.replace(/_/g, ' '));
   class:sm={size === 'sm'}
   class:lg={size === 'lg'}
   class:outline={variant === 'outline'}
-  style:--badge-bg={colors.bg}
-  style:--badge-text={colors.text}
+  style:--smrt-badge-bg={colors.bg}
+  style:--smrt-badge-text={colors.text} data-smrt-component="StatusBadge"
 >
   {displayLabel}
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .status-badge {
     display: inline-flex;
     align-items: center;
     padding: 0.25rem 0.75rem;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-label-medium-weight, 500);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     white-space: nowrap;
     text-transform: capitalize;
-    background-color: var(--badge-bg);
-    color: var(--badge-text);
+    background-color: var(--smrt-badge-bg);
+    color: var(--smrt-badge-text);
     line-height: 1.25;
   }
 
@@ -284,6 +286,7 @@ const displayLabel = $derived(label ?? status.replace(/_/g, ' '));
 
   .status-badge.outline {
     background-color: transparent;
-    border: 1px solid var(--badge-text);
+    border: 1px solid var(--smrt-badge-text);
   }
+}
 </style>

package/dist/components/feedback/Alert.svelte

@@ -32,7 +32,7 @@ const role = $derived(
 );
 </script>
 
-<div class="alert alert--{variant} {className}" {role}>
+<div class="alert alert--{variant} {className}" {role} data-smrt-component="Alert">
   <span class="marker" aria-hidden="true"></span>
   <div class="content">
     {#if title}<strong>{title}</strong>{/if}
@@ -45,16 +45,20 @@ const role = $derived(
 </div>
 
 <style>
-  .alert { --alert-color: var(--smrt-color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid color-mix(in srgb, var(--alert-color) 35%, var(--smrt-color-outline-variant)); border-radius: var(--smrt-radius-medium); background: color-mix(in srgb, var(--alert-color) 8%, var(--smrt-color-surface)); color: var(--smrt-color-on-surface); }
-  .alert--success { --alert-color: var(--smrt-color-success, #2e7d32); }
-  .alert--warning { --alert-color: var(--smrt-color-warning, #a45b00); }
-  .alert--error { --alert-color: var(--smrt-color-error); }
-  .marker { width: .65rem; height: .65rem; margin-top: .4rem; border-radius: 50%; background: var(--alert-color); }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .alert { --smrt-alert-color: var(--smrt-color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: var(--smrt-hairline); border-color: color-mix(in srgb, var(--smrt-alert-color) 35%, var(--smrt-hairline-color)); box-shadow: var(--smrt-inset-highlight); border-radius: var(--smrt-radius-medium); background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-surface-panel)); color: var(--smrt-color-on-surface); }
+  .alert--info { --smrt-alert-color: var(--smrt-color-info); }
+  .alert--success { --smrt-alert-color: var(--smrt-color-success); }
+  .alert--warning { --smrt-alert-color: var(--smrt-color-warning); }
+  .alert--error { --smrt-alert-color: var(--smrt-color-error); }
+  .marker { width: .65rem; height: .65rem; margin-top: .4rem; border-radius: 50%; background: var(--smrt-alert-color); }
   .content { min-width: 0; }
   strong { display: block; font: var(--smrt-typography-title-small-font); }
   .message { color: var(--smrt-color-on-surface-variant); }
   .action { align-self: center; }
   .dismiss { width: 2rem; height: 2rem; margin: -.35rem; border: 0; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer; }
-  .dismiss:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
-  .dismiss:focus-visible { outline: 2px solid var(--smrt-color-primary); }
+  .dismiss:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
+  .dismiss:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+}
 </style>

package/dist/components/feedback/ConfirmDialog.svelte

@@ -134,7 +134,7 @@ function handleKeydown(e: KeyboardEvent) {
     tabindex="-1"
     onclick={handleBackdropClick}
     onkeydown={handleKeydown}
-    oncancel={handleCancel}
+    oncancel={handleCancel} data-smrt-component="ConfirmDialog"
   >
     <div class="dialog-content">
       <h2 id={`${instanceId}-title`} class="dialog-title">{title}</h2>
@@ -176,6 +176,8 @@ function handleKeydown(e: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .dialog-backdrop {
     position: fixed;
     inset: 0;
@@ -201,7 +203,7 @@ function handleKeydown(e: KeyboardEvent) {
   .dialog-content {
     background-color: var(--smrt-color-surface-container-high);
     border-radius: var(--smrt-radius-3xl, 32px);
-    padding: var(--smrt-spacing-6, 24px);
+    padding: var(--smrt-spacing-6);
     max-width: 400px;
     width: 100%;
     box-shadow: var(--smrt-elevation-3);
@@ -224,32 +226,32 @@ function handleKeydown(e: KeyboardEvent) {
   .dialog-title {
     font: var(--smrt-typography-headline-small-font);
     color: var(--smrt-color-on-surface);
-    margin: 0 0 var(--smrt-spacing-4, 16px);
+    margin: 0 0 var(--smrt-spacing-4);
   }
 
   .dialog-message {
     font: var(--smrt-typography-body-medium-font);
     color: var(--smrt-color-on-surface-variant);
-    margin: 0 0 var(--smrt-spacing-6, 24px);
+    margin: 0 0 var(--smrt-spacing-6);
     line-height: 1.5;
   }
 
   .dialog-actions {
     display: flex;
     justify-content: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     height: 40px;
-    padding: 0 var(--smrt-spacing-6, 24px);
+    padding: 0 var(--smrt-spacing-6);
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    border-radius: var(--smrt-radius-2xl, 24px);
+    border-radius: var(--smrt-radius-2xl);
     cursor: pointer;
     transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
     border: none;
@@ -265,7 +267,7 @@ function handleKeydown(e: KeyboardEvent) {
   .btn-text {
     background: transparent;
     color: var(--smrt-color-primary);
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
   }
 
   .btn-text:hover:not(:disabled) {
@@ -292,7 +294,7 @@ function handleKeydown(e: KeyboardEvent) {
     height: 18px;
     border: 2px solid transparent;
     border-top-color: currentColor;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -310,4 +312,5 @@ function handleKeydown(e: KeyboardEvent) {
       animation: none;
     }
   }
+}
 </style>

package/dist/components/feedback/LoadingOverlay.svelte

@@ -70,7 +70,7 @@ function handleKeydown(e: KeyboardEvent) {
 		aria-modal="true"
 		aria-labelledby="loading-title"
 		aria-describedby={items.length > 0 ? 'loading-items' : undefined}
-		aria-busy={!error}
+		aria-busy={!error} data-smrt-component="LoadingOverlay"
 	>
 		<div class="overlay-backdrop"></div>
 
@@ -132,6 +132,8 @@ function handleKeydown(e: KeyboardEvent) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.loading-overlay {
 		position: fixed;
 		inset: 0;
@@ -151,8 +153,8 @@ function handleKeydown(e: KeyboardEvent) {
 	.overlay-content {
 		position: relative;
 		background: var(--smrt-color-surface-container-high, white);
-		border-radius: var(--smrt-radius-xl, 16px);
-		padding: var(--smrt-spacing-8, 32px) var(--smrt-spacing-10, 40px);
+		border-radius: var(--smrt-radius-xl);
+		padding: var(--smrt-spacing-8) var(--smrt-spacing-10);
 		max-width: 400px;
 		width: 90%;
 		text-align: center;
@@ -162,7 +164,7 @@ function handleKeydown(e: KeyboardEvent) {
 	.loading-icon {
 		width: 48px;
 		height: 48px;
-		margin: 0 auto var(--smrt-spacing-4, 16px);
+		margin: 0 auto var(--smrt-spacing-4);
 	}
 
 	.icon {
@@ -171,12 +173,12 @@ function handleKeydown(e: KeyboardEvent) {
 	}
 
 	.icon.spinner {
-		color: var(--smrt-color-primary, #3b82f6);
+		color: var(--smrt-color-primary);
 		animation: spin 1s linear infinite;
 	}
 
 	.icon.error {
-		color: var(--smrt-color-error, #ef4444);
+		color: var(--smrt-color-error);
 	}
 
 	@keyframes spin {
@@ -191,22 +193,22 @@ function handleKeydown(e: KeyboardEvent) {
 	.title {
 		font-size: var(--smrt-typography-title-large-size, 1.25rem);
 		font-weight: var(--smrt-typography-weight-semibold, 600);
-		color: var(--smrt-color-on-surface, #1f2937);
-		margin: 0 0 var(--smrt-spacing-4, 16px);
+		color: var(--smrt-color-on-surface);
+		margin: 0 0 var(--smrt-spacing-4);
 	}
 
 	.progress-container {
 		display: flex;
 		align-items: center;
-		gap: var(--smrt-spacing-3, 12px);
-		margin: var(--smrt-spacing-4, 16px) 0;
+		gap: var(--smrt-spacing-3);
+		margin: var(--smrt-spacing-4) 0;
 	}
 
 	.progress-bar {
 		flex: 1;
 		height: 8px;
-		background: var(--smrt-color-surface-container-highest, #e5e7eb);
-		border-radius: var(--smrt-radius-sm, 4px);
+		background: var(--smrt-color-surface-container-highest);
+		border-radius: var(--smrt-radius-sm);
 		overflow: hidden;
 	}
 
@@ -217,62 +219,62 @@ function handleKeydown(e: KeyboardEvent) {
 			var(--smrt-color-primary),
 			color-mix(in srgb, var(--smrt-color-primary) 70%, white)
 		);
-		border-radius: var(--smrt-radius-sm, 4px);
+		border-radius: var(--smrt-radius-sm);
 		transition: width var(--smrt-duration-short4, 300ms) var(--smrt-easing-standard, ease);
 	}
 
 	.progress-text {
 		font-size: var(--smrt-typography-label-large-size, 0.875rem);
 		font-weight: var(--smrt-typography-weight-semibold, 600);
-		color: var(--smrt-color-primary, #3b82f6);
+		color: var(--smrt-color-primary);
 		min-width: 40px;
 	}
 
 	.items-container {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--smrt-spacing-2, 8px);
+		gap: var(--smrt-spacing-2);
 		justify-content: center;
-		margin-top: var(--smrt-spacing-4, 16px);
+		margin-top: var(--smrt-spacing-4);
 	}
 
 	.item-badge {
 		font-size: var(--smrt-typography-label-medium-size, 0.75rem);
-		padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-3, 12px);
-		border-radius: var(--smrt-radius-full, 9999px);
-		background: var(--smrt-color-primary-container, #dcfce7);
-		color: var(--smrt-color-on-primary-container, #166534);
+		padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+		border-radius: var(--smrt-radius-full);
+		background: var(--smrt-color-primary-container);
+		color: var(--smrt-color-on-primary-container);
 	}
 
 	.error-message {
 		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-		color: var(--smrt-color-error, #ef4444);
-		margin: var(--smrt-spacing-4, 16px) 0 0;
-		padding: var(--smrt-spacing-3, 12px);
-		background: var(--smrt-color-error-container, #fef2f2);
-		border-radius: var(--smrt-radius-md, 8px);
+		color: var(--smrt-color-error);
+		margin: var(--smrt-spacing-4) 0 0;
+		padding: var(--smrt-spacing-3);
+		background: var(--smrt-color-error-container);
+		border-radius: var(--smrt-radius-md);
 	}
 
 	.dismiss-btn {
-		margin-top: var(--smrt-spacing-5, 20px);
-		padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-5, 20px);
+		margin-top: var(--smrt-spacing-5);
+		padding: var(--smrt-spacing-3) var(--smrt-spacing-5);
 		font-size: var(--smrt-typography-label-large-size, 0.875rem);
-		color: var(--smrt-color-on-surface-variant, #6b7280);
+		color: var(--smrt-color-on-surface-variant);
 		background: transparent;
-		border: 1px solid var(--smrt-color-outline, #9ca3af);
-		border-radius: var(--smrt-radius-md, 8px);
+		border: 1px solid var(--smrt-color-outline);
+		border-radius: var(--smrt-radius-md);
 		cursor: pointer;
 		transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
 	}
 
 	.dismiss-btn:hover {
-		background: var(--smrt-color-surface-container-highest, #f3f4f6);
-		border-color: var(--smrt-color-outline, #9ca3af);
+		background: var(--smrt-color-surface-container-highest);
+		border-color: var(--smrt-color-outline);
 	}
 
 	.dismiss-btn:focus-visible {
-		outline: 2px solid var(--smrt-color-primary);
-		outline-offset: 2px;
+		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+		outline-offset: var(--smrt-focus-ring-offset);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -283,4 +285,5 @@ function handleKeydown(e: KeyboardEvent) {
 			transition: none;
 		}
 	}
+}
 </style>

package/dist/components/feedback/Meter.svelte

@@ -34,10 +34,13 @@ let {
   class: className = '',
 }: Props = $props();
 </script>
-<div class="meter {className}"><div class="meter__header"><span>{label}</span>{#if showValue}<span>{formatValue(value)}</span>{/if}</div>
+<div class="meter {className}" data-smrt-component="Meter"><div class="meter__header"><span>{label}</span>{#if showValue}<span>{formatValue(value)}</span>{/if}</div>
   <meter {value} {min} {max} {low} {high} {optimum}>{formatValue(value)}</meter></div>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .meter { display: grid; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface); }
   .meter__header { display: flex; justify-content: space-between; font: var(--smrt-typography-label-large-font); }
   meter { width: 100%; height: .75rem; accent-color: var(--smrt-color-primary); }
+}
 </style>