sh3-core 0.15.3 → 0.16.0

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>

package/dist/primitives/widgets/PickerList.svelte

@@ -88,18 +88,18 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-sm, 3px);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm, 3px);
     padding: 6px;
-    background: var(--shell-bg-elevated);
+    background: var(--sh3-bg-elevated);
   }
   .sh3-picker__search {
     width: 100%;
     padding: 4px 6px;
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-sm, 3px);
-    background: var(--shell-bg);
-    color: var(--shell-fg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm, 3px);
+    background: var(--sh3-bg);
+    color: var(--sh3-fg);
     font: inherit;
     font-size: 12px;
   }
@@ -115,26 +115,26 @@
     gap: 8px;
     padding: 4px 6px;
     cursor: pointer;
-    border-radius: var(--shell-radius-sm, 3px);
+    border-radius: var(--sh3-radius-sm, 3px);
   }
-  .sh3-picker__row:hover { background: var(--shell-bg); }
+  .sh3-picker__row:hover { background: var(--sh3-bg); }
   .sh3-picker__row-text { display: flex; flex-direction: column; gap: 0; }
   .sh3-picker__row-label { font-size: 13px; }
-  .sh3-picker__row-sub { font-size: 11px; color: var(--shell-fg-muted); }
+  .sh3-picker__row-sub { font-size: 11px; color: var(--sh3-fg-muted); }
   .sh3-picker__status {
     margin: 0;
     padding: 8px 6px;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     font-size: 12px;
   }
-  .sh3-picker__status--error { color: var(--shell-error, #c33); }
+  .sh3-picker__status--error { color: var(--sh3-error, #c33); }
   .sh3-picker__retry {
     align-self: flex-start;
     margin: 0 6px 8px;
-    background: var(--shell-bg);
-    color: var(--shell-fg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--sh3-bg);
+    color: var(--sh3-fg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius-sm, 3px);
     padding: 2px 8px;
     font: inherit;
     font-size: 12px;
@@ -143,7 +143,7 @@
   .sh3-picker__footer {
     margin: 0;
     font-size: 11px;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     text-align: right;
   }
   .sh3-picker--disabled .sh3-picker__row { cursor: not-allowed; opacity: 0.6; }

package/dist/primitives/widgets/RangeSlider.svelte

@@ -66,16 +66,16 @@
     top: 50%; left: 0; right: 0;
     height: 4px;
     transform: translateY(-50%);
-    background: var(--shell-track-bg);
-    border: 1px solid var(--shell-track-border);
-    border-radius: var(--shell-widget-radius-pill);
+    background: var(--sh3-track-bg);
+    border: 1px solid var(--sh3-track-border);
+    border-radius: var(--sh3-widget-radius-pill);
   }
   .sh3-range__fill {
     position: absolute;
     top: 0; bottom: 0;
     left: var(--lo);
     width: calc(var(--hi) - var(--lo));
-    background: var(--shell-track-fill);
+    background: var(--sh3-track-fill);
     border-radius: inherit;
   }
   .sh3-range__native {
@@ -95,9 +95,9 @@
     -webkit-appearance: none;
     width: var(--thumb-size); height: var(--thumb-size);
     border-radius: 50%;
-    background: var(--shell-thumb-bg);
-    border: 2px solid var(--shell-thumb-border);
-    box-shadow: var(--shell-thumb-shadow);
+    background: var(--sh3-thumb-bg);
+    border: 2px solid var(--sh3-thumb-border);
+    box-shadow: var(--sh3-thumb-shadow);
     pointer-events: auto;
     cursor: pointer;
     opacity: 1;
@@ -105,31 +105,31 @@
   .sh3-range__native::-moz-range-thumb {
     width: var(--thumb-size); height: var(--thumb-size);
     border-radius: 50%;
-    background: var(--shell-thumb-bg);
-    border: 2px solid var(--shell-thumb-border);
-    box-shadow: var(--shell-thumb-shadow);
+    background: var(--sh3-thumb-bg);
+    border: 2px solid var(--sh3-thumb-border);
+    box-shadow: var(--sh3-thumb-shadow);
     pointer-events: auto;
     cursor: pointer;
     opacity: 1;
   }
   .sh3-range__native:disabled::-webkit-slider-thumb {
-    background: var(--shell-fg-subtle);
-    border-color: var(--shell-border-strong);
+    background: var(--sh3-fg-subtle);
+    border-color: var(--sh3-border-strong);
     cursor: not-allowed;
     opacity: 1;
   }
   .sh3-range__native:disabled::-moz-range-thumb {
-    background: var(--shell-fg-subtle);
-    border-color: var(--shell-border-strong);
+    background: var(--sh3-fg-subtle);
+    border-color: var(--sh3-border-strong);
     cursor: not-allowed;
     opacity: 1;
   }
   .sh3-range:has(.sh3-range__native:disabled) .sh3-range__fill {
-    background: var(--shell-border-strong);
+    background: var(--sh3-border-strong);
   }
   .sh3-range__native::-webkit-slider-runnable-track,
   .sh3-range__native::-moz-range-track {
     background: transparent;
   }
-  .sh3-range--invalid .sh3-range__track { border-color: var(--shell-error); }
+  .sh3-range--invalid .sh3-range__track { border-color: var(--sh3-error); }
 </style>

package/dist/primitives/widgets/Segmented.svelte

@@ -52,41 +52,41 @@
 <style>
   .sh3-seg {
     display: inline-flex;
-    background: var(--shell-bg-sunken);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius-pill);
+    background: var(--sh3-bg-sunken);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius-pill);
     padding: 2px;
-    height: var(--shell-field-height-md);
+    height: var(--sh3-field-height-md);
     gap: 0;
   }
-  .sh3-seg--sm { height: var(--shell-field-height-sm); }
+  .sh3-seg--sm { height: var(--sh3-field-height-sm); }
   .sh3-seg button {
     background: transparent;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     border: none;
-    padding: 0 var(--shell-field-pad-x);
-    border-radius: var(--shell-widget-radius-pill);
+    padding: 0 var(--sh3-field-pad-x);
+    border-radius: var(--sh3-widget-radius-pill);
     font-size: 0.8125rem;
     cursor: pointer;
-    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-seg button:hover:not(:disabled):not(.sh3-seg__btn--active) {
-    color: var(--shell-fg);
+    color: var(--sh3-fg);
     filter: none;
   }
   /* Selector includes `.sh3-seg button` so specificity (0,2,1) beats the
      base `.sh3-seg 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-seg button.sh3-seg__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-seg button:disabled { opacity: 0.5; cursor: not-allowed; }
   .sh3-seg button:focus-visible {
     outline: none;
-    box-shadow: var(--shell-focus-ring);
+    box-shadow: var(--sh3-focus-ring);
   }
 </style>

package/dist/primitives/widgets/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import type { CommitOnlyEvents } from './_contract';
-  import { shell } from '../../shellRuntime.svelte';
+  import { sh3 } from '../../sh3Runtime.svelte';
   import Listbox from './_select-listbox.svelte';
   import { type SelectOption, resolveValueLabel, toggleMulti } from './Select';
 
@@ -40,7 +40,7 @@
   async function open() {
     if (disabled || isOpen || !trigger) return;
     isOpen = true;
-    const popupHandle = shell.popup.show(
+    const popupHandle = sh3.popup.show(
       Listbox,
       { anchor: trigger },
       {
@@ -136,27 +136,27 @@
 
 <style>
   .sh3-select { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; position: relative; }
-  .sh3-select__label { color: var(--shell-fg-muted); font-size: 0.75rem; }
+  .sh3-select__label { color: var(--sh3-fg-muted); font-size: 0.75rem; }
   .sh3-select__btn {
     display: inline-flex; align-items: center; gap: 8px;
-    height: var(--shell-field-height-md);
+    height: var(--sh3-field-height-md);
     min-width: 140px;
-    padding: 0 var(--shell-field-pad-x);
-    background: var(--shell-input-bg);
-    color: var(--shell-fg);
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-widget-radius);
+    padding: 0 var(--sh3-field-pad-x);
+    background: var(--sh3-input-bg);
+    color: var(--sh3-fg);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-widget-radius);
     cursor: pointer;
     font: inherit;
     text-align: left;
   }
-  .sh3-select--sm .sh3-select__btn { height: var(--shell-field-height-sm); }
-  .sh3-select__btn:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); border-color: var(--shell-input-border-focus); }
+  .sh3-select--sm .sh3-select__btn { height: var(--sh3-field-height-sm); }
+  .sh3-select__btn:focus-visible { outline: none; box-shadow: var(--sh3-focus-ring); border-color: var(--sh3-input-border-focus); }
   .sh3-select__btn:disabled { opacity: 0.55; cursor: not-allowed; }
-  .sh3-select--invalid .sh3-select__btn { border-color: var(--shell-error); }
+  .sh3-select--invalid .sh3-select__btn { border-color: var(--sh3-error); }
   .sh3-select__display { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .sh3-select__display--placeholder { color: var(--shell-fg-muted); }
-  .sh3-select__chevron { color: var(--shell-fg-muted); }
+  .sh3-select__display--placeholder { color: var(--sh3-fg-muted); }
+  .sh3-select__chevron { color: var(--sh3-fg-muted); }
   .sh3-select__native {
     position: absolute;
     width: 1px; height: 1px;