@happyvertical/smrt-ui 0.55.16 → 0.55.18

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;
@@ -185,9 +187,9 @@ $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);
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+    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>

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>