@happyvertical/smrt-svelte 0.55.16 → 0.55.18

package/dist/components/overview/widgets/ShortcutsWidget.svelte

@@ -49,16 +49,18 @@ const cards = $derived.by((): Card[] => {
 </script>
 
 {#if cards.length === 0}
-  <p class="smrt-shortcuts__empty">{t(M['ui.overview.shortcuts.empty'])}</p>
+  <p class="smrt-shortcuts__empty" data-smrt-component="ShortcutsWidget">{t(M['ui.overview.shortcuts.empty'])}</p>
 {:else}
-  <ul class="smrt-shortcuts">
+  <ul class="smrt-shortcuts" data-smrt-component="ShortcutsWidget">
     {#each cards as card (card.id)}
       <li class="smrt-shortcuts__card">
         <a class="smrt-shortcuts__link" href={card.href}>
-          <span class="smrt-shortcuts__icon">
-            <ShellSectionIcon name={card.icon} size={28} {iconComponent} />
+          <span class="smrt-shortcuts__heading">
+            <span class="smrt-shortcuts__icon">
+              <ShellSectionIcon name={card.icon} size={28} {iconComponent} />
+            </span>
+            <span class="smrt-shortcuts__title">{card.label}</span>
           </span>
-          <span class="smrt-shortcuts__title">{card.label}</span>
           {#if card.description}<span class="smrt-shortcuts__desc">{card.description}</span>{/if}
         </a>
       </li>
@@ -67,14 +69,18 @@ const cards = $derived.by((): Card[] => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: var(--smrt-spacing-3); margin: 0; padding: 0; list-style: none; }
   .smrt-shortcuts__card { position: relative; display: flex; min-inline-size: 0; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-color-surface); transition: background-color 120ms, border-color 120ms; }
   .smrt-shortcuts__card:hover { background: var(--smrt-color-surface-container-high); border-color: var(--smrt-color-outline); }
   .smrt-shortcuts__link { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); color: var(--smrt-color-on-surface); text-decoration: none; }
   .smrt-shortcuts__link:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; border-radius: inherit; }
-  .smrt-shortcuts__icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
+  .smrt-shortcuts__heading { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-inline-size: 0; }
+  .smrt-shortcuts__icon { display: inline-grid; place-items: center; flex: 0 0 28px; inline-size: 28px; block-size: 28px; color: var(--smrt-color-primary); }
   .smrt-shortcuts__icon :global(.smrt-shell-section-icon) { inline-size: 28px; block-size: 28px; }
   .smrt-shortcuts__title { font-weight: var(--smrt-typography-weight-medium, 500); overflow-wrap: anywhere; }
   .smrt-shortcuts__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-shortcuts__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

package/dist/components/overview/widgets/ShortcutsWidget.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ShortcutsWidget.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAqE/D,QAAA,MAAM,eAAe,+EAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShortcutsWidget.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/overview/widgets/ShortcutsWidget.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAY,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAuE/D,QAAA,MAAM,eAAe,+EAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/screens/DetailScreen.svelte

@@ -152,7 +152,7 @@ async function confirmDelete(): Promise<void> {
   </PageHeader>
 {/if}
 
-<article class="smrt-detail-screen" aria-label={heading}>
+<article class="smrt-detail-screen" aria-label={heading} data-smrt-component="DetailScreen">
   {#if sourceError}
     <Alert variant="error">{sourceError}</Alert>
   {:else}
@@ -186,6 +186,8 @@ async function confirmDelete(): Promise<void> {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-detail-screen {
     display: flex;
     flex-direction: column;
@@ -202,7 +204,7 @@ async function confirmDelete(): Promise<void> {
     margin: 0;
   }
   .smrt-detail-screen__field dt {
-    color: var(--smrt-color-on-surface-variant, #5f6368);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
   }
   .smrt-detail-screen__field dd {
@@ -210,11 +212,12 @@ async function confirmDelete(): Promise<void> {
     overflow-wrap: anywhere;
   }
   .smrt-detail-screen__empty {
-    color: var(--smrt-color-on-surface-variant, #5f6368);
+    color: var(--smrt-color-on-surface-variant);
   }
   .smrt-detail-screen__block {
     margin: 0;
     white-space: pre-wrap;
     font-family: inherit;
   }
+}
 </style>

package/dist/components/screens/EditForm.svelte

@@ -252,7 +252,7 @@ const formError = $derived(
   <PageHeader title={heading} />
 {/if}
 
-<section class="smrt-edit-form" aria-label={heading}>
+<section class="smrt-edit-form" aria-label={heading} data-smrt-component="EditForm">
   {#if sourceError}
     <Alert variant="error">{sourceError}</Alert>
   {:else}
@@ -284,6 +284,8 @@ const formError = $derived(
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-edit-form {
     max-width: 40rem;
   }
@@ -305,9 +307,10 @@ const formError = $derived(
     gap: var(--smrt-spacing-xs, 0.25rem);
   }
   .smrt-edit-form__hint {
-    color: var(--smrt-color-on-surface-variant, #5f6368);
+    color: var(--smrt-color-on-surface-variant);
   }
   .smrt-edit-form__error {
-    color: var(--smrt-color-error, #b42318);
+    color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/components/screens/ListScreen.svelte

@@ -132,7 +132,7 @@ function matches(row: DisplayRow): boolean {
   </PageHeader>
 {/if}
 
-<section class="smrt-list-screen" aria-label={heading}>
+<section class="smrt-list-screen" aria-label={heading} data-smrt-component="ListScreen">
   {#if sourceError}
     <Alert variant="error">{sourceError}</Alert>
   {:else}
@@ -180,6 +180,8 @@ function matches(row: DisplayRow): boolean {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-list-screen {
     display: flex;
     flex-direction: column;
@@ -188,4 +190,5 @@ function matches(row: DisplayRow): boolean {
   .smrt-list-screen__search {
     max-width: 24rem;
   }
+}
 </style>

package/dist/components/screens/RecipeScreens.svelte

@@ -169,7 +169,7 @@ async function remove(): Promise<void> {
 }
 </script>
 
-<div class="smrt-recipe-screens">
+<div class="smrt-recipe-screens" data-smrt-component="RecipeScreens">
   {#if view === 'create' && allowCreate}
           <EditForm
         {definition}

package/dist/components/settings/SettingsCatalog.svelte

@@ -56,7 +56,7 @@ function catalogHref(targetPage: number, selectedId?: string): string {
 }
 </script>
 
-<section class="smrt-settings-catalog">
+<section class="smrt-settings-catalog" data-smrt-component="SettingsCatalog">
   <aside class="smrt-settings-catalog__browser">
     <Form method="GET" action={baseUrl} preventDefault={false} class="smrt-settings-catalog__search" role="search">
       {#each Object.entries(preservedParams) as [name, value] (name)}
@@ -149,6 +149,8 @@ function catalogHref(targetPage: number, selectedId?: string): string {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-settings-catalog {
     display: grid;
     grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
@@ -289,4 +291,5 @@ function catalogHref(targetPage: number, selectedId?: string): string {
       max-block-size: 18rem;
     }
   }
+}
 </style>

package/dist/components/sortable/Sortable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="Item extends SortableItem, Container extends SortableContainer">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n/strings.sortable.js';
+import { flipRow } from '../workspace/admin-shell/motion.js';
 import { formatSortableAnnouncement } from './announce.js';
 import {
   createSortable,
@@ -163,12 +164,10 @@ function containerRank(id: string): number {
     aria-label={t(M['ui.sortable.group'], { label: container.label, count })}
   >
     {#each list as entry, index (entry.id)}
-      {#if markerBefore(container.id, nonDraggedRank(list, index)) && entry.id !== dragged}
-        <div class="smrt-sortable__marker" aria-hidden="true"></div>
-      {/if}
       <div
         role="listitem"
         class="smrt-sortable__item"
+        animate:flipRow
         class:smrt-sortable__item--dragging={dragged === entry.id}
         data-smrt-sortable-item-id={entry.id}
         ondragover={(event) => event.preventDefault()}
@@ -178,6 +177,9 @@ function containerRank(id: string): number {
           itemSortable.dropOnItem(event, container.id, index);
         }}
       >
+        {#if markerBefore(container.id, nonDraggedRank(list, index)) && entry.id !== dragged}
+          <div class="smrt-sortable__marker smrt-sortable__marker--before" aria-hidden="true"></div>
+        {/if}
         <!-- raw-primitive-allow: native button owns keyboard pickup and HTML drag/drop -->
         <button
           type="button"
@@ -278,7 +280,7 @@ function containerRank(id: string): number {
   bind:this={root}
   class="smrt-sortable"
   role="group"
-  aria-label={label ?? t(M['ui.sortable.label'])}
+  aria-label={label ?? t(M['ui.sortable.label'])} data-smrt-component="Sortable"
 >
   {#each fixed as container (container.id)}
     {@render containerBlock(container, false)}
@@ -311,6 +313,8 @@ function containerRank(id: string): number {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-sortable { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
   .smrt-sortable__containers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; }
   .smrt-sortable__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
@@ -319,7 +323,7 @@ function containerRank(id: string): number {
   .smrt-sortable__header { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-block-size: 2.25rem; }
   .smrt-sortable__content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--smrt-spacing-2); }
   .smrt-sortable__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-1); min-block-size: 2.25rem; min-width: 0; }
-  .smrt-sortable__item { display: flex; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-surface); min-width: 0; }
+  .smrt-sortable__item { display: flex; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-surface); min-width: 0; position: relative; }
   .smrt-sortable__item--dragging { opacity: 0.55; }
   .smrt-sortable__handle { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }
   .smrt-sortable__handle:active { cursor: grabbing; }
@@ -327,6 +331,8 @@ function containerRank(id: string): number {
   .smrt-sortable__handle:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .smrt-sortable__handle[aria-pressed='true'] { background: var(--smrt-color-primary-container, var(--smrt-color-surface-container-high)); color: var(--smrt-color-on-primary-container, inherit); }
   .smrt-sortable__marker { block-size: 0.1875rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-primary); }
+  .smrt-sortable__marker--before { position: absolute; inset-inline: 0; inset-block-start: calc(-0.5 * (var(--smrt-spacing-1) + 0.1875rem)); }
   .smrt-sortable__empty { margin: 0; padding: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-body-small-font); }
   .smrt-sortable__live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+}
 </style>

package/dist/components/sortable/Sortable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAsPnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAuPnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}

package/dist/components/workspace/Breadcrumbs.svelte

@@ -82,6 +82,8 @@ const lastIndex = $derived(crumbs.length - 1);
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-breadcrumbs {
     width: 100%;
   }
@@ -127,7 +129,7 @@ const lastIndex = $derived(crumbs.length - 1);
   .crumb-link: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);
   }
 
   @media (max-width: 640px) {
@@ -138,4 +140,5 @@ const lastIndex = $derived(crumbs.length - 1);
       margin: 0 0.35rem;
     }
   }
+}
 </style>

package/dist/components/workspace/NavTree.svelte

@@ -206,6 +206,8 @@ function navChildrenId(href: string): string {
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-nav-tree {
     display: flex;
     flex-direction: column;
@@ -277,7 +279,7 @@ function navChildrenId(href: string): string {
     font-size: var(--smrt-typography-label-small-size, 0.7rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     line-height: var(--smrt-typography-label-small-line-height, 1.2);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-secondary-container);
     color: var(--smrt-color-on-secondary-container);
   }
@@ -351,4 +353,5 @@ function navChildrenId(href: string): string {
   .smrt-nav-tree.collapsed .children {
     display: none;
   }
+}
 </style>

package/dist/components/workspace/RoleShell.svelte

@@ -283,6 +283,8 @@ function handleNavigate(): void {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /*
    * Display: contents lets the WorkspaceShell drive the grid/layout while
    * still giving us a single DOM node to hang `--smrt-role-color` off.
@@ -304,6 +306,7 @@ function handleNavigate(): void {
     margin-right: 0.4rem;
     font-size: var(--smrt-typography-title-medium-size, 1.1rem);
     line-height: 1;
-    color: var(--smrt-role-color, var(--smrt-color-on-surface, #111827));
+    color: var(--smrt-role-color, var(--smrt-color-on-surface));
   }
+}
 </style>

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>