@happyvertical/smrt-ui 0.55.15 → 0.55.17

package/dist/components/nav/FilterChips.svelte

@@ -57,7 +57,7 @@ function handleClick(value: string) {
 }
 </script>
 
-<div data-density={density} class="filter-chips" class:sm={size === 'sm'} role="radiogroup">
+<div data-density={density} class="filter-chips" class:sm={size === 'sm'} role="radiogroup" data-smrt-component="FilterChips">
   {#each allOptions as option (option.value)}
     {@const isActive = option.value === selected}
     <button
@@ -84,24 +84,26 @@ function handleClick(value: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .filter-chips {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     flex-wrap: wrap;
   }
 
   .filter-chip {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     height: 32px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    padding: 0 var(--smrt-spacing-4);
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
     color: var(--smrt-color-on-surface-variant);
     background-color: transparent;
     border: 1px solid var(--smrt-color-outline);
-    border-radius: var(--smrt-radius-md, 8px);
+    border-radius: var(--smrt-radius-md);
     cursor: pointer;
     transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
     white-space: nowrap;
@@ -111,9 +113,9 @@ function handleClick(value: string) {
 
   .sm .filter-chip {
     height: 28px;
-    padding: 0 var(--smrt-spacing-3, 12px);
+    padding: 0 var(--smrt-spacing-3);
     font: var(--smrt-typography-label-medium-font);
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .filter-chip:hover:not(:disabled) {
@@ -124,11 +126,11 @@ function handleClick(value: string) {
     background-color: var(--smrt-color-secondary-container);
     border-color: transparent;
     color: var(--smrt-color-on-secondary-container);
-    padding-left: var(--smrt-spacing-3, 12px);
+    padding-left: var(--smrt-spacing-3);
   }
 
   .sm .filter-chip.active {
-    padding-left: var(--smrt-spacing-2, 8px);
+    padding-left: var(--smrt-spacing-2);
   }
 
   .filter-chip:disabled {
@@ -153,7 +155,8 @@ function handleClick(value: string) {
     color: var(--smrt-color-on-secondary-container);
   }
 
-  .filter-chips[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .filter-chips[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .filter-chips[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .filter-chip { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+}
 </style>

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;
@@ -287,7 +290,7 @@ 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);
@@ -333,7 +336,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   .tab-content-wrapper {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     height: 100%;
   }
 
@@ -347,7 +350,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;
@@ -383,7 +386,7 @@ 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);
   }
@@ -392,7 +395,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     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,9 +404,9 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     min-height: 44px;
-    padding: 0 var(--smrt-spacing-4, 16px);
+    padding: 0 var(--smrt-spacing-4);
     margin-bottom: -1px;
     border-bottom: 2px solid transparent;
     color: var(--smrt-color-on-surface-variant);
@@ -469,7 +472,7 @@ 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);
+    padding: var(--smrt-spacing-1);
     border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-small, 0.5rem);
     background: var(--smrt-color-surface);
@@ -490,4 +493,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; }
@@ -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);
+    background: var(--smrt-color-surface-container-high);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
   .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,6 +32,8 @@ 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; }
@@ -43,4 +45,5 @@ const open = $derived(context.isOpen(value));
   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,11 +15,13 @@ 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;
@@ -70,4 +72,5 @@ const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
   }
+}
 </style>

package/dist/components/ui/Button.svelte

@@ -129,12 +129,12 @@ function handleClick(event: MouseEvent) {
     aria-disabled={isDisabled}
     aria-busy={loading}
     onclick={handleClick as HTMLAnchorAttributes['onclick']}
-    {...linkProps()}
+    {...linkProps()} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true"></span>
+      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading>
+    <span class="content" class:loading data-smrt-part="label">
       {@render children?.()}
     </span>
   </a>
@@ -147,18 +147,20 @@ function handleClick(event: MouseEvent) {
     class:full-width={fullWidth}
     class:loading
     onclick={handleClick}
-    {...rest}
+    {...rest} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true"></span>
+      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading>
+    <span class="content" class:loading data-smrt-part="label">
       {@render children?.()}
     </span>
   </button>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .button {
     display: inline-flex;
     align-items: center;
@@ -255,7 +257,7 @@ function handleClick(event: MouseEvent) {
     height: 1em;
     border: 2px solid currentColor;
     border-right-color: transparent;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.75s linear infinite;
   }
 
@@ -312,7 +314,8 @@ function handleClick(event: MouseEvent) {
     }
   }
 
-  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .button[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+}
 </style>