@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/nav/Tabs.svelte

@@ -154,6 +154,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 {#snippet linkTab(tab: Tab)}
   <a
     class="tab-link"
+    data-smrt-part="tab"
     class:active={tab.id === active}
     href={tab.disabled ? undefined : tab.href}
     aria-current={tab.id === active ? 'page' : undefined}
@@ -167,20 +168,20 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
       handleClick(tab.id);
     }}
   >
-    <span class="tab-label">{tab.label}</span>
+    <span class="tab-label" data-smrt-part="label">{tab.label}</span>
     {#if tab.count !== undefined}
-      <span class="tab-count">{tab.count}</span>
+      <span class="tab-count" data-smrt-part="count">{tab.count}</span>
     {/if}
     {#if hasBadge(tab)}
-      <span class="tab-badge">{tab.badge}</span>
+      <span class="tab-badge" data-smrt-part="badge">{tab.badge}</span>
     {/if}
   </a>
 {/snippet}
 
 {#if linkMode}
-<div class="tabs-container">
+<div class="tabs-container" data-smrt-component="Tabs">
   <nav
-    class="tabs-links"
+    class="tabs-links" data-smrt-part="list"
     class:sm={size === 'sm'}
     class:lg={size === 'lg'}
     aria-label={ariaLabel}
@@ -193,14 +194,14 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     </div>
     {#if split.overflow.length > 0}
       <details class="tabs-more" bind:this={moreMenu}>
-        <summary class="tab-link">
-          <span class="tab-label">{moreLabel}</span>
+        <summary class="tab-link" data-smrt-part="trigger">
+          <span class="tab-label" data-smrt-part="label">{moreLabel}</span>
           {#if overflowHasBadge}
             <span class="tab-dot" aria-hidden="true"></span>
             <span class="visually-hidden">({moreBadgeLabel})</span>
           {/if}
         </summary>
-        <div class="tabs-more-menu">
+        <div class="tabs-more-menu" data-smrt-part="menu">
           {#each split.overflow as tab (tab.id)}
             {@render linkTab(tab)}
           {/each}
@@ -209,15 +210,15 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     {/if}
   </nav>
   {#if children}
-    <div class="tab-panel">
+    <div class="tab-panel" data-smrt-part="panel">
       {@render children()}
     </div>
   {/if}
 </div>
 {:else}
-<div class="tabs-container">
+<div class="tabs-container" data-smrt-component="Tabs">
   <div
-    class="tabs-nav"
+    class="tabs-nav" data-smrt-part="list"
     class:sm={size === 'sm'}
     class:lg={size === 'lg'}
     class:secondary={variant === 'secondary'}
@@ -228,7 +229,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     {#each tabs as tab (tab.id)}
       <button
         type="button"
-        class="tab-button"
+        class="tab-button" data-smrt-part="tab"
         class:active={tab.id === active}
         disabled={tab.disabled}
         role="tab"
@@ -242,12 +243,12 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
         use:ripple
       >
         <span class="tab-content-wrapper">
-          <span class="tab-label">{tab.label}</span>
+          <span class="tab-label" data-smrt-part="label">{tab.label}</span>
           {#if tab.count !== undefined}
-            <span class="tab-count">{tab.count}</span>
+            <span class="tab-count" data-smrt-part="count">{tab.count}</span>
           {/if}
           {#if hasBadge(tab)}
-            <span class="tab-badge">{tab.badge}</span>
+            <span class="tab-badge" data-smrt-part="badge">{tab.badge}</span>
           {/if}
         </span>
         <div class="active-indicator"></div>
@@ -257,7 +258,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 
   {#if children}
     <div 
-      class="tab-panel" 
+      class="tab-panel" data-smrt-part="panel" 
       role="tabpanel" 
       id="tab-panel-{instanceId}"
       aria-labelledby="tab-{instanceId}-{active}"
@@ -269,6 +270,8 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tabs-container {
     display: flex;
     flex-direction: column;
@@ -277,7 +280,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 
   .tabs-nav {
     display: flex;
-    border-bottom: 1px solid var(--smrt-color-surface-variant);
+    border-bottom: var(--smrt-hairline);
     width: 100%;
   }
 
@@ -287,13 +290,14 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    padding: 0 var(--smrt-spacing-4);
     height: 48px;
     font: var(--smrt-typography-title-small-font);
-    font-weight: var(--smrt-typography-weight-medium, 500);
+    font-weight: var(--smrt-control-weight);
     color: var(--smrt-color-on-surface-variant);
     background: transparent;
     border: none;
+    border-radius: var(--smrt-control-radius) var(--smrt-control-radius) 0 0;
     cursor: pointer;
     transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
     position: relative;
@@ -311,14 +315,35 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     font: var(--smrt-typography-title-medium-font);
   }
 
+  /* State layer: currentColor mixed at the theme's state opacity. */
+  .tab-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+  }
+
   .tab-button:hover:not(:disabled) {
-    background-color: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface);
   }
 
+  .tab-button:hover:not(:disabled)::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .tab-button:active:not(:disabled)::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+
+  .tab-button.active::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-selected) * 100%), transparent);
+  }
+
   .tab-button: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: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .tab-button.active {
@@ -326,14 +351,14 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   }
 
   .tab-button:disabled {
-    opacity: 0.38;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
   .tab-content-wrapper {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     height: 100%;
   }
 
@@ -347,7 +372,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     bottom: 0;
     height: 3px;
     background-color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
+    border-radius: var(--smrt-radius-sm) var(--smrt-radius-sm) 0 0;
     transition: width 200ms, opacity 200ms;
     width: 0;
     opacity: 0;
@@ -372,7 +397,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     min-width: 1.25rem;
     padding: 0.05rem 0.4rem;
     border-radius: 999px;
-    background: var(--smrt-color-surface-container-high);
+    background: var(--smrt-surface-sunken);
     color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -383,16 +408,16 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   .tabs-links {
     display: flex;
     align-items: stretch;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     width: 100%;
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   .tabs-links-row {
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     overflow-x: auto;
     scrollbar-width: thin;
   }
@@ -401,21 +426,23 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    min-height: 44px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-2);
+    min-height: var(--smrt-control-height);
+    padding: 0 var(--smrt-spacing-4);
     margin-bottom: -1px;
+    border-radius: var(--smrt-control-radius) var(--smrt-control-radius) 0 0;
     border-bottom: 2px solid transparent;
     color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-title-small-font);
-    font-weight: var(--smrt-typography-weight-semibold, 600);
+    font-weight: var(--smrt-control-weight);
     text-decoration: none;
     white-space: nowrap;
     cursor: pointer;
   }
 
   .tabs-links.sm .tab-link {
-    min-height: 40px;
+    min-height: var(--smrt-control-height-small);
+    border-radius: var(--smrt-control-radius-small) var(--smrt-control-radius-small) 0 0;
     font: var(--smrt-typography-label-large-font);
   }
 
@@ -426,6 +453,11 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 
   .tab-link:hover {
     color: var(--smrt-color-on-surface);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .tab-link:active {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
 
   .tab-link.active {
@@ -434,13 +466,13 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   }
 
   .tab-link[aria-disabled='true'] {
-    opacity: 0.38;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
   .tab-link: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: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .tab-dot {
@@ -469,11 +501,12 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     z-index: var(--smrt-z-index-dropdown, 20);
     display: grid;
     min-width: 12rem;
-    padding: var(--smrt-spacing-1, 4px);
-    border: 1px solid var(--smrt-color-outline-variant);
+    padding: var(--smrt-spacing-1);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-small, 0.5rem);
-    background: var(--smrt-color-surface);
-    box-shadow: var(--smrt-elevation-2);
+    background: var(--smrt-glass-surface-strong);
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
   }
 
   .tabs-more-menu .tab-link {
@@ -490,4 +523,5 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }
+}
 </style>

package/dist/components/permissions/PermissionPicker.svelte

@@ -130,7 +130,7 @@ function matches(permission: PermissionPickerItem, category: string): boolean {
 }
 </script>
 
-<section class="permission-picker" aria-labelledby={labelId}>
+<section class="permission-picker" aria-labelledby={labelId} data-smrt-component="PermissionPicker">
   <div class="heading">
     <div>
       <h2 id={labelId}>{label}</h2>
@@ -188,6 +188,8 @@ function matches(permission: PermissionPickerItem, category: string): boolean {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .permission-picker { display: grid; gap: var(--smrt-spacing-4); min-inline-size: 0; }
   .heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--smrt-spacing-4); }
   h2, p { margin: 0; }
@@ -199,7 +201,7 @@ function matches(permission: PermissionPickerItem, category: string): boolean {
   .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--smrt-spacing-4); align-items: start; }
   .group { min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); }
   summary { display: flex; min-block-size: 2.75rem; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-medium-font); cursor: pointer; }
-  summary:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .selected-count { flex: 0 0 auto; color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
   .choices { display: grid; gap: var(--smrt-spacing-4); padding: 0 var(--smrt-spacing-4) var(--smrt-spacing-4); border-block-start: 1px solid var(--smrt-color-outline-variant); padding-block-start: var(--smrt-spacing-4); }
   .choice { display: grid; min-inline-size: 0; gap: var(--smrt-spacing-1); }
@@ -210,4 +212,5 @@ function matches(permission: PermissionPickerItem, category: string): boolean {
   .no-results { padding: var(--smrt-spacing-4); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface-container-low); }
   .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   [hidden] { display: none; }
+}
 </style>

package/dist/components/roles/RoleBadge.svelte

@@ -31,33 +31,35 @@ const variantClass = $derived.by(() => {
 <span
   class="role-badge {variantClass}"
   class:sm={size === 'sm'}
-  class:lg={size === 'lg'}
+  class:lg={size === 'lg'} data-smrt-component="RoleBadge"
 >
   {role.name}
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .role-badge {
     display: inline-flex;
     align-items: center;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     height: 24px;
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     white-space: nowrap;
     transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
   }
 
   .role-badge.sm {
-    padding: 0 var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-2);
     height: 20px;
     font: var(--smrt-typography-label-small-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .role-badge.lg {
-    padding: 0 var(--smrt-spacing-4, 16px);
+    padding: 0 var(--smrt-spacing-4);
     height: 32px;
     font: var(--smrt-typography-title-small-font);
     font-weight: var(--smrt-typography-weight-semibold, 600);
@@ -83,4 +85,5 @@ const variantClass = $derived.by(() => {
     background-color: var(--smrt-color-surface-variant);
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/roles/RoleSelector.svelte

@@ -122,7 +122,7 @@ $effect(() => {
 });
 </script>
 
-<div class="role-selector" class:disabled bind:this={wrapEl}>
+<div class="role-selector" class:disabled bind:this={wrapEl} data-smrt-component="RoleSelector">
   <button
     bind:this={triggerEl}
     type="button"
@@ -189,6 +189,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .role-selector {
     position: relative;
     width: 100%;
@@ -205,7 +207,7 @@ $effect(() => {
     width: 100%;
     padding: 0.5rem 0.75rem;
     background: var(--smrt-color-surface, white);
-    border: 1px solid var(--smrt-color-outline, #6b7280);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-small, 0.375rem);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     cursor: pointer;
@@ -214,16 +216,16 @@ $effect(() => {
 
   .trigger:focus-visible {
     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);
   }
 
   .trigger.open {
-    border-color: var(--smrt-color-primary, #005ac1);
+    border-color: var(--smrt-color-primary);
   }
 
   .trigger:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
     cursor: not-allowed;
   }
 
@@ -234,13 +236,13 @@ $effect(() => {
   }
 
   .placeholder {
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .chevron {
     width: 1.25rem;
     height: 1.25rem;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
@@ -255,7 +257,7 @@ $effect(() => {
     right: 0;
     margin-top: 0.25rem;
     background: var(--smrt-color-surface, white);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-small, 0.375rem);
     box-shadow: var(--smrt-elevation-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
     z-index: var(--smrt-z-index-dropdown, 1000);
@@ -277,20 +279,20 @@ $effect(() => {
   }
 
   .option:hover {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    background: var(--smrt-color-surface-container-high);
   }
   /* Keyboard focus needs its own indicator: the hover background alone is a
      ~1.1:1 change against the list surface in every preset, which is invisible
      and fails WCAG 2.4.11. Inset so it is not clipped by the list's overflow
      (#2322). */
   .option:focus-visible {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
+    background: var(--smrt-color-surface-container-high);
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
 
   .option.selected {
-    background: var(--smrt-color-primary-container, #eff6ff);
+    background: var(--smrt-color-primary-container);
   }
 
   .option-content {
@@ -301,22 +303,23 @@ $effect(() => {
 
   .role-name {
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     text-transform: capitalize;
   }
 
   .system-badge {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     padding: 0.125rem 0.375rem;
-    background: var(--smrt-color-primary-container, #dbeafe);
-    color: var(--smrt-color-on-primary-container, #1e40af);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-radius: var(--smrt-radius-full);
     text-transform: uppercase;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .description {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/theme/ThemeProvider.svelte

@@ -36,11 +36,11 @@ $effect(() => {
 const cssVariables = $derived.by(() => {
   const themeVars = Object.entries(themeState.theme)
     .map(([key, value]) => {
-      // camelCase to kebab-case: onPrimary -> --md-sys-color-on-primary
+      // camelCase to kebab-case: onPrimary -> --smrt-color-on-primary
       const kebab = key
         .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
         .toLowerCase();
-      return `--md-sys-color-${kebab}: ${value};`;
+      return `--smrt-color-${kebab}: ${value};`;
     })
     .join('\n');
 
@@ -61,11 +61,14 @@ const cssVariables = $derived.by(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-theme-provider {
     display: contents;
     /* Base typography and other global resets can go here later */
-    color: var(--md-sys-color-on-background);
-    background-color: var(--md-sys-color-background);
+    color: var(--smrt-color-on-background);
+    background-color: var(--smrt-color-background);
     font-family: var(--smrt-font-family, Roboto, sans-serif);
   }
+}
 </style>

package/dist/components/ui/Accordion.svelte

@@ -42,8 +42,11 @@ function toggle(item: string) {
 setAccordionContext({ isOpen, toggle });
 </script>
 
-<div class="accordion {className}">{#if children}{@render children()}{/if}</div>
+<div class="accordion {className}" data-smrt-component="Accordion">{#if children}{@render children()}{/if}</div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .accordion { overflow: hidden; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface); }
+}
 </style>

package/dist/components/ui/AccordionItem.svelte

@@ -20,7 +20,7 @@ const context = getAccordionContext();
 const open = $derived(context.isOpen(value));
 </script>
 
-<section class="item">
+<section class="item" data-smrt-component="AccordionItem">
   <h3>
     <button id={triggerId} type="button" aria-expanded={open} aria-controls={panelId} {disabled} onclick={() => context.toggle(value)}>
       <span>{title}</span><span class="chevron" aria-hidden="true">⌄</span>
@@ -32,15 +32,18 @@ const open = $derived(context.isOpen(value));
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .item { border-bottom: 1px solid var(--smrt-color-outline-variant); }
   .item:last-child { border-bottom: 0; }
   h3 { margin: 0; }
   button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-4); border: 0; background: transparent; color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-small-font); text-align: left; cursor: pointer; }
   button:hover:not(:disabled) { background: var(--smrt-color-surface-container-low); }
-  button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; }
+  button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); }
   button:disabled { opacity: .5; cursor: not-allowed; }
   .chevron { transition: transform var(--smrt-duration-short4) var(--smrt-easing-standard); }
   button[aria-expanded='true'] .chevron { transform: rotate(180deg); }
   .panel { padding: 0 var(--smrt-spacing-4) var(--smrt-spacing-4); color: var(--smrt-color-on-surface-variant); }
   @media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }
+}
 </style>

package/dist/components/ui/Avatar.svelte

@@ -57,7 +57,7 @@ const statusLabels: Record<AvatarStatus, string> = {
 };
 </script>
 
-<span class="avatar {size} {className}" {...rest}>
+<span class="avatar {size} {className}" {...rest} data-smrt-component="Avatar">
   {#if src && !imgFailed}
     <img
       class="avatar__img"
@@ -80,13 +80,15 @@ const statusLabels: Record<AvatarStatus, string> = {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .avatar {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-medium, 500);
@@ -136,21 +138,21 @@ const statusLabels: Record<AvatarStatus, string> = {
     height: 28%;
     min-width: 8px;
     min-height: 8px;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     border: 2px solid var(--smrt-color-surface);
     box-sizing: border-box;
   }
   .avatar__status.online {
-    background: var(--smrt-color-success, #2e7d32);
+    background: var(--smrt-color-success);
   }
   .avatar__status.offline {
-    background: var(--smrt-color-outline, #79747e);
+    background: var(--smrt-color-outline);
   }
   .avatar__status.away {
-    background: var(--smrt-color-warning, #ed6c02);
+    background: var(--smrt-color-warning);
   }
   .avatar__status.busy {
-    background: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error);
   }
 
   .avatar__sr-only {
@@ -164,4 +166,5 @@ const statusLabels: Record<AvatarStatus, string> = {
     white-space: nowrap;
     border: 0;
   }
+}
 </style>

package/dist/components/ui/Badge.svelte

@@ -15,16 +15,19 @@ interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
 const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
 </script>
 
-<span class="badge {variant} {size}" {...rest}>
+<span class="badge {variant} {size}" {...rest} data-smrt-component="Badge">
   {@render children?.()}
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-weight: var(--smrt-typography-body-medium-weight);
+    font-weight: var(--smrt-control-weight);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
     white-space: nowrap;
   }
@@ -70,4 +73,5 @@ const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
   }
+}
 </style>