@happyvertical/smrt-svelte 0.55.16 → 0.55.17

package/dist/components/workspace/WorkspaceShell.svelte

@@ -433,6 +433,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-workspace-shell {
     --smrt-ws-sidebar-width: 280px;
     --smrt-ws-sidebar-collapsed-width: 96px;
@@ -446,8 +448,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     grid-template-columns: var(--smrt-ws-sidebar-width) 1fr;
     min-height: 100vh;
     min-height: 100dvh;
-    background: var(--smrt-color-surface-container-low, #f8fafc);
-    color: var(--smrt-color-on-surface, #1f2937);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
     isolation: isolate;
   }
 
@@ -479,8 +481,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     height: 100vh;
     height: 100dvh;
     box-sizing: border-box;
-    background: var(--smrt-color-surface, #ffffff);
-    border-right: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-right: 1px solid var(--smrt-color-outline-variant);
     min-width: 0;
     overflow: hidden;
     overscroll-behavior: contain;
@@ -505,13 +507,13 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     margin: 0;
     font-size: var(--smrt-typography-title-large-size, 1.25rem);
     line-height: var(--smrt-typography-title-large-line-height, 1.1);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .brand .subtitle {
     margin: 0;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     line-height: var(--smrt-typography-body-medium-line-height, 1.4);
     font-size: var(--smrt-typography-body-medium-size, 0.9rem);
   }
@@ -521,7 +523,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     font-weight: var(--smrt-typography-weight-bold, 700);
     letter-spacing: var(--smrt-typography-label-small-tracking, 0.12em);
     text-transform: uppercase;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   /* These shell-chrome controls now render through smrt-ui <Button>; pierce
@@ -529,9 +531,9 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
      :global(.class)` (#1589). Button owns focus-visible, so those rules are
      dropped. The responsive `display` toggles below are preserved. */
   .smrt-workspace-shell :global(.shell-toggle) {
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #111827);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
     border-radius: var(--smrt-radius-medium, 0.65rem);
     width: 2rem;
     height: 2rem;
@@ -545,7 +547,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   }
 
   .smrt-workspace-shell :global(.shell-toggle):hover {
-    background: var(--smrt-color-surface-container-high, #e5e7eb);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .shell-toggle-glyph {
@@ -570,8 +572,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     display: grid;
     gap: 0.75rem;
     padding-top: 0.75rem;
-    background: var(--smrt-color-surface, #ffffff);
-    border-top: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-top: 1px solid var(--smrt-color-outline-variant);
     z-index: 1;
   }
 
@@ -594,8 +596,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     gap: 0.85rem;
     padding: 0.75rem var(--smrt-ws-page-pad);
     min-height: var(--smrt-ws-topbar-height);
-    background: var(--smrt-color-surface, #ffffff);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     box-shadow: var(--smrt-elevation-1, 0 1px 2px rgb(0 0 0 / 0.05));
   }
 
@@ -626,7 +628,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   }
 
   .topbar-eyebrow {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .mode-title,
@@ -637,11 +639,11 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   .mode-title {
     font-size: var(--smrt-typography-title-small-size, 0.9rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
   }
 
   .mode-detail {
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     max-width: 18rem;
     text-align: right;
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
@@ -652,10 +654,10 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     align-items: center;
     gap: 0.4rem;
     padding: 0.25rem 0.65rem;
-    border-radius: var(--smrt-radius-full, 999px);
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #111827);
+    border-radius: var(--smrt-radius-full);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
     font-size: var(--smrt-typography-label-medium-size, 0.78rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     line-height: 1;
@@ -665,29 +667,29 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   .mode-dot {
     width: 0.55rem;
     height: 0.55rem;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-on-surface-variant, #9ca3af);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-on-surface-variant);
     flex-shrink: 0;
   }
 
   .mode-badge[data-status='active'] .mode-dot {
-    background: var(--smrt-color-success, #16a34a);
+    background: var(--smrt-color-success);
   }
   .mode-badge[data-status='offline'] .mode-dot {
-    background: var(--smrt-color-on-surface-variant, #9ca3af);
+    background: var(--smrt-color-on-surface-variant);
   }
   .mode-badge[data-status='local-only'] .mode-dot {
-    background: var(--smrt-color-primary, #2563eb);
+    background: var(--smrt-color-primary);
   }
   .mode-badge[data-status='attention'] .mode-dot {
-    background: var(--smrt-color-warning, #f59e0b);
+    background: var(--smrt-color-warning);
   }
 
   .smrt-workspace-shell :global(.mobile-menu) {
     display: none;
-    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface, #111827);
+    border: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
     border-radius: var(--smrt-radius-medium, 0.65rem);
     width: 2.35rem;
     height: 2.35rem;
@@ -718,8 +720,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     width: var(--smrt-ws-inspector-width);
     display: flex;
     flex-direction: column;
-    background: var(--smrt-color-surface, #ffffff);
-    border-left: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-left: 1px solid var(--smrt-color-outline-variant);
     box-shadow: var(--smrt-elevation-2, 0 4px 6px -1px rgb(0 0 0 / 0.1));
     z-index: 22;
   }
@@ -729,19 +731,19 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     align-items: center;
     justify-content: space-between;
     padding: 0.85rem 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .inspector-title {
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #111827);
+    color: var(--smrt-color-on-surface);
     font-size: var(--smrt-typography-title-medium-size, 0.95rem);
   }
 
   .smrt-workspace-shell :global(.inspector-close) {
     border: 1px solid transparent;
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     width: 2rem;
     height: 2rem;
@@ -756,8 +758,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   }
 
   .smrt-workspace-shell :global(.inspector-close):hover {
-    background: var(--smrt-color-surface-container-high, #e5e7eb);
-    color: var(--smrt-color-on-surface, #111827);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
   }
 
   .inspector-body {
@@ -778,8 +780,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     align-items: center;
     gap: 0.4rem;
     padding: 0.75rem 0.25rem;
-    background: var(--smrt-color-surface, #ffffff);
-    border-left: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    background: var(--smrt-color-surface);
+    border-left: 1px solid var(--smrt-color-outline-variant);
     z-index: 18;
   }
 
@@ -941,4 +943,5 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
       text-align: left;
     }
   }
+}
 </style>

package/dist/components/workspace/admin-shell/ActivityItem.svelte

@@ -13,7 +13,7 @@ let { activity }: Props = $props();
 const { t } = useI18n();
 </script>
 
-<article class="smrt-activity-item" data-status={activity.status}>
+<article class="smrt-activity-item" data-status={activity.status} data-smrt-component="ActivityItem">
   <div class="smrt-activity-item__main">
     <strong>{activity.label}</strong>
     <span>{activity.status}</span>
@@ -41,6 +41,8 @@ const { t } = useI18n();
 </article>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-activity-item {
     display: flex;
     align-items: flex-start;
@@ -83,4 +85,5 @@ const { t } = useI18n();
     gap: var(--smrt-spacing-2);
     justify-content: flex-end;
   }
+}
 </style>

package/dist/components/workspace/admin-shell/ActivityList.svelte

@@ -21,18 +21,20 @@ const activities = $derived(shell.listActivities(filter));
 </script>
 
 {#if activities.length > 0}
-  <div class="smrt-activity-list">
+  <div class="smrt-activity-list" data-smrt-component="ActivityList">
     {#each activities as activity (activity.id)}
       <ActivityItem {activity} />
     {/each}
   </div>
 {:else if !hideWhenEmpty}
-  <p class="smrt-activity-list__empty">
+  <p class="smrt-activity-list__empty" data-smrt-component="ActivityList">
     {emptyLabel ?? t(M['ui.activity_list.empty'])}
   </p>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-activity-list {
     display: grid;
   }
@@ -41,4 +43,5 @@ const activities = $derived(shell.listActivities(filter));
     margin: 0;
     color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/components/workspace/admin-shell/ActivityTicker.svelte

@@ -41,8 +41,8 @@ function activityLabel(activity: ShellActivity): string {
 }
 </script>
 
-<div class="smrt-activity-ticker-shell">
-<div class="smrt-activity-ticker" class:multiple class:paused role="region" aria-label={label ?? t(M['ui.activity_ticker.label'])} style:--activity-ticker-duration={`${Math.max(20, running.length * 10)}s`}>
+<div class="smrt-activity-ticker-shell" data-smrt-component="ActivityTicker">
+<div class="smrt-activity-ticker" class:multiple class:paused role="region" aria-label={label ?? t(M['ui.activity_ticker.label'])} style:--smrt-activity-ticker-duration={`${Math.max(20, running.length * 10)}s`}>
   {#if running.length === 0}
     <span class="smrt-activity-ticker__empty">{emptyLabel ?? t(M['ui.activity_ticker.empty'])}</span>
   {:else}
@@ -73,12 +73,14 @@ function activityLabel(activity: ShellActivity): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
 .smrt-activity-ticker-shell { display:flex; align-items:center; flex:1; min-width:0; gap:var(--smrt-spacing-2); }
 .smrt-activity-ticker { flex:1; min-width:0; overflow:hidden; color:var(--smrt-color-on-surface-variant); font-size:var(--smrt-typography-body-small-size); white-space:nowrap; }
 .smrt-activity-ticker__track { display:flex; width:max-content; }
 .smrt-activity-ticker__group { display:flex; gap:var(--smrt-spacing-6); flex-shrink:0; }
 .multiple .smrt-activity-ticker__group { padding-inline-end:var(--smrt-spacing-6); }
-.multiple .smrt-activity-ticker__track { animation:smrt-activity-scroll var(--activity-ticker-duration) linear infinite; }
+.multiple .smrt-activity-ticker__track { animation:smrt-activity-scroll var(--smrt-activity-ticker-duration) linear infinite; }
 .smrt-activity-ticker.paused .smrt-activity-ticker__track,
 .smrt-activity-ticker:hover .smrt-activity-ticker__track,
 .smrt-activity-ticker-shell:focus-within .smrt-activity-ticker__track { animation-play-state:paused; }
@@ -89,4 +91,5 @@ function activityLabel(activity: ShellActivity): string {
   .multiple .smrt-activity-ticker__track { animation:none; }
   .smrt-activity-ticker__copy, .smrt-activity-ticker__control { display:none; }
 }
+}
 </style>

package/dist/components/workspace/admin-shell/ActivityToasts.svelte

@@ -60,7 +60,7 @@ onDestroy(() => {
 </script>
 
 {#if toasts.length > 0}
-  <div class="smrt-activity-toasts" aria-live="polite">
+  <div class="smrt-activity-toasts" aria-live="polite" data-smrt-component="ActivityToasts">
     {#each toasts as toast (toast.id)}
       <article class="smrt-activity-toast" data-status={toast.activity.status}>
         <div>
@@ -81,6 +81,8 @@ onDestroy(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-activity-toasts {
     position: fixed;
     inset-block-start: var(--smrt-spacing-4);
@@ -138,4 +140,5 @@ onDestroy(() => {
       transform: translateY(0);
     }
   }
+}
 </style>