sh3-core 0.15.3 → 0.16.0

package/dist/overlays/parentHost.test.js

@@ -4,9 +4,9 @@ afterEach(() => {
     document.body.innerHTML = '';
 });
 describe('findEnclosingOverlayHost', () => {
-    it('returns the nearest ancestor with data-shell-overlay-host', () => {
+    it('returns the nearest ancestor with data-sh3-overlay-host', () => {
         const host = document.createElement('div');
-        host.dataset.shellOverlayHost = 'modal';
+        host.dataset.sh3OverlayHost = 'modal';
         const inner = document.createElement('div');
         const anchor = document.createElement('button');
         inner.appendChild(anchor);
@@ -16,7 +16,7 @@ describe('findEnclosingOverlayHost', () => {
     });
     it('returns the anchor itself when it carries the marker', () => {
         const anchor = document.createElement('div');
-        anchor.dataset.shellOverlayHost = 'float';
+        anchor.dataset.sh3OverlayHost = 'float';
         document.body.appendChild(anchor);
         expect(findEnclosingOverlayHost(anchor)).toBe(anchor);
     });
@@ -27,9 +27,9 @@ describe('findEnclosingOverlayHost', () => {
     });
     it('returns the innermost host when overlay hosts are nested', () => {
         const outer = document.createElement('div');
-        outer.dataset.shellOverlayHost = 'modal';
+        outer.dataset.sh3OverlayHost = 'modal';
         const inner = document.createElement('div');
-        inner.dataset.shellOverlayHost = 'float';
+        inner.dataset.sh3OverlayHost = 'float';
         const anchor = document.createElement('button');
         inner.appendChild(anchor);
         outer.appendChild(inner);

package/dist/overlays/popup.js

@@ -15,7 +15,7 @@
  * Implementation notes:
  *   - The manager keeps at most one active entry. show() closes any
  *     prior entry before opening a new one — so callers can wire a
- *     menu button to `shell.popup.show(...)` without worrying about
+ *     menu button to `sh3.popup.show(...)` without worrying about
  *     toggling themselves.
  *   - Dismissal listeners (pointerdown for outside-click, keydown for
  *     Escape) are installed when the popup opens and removed on close.
@@ -83,7 +83,7 @@ function showPopup(Content, options, props) {
     const root = getLayerRoot('popup');
     const host = document.createElement('div');
     host.className = 'sh3-popup-host';
-    host.dataset.shellOverlayHost = 'popup';
+    host.dataset.sh3OverlayHost = 'popup';
     host.style.position = 'absolute';
     host.style.inset = '0';
     host.style.pointerEvents = 'none'; // only the frame captures pointer events

package/dist/overlays/popup.test.js

@@ -138,10 +138,10 @@ describe('popup — overlay host marker', () => {
         teardownLayerRoot(layerRoot);
         vi.unstubAllGlobals();
     });
-    it('marks the popup host with data-shell-overlay-host="popup"', () => {
+    it('marks the popup host with data-sh3-overlay-host="popup"', () => {
         popupManager.show(DummyFrame, { anchor: { x: 100, y: 100 } }, {});
         const host = layerRoot.querySelector('.sh3-popup-host');
         expect(host).not.toBeNull();
-        expect(host.dataset.shellOverlayHost).toBe('popup');
+        expect(host.dataset.sh3OverlayHost).toBe('popup');
     });
 });

package/dist/overlays/roots.js

@@ -1,14 +1,14 @@
 /*
  * Layer root registry.
  *
- * Shell.svelte owns the six overlay root <div>s (one per layer). Overlay
+ * Sh3.svelte owns the six overlay root <div>s (one per layer). Overlay
  * managers — which are plain TypeScript modules, not Svelte components —
  * need DOM references to those roots so they can append transient content
  * (modals, popups, toasts) into the correct stacking context.
  *
- * Shell.svelte calls `registerLayerRoot(name, el)` on each root during its
+ * Sh3.svelte calls `registerLayerRoot(name, el)` on each root during its
  * own mount effect. Managers call `getLayerRoot(name)` lazily the first
- * time they need to open something, which is always *after* Shell has
+ * time they need to open something, which is always *after* Sh3 has
  * rendered because overlay triggers originate from views mounted into the
  * layout tree. No race; no DOM queries.
  *
@@ -25,7 +25,7 @@ export function getLayerRoot(layer) {
     const el = roots[layer];
     if (!el) {
         throw new Error(`Overlay layer "${layer}" root is not registered — ` +
-            `Shell.svelte must mount before opening overlays on this layer.`);
+            `Sh3.svelte must mount before opening overlays on this layer.`);
     }
     return el;
 }

package/dist/overlays/toast.js

@@ -6,7 +6,7 @@
  *   toastManager.clear()
  *
  * Semantics (from docs/design/layout.md):
- *   - Toasts queue and stack vertically at the bottom-right of the shell.
+ *   - Toasts queue and stack vertically at the bottom-right of the sh3.
  *   - Each toast auto-dismisses after `duration` ms (default 3000).
  *     `duration: Infinity` pins the toast until the caller calls close().
  *   - Clicking a toast dismisses it immediately.

package/dist/overlays/types.js

@@ -5,11 +5,11 @@
  * above the docked layout in an explicit numbered stack (0 = docked,
  * 1 = floating, 2 = drag preview, 3 = popup, 4 = modal, 5 = toast,
  * 6 = command palette). Phase 5 wires up layers 3/4/5; the rest are
- * stubbed as DOM roots in Shell.svelte but have no managers yet.
+ * stubbed as DOM roots in Sh3.svelte but have no managers yet.
  *
  * No component in the codebase writes a z-index directly — the only
- * z-index values live on the overlay root divs in Shell.svelte driven
- * by the --shell-z-layer-N tokens. Overlay content is appended into the
+ * z-index values live on the overlay root divs in Sh3.svelte driven
+ * by the --sh3-z-layer-N tokens. Overlay content is appended into the
  * corresponding layer root and inherits its stacking context.
  */
 export {};

package/dist/primitives/Button.svelte

@@ -112,21 +112,21 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--shell-pad-sm);
+    gap: var(--sh3-pad-sm);
     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);
   }
   .sh3-btn:hover:not(:disabled) { filter: brightness(1.12); }
   .sh3-btn:active:not(:disabled) { filter: brightness(0.92); }
   .sh3-btn:focus-visible {
-    box-shadow: var(--shell-focus-ring);
+    box-shadow: var(--sh3-focus-ring);
     outline: none;
   }
   .sh3-btn:disabled {
@@ -135,33 +135,33 @@
   }
 
   .sh3-btn--alert {
-    background: var(--shell-error);
-    color: var(--shell-fg-on-error);
+    background: var(--sh3-error);
+    color: var(--sh3-fg-on-error);
   }
 
   .sh3-btn--ghost {
     background: transparent;
-    color: var(--shell-fg);
-    border: 1px solid var(--shell-border);
+    color: var(--sh3-fg);
+    border: 1px solid var(--sh3-border);
   }
   .sh3-btn--ghost:hover:not(:disabled) {
-    background: var(--shell-bg-elevated);
+    background: var(--sh3-bg-elevated);
     filter: none;
   }
 
   .sh3-btn--icon {
     background: transparent;
-    color: var(--shell-fg-muted);
-    padding: var(--shell-pad-sm);
+    color: var(--sh3-fg-muted);
+    padding: var(--sh3-pad-sm);
   }
   .sh3-btn--icon:hover:not(:disabled) {
-    background: var(--shell-bg-elevated);
-    color: var(--shell-fg);
+    background: var(--sh3-bg-elevated);
+    color: var(--sh3-fg);
     filter: none;
   }
 
   .sh3-btn--icon-only {
-    padding: var(--shell-pad-sm);
+    padding: var(--sh3-pad-sm);
     width: 26px;
     height: 26px;
   }

package/dist/primitives/Collapsible.svelte

@@ -65,8 +65,8 @@
 
 <style>
   .sh3-collapsible {
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius);
+    border: 1px solid var(--sh3-border);
+    border-radius: var(--sh3-radius);
     background: transparent;
   }
   .sh3-collapsible__head {
@@ -74,28 +74,28 @@
     width: 100%;
     display: inline-flex;
     align-items: center;
-    gap: var(--shell-pad-sm);
-    padding: var(--shell-pad-sm) 12px;
+    gap: var(--sh3-pad-sm);
+    padding: var(--sh3-pad-sm) 12px;
     background: transparent;
-    color: var(--shell-fg);
+    color: var(--sh3-fg);
     border: none;
     border-radius: inherit;
     cursor: pointer;
     font-family: inherit;
     font-size: 0.875rem;
-    line-height: var(--shell-line);
+    line-height: var(--sh3-line);
     text-align: left;
   }
-  .sh3-collapsible__head:hover { background: var(--shell-bg-elevated); }
+  .sh3-collapsible__head:hover { background: var(--sh3-bg-elevated); }
   .sh3-collapsible__head:focus-visible {
-    box-shadow: var(--shell-focus-ring);
+    box-shadow: var(--sh3-focus-ring);
     outline: none;
   }
   .sh3-collapsible__caret {
     width: 12px;
     height: 12px;
     flex-shrink: 0;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
   }
   .sh3-collapsible--open .sh3-collapsible__caret {
     transform: rotate(90deg);
@@ -104,7 +104,7 @@
     flex: 1;
   }
   .sh3-collapsible__body {
-    padding: var(--shell-pad-sm) 12px;
-    border-top: 1px solid var(--shell-border);
+    padding: var(--sh3-pad-sm) 12px;
+    border-top: 1px solid var(--sh3-border);
   }
 </style>

package/dist/primitives/ResizableSplitter.svelte

@@ -295,16 +295,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    background: var(--sh3-grad-bg-elevated, var(--sh3-bg-elevated));
     border: none;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     cursor: pointer;
     padding: 0;
     font-size: 10px;
   }
   .collapse-header:hover {
-    color: var(--shell-fg);
-    background: var(--shell-accent-muted);
+    color: var(--sh3-fg);
+    background: var(--sh3-accent-muted);
   }
   /* Suppress misleading hover feedback during drag-reorganize. */
   :global(body[data-dragging]) .collapse-header {
@@ -322,23 +322,23 @@
   .collapse-header.expanded.horizontal {
     width: 16px;
     height: 100%;
-    border-right: 1px solid var(--shell-border);
+    border-right: 1px solid var(--sh3-border);
   }
   .collapse-header.expanded.vertical {
     width: 100%;
     height: 16px;
-    border-bottom: 1px solid var(--shell-border);
+    border-bottom: 1px solid var(--sh3-border);
   }
 
   .splitter-handle {
     flex: 0 0 auto;
-    background: var(--shell-border);
+    background: var(--sh3-border);
     transition: background-color 120ms ease;
     touch-action: none;
   }
   .splitter-handle:hover,
   .splitter-handle.dragging {
-    background: var(--shell-accent);
+    background: var(--sh3-accent);
   }
   :global(body[data-dragging]) .splitter-handle {
     pointer-events: none;
@@ -350,11 +350,11 @@
   .splitter-handle.frozen {
     cursor: default;
     pointer-events: none;
-    background: var(--shell-border);
+    background: var(--sh3-border);
     opacity: 0.5;
   }
   .splitter-handle.frozen:hover {
-    background: var(--shell-border);
+    background: var(--sh3-border);
   }
 
   .horizontal > .splitter-handle {

package/dist/primitives/TabbedPanel.svelte

@@ -210,7 +210,7 @@
     height: 100%;
     min-width: 0;
     min-height: 0;
-    background: var(--shell-grad-bg, var(--shell-bg));
+    background: var(--sh3-grad-bg, var(--sh3-bg));
   }
 
   .tab-strip {
@@ -218,9 +218,9 @@
     flex: 0 0 auto;
     display: flex;
     gap: 1px;
-    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
-    border-bottom: 1px solid var(--shell-border);
-    padding: 0 var(--shell-pad-sm);
+    background: var(--sh3-grad-bg-sunken, var(--sh3-bg-sunken));
+    border-bottom: 1px solid var(--sh3-border);
+    padding: 0 var(--sh3-pad-sm);
     user-select: none;
   }
 
@@ -228,14 +228,14 @@
     appearance: none;
     background: transparent;
     border: none;
-    color: var(--shell-fg-muted);
+    color: var(--sh3-fg-muted);
     font: inherit;
     font-size: 12px;
-    padding: var(--shell-pad-sm) var(--shell-pad-md);
+    padding: var(--sh3-pad-sm) var(--sh3-pad-md);
     margin-top: 2px;
     display: inline-flex;
     align-items: center;
-    gap: var(--shell-pad-sm);
+    gap: var(--sh3-pad-sm);
     cursor: pointer;
     border-top: 2px solid transparent;
     border-radius: 2px 2px 0 0;
@@ -246,13 +246,13 @@
     touch-action: none;
   }
   .tab:hover {
-    color: var(--shell-fg);
-    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    color: var(--sh3-fg);
+    background: var(--sh3-grad-bg-elevated, var(--sh3-bg-elevated));
   }
   .tab.active {
-    color: var(--shell-fg);
-    background: var(--shell-grad-bg, var(--shell-bg));
-    border-top-color: var(--shell-accent);
+    color: var(--sh3-fg);
+    background: var(--sh3-grad-bg, var(--sh3-bg));
+    border-top-color: var(--sh3-accent);
   }
   .tab-icon { font-size: 11px; }
   .tab-label { white-space: nowrap; }
@@ -261,7 +261,7 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: var(--shell-accent);
+    background: var(--sh3-accent);
     flex-shrink: 0;
   }
   .tab-close {
@@ -269,22 +269,22 @@
     font-size: 10px;
     line-height: 1;
     padding: 2px;
-    border-radius: var(--shell-radius-sm);
-    color: var(--shell-fg-muted);
+    border-radius: var(--sh3-radius-sm);
+    color: var(--sh3-fg-muted);
     cursor: pointer;
     flex-shrink: 0;
     margin-left: auto;
   }
   .tab-close:hover {
-    color: var(--shell-fg);
-    background: var(--shell-bg-sunken);
+    color: var(--sh3-fg);
+    background: var(--sh3-bg-sunken);
   }
 
   .drop-indicator {
     position: absolute;
     width: 2px;
-    background: var(--shell-accent);
-    box-shadow: 0 0 6px var(--shell-accent);
+    background: var(--sh3-accent);
+    box-shadow: 0 0 6px var(--sh3-accent);
     pointer-events: none;
     border-radius: 1px;
   }

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;
 }