@happyvertical/smrt-ui 0.55.21 → 0.55.22

package/dist/components/ui/Chip.svelte

@@ -45,16 +45,16 @@ const {
 </script>
 
 <span
-  class="chip {size}"
-  class:selected
-  class:disabled
-  class:selectable
-  class:closeable data-smrt-component="Chip"
+  class="smrt-chip__root smrt-chip__{size}"
+  class:smrt-chip__selected={selected}
+  class:smrt-chip__disabled={disabled}
+  class:smrt-chip__selectable={selectable}
+  class:smrt-chip__closeable={closeable} data-smrt-component="Chip"
 >
   {#if selectable}
     <button
       type="button"
-      class="chip__body"
+      class="smrt-chip__body" data-smrt-part="body"
       aria-pressed={selected}
       {disabled}
       onclick={() => onselect?.()}
@@ -62,7 +62,7 @@ const {
       {#if children}{@render children()}{:else}{label}{/if}
     </button>
   {:else}
-    <span class="chip__body">
+    <span class="smrt-chip__body" data-smrt-part="body">
       {#if children}{@render children()}{:else}{label}{/if}
     </span>
   {/if}
@@ -70,7 +70,7 @@ const {
   {#if closeable}
     <button
       type="button"
-      class="chip__close"
+      class="smrt-chip__close" data-smrt-part="close"
       aria-label={label ? `Remove ${label}` : 'Remove'}
       {disabled}
       onclick={() => onclose?.()}
@@ -94,106 +94,111 @@ const {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .chip {
+@layer smrt.structure {
+  .smrt-chip__root {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1);
+    max-width: 100%;
+  }
+  .smrt-chip__root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .smrt-chip__root.smrt-chip__sm {
+    padding: 0 var(--smrt-spacing-1);
+  }
+  .smrt-chip__root.smrt-chip__md {
+    min-block-size: var(--smrt-control-height-small);
+    padding: 0 var(--smrt-spacing-2);
+  }
+  .smrt-chip__root.smrt-chip__disabled {
+    pointer-events: none;
+  }
+  .smrt-chip__body {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .smrt-chip__root.smrt-chip__selectable .smrt-chip__body {
+    cursor: pointer;
+  }
+  .smrt-chip__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: var(--smrt-spacing-1);
+  }
+}
+@layer smrt.theme {
+  .smrt-chip__root {
     border-radius: var(--smrt-control-radius);
     background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
     border: var(--smrt-hairline);
     font-weight: var(--smrt-control-weight);
-    max-width: 100%;
   }
-
-  /* State layer: currentColor mixed at the theme's state opacity. */
-  .chip::after {
-    content: '';
-    position: absolute;
-    inset: 0;
+  .smrt-chip__root::after {
     border-radius: inherit;
     background: transparent;
-    pointer-events: none;
   }
-
-  .chip.selectable:hover::after {
+  .smrt-chip__root.smrt-chip__selectable:hover::after {
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
-
-  .chip.selectable:active::after {
+  .smrt-chip__root.smrt-chip__selectable:active::after {
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
-
-  .chip.sm {
-    padding: 0 var(--smrt-spacing-1);
-    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+  .smrt-chip__root.smrt-chip__sm {
+    font-size: var(--smrt-typography-label-small-size);
   }
-  .chip.sm {
+  .smrt-chip__root.smrt-chip__sm {
     border-radius: var(--smrt-control-radius-small);
   }
-  .chip.md {
-    min-block-size: var(--smrt-control-height-small);
-    padding: 0 var(--smrt-spacing-2);
-    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  .smrt-chip__root.smrt-chip__md {
+    font-size: var(--smrt-typography-label-large-size);
   }
-
-  .chip.selected {
+  .smrt-chip__root.smrt-chip__selected {
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
     border-color: var(--smrt-color-primary);
   }
-
-  .chip.disabled {
+  .smrt-chip__root.smrt-chip__disabled {
     opacity: var(--smrt-state-disabled);
-    pointer-events: none;
   }
-
-  .chip__body {
+  .smrt-chip__body {
     appearance: none;
     background: none;
     border: none;
     color: inherit;
     font: inherit;
-    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
-    cursor: default;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .chip.selectable .chip__body {
-    cursor: pointer;
   }
-
-  .chip__close {
+  .smrt-chip__close {
     appearance: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     background: none;
     border: none;
     color: inherit;
-    cursor: pointer;
-    padding: var(--smrt-spacing-1);
     border-radius: var(--smrt-radius-full);
     opacity: 0.7;
   }
-  .chip__close:hover {
+  .smrt-chip__close:hover {
     opacity: 1;
     background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
-
-  .chip__body:focus-visible,
-  .chip__close:focus-visible {
+  .smrt-chip__body:focus-visible,
+  .smrt-chip__close:focus-visible {
     outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
     outline-offset: var(--smrt-focus-ring-offset);
   }
   /* Forced colors (#3908): system colours where colour alone carries meaning. */
   @media (forced-colors: active) {
-    .chip.selected { border-color: Highlight; outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
-    .chip.disabled, .chip.selected.disabled { opacity: 1; color: GrayText; border-color: GrayText; outline-color: GrayText; }
+    .smrt-chip__root.smrt-chip__selected { border-color: Highlight; outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
+    .smrt-chip__root.smrt-chip__disabled, .smrt-chip__root.smrt-chip__selected.smrt-chip__disabled { opacity: 1; color: GrayText; border-color: GrayText; outline-color: GrayText; }
   }
 }
 </style>

package/dist/components/ui/Disclosure.svelte

@@ -46,7 +46,7 @@ function handleToggle(event: Event) {
 <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); }
+  .disclosure { border-bottom: var(--smrt-hairline); 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; }
   summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }

package/dist/components/ui/IconToggle.svelte

@@ -79,7 +79,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     min-width: 2.75rem;
     min-height: 2.75rem;
     padding: 0;
-    border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container, var(--smrt-color-surface));
     color: var(--smrt-color-on-surface);
@@ -129,7 +129,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     /* 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. */
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface-variant);
     font-size: 0.68rem;

package/dist/styles/unstyled.css

@@ -10,8 +10,8 @@
  * CSS, the --smrt-* tokens, or the data-smrt-component / data-smrt-part hooks.
  *
  * The reverted property list is explicit on purpose. `all: revert-layer` would
- * also drop layout declarations, because until per-package structure/theme
- * sorting lands every component rule sits in smrt.theme. Keep this list in
+ * also drop layout from unsorted components, including those nested inside
+ * the ten wave-2 pilot primitives. Keep this list in
  * step with the "Styleless mode" section of agents/styling.md.
  */
 @layer smrt.reset, smrt.structure, smrt.theme;

package/dist/svelte/playground/BaseControlsPreview.svelte

@@ -133,7 +133,7 @@ function handleSubmit() {
 
   .workbench__header {
     padding-bottom: var(--smrt-spacing-4);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   h4,
@@ -193,7 +193,7 @@ function handleSubmit() {
   .actions {
     align-items: flex-start;
     padding-top: var(--smrt-spacing-5);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .save-status {

package/dist/svelte/playground/CollectionsPreview.svelte

@@ -55,7 +55,7 @@ const filtered = $derived(
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-4); color: var(--smrt-color-on-surface); }
-  header { padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
+  header { padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); } h4, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } header > p:last-child { max-width: 48rem; margin-top: var(--smrt-spacing-1); color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .status { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); font: var(--smrt-typography-label-small-font); }
 }

package/dist/svelte/playground/DataTablePreview.svelte

@@ -514,7 +514,7 @@ function selectAllMatching() {
     justify-content: space-between;
     gap: var(--smrt-spacing-4);
     padding-bottom: var(--smrt-spacing-4);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   h4,
@@ -561,7 +561,7 @@ function selectAllMatching() {
   .table-frame {
     overflow: auto;
     max-width: 100%;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-medium);
   }
 
@@ -569,14 +569,14 @@ function selectAllMatching() {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .report-fixture {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .manual-fixture,
@@ -585,7 +585,7 @@ function selectAllMatching() {
     display: grid;
     gap: var(--smrt-spacing-3);
     padding-top: var(--smrt-spacing-4);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .table-frame--virtual {

package/dist/svelte/playground/FeedbackPreview.svelte

@@ -41,7 +41,7 @@ const menu = [
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
-  header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header, .actions, .interaction-row { display: flex; align-items: center; gap: var(--smrt-spacing-3); } header { justify-content: space-between; padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }
   .stack { display: grid; gap: var(--smrt-spacing-2); }

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -118,7 +118,7 @@ const identity = (controlId: string) => ({
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-5); color: var(--smrt-color-on-surface); }
-  header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-5); padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; } h4 { font: var(--smrt-typography-headline-small-font); } h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }
   header p:not(.eyebrow) { max-width: 40rem; color: var(--smrt-color-on-surface-variant); }
   .eyebrow { color: var(--smrt-color-primary); font: var(--smrt-typography-label-small-font); letter-spacing: .1em; text-transform: uppercase; }

package/dist/svelte/playground/StylelessPreview.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 import Alert from '../../components/feedback/Alert.svelte';
+import Checkbox from '../../components/forms/Checkbox.svelte';
 import Input from '../../components/forms/Input.svelte';
 import Select from '../../components/forms/Select.svelte';
+import Switch from '../../components/forms/Switch.svelte';
 import Tabs from '../../components/nav/Tabs.svelte';
 import Badge from '../../components/ui/Badge.svelte';
 import Button from '../../components/ui/Button.svelte';
@@ -11,6 +13,30 @@ import unstyledCss from '../../styles/unstyled.css?inline';
 
 // Native checkbox, outside the catalogue, so the toggle itself is never stripped.
 let styleless = $state(false);
+let allProperties = $state(false);
+// Experimental wave-2 reset. Keep production unstyled.css on its explicit
+// property list until unsorted components nested inside these roots migrate.
+const pilotRoots = [
+  'Button',
+  'Badge',
+  'Chip',
+  'Card',
+  'Alert',
+  'Input',
+  'Select',
+  'Checkbox',
+  'Switch',
+  'Tabs',
+]
+  .map((name) => `[data-smrt-component="${name}"]`)
+  .join(', ');
+const pilotScope = `:is(${pilotRoots})`;
+const pilotSelector = `:is(${pilotScope}, ${pilotScope} *):not(#\\#):not(#\\#):not(#\\#)`;
+const pilotCss = `@layer smrt.theme {
+  ${pilotSelector}, ${pilotSelector}::before, ${pilotSelector}::after {
+    all: revert-layer;
+  }
+}`;
 let active = $state('overview');
 
 // Svelte does not interpolate text inside a style element, so the stylesheet is
@@ -19,7 +45,7 @@ $effect(() => {
   if (!styleless) return;
   const style = document.createElement('style');
   style.setAttribute('data-smrt-styleless', '');
-  style.textContent = unstyledCss;
+  style.textContent = unstyledCss + (allProperties ? pilotCss : '');
   document.head.appendChild(style);
   return () => style.remove();
 });
@@ -49,6 +75,11 @@ const tabs = [
     themed look. The page chrome is not a smrt component, so it is unaffected.
   </p>
 
+  <label class="toggle">
+    <input type="checkbox" bind:checked={allProperties} />
+    Try all: revert-layer on the ten pilot primitives
+  </label>
+
   <div class="catalogue">
     <section>
       <h5>Buttons and badges</h5>
@@ -82,6 +113,8 @@ const tabs = [
           <option value="owner">Owner</option>
           <option value="member">Member</option>
         </Select>
+        <Checkbox label="Send updates" />
+        <Switch label="Enable alerts" />
       </div>
     </section>
 
@@ -96,7 +129,7 @@ const tabs = [
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .workbench { display: grid; gap: var(--smrt-spacing-6); color: var(--smrt-color-on-surface); }
-  header { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding-bottom: var(--smrt-spacing-4); border-bottom: 1px solid var(--smrt-color-outline-variant); }
+  header { display: flex; align-items: center; justify-content: space-between; gap: var(--smrt-spacing-3); padding-bottom: var(--smrt-spacing-4); border-bottom: var(--smrt-hairline); }
   h4, h5, p { margin: 0; }
   h4 { font: var(--smrt-typography-headline-small-font); }
   h5 { margin-bottom: var(--smrt-spacing-3); font: var(--smrt-typography-title-medium-font); }

package/dist/svelte/playground/StylelessPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StylelessPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/StylelessPreview.svelte.ts"],"names":[],"mappings":"AA+GA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"StylelessPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/StylelessPreview.svelte.ts"],"names":[],"mappings":"AAkJA,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/themes/README.md

@@ -727,7 +727,7 @@ calc(var(--smrt-button-state-hover, var(--smrt-state-hover)) * 100%), transparen
 | `--smrt-surface-overlay` | Modal scrim | `background` of Modal/Drawer backdrops |
 | `--smrt-hairline-color` / `-strong-color` | Quiet and strong edge colours | `border-color`, `outline-color`, dividers |
 | `--smrt-hairline` / `--smrt-hairline-strong` | `1px solid` edge shorthands | `border`, `border-top` etc. on panels (quiet) and controls (strong) |
-| `--smrt-inset-highlight` | Top inner light line (`none` on light) | `box-shadow` (layer with an elevation) on raised dark surfaces |
+| `--smrt-inset-highlight` | Top inner light line (transparent shadow on light, never `none` in a shadow list) | `box-shadow` (layer with an elevation) on raised dark surfaces |
 | `--smrt-state-{hover,pressed,selected,focus,dragged,disabled}` | Unitless state-layer opacities, 0 to 1 | Mix percentage of a state overlay (`calc(var(--smrt-state-hover) * 100%)`); `disabled` as `opacity` |
 | `--smrt-shadow-color` | `rgb(r g b)` shadow base, per scheme | `box-shadow` colour: `rgb(from var(--smrt-shadow-color) r g b / 0.2)` |
 | `--smrt-elevation-0..5` | Existing shadow scale | `box-shadow` |

package/dist/themes/components/ColorSchemeToggle.svelte

@@ -122,7 +122,7 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-2, 0.5rem);
     padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -145,7 +145,7 @@ const labels = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -167,7 +167,7 @@ const labels = {
   .smrt-color-scheme-toggle__segmented {
     display: inline-flex;
     background: var(--smrt-color-surface-container-lowest);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }

package/dist/themes/components/ThemeSwitcher.svelte

@@ -118,7 +118,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__select {
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
     border-radius: var(--smrt-radius-md, 0.5rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     background: var(--smrt-color-surface, white);
     color: var(--smrt-color-on-surface, inherit);
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
@@ -135,7 +135,7 @@ const themeIcons: Record<ThemePreset, string> = {
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
     padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-md, 0.5rem);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface, inherit);
@@ -157,7 +157,7 @@ const themeIcons: Record<ThemePreset, string> = {
   .smrt-theme-switcher__segmented {
     display: inline-flex;
     background: var(--smrt-color-surface-container-lowest);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-lg, 0.75rem);
     padding: var(--smrt-spacing-0_5, 0.125rem);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.55.21",
+  "version": "0.55.22",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -155,7 +155,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.55.21",
+    "@happyvertical/smrt-types": "0.55.22",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {