@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/chat/MessageBubble.svelte

@@ -97,7 +97,7 @@ const timeText = $derived(
   class="bubble bubble--{effectiveVariant}"
   class:bubble--own={effectiveOwn}
   role={hasHeader ? 'group' : undefined}
-  aria-label={hasHeader ? groupLabel : undefined}
+  aria-label={hasHeader ? groupLabel : undefined} data-smrt-component="MessageBubble"
 >
   {#if hasHeader}
     <div class="bubble__header">
@@ -126,13 +126,15 @@ const timeText = $derived(
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .bubble {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     max-width: 75%;
-    padding: var(--smrt-spacing-3, 12px) var(--smrt-spacing-4, 16px);
-    border-radius: var(--smrt-radius-large, 12px);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+    border-radius: var(--smrt-radius-large);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     line-height: 1.4;
     word-break: break-word;
@@ -140,39 +142,39 @@ const timeText = $derived(
 
   /* default — a peer message; `own` is the current viewer's message. */
   .bubble--default {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #1b1b1f);
-    border-bottom-left-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
+    border-bottom-left-radius: var(--smrt-radius-small);
   }
   .bubble--default.bubble--own {
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border-bottom-right-radius: var(--smrt-radius-small, 4px);
-    border-bottom-left-radius: var(--smrt-radius-large, 12px);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    border-bottom-right-radius: var(--smrt-radius-small);
+    border-bottom-left-radius: var(--smrt-radius-large);
   }
 
   /* agent — assistant message, accented on the leading edge. */
   .bubble--agent {
-    background: var(--smrt-color-tertiary-container, #ffd8e4);
-    color: var(--smrt-color-on-tertiary-container, #31111d);
-    border-bottom-left-radius: var(--smrt-radius-small, 4px);
-    border-left: 3px solid var(--smrt-color-tertiary, #7d5260);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
+    border-bottom-left-radius: var(--smrt-radius-small);
+    border-left: 3px solid var(--smrt-color-tertiary);
   }
   .bubble--agent.bubble--own {
     border-left: none;
-    border-right: 3px solid var(--smrt-color-tertiary, #7d5260);
-    border-bottom-right-radius: var(--smrt-radius-small, 4px);
-    border-bottom-left-radius: var(--smrt-radius-large, 12px);
+    border-right: 3px solid var(--smrt-color-tertiary);
+    border-bottom-right-radius: var(--smrt-radius-small);
+    border-bottom-left-radius: var(--smrt-radius-large);
   }
 
   /* system — centered notice. */
   .bubble--system {
     max-width: 100%;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     text-align: center;
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    padding: var(--smrt-spacing-2, 6px) var(--smrt-spacing-4, 16px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-4);
     border-radius: 0;
     align-self: center;
   }
@@ -186,7 +188,7 @@ const timeText = $derived(
   .bubble__header {
     display: flex;
     align-items: baseline;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
   .bubble__author {
     font-weight: var(--smrt-typography-weight-semibold, 600);
@@ -194,7 +196,7 @@ const timeText = $derived(
   }
   .bubble__time {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     opacity: 0.8;
   }
 
@@ -211,6 +213,7 @@ const timeText = $derived(
   .bubble__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/chat/ReactionPicker.svelte

@@ -61,7 +61,7 @@ function nameFor(emoji: string): string {
 </script>
 
 {#if isOpen}
-  <div class="reactions" role="group" aria-label={groupLabel}>
+  <div class="reactions" role="group" aria-label={groupLabel} data-smrt-component="ReactionPicker">
     {#each emojis as emoji (emoji)}
       <button
         type="button"
@@ -76,14 +76,16 @@ function nameFor(emoji: string): string {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .reactions {
     display: inline-flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-1);
     max-width: 16rem;
-    border-radius: var(--smrt-radius-large, 12px);
-    background: var(--smrt-color-surface-container, #f3edf7);
+    border-radius: var(--smrt-radius-large);
+    background: var(--smrt-color-surface-container);
   }
 
   .reactions__btn {
@@ -94,7 +96,7 @@ function nameFor(emoji: string): string {
     width: 2rem;
     height: 2rem;
     border: none;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: none;
     font-size: var(--smrt-typography-title-medium-size, 1.1rem);
     line-height: 1;
@@ -102,12 +104,12 @@ function nameFor(emoji: string): string {
     transition: transform 0.1s ease, background 0.1s ease;
   }
   .reactions__btn:hover {
-    background: var(--smrt-color-surface-container-highest, #e6e0e9);
+    background: var(--smrt-color-surface-container-highest);
     transform: scale(1.15);
   }
   .reactions__btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 1px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -118,4 +120,5 @@ function nameFor(emoji: string): string {
       transform: none;
     }
   }
+}
 </style>

package/dist/components/chat/TypingIndicator.svelte

@@ -39,7 +39,7 @@ const text = $derived.by(() => {
 </script>
 
 {#if show}
-  <div class="typing" role="status" aria-live="polite">
+  <div class="typing" role="status" aria-live="polite" data-smrt-component="TypingIndicator">
     <span class="typing__text">{text}</span>
     <span class="typing__dots" aria-hidden="true">
       <span class="typing__dot"></span>
@@ -50,32 +50,34 @@ const text = $derived.by(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .typing {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-large, 12px);
-    background: var(--smrt-color-surface-container, #f3edf7);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-large);
+    background: var(--smrt-color-surface-container);
     width: fit-content;
   }
 
   .typing__text {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
     white-space: nowrap;
   }
 
   .typing__dots {
     display: inline-flex;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .typing__dot {
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-on-surface-variant, #49454f);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-on-surface-variant);
     opacity: 0.5;
     animation: smrt-typing-bounce 1.2s ease-in-out infinite;
   }
@@ -104,4 +106,5 @@ const text = $derived.by(() => {
       animation: none;
     }
   }
+}
 </style>

package/dist/components/data/CollectionList.svelte

@@ -81,11 +81,11 @@ function toggle(key: string | number) {
 </script>
 
 {#if loading}
-  <div class="loading" role="status"><span class="spinner" aria-hidden="true"></span>Loading…</div>
+  <div class="loading" role="status" data-smrt-component="CollectionList"><span class="spinner" aria-hidden="true"></span>Loading…</div>
 {:else if items.length === 0}
-  <div class="empty">{#if empty}{@render empty()}{:else}No items available{/if}</div>
+  <div class="empty" data-smrt-component="CollectionList">{#if empty}{@render empty()}{:else}No items available{/if}</div>
 {:else}
-  <ul class="collection collection--{layout} {className}">
+  <ul class="collection collection--{layout} {className}" data-smrt-component="CollectionList">
     {#each items as entry, index (keyOf(entry, index))}
       {@const key = keyOf(entry, index)}
       {@const isSelected = selected.has(key)}
@@ -108,6 +108,8 @@ function toggle(key: string | number) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .collection { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
   .collection--grid { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
   li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-3); min-width: 0; padding: var(--smrt-spacing-3); border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant)); border-radius: var(--smrt-radius-medium); background: var(--smrt-card-background, var(--smrt-color-surface)); color: var(--smrt-color-on-surface); }
@@ -117,22 +119,23 @@ function toggle(key: string | number) {
   input { width: 1.125rem; height: 1.125rem; accent-color: var(--smrt-color-primary); }
   .main { display: grid; min-width: 0; gap: var(--smrt-spacing-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
   button.main { width: 100%; cursor: pointer; }
-  button.main:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  button.main:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--smrt-typography-title-small-font); }
   .main span { color: var(--smrt-color-on-surface-variant); }
   .actions { position: relative; z-index: 1; display: flex; gap: var(--smrt-spacing-1); }
-  .collection--divided { --collection-divider: color-mix(in srgb, var(--smrt-color-outline-variant) 55%, transparent); gap: 0; }
+  .collection--divided { --smrt-collection-list-divider: color-mix(in srgb, var(--smrt-color-outline-variant) 55%, transparent); gap: 0; }
   .collection--divided li { padding-inline: 0; border: none; border-radius: 0; background: transparent; }
-  .collection--divided li + li { border-block-start: 1px solid var(--collection-divider); }
-  .collection--divided li.selected { border-color: var(--collection-divider); background: transparent; }
+  .collection--divided li + li { border-block-start: 1px solid var(--smrt-collection-list-divider); }
+  .collection--divided li.selected { border-color: var(--smrt-collection-list-divider); background: transparent; }
   .collection--gallery { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
   .collection--gallery li { display: block; padding: 0; }
   .collection--gallery .main { gap: 0; }
-  .collection--gallery .select, .collection--gallery .actions { position: absolute; top: var(--smrt-spacing-1); z-index: 2; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--smrt-radius-full, 999px); background: color-mix(in srgb, var(--smrt-color-surface) 82%, transparent); }
+  .collection--gallery .select, .collection--gallery .actions { position: absolute; top: var(--smrt-spacing-1); z-index: 2; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--smrt-radius-full); background: color-mix(in srgb, var(--smrt-color-surface) 82%, transparent); }
   .collection--gallery .select { left: var(--smrt-spacing-1); }
   .collection--gallery .actions { right: var(--smrt-spacing-1); }
   .loading, .empty { display: flex; min-height: 8rem; align-items: center; justify-content: center; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); }
   .spinner { width: 1rem; height: 1rem; border: 2px solid var(--smrt-color-outline-variant); border-top-color: var(--smrt-color-primary); border-radius: 50%; animation: spin .8s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }
+}
 </style>

package/dist/components/data/CollectionToolbar.svelte

@@ -259,7 +259,7 @@ onDestroy(() => surfaceRegistration?.cleanup());
   class="toolbar {className}"
   class:toolbar--highlighted={surfaceHighlighted}
   role="search"
-  tabindex="-1"
+  tabindex="-1" data-smrt-component="CollectionToolbar"
 >
   <div class="search">
     <Input type="search" name="collection-search" aria-label={searchLabel} placeholder={searchPlaceholder} value={controllerState?.search ?? search} oninput={(event) => changeSearch(event.currentTarget.value)} />
@@ -275,11 +275,14 @@ onDestroy(() => surfaceRegistration?.cleanup());
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2) 0; color: var(--smrt-color-on-surface); }
-  .toolbar--highlighted { outline: 2px solid var(--smrt-color-primary, #2563eb); outline-offset: 3px; }
+  .toolbar--highlighted { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .search { flex: 1 1 14rem; max-width: 24rem; }
   .filters, .actions, .bulk { display: flex; align-items: center; gap: var(--smrt-spacing-2); }
   .bulk { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-small); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
   .count { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
   .spacer { flex: 1; }
+}
 </style>

package/dist/components/data/DataTable.svelte

@@ -1444,7 +1444,7 @@ $effect(() => {
 });
 </script>
 
-{#if toolbar}<div class="data-table-toolbar">{@render toolbar()}</div>{/if}
+{#if toolbar}<div class="data-table-toolbar" data-smrt-component="DataTable">{@render toolbar()}</div>{/if}
 <!-- svelte-ignore a11y_no_noninteractive_tabindex: the region provides horizontal or virtual keyboard scrolling. -->
 <div
   bind:this={tableContainer}
@@ -1473,7 +1473,7 @@ $effect(() => {
   onkeydown={(event) => {
     handleVirtualizationKeydown(event);
     if (!event.defaultPrevented) handleOverflowKeydown(event);
-  }}
+  }} data-smrt-component="DataTable"
 >
   <table role={cardsRole('table')}
     class="data-table {sizeClasses[size]}"
@@ -1486,7 +1486,7 @@ $effect(() => {
     aria-rowcount={virtualizationWindow.enabled
       ? virtualRowCount + headerRowCount + structuralRowCount
       : undefined}
-    style={`--data-table-caption-height: ${virtualCaptionHeight}px`}
+    style={`--smrt-data-table-caption-height: ${virtualCaptionHeight}px`}
   >
     {#if caption}
       <caption bind:this={tableCaption} class="data-table__caption">{caption}</caption>
@@ -1913,7 +1913,7 @@ $effect(() => {
   {/if}
 </div>
 {#if hasHorizontalOverflow}
-  <div class="data-table__overflow-cue" aria-hidden="true">
+  <div class="data-table__overflow-cue" aria-hidden="true" data-smrt-component="DataTable">
     {#if canScrollLeft}<span>← {t(M['ui.data_table.more_columns'])}</span>{/if}
     {#if canScrollRight}<span>{t(M['ui.data_table.more_columns'])} →</span>{/if}
   </div>
@@ -1921,6 +1921,8 @@ $effect(() => {
 {#if tableState.pageSize && totalPages && totalPages > 1}<Pagination currentPage={tableState.page} {totalPages} onPageChange={handlePageChange} aria-label={t(M['ui.data_table.pagination'])} />{/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .data-table-container {
     position: relative;
     width: 100%;
@@ -1928,22 +1930,22 @@ $effect(() => {
   }
 
   .data-table-container--overflowing:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #3b82f6);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .data-table-container--highlighted {
-    outline: 2px solid var(--smrt-color-primary, #2563eb);
-    outline-offset: 3px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   .data-table__overflow-cue {
     display: flex;
     justify-content: space-between;
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    border-top: var(--smrt-hairline);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-small-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
     pointer-events: none;
@@ -1971,7 +1973,7 @@ $effect(() => {
 
   .data-table-container--sticky.data-table-container--virtualized .data-table__head {
     position: sticky;
-    top: var(--data-table-caption-height, 0px);
+    top: var(--smrt-data-table-caption-height, 0px);
     z-index: 1;
   }
 
@@ -1981,21 +1983,21 @@ $effect(() => {
     border-spacing: 0;
     font-family: var(--smrt-font-family, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
-    background: var(--smrt-color-surface, #ffffff);
+    color: var(--smrt-color-on-surface);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__caption {
     padding: var(--smrt-spacing-3, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
     text-align: left;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     caption-side: top;
   }
 
   /* Header */
   .data-table__head {
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table-container--sticky .data-table__head {
@@ -2005,7 +2007,7 @@ $effect(() => {
   }
 
   .data-table__row--header {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: var(--smrt-hairline);
   }
 
   .data-table__cell--header {
@@ -2014,7 +2016,7 @@ $effect(() => {
     font-weight: var(--smrt-typography-weight-semibold, 600);
     text-align: left;
     white-space: nowrap;
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .data-table__cell--sortable {
@@ -2042,7 +2044,7 @@ $effect(() => {
   }
 
   .data-table__cell--header-group {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-label-medium-font);
     letter-spacing: 0.02em;
   }
@@ -2065,17 +2067,17 @@ $effect(() => {
     right: 0.3rem;
     width: 1px;
     height: 60%;
-    background: var(--smrt-color-outline, #9ca3af);
+    background: var(--smrt-color-outline);
     content: '';
   }
 
   .data-table__resize-handle:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #3b82f6);
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .data-table__sort-button:hover {
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
   }
 
   .data-table__sort-icon {
@@ -2085,16 +2087,16 @@ $effect(() => {
 
   .data-table__cell--sorted .data-table__sort-icon {
     opacity: 1;
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
   }
 
   /* Body */
   .data-table__body {
-    background: var(--smrt-color-surface, #ffffff);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__row {
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: var(--smrt-hairline);
     transition: background-color var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
   }
 
@@ -2103,17 +2105,25 @@ $effect(() => {
     border: 0;
   }
 
-  .data-table--hoverable .data-table__row:hover:not(.data-table__row--loading):not(.data-table__row--empty) {
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+  .data-table--hoverable .data-table__row:hover:not(.data-table__row--loading):not(.data-table__row--empty):not(.data-table__row--selected) {
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-on-surface) calc(var(--smrt-state-hover) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
   .data-table__row--selected {
-    background: var(--smrt-color-primary-container, #dbeafe) !important;
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-primary) calc(var(--smrt-state-selected) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
-  .data-table--striped:not(.data-table--virtualized) .data-table__row:nth-child(even),
-  .data-table__row--striped {
-    background: var(--smrt-color-surface-container-lowest, #fafafa);
+  .data-table--striped:not(.data-table--virtualized) .data-table__row:nth-child(even):not(.data-table__row--selected),
+  .data-table__row--striped:not(.data-table__row--selected) {
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table__row--interactive {
@@ -2121,13 +2131,13 @@ $effect(() => {
   }
 
   .data-table__row--interactive:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #3b82f6);
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .data-table-container--virtualized .data-table__row:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #3b82f6);
-    outline-offset: -2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .data-table__cell {
@@ -2139,18 +2149,22 @@ $effect(() => {
   .data-table__cell--pinned-end {
     position: sticky;
     z-index: 1;
-    background: var(--smrt-color-surface, #ffffff);
+    background: var(--smrt-surface-panel);
   }
 
   .data-table__cell--header.data-table__cell--pinned-start,
   .data-table__cell--header.data-table__cell--pinned-end {
     z-index: 3;
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-surface-sunken);
   }
 
   .data-table__row--selected .data-table__cell--pinned-start,
   .data-table__row--selected .data-table__cell--pinned-end {
-    background: var(--smrt-color-primary-container, #dbeafe);
+    background: color-mix(
+      in srgb,
+      var(--smrt-color-primary) calc(var(--smrt-state-selected) * 100%),
+      var(--smrt-surface-panel)
+    );
   }
 
   .data-table__cell--checkbox {
@@ -2159,19 +2173,19 @@ $effect(() => {
   }
 
   .data-table__cell--expand { width: 2.75rem; text-align: center; }
-  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
-  .data-table__expand-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
-  .data-table__cell--expanded { padding: var(--smrt-spacing-4); background: var(--smrt-color-surface-container-low); }
-  .data-table__footer { border-top: 2px solid var(--smrt-color-outline-variant); font-weight: var(--smrt-typography-weight-medium); }
-  .data-table__row--structural { background: var(--smrt-color-surface-container-low, #f9fafb); }
-  .data-table__row--footer { border-top: 2px solid var(--smrt-color-outline-variant); }
+  .data-table__expand-button { width: 1.75rem; height: 1.75rem; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-full); background: transparent; color: var(--smrt-color-on-surface); cursor: pointer; }
+  .data-table__expand-button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .data-table__cell--expanded { padding: var(--smrt-spacing-4); background: var(--smrt-surface-sunken); }
+  .data-table__footer { border-top: var(--smrt-hairline-strong); font-weight: var(--smrt-typography-weight-medium); }
+  .data-table__row--structural { background: var(--smrt-surface-sunken); }
+  .data-table__row--footer { border-top: var(--smrt-hairline-strong); }
   .data-table__cell--structural-label { font-weight: var(--smrt-typography-weight-semibold, 600); }
 
   .data-table__checkbox {
     width: 18px;
     height: 18px;
     cursor: pointer;
-    accent-color: var(--smrt-color-primary, #3b82f6);
+    accent-color: var(--smrt-color-primary);
   }
 
   /* Loading */
@@ -2187,15 +2201,15 @@ $effect(() => {
     align-items: center;
     justify-content: center;
     gap: var(--smrt-spacing-2, 0.5rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .data-table__spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--smrt-color-outline-variant, #e5e7eb);
-    border-top-color: var(--smrt-color-primary, #3b82f6);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border: 2px solid var(--smrt-color-outline-variant);
+    border-top-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.8s linear infinite;
   }
 
@@ -2206,7 +2220,7 @@ $effect(() => {
   }
 
   .data-table__empty-state {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .data-table__error-state,
@@ -2216,17 +2230,17 @@ $effect(() => {
     justify-content: center;
     flex-wrap: wrap;
     gap: var(--smrt-spacing-3, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .data-table__error-state,
   .data-table__async-status--error {
-    color: var(--smrt-color-error, #b3261e);
+    color: var(--smrt-color-error);
   }
 
   .data-table__async-status {
     padding: var(--smrt-spacing-3, 0.75rem);
-    border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-top: var(--smrt-hairline);
     font: var(--smrt-typography-body-small-font);
   }
 
@@ -2241,8 +2255,8 @@ $effect(() => {
   }
 
   .data-table__retry-button:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #3b82f6);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   /* Size variants */
@@ -2308,13 +2322,13 @@ $effect(() => {
       display: block;
       font-size: var(--smrt-typography-label-small-size, 0.75rem);
       font-weight: 600;
-      color: var(--smrt-color-on-surface-variant, #4b5563);
+      color: var(--smrt-color-on-surface-variant);
     }
     .data-table-container--phone-cards .data-table__row {
       display: grid;
       gap: var(--smrt-spacing-1, 0.35rem);
       padding: var(--smrt-spacing-3, 0.85rem) var(--smrt-spacing-4, 1rem);
-      border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+      border-bottom: var(--smrt-hairline);
     }
     .data-table-container--phone-cards .data-table__cell {
       display: block;
@@ -2331,10 +2345,11 @@ $effect(() => {
       animation: none;
     }
   }
-  .data-table-container[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .data-table-container[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .data-table-container[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .data-table__sort-button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
   .data-table-container--narrow .data-table { table-layout: fixed; }
   .data-table-container--narrow .data-table__cell { white-space: normal; overflow-wrap: anywhere; }
   .data-table-container--narrow .data-table__sort-button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+}
 </style>