sh3-core 0.15.4 → 0.16.1

package/dist/primitives/base.css

@@ -2,7 +2,7 @@
  * SH3 base component styles.
  *
  * Shared affordances that sit between tokens (raw values) and components
- * (full UI). These apply to native elements and the .shell-base-* utility
+ * (full UI). These apply to native elements and the .sh3-base-* utility
  * classes so shards and apps get a consistent look without duplicating
  * button/input recipes in every component.
  */
@@ -13,23 +13,23 @@ button,
 input[type="button"],
 input[type="submit"],
 input[type="reset"],
-.shell-base-button {
+.sh3-base-button {
   padding: 6px 14px;
-  background: var(--shell-accent);
-  color: var(--shell-fg-on-accent);
+  background: var(--sh3-accent);
+  color: var(--sh3-fg-on-accent);
   border: none;
-  border-radius: var(--shell-radius);
+  border-radius: var(--sh3-radius);
   cursor: pointer;
   font-family: inherit;
   font-size: 0.875rem;
-  line-height: var(--shell-line);
+  line-height: var(--sh3-line);
 }
 
 button:hover,
 input[type="button"]:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
-.shell-base-button:hover {
+.sh3-base-button:hover {
   filter: brightness(1.12);
 }
 
@@ -37,7 +37,7 @@ button:active,
 input[type="button"]:active,
 input[type="submit"]:active,
 input[type="reset"]:active,
-.shell-base-button:active {
+.sh3-base-button:active {
   filter: brightness(0.92);
 }
 
@@ -51,107 +51,107 @@ input[type="url"],
 input[type="tel"],
 input[type="number"],
 textarea,
-.shell-base-input {
-  padding: 0 var(--shell-field-pad-x);
-  height: var(--shell-field-height-md);
-  background: var(--shell-input-bg);
-  color: var(--shell-fg);
-  border: 1px solid var(--shell-border);
-  border-radius: var(--shell-radius);
+.sh3-base-input {
+  padding: 0 var(--sh3-field-pad-x);
+  height: var(--sh3-field-height-md);
+  background: var(--sh3-input-bg);
+  color: var(--sh3-fg);
+  border: 1px solid var(--sh3-border);
+  border-radius: var(--sh3-radius);
   font-family: inherit;
   font-size: 0.8125rem;
-  line-height: var(--shell-line);
+  line-height: var(--sh3-line);
 }
 
-::placeholder { color: var(--shell-fg-muted); }
+::placeholder { color: var(--sh3-fg-muted); }
 
 input:focus-visible,
 textarea:focus-visible,
-.shell-base-input:focus-visible {
-  border-color: var(--shell-input-border-focus);
-  box-shadow: var(--shell-focus-ring);
+.sh3-base-input:focus-visible {
+  border-color: var(--sh3-input-border-focus);
+  box-shadow: var(--sh3-focus-ring);
   outline: none;
 }
 
 input:disabled,
 textarea:disabled,
-.shell-base-input[aria-disabled="true"] {
+.sh3-base-input[aria-disabled="true"] {
   opacity: 0.55;
   cursor: not-allowed;
 }
 
 textarea {
   resize: vertical;
-  min-height: calc(var(--shell-line) * 3em);
+  min-height: calc(var(--sh3-line) * 3em);
   height: auto;
-  padding: var(--shell-pad-sm) var(--shell-field-pad-x);
+  padding: var(--sh3-pad-sm) var(--sh3-field-pad-x);
 }
 
 /* ── Checkbox & radio ────────────────────────────────────────────────── */
 
-input[type="checkbox"].shell-base-check,
-input[type="radio"].shell-base-radio {
+input[type="checkbox"].sh3-base-check,
+input[type="radio"].sh3-base-radio {
   appearance: none;
   width: 14px;
   height: 14px;
   margin: 0;
-  background: var(--shell-input-bg);
-  border: 1px solid var(--shell-border);
+  background: var(--sh3-input-bg);
+  border: 1px solid var(--sh3-border);
   cursor: pointer;
   display: inline-grid;
   place-content: center;
   flex-shrink: 0;
 }
 
-.shell-base-check { border-radius: var(--shell-radius-sm); }
-.shell-base-radio { border-radius: 50%; }
+.sh3-base-check { border-radius: var(--sh3-radius-sm); }
+.sh3-base-radio { border-radius: 50%; }
 
 /* Need the input[type] prefix to outweigh the base
-   `input[type="checkbox"].shell-base-check` rule's specificity. */
-input[type="checkbox"].shell-base-check:checked,
-input[type="radio"].shell-base-radio:checked {
-  background: var(--shell-accent);
-  border-color: var(--shell-accent);
+   `input[type="checkbox"].sh3-base-check` rule's specificity. */
+input[type="checkbox"].sh3-base-check:checked,
+input[type="radio"].sh3-base-radio:checked {
+  background: var(--sh3-accent);
+  border-color: var(--sh3-accent);
 }
 
-.shell-base-check:checked::before {
+.sh3-base-check:checked::before {
   content: "";
   width: 8px;
   height: 8px;
-  background: var(--shell-fg-on-accent);
+  background: var(--sh3-fg-on-accent);
   clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 85% 8%, 38% 70%);
 }
 
-.shell-base-radio:checked::before {
+.sh3-base-radio:checked::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--shell-fg-on-accent);
+  background: var(--sh3-fg-on-accent);
 }
 
-.shell-base-check:focus-visible,
-.shell-base-radio:focus-visible {
-  box-shadow: var(--shell-focus-ring);
+.sh3-base-check:focus-visible,
+.sh3-base-radio:focus-visible {
+  box-shadow: var(--sh3-focus-ring);
   outline: none;
 }
 
-.shell-base-check:disabled,
-.shell-base-radio:disabled {
+.sh3-base-check:disabled,
+.sh3-base-radio:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
 
 /* ── Switch ──────────────────────────────────────────────────────────── */
 
-input[type="checkbox"].shell-base-switch {
+input[type="checkbox"].sh3-base-switch {
   appearance: none;
   position: relative;
   width: 28px;
   height: 16px;
   margin: 0;
-  background: var(--shell-bg-sunken);
-  border: 1px solid var(--shell-border-strong);
+  background: var(--sh3-bg-sunken);
+  border: 1px solid var(--sh3-border-strong);
   border-radius: 999px;
   cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
@@ -159,34 +159,34 @@ input[type="checkbox"].shell-base-switch {
   box-sizing: border-box;
 }
 
-.shell-base-switch::before {
+.sh3-base-switch::before {
   content: "";
   position: absolute;
   top: 2px;
   left: 2px;
   width: 12px;
   height: 12px;
-  background: var(--shell-fg);
+  background: var(--sh3-fg);
   border-radius: 50%;
   transition: transform 120ms ease;
 }
 
-input[type="checkbox"].shell-base-switch:checked {
-  background: var(--shell-accent);
-  border-color: var(--shell-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-accent) 25%, transparent);
+input[type="checkbox"].sh3-base-switch:checked {
+  background: var(--sh3-accent);
+  border-color: var(--sh3-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh3-accent) 25%, transparent);
 }
-.shell-base-switch:checked::before {
+.sh3-base-switch:checked::before {
   transform: translateX(12px);
-  background: var(--shell-fg-on-accent);
+  background: var(--sh3-fg-on-accent);
 }
 
-.shell-base-switch:focus-visible {
-  box-shadow: var(--shell-focus-ring);
+.sh3-base-switch:focus-visible {
+  box-shadow: var(--sh3-focus-ring);
   outline: none;
 }
 
-.shell-base-switch:disabled {
+.sh3-base-switch:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }

package/dist/primitives/widgets/ColorSwatch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { CommitOnlyEvents } from './_contract';
-  import { shell } from '../../shellRuntime.svelte';
+  import { sh3 } from '../../sh3Runtime.svelte';
 
   let {
     value = $bindable('#000000'),
@@ -19,7 +19,7 @@
 
   async function open() {
     if (disabled) return;
-    const result = await shell.color.pick({ initial: value, anchor: trigger });
+    const result = await sh3.color.pick({ initial: value, anchor: trigger });
     if (result !== null && result !== undefined) {
       value = result;
       onchange?.(result);
@@ -42,30 +42,30 @@
 
 <style>
   .sh3-swatch { display: inline-flex; flex-direction: column; gap: 4px; }
-  .sh3-swatch__label { font-size: 0.75rem; color: var(--shell-fg-muted); }
+  .sh3-swatch__label { font-size: 0.75rem; color: var(--sh3-fg-muted); }
   .sh3-swatch__btn {
     display: inline-flex; align-items: center; gap: 8px;
-    height: var(--shell-field-height-md);
-    padding: 0 var(--shell-field-pad-x);
-    background: var(--shell-input-bg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
-    color: var(--shell-fg);
+    height: var(--sh3-field-height-md);
+    padding: 0 var(--sh3-field-pad-x);
+    background: var(--sh3-input-bg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
+    color: var(--sh3-fg);
     cursor: pointer;
     font: inherit;
   }
-  .sh3-swatch--sm .sh3-swatch__btn { height: var(--shell-field-height-sm); }
+  .sh3-swatch--sm .sh3-swatch__btn { height: var(--sh3-field-height-sm); }
   .sh3-swatch__btn:hover:not(:disabled) {
-    background: var(--shell-bg-elevated);
+    background: var(--sh3-bg-elevated);
     filter: none;
   }
-  .sh3-swatch__btn:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); }
+  .sh3-swatch__btn:focus-visible { outline: none; box-shadow: var(--sh3-focus-ring); }
   .sh3-swatch__btn:disabled { opacity: 0.55; cursor: not-allowed; }
   .sh3-swatch__dot {
     width: 16px; height: 16px;
-    border: 1px solid var(--shell-border-strong);
-    border-radius: var(--shell-radius-sm);
+    border: 1px solid var(--sh3-border-strong);
+    border-radius: var(--sh3-radius-sm);
     background: var(--swatch-color);
   }
-  .sh3-swatch__hex { font-family: var(--shell-font-mono); font-size: 0.75rem; }
+  .sh3-swatch__hex { font-family: var(--sh3-font-mono); font-size: 0.75rem; }
 </style>

package/dist/primitives/widgets/ColorSwatch.svelte.test.js

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/svelte';
 import ColorSwatch from './ColorSwatch.svelte';
-vi.mock('../../shellRuntime.svelte', () => ({
-    shell: {
+vi.mock('../../sh3Runtime.svelte', () => ({
+    sh3: {
         color: {
             pick: vi.fn(async () => '#abcdef'),
         },
@@ -19,8 +19,8 @@ describe('ColorSwatch event contract', () => {
         expect(onchange).toHaveBeenCalledWith('#abcdef');
     });
     it('does not fire onchange when picker is cancelled (returns null)', async () => {
-        const { shell } = await import('../../shellRuntime.svelte');
-        shell.color.pick.mockResolvedValueOnce(null);
+        const { sh3 } = await import('../../sh3Runtime.svelte');
+        sh3.color.pick.mockResolvedValueOnce(null);
         const onchange = vi.fn();
         const { container } = render(ColorSwatch, { props: { value: '#000000', onchange } });
         const trigger = container.querySelector('.sh3-swatch__btn');

package/dist/primitives/widgets/Field.svelte

@@ -64,39 +64,39 @@
     display: inline-flex;
     flex-direction: column;
     gap: 4px;
-    font-family: var(--shell-font-ui);
+    font-family: var(--sh3-font-ui);
     font-size: 0.8125rem;
-    color: var(--shell-fg);
+    color: var(--sh3-fg);
   }
   .sh3-field__label {
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     font-size: 0.75rem;
   }
   .sh3-field__row {
     display: inline-flex;
     align-items: stretch;
-    background: var(--shell-input-bg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
-    height: var(--shell-field-height-md);
-    transition: border-color var(--shell-motion-fast) var(--shell-ease-standard),
-                box-shadow var(--shell-motion-fast) var(--shell-ease-standard);
+    background: var(--sh3-input-bg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
+    height: var(--sh3-field-height-md);
+    transition: border-color var(--sh3-motion-fast) var(--sh3-ease-standard),
+                box-shadow var(--sh3-motion-fast) var(--sh3-ease-standard);
   }
-  .sh3-field--sm .sh3-field__row { height: var(--shell-field-height-sm); }
+  .sh3-field--sm .sh3-field__row { height: var(--sh3-field-height-sm); }
   .sh3-field__row:focus-within {
-    border-color: var(--shell-input-border-focus);
-    box-shadow: var(--shell-focus-ring);
+    border-color: var(--sh3-input-border-focus);
+    box-shadow: var(--sh3-focus-ring);
   }
   .sh3-field--invalid .sh3-field__row {
-    border-color: var(--shell-error);
+    border-color: var(--sh3-error);
   }
   .sh3-field--invalid .sh3-field__row:focus-within {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-error) 40%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh3-error) 40%, transparent);
   }
   .sh3-field__input {
     flex: 1 1 auto;
     height: 100%;
-    padding: 0 var(--shell-field-pad-x);
+    padding: 0 var(--sh3-field-pad-x);
     background: transparent;
     border: none;
     color: inherit;
@@ -111,19 +111,19 @@
     box-shadow: none;
     border: none;
   }
-  .sh3-field__input:disabled { color: var(--shell-fg-muted); cursor: not-allowed; }
+  .sh3-field__input:disabled { color: var(--sh3-fg-muted); cursor: not-allowed; }
   .sh3-field__affix {
     display: inline-flex;
     align-items: center;
-    padding: 0 var(--shell-field-pad-x);
-    color: var(--shell-fg-muted);
+    padding: 0 var(--sh3-field-pad-x);
+    color: var(--sh3-fg-muted);
     flex-shrink: 0;
   }
   .sh3-field__affix:first-child { padding-right: 0; }
   .sh3-field__affix:last-child { padding-left: 0; }
   .sh3-field__helper {
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     font-size: 0.75rem;
   }
-  .sh3-field__helper--error { color: var(--shell-error); }
+  .sh3-field__helper--error { color: var(--sh3-error); }
 </style>

package/dist/primitives/widgets/FilePicker.svelte

@@ -47,17 +47,17 @@
   .sh3-fp {
     display: inline-flex;
     align-items: stretch;
-    height: var(--shell-field-height-md);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
-    background: var(--shell-input-bg);
+    height: var(--sh3-field-height-md);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
+    background: var(--sh3-input-bg);
     overflow: hidden;
     cursor: pointer;
     font-size: 0.8125rem;
   }
-  .sh3-fp--sm { height: var(--shell-field-height-sm); }
-  .sh3-fp--invalid { border-color: var(--shell-error); }
-  .sh3-fp:focus-within { box-shadow: var(--shell-focus-ring); border-color: var(--shell-input-border-focus); }
+  .sh3-fp--sm { height: var(--sh3-field-height-sm); }
+  .sh3-fp--invalid { border-color: var(--sh3-error); }
+  .sh3-fp:focus-within { box-shadow: var(--sh3-focus-ring); border-color: var(--sh3-input-border-focus); }
 
   .sh3-fp__native {
     position: absolute;
@@ -67,15 +67,15 @@
   }
   .sh3-fp__btn {
     display: inline-flex; align-items: center;
-    padding: 0 var(--shell-field-pad-x);
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
-    border-right: 1px solid var(--shell-border);
+    padding: 0 var(--sh3-field-pad-x);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    border-right: 1px solid var(--sh3-border);
   }
   .sh3-fp__name {
     display: inline-flex; align-items: center;
-    padding: 0 var(--shell-field-pad-x);
-    color: var(--shell-fg-muted);
+    padding: 0 var(--sh3-field-pad-x);
+    color: var(--sh3-fg-muted);
     flex: 1; min-width: 0;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }

package/dist/primitives/widgets/IconPicker.svelte

@@ -73,12 +73,12 @@
 
 <style>
   .sh3-icon-picker { display: flex; flex-direction: column; gap: 6px; }
-  .sh3-icon-picker__label { font-size: 13px; color: var(--shell-fg-muted); }
+  .sh3-icon-picker__label { font-size: 13px; color: var(--sh3-fg-muted); }
   .sh3-icon-picker input[type="search"] {
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm, 3px);
     padding: 6px 8px; font: inherit; font-size: 13px;
   }
   .sh3-icon-picker__grid {
@@ -88,26 +88,26 @@
     max-height: 220px;
     overflow-y: auto;
     padding: 4px;
-    background: var(--shell-bg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--sh3-bg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm, 3px);
   }
   .sh3-icon-picker__tile {
     aspect-ratio: 1 / 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
     border: 1px solid transparent;
-    border-radius: var(--shell-radius-sm, 3px);
+    border-radius: var(--sh3-radius-sm, 3px);
     cursor: pointer;
     padding: 0; font: inherit;
   }
-  .sh3-icon-picker__tile--none { font-size: 16px; color: var(--shell-fg-muted); }
-  .sh3-icon-picker__tile:hover { border-color: var(--shell-accent); }
+  .sh3-icon-picker__tile--none { font-size: 16px; color: var(--sh3-fg-muted); }
+  .sh3-icon-picker__tile:hover { border-color: var(--sh3-accent); }
   .sh3-icon-picker__tile--selected {
-    outline: 2px solid var(--shell-accent);
+    outline: 2px solid var(--sh3-accent);
     outline-offset: -2px;
   }
   .sh3-icon-picker__tile svg { width: 18px; height: 18px; }

package/dist/primitives/widgets/IconToggleGroup.svelte

@@ -54,39 +54,39 @@
 <style>
   .sh3-itg {
     display: inline-flex;
-    background: var(--shell-bg-sunken);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
+    background: var(--sh3-bg-sunken);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
     padding: 2px;
     gap: 2px;
   }
   .sh3-itg button {
     width: 26px; height: 26px;
     background: transparent;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     border: none;
-    border-radius: var(--shell-radius-sm);
+    border-radius: var(--sh3-radius-sm);
     cursor: pointer;
     display: inline-flex; align-items: center; justify-content: center;
     padding: 0;
-    transition: background var(--shell-motion-fast) var(--shell-ease-standard),
-                color var(--shell-motion-fast) var(--shell-ease-standard);
+    transition: background var(--sh3-motion-fast) var(--sh3-ease-standard),
+                color var(--sh3-motion-fast) var(--sh3-ease-standard);
   }
   .sh3-itg--sm button { width: 22px; height: 22px; }
   .sh3-itg button:hover:not(:disabled):not(.sh3-itg__btn--active) {
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
     filter: none;
   }
   /* Selector includes `.sh3-itg button` so specificity (0,2,1) beats the
      base `.sh3-itg button` rule (0,1,1) — otherwise `background: transparent`
-     and `color: var(--shell-fg-muted)` would shadow the accent fill. */
+     and `color: var(--sh3-fg-muted)` would shadow the accent fill. */
   .sh3-itg button.sh3-itg__btn--active {
-    background: var(--shell-accent);
-    color: var(--shell-fg-on-accent);
+    background: var(--sh3-accent);
+    color: var(--sh3-fg-on-accent);
     font-weight: 600;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 0 1px color-mix(in srgb, var(--shell-fg-on-accent) 25%, transparent);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 0 1px color-mix(in srgb, var(--sh3-fg-on-accent) 25%, transparent);
   }
-  .sh3-itg button:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); }
+  .sh3-itg button:focus-visible { outline: none; box-shadow: var(--sh3-focus-ring); }
   .sh3-itg button:disabled { opacity: 0.5; cursor: not-allowed; }
 </style>

package/dist/primitives/widgets/NumberInput.svelte

@@ -114,28 +114,28 @@
 
 <style>
   .sh3-num { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; }
-  .sh3-num__label { color: var(--shell-fg-muted); font-size: 0.75rem; }
+  .sh3-num__label { color: var(--sh3-fg-muted); font-size: 0.75rem; }
   .sh3-num__row {
     display: inline-flex;
     align-items: stretch;
-    background: var(--shell-input-bg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
-    height: var(--shell-field-height-md);
+    background: var(--sh3-input-bg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
+    height: var(--sh3-field-height-md);
   }
-  .sh3-num--sm .sh3-num__row { height: var(--shell-field-height-sm); }
+  .sh3-num--sm .sh3-num__row { height: var(--sh3-field-height-sm); }
   .sh3-num__row:focus-within {
-    border-color: var(--shell-input-border-focus);
-    box-shadow: var(--shell-focus-ring);
+    border-color: var(--sh3-input-border-focus);
+    box-shadow: var(--sh3-focus-ring);
   }
-  .sh3-num--invalid .sh3-num__row { border-color: var(--shell-error); }
+  .sh3-num--invalid .sh3-num__row { border-color: var(--sh3-error); }
   .sh3-num__input {
     flex: 1 1 auto;
     min-width: 50px;
-    padding: 0 var(--shell-field-pad-x);
+    padding: 0 var(--sh3-field-pad-x);
     background: transparent;
     border: none;
-    color: var(--shell-fg);
+    color: var(--sh3-fg);
     font: inherit;
     outline: none;
     -moz-appearance: textfield;
@@ -157,18 +157,18 @@
     display: inline-flex;
     align-items: center;
     padding: 0 6px;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
   }
   .sh3-num__steppers {
     display: inline-flex;
     flex-direction: column;
-    border-left: 1px solid var(--shell-border);
+    border-left: 1px solid var(--sh3-border);
   }
   .sh3-num__steppers button {
     flex: 1;
     width: 18px;
     background: transparent;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     border: none;
     border-radius: 0;
     padding: 0;
@@ -177,10 +177,10 @@
     line-height: 1;
   }
   .sh3-num__steppers button:hover:not(:disabled) {
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
     filter: none;
   }
   .sh3-num__steppers button:disabled { cursor: not-allowed; opacity: 0.5; }
-  .sh3-num__steppers button + button { border-top: 1px solid var(--shell-border); }
+  .sh3-num__steppers button + button { border-top: 1px solid var(--sh3-border); }
 </style>