@happyvertical/smrt-ui 0.55.16 → 0.55.17

package/dist/components/forms/Textarea.svelte

@@ -141,10 +141,12 @@ export function getElement(): HTMLTextAreaElement | null {
 		data-smrt-form={controlInteraction?.formId}
 		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
 		data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
-	{...rest}
+	{...rest} data-smrt-component="Textarea"
 ></textarea>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 	.textarea {
 		box-sizing: border-box;
 		display: block;
@@ -152,9 +154,9 @@ export function getElement(): HTMLTextAreaElement | null {
 		padding: 0.5rem 0.75rem;
 		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
 		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
-		color: var(--smrt-color-on-surface, #1f2937);
-		background-color: var(--smrt-color-surface, #fff);
-		border: 1px solid var(--smrt-color-outline, #6b7280);
+		color: var(--smrt-color-on-surface);
+		background-color: var(--smrt-color-surface);
+		border: 1px solid var(--smrt-color-outline);
 		border-radius: 0.375rem;
 		resize: vertical;
 		min-height: 80px;
@@ -165,23 +167,23 @@ export function getElement(): HTMLTextAreaElement | null {
 
 	.textarea:focus {
 		outline: none;
-		border-color: var(--smrt-color-primary, #005ac1);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+		border-color: var(--smrt-color-primary);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
 	}
 
 	.textarea[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline: 3px solid var(--smrt-color-tertiary);
 		outline-offset: 3px;
 	}
 
 	.textarea:disabled {
-		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		background-color: var(--smrt-color-surface-container-high);
 		cursor: not-allowed;
 		opacity: 0.7;
 	}
 
 	.textarea::placeholder {
-		color: var(--smrt-color-on-surface-variant, #9ca3af);
+		color: var(--smrt-color-on-surface-variant);
 	}
 
 	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
@@ -198,7 +200,8 @@ export function getElement(): HTMLTextAreaElement | null {
 		}
 	}
 
-  .textarea[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .textarea[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .textarea[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   .textarea { min-height: max(80px, var(--smrt-control-target-min, 0px)); }
+}
 </style>

package/dist/components/forms/TimePicker.svelte

@@ -25,5 +25,10 @@ let {
 const instanceId = $props.id();
 const resolvedId = $derived(id ?? `smrt-time-${instanceId}`);
 </script>
-<label class="picker {className}" for={resolvedId}><span>{label}</span><Input id={resolvedId} {name} type="time" aria-label={label} {interaction} bind:value {...rest} /></label>
-<style>.picker { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-large-font); }</style>
+<label class="picker {className}" for={resolvedId} data-smrt-component="TimePicker"><span>{label}</span><Input id={resolvedId} {name} type="time" aria-label={label} {interaction} bind:value {...rest} /></label>
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+.picker { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-large-font); }
+}
+</style>

package/dist/components/forms/Toggle.svelte

@@ -60,7 +60,7 @@ const sizeClasses = {
 };
 </script>
 
-<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled}>
+<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled} data-smrt-component="Toggle">
   {#if label && labelPosition === 'left'}
     <span class="toggle__label toggle__label--left">{label}</span>
   {/if}
@@ -86,6 +86,8 @@ const sizeClasses = {
 </label>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toggle {
     display: inline-flex;
     align-items: center;
@@ -101,7 +103,7 @@ const sizeClasses = {
 
   .toggle__label {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     line-height: 1.5;
   }
 
@@ -126,38 +128,38 @@ const sizeClasses = {
 
   .toggle__thumb {
     position: relative;
-    background: var(--smrt-color-surface-container-highest, #e5e7eb);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-highest);
+    border-radius: var(--smrt-radius-full);
     transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .toggle__thumb::after {
     content: '';
     position: absolute;
-    background: var(--smrt-color-surface, #ffffff);
-    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-full);
     box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
     transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   /* Checked state */
   .toggle__input:checked + .toggle__thumb {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
   }
 
   /* Focus state */
   .toggle__input:focus-visible + .toggle__thumb {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
   }
 
   /* Hover state */
   .toggle:not(.toggle--disabled):hover .toggle__thumb {
-    background: var(--smrt-color-surface-container-high, #d1d5db);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb {
-    background: var(--smrt-color-primary, #2563eb);
+    background: var(--smrt-color-primary);
   }
 
   /* Size: Small */
@@ -221,4 +223,5 @@ const sizeClasses = {
       transition: none;
     }
   }
+}
 </style>

package/dist/components/forms/ToggleButton.svelte

@@ -90,11 +90,14 @@ useControlRegistration(() => {
   aria-pressed={pressed} aria-label={ariaLabel} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}
-  onclick={handleClick} {...rest}>{@render children?.()}</button>
+  onclick={handleClick} {...rest} data-smrt-component="ToggleButton">{@render children?.()}</button>
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .toggle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .toggle-button.pressed { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); border-color: var(--smrt-color-secondary); }
   .toggle-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .toggle-button:disabled { opacity: .5; cursor: not-allowed; }
   .toggle-button[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+}
 </style>

package/dist/components/layout/ActionGroup.svelte

@@ -25,11 +25,13 @@ const {
 }: Props = $props();
 </script>
 
-<div class="action-group gap-{gap} justify-{justify} {className}" {...rest}>
+<div class="action-group gap-{gap} justify-{justify} {className}" {...rest} data-smrt-component="ActionGroup">
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .action-group {
     display: flex;
     flex-wrap: wrap;
@@ -52,4 +54,5 @@ const {
   .justify-end {
     justify-content: flex-end;
   }
+}
 </style>

package/dist/components/layout/Container.svelte

@@ -14,11 +14,13 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 const { maxWidth = 'lg', children, ...rest }: Props = $props();
 </script>
 
-<div class="container max-w-{maxWidth}" {...rest}>
+<div class="container max-w-{maxWidth}" {...rest} data-smrt-component="Container">
   {@render children?.()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .container {
     box-sizing: border-box;
     width: 100%;
@@ -53,4 +55,5 @@ const { maxWidth = 'lg', children, ...rest }: Props = $props();
       padding-right: var(--smrt-spacing-6);
     }
   }
+}
 </style>

package/dist/components/layout/EmptyState.svelte

@@ -61,7 +61,7 @@ const icons = {
 };
 </script>
 
-<div class="empty-state" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+<div class="empty-state" class:sm={size === 'sm'} class:lg={size === 'lg'} data-smrt-component="EmptyState">
   <div class="icon-container">
     {#if typeof icon === 'string'}
       {@html icons[icon] ?? icons.inbox}
@@ -90,6 +90,8 @@ const icons = {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .empty-state {
     display: flex;
     flex-direction: column;
@@ -117,15 +119,15 @@ const icons = {
     background-color: var(--smrt-color-secondary-container);
     color: var(--smrt-color-on-secondary-container);
     border-radius: var(--smrt-radius-3xl, 32px); /* M3 extra large shape */
-    padding: var(--smrt-spacing-6, 24px);
+    padding: var(--smrt-spacing-6);
   }
 
   .sm .icon-container {
     width: 64px;
     height: 64px;
     margin-bottom: 1.5rem;
-    border-radius: var(--smrt-radius-xl, 16px);
-    padding: var(--smrt-spacing-4, 16px);
+    border-radius: var(--smrt-radius-xl);
+    padding: var(--smrt-spacing-4);
   }
 
   .lg .icon-container {
@@ -133,7 +135,7 @@ const icons = {
     height: 120px;
     margin-bottom: 2.5rem;
     border-radius: var(--smrt-radius-3xl, 32px);
-    padding: var(--smrt-spacing-8, 32px);
+    padding: var(--smrt-spacing-8);
   }
 
   .empty-title {
@@ -163,15 +165,15 @@ const icons = {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: 0 var(--smrt-spacing-6, 24px);
+    gap: var(--smrt-spacing-2);
+    padding: 0 var(--smrt-spacing-6);
     height: 40px;
     font: var(--smrt-typography-label-large-font);
     font-weight: var(--smrt-typography-weight-medium, 500);
     color: var(--smrt-color-on-primary);
     background-color: var(--smrt-color-primary);
     border: none;
-    border-radius: var(--smrt-radius-2xl, 24px);
+    border-radius: var(--smrt-radius-2xl);
     text-decoration: none;
     cursor: pointer;
     transition: box-shadow 200ms, background-color 200ms;
@@ -184,4 +186,5 @@ const icons = {
     background-color: var(--smrt-color-primary);
     box-shadow: var(--smrt-elevation-2);
   }
+}
 </style>

package/dist/components/layout/Footer.svelte

@@ -16,7 +16,7 @@ const { children }: Props = $props();
 const currentYear = new Date().getFullYear();
 </script>
 
-<footer class="site-footer">
+<footer class="site-footer" data-smrt-component="Footer">
   <Container>
     <div class="footer-content">
       <p class="copyright">&copy; {currentYear} {t(M['ui.footer.all_rights_reserved'])}</p>
@@ -31,6 +31,8 @@ const currentYear = new Date().getFullYear();
 </footer>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .site-footer {
     background: var(--smrt-color-surface-container-low);
     border-top: 1px solid var(--smrt-color-outline-variant);
@@ -61,4 +63,5 @@ const currentYear = new Date().getFullYear();
   .footer-links :global(a:hover) {
     text-decoration: underline;
   }
+}
 </style>

package/dist/components/layout/Grid.svelte

@@ -84,10 +84,10 @@ const responsiveStyles = $derived.by(() => {
   if (!isResponsive) return '';
   const cols = columns as ResponsiveColumns;
   const vars: string[] = [];
-  if (cols.sm !== undefined) vars.push(`--grid-columns-sm: ${cols.sm}`);
-  if (cols.md !== undefined) vars.push(`--grid-columns-md: ${cols.md}`);
-  if (cols.lg !== undefined) vars.push(`--grid-columns-lg: ${cols.lg}`);
-  if (cols.xl !== undefined) vars.push(`--grid-columns-xl: ${cols.xl}`);
+  if (cols.sm !== undefined) vars.push(`--smrt-grid-columns-sm: ${cols.sm}`);
+  if (cols.md !== undefined) vars.push(`--smrt-grid-columns-md: ${cols.md}`);
+  if (cols.lg !== undefined) vars.push(`--smrt-grid-columns-lg: ${cols.lg}`);
+  if (cols.xl !== undefined) vars.push(`--smrt-grid-columns-xl: ${cols.xl}`);
   return vars.join('; ');
 });
 
@@ -143,19 +143,21 @@ const gridClasses = $derived.by(() => {
 </script>
 
 {#if header}
-  <div class="grid-header">
+  <div class="grid-header" data-smrt-component="Grid">
     {@render header()}
   </div>
 {/if}
 <div
   class={gridClasses}
   style={inlineStyles}
-  {...rest}
+  {...rest} data-smrt-component="Grid"
 >
   {@render children?.()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .grid {
     display: grid;
     min-width: 0;
@@ -168,24 +170,24 @@ const gridClasses = $derived.by(() => {
 
   /* Responsive grid - uses CSS variables set via inline styles */
   .grid-responsive {
-    grid-template-columns: repeat(var(--grid-columns-sm, 1), 1fr);
+    grid-template-columns: repeat(var(--smrt-grid-columns-sm, 1), 1fr);
   }
 
   @media (min-width: 640px) {
     .grid-responsive {
-      grid-template-columns: repeat(var(--grid-columns-md, var(--grid-columns-sm, 2)), 1fr);
+      grid-template-columns: repeat(var(--smrt-grid-columns-md, var(--smrt-grid-columns-sm, 2)), 1fr);
     }
   }
 
   @media (min-width: 1024px) {
     .grid-responsive {
-      grid-template-columns: repeat(var(--grid-columns-lg, var(--grid-columns-md, var(--grid-columns-sm, 3))), 1fr);
+      grid-template-columns: repeat(var(--smrt-grid-columns-lg, var(--smrt-grid-columns-md, var(--smrt-grid-columns-sm, 3))), 1fr);
     }
   }
 
   @media (min-width: 1280px) {
     .grid-responsive {
-      grid-template-columns: repeat(var(--grid-columns-xl, var(--grid-columns-lg, var(--grid-columns-md, var(--grid-columns-sm, 4)))), 1fr);
+      grid-template-columns: repeat(var(--smrt-grid-columns-xl, var(--smrt-grid-columns-lg, var(--smrt-grid-columns-md, var(--smrt-grid-columns-sm, 4)))), 1fr);
     }
   }
 
@@ -239,4 +241,5 @@ const gridClasses = $derived.by(() => {
   .col-gap-xl {
     column-gap: var(--smrt-spacing-12);
   }
+}
 </style>

package/dist/components/layout/Header.svelte

@@ -12,7 +12,7 @@ export interface Props {
 const { logo, nav }: Props = $props();
 </script>
 
-<header class="site-header">
+<header class="site-header" data-smrt-component="Header">
   <Container>
     <div class="header-content">
       {#if logo}
@@ -31,6 +31,8 @@ const { logo, nav }: Props = $props();
 </header>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .site-header {
     background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary);
@@ -85,4 +87,5 @@ const { logo, nav }: Props = $props();
       font-size: var(--smrt-typography-headline-medium-size);
     }
   }
+}
 </style>

package/dist/components/layout/Masthead.svelte

@@ -36,7 +36,7 @@ const {
 }: Props = $props();
 </script>
 
-<div class="masthead">
+<div class="masthead" data-smrt-component="Masthead">
   <Container>
     <!-- Desktop layout -->
     <div class="subheader desktop">
@@ -87,6 +87,8 @@ const {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .masthead {
     border-bottom: 1px solid var(--smrt-color-outline-variant);
     background: var(--smrt-color-surface);
@@ -222,4 +224,5 @@ const {
       justify-self: unset;
     }
   }
+}
 </style>

package/dist/components/layout/PageHeader.svelte

@@ -91,7 +91,7 @@ const trail = $derived<readonly PageHeaderCrumb[]>(
 $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
 </script>
 
-<header class="page-header" data-page-header>
+<header class="page-header" data-page-header data-smrt-component="PageHeader">
   {#if trail.length > 0}
     <nav class="page-crumbs" aria-label={crumbsLabel} data-shell-breadcrumbs>
       <ol>
@@ -140,12 +140,14 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
 </header>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .page-header {
     margin-bottom: 1.5rem;
   }
 
   .page-crumbs {
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    margin-bottom: var(--smrt-spacing-1);
     color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-body-small-font);
     font-size: 0.84rem;
@@ -187,7 +189,7 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
   .page-crumbs a:focus-visible {
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 2px;
-    border-radius: var(--smrt-radius-sm, 4px);
+    border-radius: var(--smrt-radius-sm);
   }
 
   .header-main {
@@ -201,7 +203,7 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
   .header-content {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     flex: 1;
     min-width: min(100%, 200px);
   }
@@ -209,13 +211,13 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
   .back-link {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     color: var(--smrt-color-primary);
     font: var(--smrt-typography-label-large-font);
     text-decoration: none;
     margin-bottom: 0.75rem;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-md, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2) var(--smrt-spacing-1) var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-md);
     margin-left: -4px; /* Align icon with text below */
     transition: background-color 200ms;
   }
@@ -262,4 +264,5 @@ $effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
   .header-extra {
     margin-top: 1rem;
   }
+}
 </style>

package/dist/components/layout/PageLayout.svelte

@@ -33,6 +33,8 @@ const {
 </Container>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .page-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -58,4 +60,5 @@ const {
       padding-block: var(--smrt-spacing-6) var(--smrt-spacing-10);
     }
   }
+}
 </style>

package/dist/components/layout/SummaryCard.svelte

@@ -76,7 +76,7 @@ const valueColorClass = $derived.by(() => {
     class:highlight 
     class:clickable={true}
     {href}
-    use:ripple
+    use:ripple data-smrt-component="SummaryCard"
   >
     {@render cardIcon()}
     <div class="card-content">
@@ -93,7 +93,7 @@ const valueColorClass = $derived.by(() => {
     </div>
   </a>
 {:else}
-  <div class="summary-card" class:highlight>
+  <div class="summary-card" class:highlight data-smrt-component="SummaryCard">
     {@render cardIcon()}
     <div class="card-content">
       <span class="card-label">
@@ -108,13 +108,15 @@ const valueColorClass = $derived.by(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .summary-card {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1rem 1.25rem;
     background-color: var(--smrt-color-surface-container-low);
-    border-radius: var(--smrt-radius-lg, 12px);
+    border-radius: var(--smrt-radius-lg);
     text-decoration: none;
     color: var(--smrt-color-on-surface);
     transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
@@ -140,7 +142,7 @@ const valueColorClass = $derived.by(() => {
     width: 3rem;
     height: 3rem;
     background-color: var(--smrt-color-surface-container-high);
-    border-radius: var(--smrt-radius-lg, 12px);
+    border-radius: var(--smrt-radius-lg);
     color: var(--smrt-color-primary);
     flex-shrink: 0;
   }
@@ -154,7 +156,7 @@ const valueColorClass = $derived.by(() => {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .card-label {
@@ -180,7 +182,7 @@ const valueColorClass = $derived.by(() => {
     font: var(--smrt-typography-label-small-font);
     background-color: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .card-value {
@@ -202,4 +204,5 @@ const valueColorClass = $derived.by(() => {
     opacity: 1;
     color: var(--smrt-color-primary);
   }
+}
 </style>

package/dist/components/memberships/MembershipCard.svelte

@@ -43,7 +43,7 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 </script>
 
-<div class="membership-card">
+<div class="membership-card" data-smrt-component="MembershipCard">
   <div class="main">
     <div class="tenant-info">
       <span class="tenant-name">{tenant.name}</span>
@@ -72,6 +72,8 @@ function formatDate(date: Date | string | null | undefined): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .membership-card {
     padding: 1rem;
     background: var(--smrt-color-surface);
@@ -100,7 +102,7 @@ function formatDate(date: Date | string | null | undefined): string {
   .status {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     padding: 0.125rem 0.375rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     text-transform: uppercase;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
@@ -165,4 +167,5 @@ function formatDate(date: Date | string | null | undefined): string {
   .action-btn.danger:hover {
     background: var(--smrt-color-error-container);
   }
+}
 </style>

package/dist/components/memberships/MembershipList.svelte

@@ -37,7 +37,7 @@ const {
 }: Props = $props();
 </script>
 
-<div class="membership-list">
+<div class="membership-list" data-smrt-component="MembershipList">
   {#if loading}
     <div class="loading">
       <div class="spinner"></div>
@@ -63,6 +63,8 @@ const {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .membership-list {
     display: flex;
     flex-direction: column;
@@ -83,7 +85,7 @@ const {
     height: 1.25rem;
     border: 2px solid var(--smrt-color-outline-variant);
     border-top-color: var(--smrt-color-primary);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.6s linear infinite;
   }
 
@@ -101,4 +103,5 @@ const {
     border: 1px dashed var(--smrt-color-outline);
     border-radius: 0.5rem;
   }
+}
 </style>