@happyvertical/smrt-ui 0.55.16 → 0.55.17

package/dist/components/ui/Card.svelte

@@ -32,26 +32,28 @@ const {
 <div
   class="card {variant} padding-{padding}"
   class:hoverable
-  {...rest}
+  {...rest} data-smrt-component="Card"
 >
   {#if header}
-    <div class="card-header">
+    <div class="card-header" data-smrt-part="header">
       {@render header()}
     </div>
   {/if}
 
-  <div class="card-content">
+  <div class="card-content" data-smrt-part="body">
     {@render children?.()}
   </div>
 
   {#if footer}
-    <div class="card-footer">
+    <div class="card-footer" data-smrt-part="footer">
       {@render footer()}
     </div>
   {/if}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /*
    * Themeable look (app-level custom properties; defaults keep the stock look):
    *   --smrt-card-border      edge of default and elevated cards
@@ -134,4 +136,5 @@ const {
   .padding-lg .card-footer {
     padding: var(--smrt-spacing-8);
   }
+}
 </style>

package/dist/components/ui/Chip.svelte

@@ -49,7 +49,7 @@ const {
   class:selected
   class:disabled
   class:selectable
-  class:closeable
+  class:closeable data-smrt-component="Chip"
 >
   {#if selectable}
     <button
@@ -93,23 +93,25 @@ const {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chip {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
+    gap: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border: 1px solid var(--smrt-color-outline-variant);
     max-width: 100%;
   }
 
   .chip.sm {
-    padding: 0 var(--smrt-spacing-1, 4px);
+    padding: 0 var(--smrt-spacing-1);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
   }
   .chip.md {
-    padding: 0 var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
@@ -130,7 +132,7 @@ const {
     border: none;
     color: inherit;
     font: inherit;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
     cursor: default;
     white-space: nowrap;
     overflow: hidden;
@@ -150,8 +152,8 @@ const {
     border: none;
     color: inherit;
     cursor: pointer;
-    padding: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
+    padding: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
     opacity: 0.7;
   }
   .chip__close:hover {
@@ -164,4 +166,5 @@ const {
     outline: 2px solid var(--smrt-color-primary);
     outline-offset: 1px;
   }
+}
 </style>

package/dist/components/ui/Disclosure.svelte

@@ -36,7 +36,7 @@ function handleToggle(event: Event) {
 }
 </script>
 
-<details class="disclosure {className}" bind:open ontoggle={handleToggle}>
+<details class="disclosure {className}" bind:open ontoggle={handleToggle} data-smrt-component="Disclosure">
   <summary aria-disabled={disabled} onclick={(event) => disabled && event.preventDefault()}>
     <span>{title}</span><span class="chevron" aria-hidden="true">⌄</span>
   </summary>
@@ -44,6 +44,8 @@ function handleToggle(event: Event) {
 </details>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .disclosure { border-bottom: 1px solid var(--smrt-color-outline-variant); color: var(--smrt-color-on-surface); }
   summary { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) 0; font: var(--smrt-typography-title-small-font); cursor: pointer; list-style: none; }
   summary::-webkit-details-marker { display: none; }
@@ -53,4 +55,5 @@ function handleToggle(event: Event) {
   details[open] .chevron { transform: rotate(180deg); }
   .content { padding: 0 0 var(--smrt-spacing-4); color: var(--smrt-color-on-surface-variant); }
   @media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }
+}
 </style>

package/dist/components/ui/Dropdown.svelte

@@ -147,7 +147,7 @@ $effect(() => {
 });
 </script>
 
-<span class="dropdown" bind:this={wrapEl}>
+<span class="dropdown" bind:this={wrapEl} data-smrt-component="Dropdown">
   <button
     bind:this={triggerEl}
     type="button"
@@ -193,6 +193,8 @@ $effect(() => {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .dropdown {
     position: relative;
     display: inline-flex;
@@ -202,9 +204,9 @@ $effect(() => {
     appearance: none;
     font: inherit;
     cursor: pointer;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    border: 1px solid var(--smrt-color-outline, #79747e);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    border: 1px solid var(--smrt-color-outline);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
   }
@@ -222,7 +224,7 @@ $effect(() => {
     block-size: 2.75rem;
     padding: 0;
     border: none;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: transparent;
     color: inherit;
   }
@@ -239,14 +241,14 @@ $effect(() => {
     position: absolute;
     z-index: var(--smrt-z-index-dropdown, 1000);
     min-width: 10rem;
-    margin: var(--smrt-spacing-1, 4px) 0;
-    padding: var(--smrt-spacing-1, 4px);
+    margin: var(--smrt-spacing-1) 0;
+    padding: var(--smrt-spacing-1);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-surface-container, #f3edf7);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    gap: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container);
+    border: 1px solid var(--smrt-color-outline-variant);
     box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
   }
 
@@ -271,16 +273,16 @@ $effect(() => {
     appearance: none;
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     /* A touch target: menu rows are at least 44px tall. */
     min-block-size: 2.75rem;
     box-sizing: border-box;
     font: inherit;
     text-align: left;
     cursor: pointer;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
     background: none;
     color: var(--smrt-color-on-surface);
     white-space: nowrap;
@@ -307,4 +309,5 @@ $effect(() => {
     opacity: 0.5;
     cursor: not-allowed;
   }
+}
 </style>

package/dist/components/ui/IconToggle.svelte

@@ -24,7 +24,7 @@ export interface Props
   pressed?: boolean;
   /** Optional count badge; included in the accessible name and tooltip. */
   count?: number;
-  /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+  /** A CSS colour (a token such as `var(--smrt-color-primary)` or a value) shown when the toggle is pressed. */
   tone?: string;
   /** The icon. Decorative: it is hidden from assistive technology. */
   children: Snippet;
@@ -58,7 +58,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     class="icon-toggle {className}"
     class:pressed
     class:toned={tone !== undefined}
-    style:--icon-toggle-tone={tone}
+    style:--smrt-icon-toggle-tone={tone}
     aria-pressed={pressed}
     aria-label={name}
   >
@@ -68,6 +68,8 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
 </Tooltip>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .icon-toggle {
     position: relative;
     display: inline-flex;
@@ -78,7 +80,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     min-height: 2.75rem;
     padding: 0;
     border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container, var(--smrt-color-surface));
     color: var(--smrt-color-on-surface);
     font: inherit;
@@ -100,9 +102,9 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     color: var(--smrt-color-on-surface-variant, var(--smrt-color-on-surface));
   }
   .icon-toggle.toned.pressed {
-    background: color-mix(in srgb, var(--icon-toggle-tone) 16%, var(--smrt-color-surface));
-    color: var(--icon-toggle-tone);
-    box-shadow: inset 0 0 0 2px var(--icon-toggle-tone);
+    background: color-mix(in srgb, var(--smrt-icon-toggle-tone) 16%, var(--smrt-color-surface));
+    color: var(--smrt-icon-toggle-tone);
+    box-shadow: inset 0 0 0 2px var(--smrt-icon-toggle-tone);
   }
   .icon-toggle:focus-visible {
     outline: 2px solid var(--smrt-color-primary);
@@ -123,7 +125,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     box-sizing: border-box;
     min-width: 1.15rem;
     padding: 0 0.3rem;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     /* Outlined, not filled: a surface-coloured face (so the button's edge does
        not show through where the badge overlaps it), a 1px theme outline and
        neutral text, readable on light and dark themes alike. */
@@ -136,4 +138,5 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
+}
 </style>

package/dist/components/ui/IconToggle.svelte.d.ts

@@ -17,7 +17,7 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children' |
     pressed?: boolean;
     /** Optional count badge; included in the accessible name and tooltip. */
     count?: number;
-    /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+    /** A CSS colour (a token such as `var(--smrt-color-primary)` or a value) shown when the toggle is pressed. */
     tone?: string;
     /** The icon. Decorative: it is hidden from assistive technology. */
     children: Snippet;

package/dist/components/ui/IconToggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAC/D;IACD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAC/D;IACD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8GAA8G;IAC9G,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/IconToggleGroup.svelte

@@ -21,11 +21,13 @@ export interface Props {
 const { label, children, class: className = '' }: Props = $props();
 </script>
 
-<div class="icon-toggle-group {className}" role="group" aria-label={label}>
+<div class="icon-toggle-group {className}" role="group" aria-label={label} data-smrt-component="IconToggleGroup">
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .icon-toggle-group {
     display: inline-flex;
     flex-wrap: wrap;
@@ -41,16 +43,17 @@ const { label, children, class: className = '' }: Props = $props();
     margin-inline-start: -1px;
   }
   .icon-toggle-group > :global(:first-child .icon-toggle) {
-    border-start-start-radius: var(--smrt-radius-full, 999px);
-    border-end-start-radius: var(--smrt-radius-full, 999px);
+    border-start-start-radius: var(--smrt-radius-full);
+    border-end-start-radius: var(--smrt-radius-full);
   }
   .icon-toggle-group > :global(:last-child .icon-toggle) {
-    border-start-end-radius: var(--smrt-radius-full, 999px);
-    border-end-end-radius: var(--smrt-radius-full, 999px);
+    border-start-end-radius: var(--smrt-radius-full);
+    border-end-end-radius: var(--smrt-radius-full);
   }
   /* The pressed one sits above its neighbours so its tint is not clipped by them. */
   .icon-toggle-group :global(.icon-toggle.pressed),
   .icon-toggle-group :global(.icon-toggle:focus-visible) {
     z-index: 1;
   }
+}
 </style>

package/dist/components/ui/Pagination.svelte

@@ -106,7 +106,7 @@ const isLastPage = $derived(currentPage === totalPages);
 </script>
 
 {#if totalPages > 1}
-  <nav class="pagination" aria-label={ariaLabel}>
+  <nav class="pagination" aria-label={ariaLabel} data-smrt-component="Pagination">
     <!-- First page -->
     {#if showFirstLast}
       {#if onPageChange}
@@ -190,6 +190,8 @@ const isLastPage = $derived(currentPage === totalPages);
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .pagination {
     display: flex;
     justify-content: center;
@@ -229,25 +231,25 @@ const isLastPage = $derived(currentPage === totalPages);
   }
 
   .page-link:not(.current):not(.disabled) {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    color: var(--smrt-color-on-surface, #374151);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
   }
 
   .page-link:not(.current):not(.disabled):hover {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
   }
 
   .page-link.current {
-    background: var(--smrt-color-primary, #005ac1);
+    background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary, white);
     cursor: default;
   }
 
   .page-link.disabled,
   .page-link:disabled {
-    background: var(--smrt-color-surface-container-high, #f3f4f6);
-    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
     cursor: not-allowed;
   }
 
@@ -279,7 +281,7 @@ const isLastPage = $derived(currentPage === totalPages);
     justify-content: center;
     min-width: 2.25rem;
     height: 2.25rem;
-    color: var(--smrt-color-on-surface-variant, #6b7280);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   @media (max-width: 480px) {
@@ -293,4 +295,5 @@ const isLastPage = $derived(currentPage === totalPages);
       padding: 0 var(--smrt-spacing-2, 0.5rem);
     }
   }
+}
 </style>

package/dist/components/ui/Popover.svelte

@@ -79,7 +79,7 @@ $effect(() => {
 });
 </script>
 
-<span bind:this={rootEl} class="popover {className}">
+<span bind:this={rootEl} class="popover {className}" data-smrt-component="Popover">
   <button
     bind:this={triggerEl}
     type="button"
@@ -111,12 +111,14 @@ $effect(() => {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .popover { position: relative; display: inline-flex; }
   .popover__trigger { appearance: none; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); font: inherit; cursor: pointer; }
   .popover__trigger:focus-visible, .popover__panel:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
   .popover__trigger:disabled { opacity: .5; cursor: not-allowed; }
   /* Icon trigger: a 44px round glyph in the surrounding colour. Hover and open nudge the glyph; focus keeps the standard primary ring (a soft ring in the glyph's colour fell under 3:1 on ordinary surfaces). */
-  .popover__trigger--icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: none; border-radius: var(--smrt-radius-full, 999px); background: transparent; color: inherit; }
+  .popover__trigger--icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: none; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; }
   .popover__trigger--icon:hover:not(:disabled), .popover__trigger--icon[aria-expanded='true'] { background: transparent; color: color-mix(in srgb, currentColor 80%, var(--smrt-color-on-surface)); }
   .popover__trigger--icon:focus-visible { background: transparent; }
   .popover__panel { position: absolute; z-index: var(--smrt-z-index-popover, 1000); box-sizing: border-box; inline-size: var(--smrt-popover-panel-width, auto); min-width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: var(--smrt-popover-panel-padding, var(--smrt-spacing-4)); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); box-shadow: var(--smrt-elevation-3); }
@@ -124,4 +126,5 @@ $effect(() => {
   .popover__panel--bottom-end { top: calc(100% + var(--smrt-spacing-1)); right: 0; }
   .popover__panel--top-start { bottom: calc(100% + var(--smrt-spacing-1)); left: 0; }
   .popover__panel--top-end { right: 0; bottom: calc(100% + var(--smrt-spacing-1)); }
+}
 </style>

package/dist/components/ui/Skeleton.svelte

@@ -36,7 +36,7 @@ const lineIndexes = $derived(
 );
 </script>
 
-<span class="skeleton-wrap" role="status" aria-label={label}>
+<span class="skeleton-wrap" role="status" aria-label={label} data-smrt-component="Skeleton">
   {#if variant === 'text'}
     {#each lineIndexes as i (i)}
       <span
@@ -57,16 +57,18 @@ const lineIndexes = $derived(
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .skeleton-wrap {
     display: inline-flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
   }
 
   .skeleton {
     display: block;
-    background: var(--smrt-color-surface-container-highest, #e7e0ec);
+    background: var(--smrt-color-surface-container-highest);
     background-image: linear-gradient(
       90deg,
       transparent 0%,
@@ -75,25 +77,25 @@ const lineIndexes = $derived(
     );
     background-size: 200% 100%;
     animation: smrt-skeleton-shimmer 1.4s ease-in-out infinite;
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
   }
 
   .skeleton--text {
     width: 100%;
     height: var(--smrt-typography-body-medium-size, 1rem);
-    border-radius: var(--smrt-radius-extra-small, 4px);
+    border-radius: var(--smrt-radius-extra-small);
   }
 
   .skeleton--circle {
     width: 48px;
     height: 48px;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .skeleton--rect {
     width: 100%;
     height: 96px;
-    border-radius: var(--smrt-radius-medium, 8px);
+    border-radius: var(--smrt-radius-medium);
   }
 
   @keyframes smrt-skeleton-shimmer {
@@ -110,4 +112,5 @@ const lineIndexes = $derived(
       animation: none;
     }
   }
+}
 </style>

package/dist/components/ui/Tooltip.svelte

@@ -58,7 +58,7 @@ function onKeydown(event: KeyboardEvent) {
   onmouseleave={hide}
   onfocusin={show}
   onfocusout={hide}
-  onkeydown={onKeydown}
+  onkeydown={onKeydown} data-smrt-component="Tooltip"
 >
   <span class="tooltip-trigger" aria-describedby={tipId}>
     {@render children()}
@@ -69,6 +69,8 @@ function onKeydown(event: KeyboardEvent) {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tooltip-wrap {
     position: relative;
     display: inline-flex;
@@ -80,10 +82,10 @@ function onKeydown(event: KeyboardEvent) {
     display: none;
     width: max-content;
     max-width: 16rem;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-inverse-surface, #313033);
-    color: var(--smrt-color-inverse-on-surface, #f4eff4);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-inverse-surface);
+    color: var(--smrt-color-inverse-on-surface);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     line-height: var(--smrt-typography-body-small-line-height, 1.4);
     pointer-events: none;
@@ -97,24 +99,25 @@ function onKeydown(event: KeyboardEvent) {
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    margin-bottom: var(--smrt-spacing-1);
   }
   .tooltip--bottom {
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
-    margin-top: var(--smrt-spacing-1, 4px);
+    margin-top: var(--smrt-spacing-1);
   }
   .tooltip--left {
     right: 100%;
     top: 50%;
     transform: translateY(-50%);
-    margin-right: var(--smrt-spacing-1, 4px);
+    margin-right: var(--smrt-spacing-1);
   }
   .tooltip--right {
     left: 100%;
     top: 50%;
     transform: translateY(-50%);
-    margin-left: var(--smrt-spacing-1, 4px);
+    margin-left: var(--smrt-spacing-1);
   }
+}
 </style>

package/dist/components/ui/Tree.svelte

@@ -127,14 +127,14 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
 }
 </script>
 
-<div role="tree" aria-label={ariaLabel} class="tree">
+<div role="tree" aria-label={ariaLabel} class="tree" data-smrt-component="Tree">
   {#each flat as item, i (item.node.id)}
     <div
       bind:this={itemEls[i]}
       role="treeitem"
       class="tree__item"
       class:selected={selectedId === item.node.id}
-      style:padding-left="calc({item.depth} * var(--smrt-spacing-4, 16px) + var(--smrt-spacing-2, 8px))"
+      style:padding-left="calc({item.depth} * var(--smrt-spacing-4) + var(--smrt-spacing-2))"
       aria-level={item.depth + 1}
       aria-selected={selectedId === item.node.id}
       aria-expanded={item.hasChildren ? item.isExpanded : undefined}
@@ -158,6 +158,8 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .tree {
     display: flex;
     flex-direction: column;
@@ -166,11 +168,11 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
   .tree__item {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding-top: var(--smrt-spacing-1, 4px);
-    padding-bottom: var(--smrt-spacing-1, 4px);
-    padding-right: var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
+    gap: var(--smrt-spacing-1);
+    padding-top: var(--smrt-spacing-1);
+    padding-bottom: var(--smrt-spacing-1);
+    padding-right: var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
     cursor: pointer;
     color: var(--smrt-color-on-surface);
     user-select: none;
@@ -206,4 +208,5 @@ function onItemKeydown(event: KeyboardEvent, index: number, item: FlatNode) {
       transition: none;
     }
   }
+}
 </style>

package/dist/styles/layers.css

@@ -0,0 +1,8 @@
+/*
+ * smrt cascade layers (#3823). Import this first, before any other smrt
+ * stylesheet, or let ThemeProvider inject it. Layers are ordered lowest to
+ * highest: reset < structure < theme. Every smrt component <style> block is
+ * wrapped in smrt.theme. Unlayered consumer CSS always beats every smrt layer,
+ * so restyling needs no :global() and no !important.
+ */
+@layer smrt.reset, smrt.structure, smrt.theme;

package/dist/styles/layers.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Cascade-layer declaration for smrt components (#3823).
+ *
+ * `ThemeProvider` injects this into `<head>` so the layer order exists before
+ * any layered component rule. The same declaration ships as `layers.css`
+ * (`@happyvertical/smrt-ui/styles/layers.css`). A test keeps the two in sync.
+ */
+export declare const SMRT_CASCADE_LAYERS_CSS = "@layer smrt.reset, smrt.structure, smrt.theme;";
+//# sourceMappingURL=layers.d.ts.map

package/dist/styles/layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.d.ts","sourceRoot":"","sources":["../../src/styles/layers.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,mDACc,CAAC"}

package/dist/styles/layers.js

@@ -0,0 +1,8 @@
+/**
+ * Cascade-layer declaration for smrt components (#3823).
+ *
+ * `ThemeProvider` injects this into `<head>` so the layer order exists before
+ * any layered component rule. The same declaration ships as `layers.css`
+ * (`@happyvertical/smrt-ui/styles/layers.css`). A test keeps the two in sync.
+ */
+export const SMRT_CASCADE_LAYERS_CSS = '@layer smrt.reset, smrt.structure, smrt.theme;';