@happyvertical/smrt-svelte 0.55.16 → 0.55.17

package/dist/components/overview/OverviewAssistantUndo.svelte

@@ -44,7 +44,7 @@ $effect(() => {
 });
 </script>
 
-<div class="smrt-overview-assistant-undo {className}" data-active={batch ? '' : undefined}>
+<div class="smrt-overview-assistant-undo {className}" data-active={batch ? '' : undefined} data-smrt-component="OverviewAssistantUndo">
   <!-- The live region stays mounted so each new message is announced. -->
   <span class="smrt-overview-assistant-undo__message" role="status" aria-live="polite">
     {#if batch}
@@ -64,6 +64,8 @@ $effect(() => {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-overview-assistant-undo {
     display: flex;
     flex-wrap: wrap;
@@ -74,4 +76,5 @@ $effect(() => {
   .smrt-overview-assistant-undo__message {
     flex: 1 1 12rem;
   }
+}
 </style>

package/dist/components/overview/OverviewGrid.svelte

@@ -26,6 +26,7 @@ import {
   type SortableAnnouncement,
 } from '../sortable/controller.svelte.js';
 import { tryUseShellLayout } from '../workspace/admin-shell/layout-context.js';
+import { flipRow } from '../workspace/admin-shell/motion.js';
 import ShellIconButton from '../workspace/admin-shell/ShellIconButton.svelte';
 import ShellSectionIcon from '../workspace/admin-shell/ShellSectionIcon.svelte';
 import type { OverviewOpResult } from './controller.svelte.js';
@@ -378,7 +379,7 @@ const headingTag = $derived(`h${headingLevel}`);
   </article>
 {/snippet}
 
-<div class="smrt-overview" bind:this={rootEl} data-editing={editing ? '' : undefined} data-presentation={presentation}>
+<div class="smrt-overview" bind:this={rootEl} data-editing={editing ? '' : undefined} data-presentation={presentation} data-smrt-component="OverviewGrid">
   {#if editing}
     <div class="smrt-overview__toolbar" role="toolbar" aria-label={t(M['ui.overview.toolbar'])}>
       <ShellIconButton
@@ -415,11 +416,12 @@ const headingTag = $derived(`h${headingLevel}`);
       <div
         role="listitem"
         class="smrt-overview__item"
+        animate:flipRow
         data-span={spanOf(row)}
         data-smrt-overview-item={row.widget.id}
         data-dragging={dragged === row.widget.id ? '' : undefined}
         data-drop={mark}
-        style:--span={spanOf(row)}
+        style:--smrt-overview-grid-span={spanOf(row)}
         ondragover={(event) => event.preventDefault()}
         ondrop={(event) => {
           if (!sortable.drag) return;
@@ -537,15 +539,17 @@ const headingTag = $derived(`h${headingLevel}`);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-overview { container-type: inline-size; min-inline-size: 0; }
   .smrt-overview__toolbar { display: flex; gap: var(--smrt-spacing-1); margin-block-end: var(--smrt-spacing-2); }
   .smrt-overview__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
   /* Gaps are tile padding, not grid gap, so a pointer never crosses a dead
      zone between tiles while dragging. */
-  .smrt-overview__list { --_pad: var(--smrt-spacing-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(-1 * var(--_pad)); }
-  .smrt-overview__item { position: relative; grid-column: span var(--span, 1); min-inline-size: 0; padding: var(--_pad); }
+  .smrt-overview__list { --smrt-overview-grid-pad: var(--smrt-spacing-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: calc(-1 * var(--smrt-overview-grid-pad)); }
+  .smrt-overview__item { position: relative; grid-column: span var(--smrt-overview-grid-span, 1); min-inline-size: 0; padding: var(--smrt-overview-grid-pad); }
   .smrt-overview__item[data-dragging] { opacity: 0.5; }
-  .smrt-overview__item[data-drop]::before { content: ''; position: absolute; inset-block: var(--_pad); inline-size: 0.1875rem; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-primary); }
+  .smrt-overview__item[data-drop]::before { content: ''; position: absolute; inset-block: var(--smrt-overview-grid-pad); inline-size: 0.1875rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-primary); }
   .smrt-overview__item[data-drop='before']::before { inset-inline-start: 0; }
   .smrt-overview__item[data-drop='after']::before { inset-inline-end: 0; }
   .smrt-overview__tile { position: relative; block-size: 100%; box-sizing: border-box; padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large, var(--smrt-radius-medium)); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
@@ -561,7 +565,7 @@ const headingTag = $derived(`h${headingLevel}`);
   .smrt-overview__handle:hover { background: var(--smrt-color-surface-container-high); }
   .smrt-overview__handle:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .smrt-overview__handle[aria-pressed='true'] { background: var(--smrt-color-primary-container); color: var(--smrt-color-on-primary-container); }
-  .smrt-overview__resize { position: absolute; inset-block-start: 50%; inset-inline-end: -0.4375rem; inline-size: 0.875rem; block-size: 2.75rem; transform: translateY(-50%); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-surface-container-high); cursor: ew-resize; touch-action: none; }
+  .smrt-overview__resize { position: absolute; inset-block-start: 50%; inset-inline-end: -0.4375rem; inline-size: 0.875rem; block-size: 2.75rem; transform: translateY(-50%); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); cursor: ew-resize; touch-action: none; }
   .smrt-overview__resize:hover { background: var(--smrt-color-primary-container); }
   .smrt-overview__resize:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .smrt-overview__choices { display: grid; gap: var(--smrt-spacing-1); margin: 0; padding: 0; list-style: none; }
@@ -579,4 +583,5 @@ const headingTag = $derived(`h${headingLevel}`);
     .smrt-overview__list { grid-template-columns: minmax(0, 1fr); }
     .smrt-overview__list .smrt-overview__item[data-span] { grid-column: span 1; }
   }
+}
 </style>

package/dist/components/overview/OverviewGrid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overview/OverviewGrid.svelte.ts"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA4bzD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"OverviewGrid.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overview/OverviewGrid.svelte.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA6bzD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/overview/WidgetOptionsForm.svelte

@@ -186,8 +186,11 @@ const modelValues = $derived(
 </Form>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-widget-form__check { display: flex; flex-direction: column; gap: var(--smrt-spacing-1); }
   .smrt-widget-form__hint { color: var(--smrt-color-on-surface-variant); }
   .smrt-widget-form__error { color: var(--smrt-color-error); }
   .smrt-widget-form__none { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

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

@@ -57,9 +57,9 @@ const summary = $derived(
 </script>
 
 {#if points.length === 0}
-  <p class="smrt-chart__empty">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-chart__empty" data-smrt-component="ChartWidget">{t(M['ui.overview.no_data'])}</p>
 {:else if style === 'line'}
-  <div class="smrt-chart">
+  <div class="smrt-chart" data-smrt-component="ChartWidget">
     <svg class="smrt-chart__line" viewBox="0 0 100 40" preserveAspectRatio="none" role="img" aria-label={summary}>
       <polyline points={polyline} fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" />
     </svg>
@@ -83,7 +83,7 @@ const summary = $derived(
     </table>
   </div>
 {:else}
-  <ul class="smrt-chart__bars" aria-label={summary}>
+  <ul class="smrt-chart__bars" aria-label={summary} data-smrt-component="ChartWidget">
     {#each points as point, index (index)}
       <li class="smrt-chart__row">
         <span class="smrt-chart__label">{point.label}</span>
@@ -97,15 +97,18 @@ const summary = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-chart { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-primary); }
   .smrt-chart__line { inline-size: 100%; block-size: 7rem; overflow: visible; }
   .smrt-chart__axis { display: flex; justify-content: space-between; margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.75rem); }
   .smrt-chart__bars { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
   .smrt-chart__row { display: grid; grid-template-columns: minmax(4rem, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-2); font-size: var(--smrt-typography-body-medium-size, 0.875rem); color: var(--smrt-color-on-surface); }
   .smrt-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full, 9999px); background: var(--smrt-color-surface-container-high); overflow: hidden; }
+  .smrt-chart__track { display: block; block-size: 0.625rem; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-high); overflow: hidden; }
   .smrt-chart__bar { display: block; block-size: 100%; border-radius: inherit; background: var(--smrt-color-primary); }
   .smrt-chart__value { font-variant-numeric: tabular-nums; color: var(--smrt-color-on-surface-variant); }
   .smrt-chart__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
   .smrt-chart__table { 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/overview/widgets/MetricWidget.svelte

@@ -56,7 +56,7 @@ const href = $derived(
 </script>
 
 {#if valid && metric}
-  <div class="smrt-metric">
+  <div class="smrt-metric" data-smrt-component="MetricWidget">
     {#if href}
       <a class="smrt-metric__value" {href}>{text}</a>
     {:else}
@@ -73,14 +73,17 @@ const href = $derived(
     {/if}
   </div>
 {:else}
-  <p class="smrt-metric__label">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-metric__label" data-smrt-component="MetricWidget">{t(M['ui.overview.no_data'])}</p>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-metric { display: grid; gap: var(--smrt-spacing-1); }
   .smrt-metric__value { margin: 0; color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-display-small-size, 2rem); font-weight: var(--smrt-typography-weight-medium, 500); line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums; }
   a.smrt-metric__value:hover { text-decoration: underline; }
   a.smrt-metric__value:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; border-radius: var(--smrt-radius-small, 0.25rem); }
   .smrt-metric__label { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-metric__change { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-large-size, 0.875rem); }
+}
 </style>

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

@@ -24,9 +24,9 @@ const blocks = $derived(
 {/snippet}
 
 {#if blocks.length === 0}
-  <p class="smrt-note__empty">{t(M['ui.overview.no_data'])}</p>
+  <p class="smrt-note__empty" data-smrt-component="NoteWidget">{t(M['ui.overview.no_data'])}</p>
 {:else}
-  <div class="smrt-note">
+  <div class="smrt-note" data-smrt-component="NoteWidget">
     {#each blocks as block, index (index)}
       {#if block.type === 'heading'}
         <p class="smrt-note__heading" data-level={block.level}><strong>{@render inline(block.children)}</strong></p>
@@ -48,6 +48,8 @@ const blocks = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-note { display: grid; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface); font-size: var(--smrt-typography-body-medium-size, 0.875rem); overflow-wrap: anywhere; }
   .smrt-note p, .smrt-note ul, .smrt-note ol, .smrt-note blockquote, .smrt-note pre { margin: 0; }
   .smrt-note ul, .smrt-note ol { padding-inline-start: var(--smrt-spacing-5, 1.25rem); }
@@ -58,4 +60,5 @@ const blocks = $derived(
   .smrt-note__heading[data-level='1'] { font-size: var(--smrt-typography-title-large-size, 1.25rem); }
   .smrt-note__heading[data-level='2'] { font-size: var(--smrt-typography-title-medium-size, 1.125rem); }
   .smrt-note__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

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

@@ -49,9 +49,9 @@ const viewAll = $derived(
 </script>
 
 {#if rows.length === 0}
-  <p class="smrt-records__empty">{t(M['ui.overview.records.empty'])}</p>
+  <p class="smrt-records__empty" data-smrt-component="RecordListWidget">{t(M['ui.overview.records.empty'])}</p>
 {:else}
-  <ul class="smrt-records">
+  <ul class="smrt-records" data-smrt-component="RecordListWidget">
     {#each rows as row (row.id)}
       <li class="smrt-records__row">
         <span class="smrt-records__main">
@@ -68,7 +68,7 @@ const viewAll = $derived(
   </ul>
 {/if}
 {#if total !== null || viewAll}
-  <p class="smrt-records__foot">
+  <p class="smrt-records__foot" data-smrt-component="RecordListWidget">
     {#if total !== null}
       <span>{t(M['ui.overview.records.total'], { count: new Intl.NumberFormat(locale).format(total) })}</span>
     {/if}
@@ -77,6 +77,8 @@ const viewAll = $derived(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .smrt-records { display: grid; margin: 0; padding: 0; list-style: none; }
   .smrt-records__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-2) 0; border-block-end: 1px solid var(--smrt-color-outline-variant); }
   .smrt-records__row:last-child { border-block-end: 0; }
@@ -88,4 +90,5 @@ const viewAll = $derived(
   .smrt-records__foot { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); margin: var(--smrt-spacing-2) 0 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size, 0.875rem); }
   .smrt-records__foot a { color: var(--smrt-color-primary); }
   .smrt-records__empty { margin: 0; color: var(--smrt-color-on-surface-variant); }
+}
 </style>

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>