sol-components 2.1.0

package/web/styles/sol-include-css.js

@@ -0,0 +1,95 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  :host {
+    /* flex column so sol-include propagates a definite height from a
+       flex parent (sol-menu's content area, dk's app-shell, etc.)
+       down to its slotted content — components placed inside (sol-pod,
+       sol-menu, etc.) can then fill and scroll on their own. In a
+       block-flow parent this still behaves like a block-level box,
+       just with flex internals — no visible change. */
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    color: var(--text, #212121);
+    font-family: var(--font-ui, system-ui, sans-serif);
+    font-size: var(--font-size, var(--medium-font, 20px));
+  }
+  /* The .si-content wrapper. In untrusted mode it's a shadow-DOM
+     child of sol-include; in trusted mode it's a slotted light-DOM
+     child. Style both forms — the bare selector matches in shadow,
+     ::slotted reaches it through the <slot>. Without this rule for
+     the slotted case, page content inside (e.g. sol-pod via help
+     demos) loses its height anchor and collapses to zero. */
+  .si-content,
+  ::slotted(.si-content) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+  .si-raw {
+    white-space: pre-wrap;
+    font-family: var(--font-mono, monospace);
+    font-size: var(--small-font, 16px);
+    background: var(--code-bg, #f4f4f4);
+    color: var(--text, #212121);
+    padding: var(--space-xl, 16px);
+    border-radius: var(--radius-sm, 4px);
+    overflow-x: auto;
+  }
+  .si-loading { color: var(--text-muted, #666); padding: var(--space-lg, 12px); font-style: italic; }
+  .si-empty   { color: var(--text-muted, #888); padding: var(--space-lg, 12px); font-style: italic; }
+  .si-error {
+    color: var(--error, #c00);
+    padding: var(--space-lg, 12px) var(--space-xl, 16px);
+    background: color-mix(in srgb, var(--error, #e74c3c) 12%, transparent);
+    border: 1px solid var(--error, #fcc);
+    border-radius: var(--radius-sm, 4px);
+  }
+
+  .si-content h1, .si-content h2, .si-content h3,
+  .si-content h4, .si-content h5, .si-content h6 {
+    margin: 1.1em 0 .4em; line-height: var(--line-height-tight, 1.25);
+  }
+  .si-content p { margin: 0 0 .75em; }
+  .si-content ul, .si-content ol { margin: 0 0 .75em 1.5em; }
+  .si-content li { margin: .2em 0; }
+  .si-content pre {
+    background: var(--include-code-bg, var(--code-bg, #f4f4f4));
+    padding: var(--include-pre-padding, var(--space-lg, 12px));
+    border-radius: var(--radius-sm, 4px);
+    overflow-x: auto;
+  }
+  .si-content code {
+    background: var(--include-code-bg, var(--code-bg, #f0f0f0));
+    padding: var(--include-code-padding, .1em .3em);
+    border-radius: var(--radius-sm, 4px);
+    font-size: var(--small-font, 16px);
+    font-family: var(--font-mono, monospace);
+  }
+  .si-content pre code { background: none; padding: 0; }
+  .si-content blockquote {
+    border-left: 3px solid var(--include-blockquote-border, var(--border, #ccc));
+    margin: 0 0 .75em 0;
+    padding: .25em 1em;
+    color: var(--include-blockquote-color, var(--text-muted, #555));
+  }
+  .si-content a { color: var(--accent, #0066cc); }
+  .si-content a:hover { text-decoration: underline; }
+  .si-content a:focus-visible {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: 2px;
+  }
+  .si-content img { max-width: 100%; }
+  .si-content table { border-collapse: collapse; margin-bottom: .75em; }
+  .si-content th, .si-content td {
+    border: 1px solid var(--border, #ddd);
+    padding: .3em .6em;
+  }
+  .si-content th { background: var(--hover, #f5f5f5); }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-live-edit-css.js

@@ -0,0 +1,84 @@
+// Styles for <sol-live-edit> shadow DOM.
+// Uses CSS custom properties so the host page's theme (podz or standalone)
+// flows through.
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+:host{display:flex;flex-direction:column;overflow:hidden;font-family:inherit;position:relative}
+.er{padding:.5em 1em;background:#fff0f0;border-bottom:1px solid #f5c6cb;color:#c0392b;font-size:.82em;display:none;flex-shrink:0}
+.er.on{display:block}
+
+.cf{display:none;position:absolute;top:34px;right:0;z-index:20;
+    min-width:180px;padding:10px 14px;
+    background:var(--surface,#fff);border:1px solid var(--border,#ccc);
+    border-radius:0 0 0 8px;box-shadow:0 4px 16px rgba(0,0,0,.15);
+    flex-direction:column;gap:10px;font-size:.82em}
+.cf.on{display:flex}
+.cg{display:flex;flex-direction:column;gap:4px}
+.cg b{font-weight:700;color:var(--text,#333);margin-bottom:2px;font-size:.9em}
+.cg label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text,#222);padding:1px 0}
+.cg input[type=radio]{margin:0;cursor:pointer;accent-color:var(--accent,#4a9eff)}
+
+.modal-backdrop{display:none;position:absolute;inset:0;z-index:30;
+    background:rgba(0,0,0,.35);align-items:center;justify-content:center}
+.modal-backdrop.on{display:flex}
+.modal-box{background:var(--surface,#fff);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.25);
+    max-width:90%;max-height:85%;width:600px;overflow-y:auto;position:relative;padding:1.2rem 1.5rem 1.5rem}
+.modal-box.wide{width:800px}
+.modal-close{position:absolute;top:8px;right:12px;border:none;background:none;
+    font-size:1.3em;cursor:pointer;color:var(--text-muted,#888);line-height:1;padding:4px}
+.modal-close:hover{color:var(--text,#333)}
+
+.modal-box h2{margin:.2em 0 .7em;font-size:1.05em}
+.modal-box h3{margin:.9em 0 .25em;font-size:.92em;color:var(--accent,#4a9eff)}
+.modal-box h4{margin:.5em 0 .12em;font-size:.86em}
+.modal-box p{margin:.15em 0 .4em;font-size:.84em;color:var(--text-muted,#555)}
+.modal-box code{display:block;white-space:pre;overflow-x:auto;font-size:.8em;
+    background:var(--code-bg,#f4f4f4);padding:.4em .7em;border-radius:4px;
+    border:1px solid var(--border,#ddd);margin:.15em 0 .5em}
+
+.modal-box .sc{display:inline-block;vertical-align:top;margin:.4rem;padding:.4rem .7rem;
+    border:1px solid var(--border,#ddd);border-radius:6px}
+.modal-box .sc h3{margin:0 0 .25em;font-size:.86em}
+.modal-box .stat-table td{padding:2px 8px;font-size:.8em}
+
+.body{display:flex;flex:1;overflow:hidden}
+.ep{flex:1;display:flex;flex-direction:column;overflow:hidden}
+.pp{flex:1;overflow:auto;position:relative;display:flex;justify-content:safe center;align-items:safe center}
+
+/* Resizer — draggable divider between the editor and preview panes. */
+.sle-resizer{flex:0 0 6px;align-self:stretch;cursor:col-resize;
+    background:var(--border,#ccc);touch-action:none}
+.sle-resizer:hover,.sle-resizer.dragging{background:var(--accent,#4a9eff)}
+.pp>#po{flex-shrink:0}
+.pp .sle-md-preview{padding:1rem}
+
+.csv-tbl{width:100%;border-collapse:collapse;font-size:.88em}
+.csv-tbl th{padding:7px 10px;text-align:left;background:var(--text,#222);color:var(--surface,#fff);font-weight:600;position:sticky;top:0;z-index:1}
+.csv-tbl td{padding:5px 10px;border-bottom:1px solid var(--border,#eee)}
+.csv-tbl tr:nth-child(even) td{background:var(--hover,#f4f4f4)}
+
+/* Toolbar — Save / Settings / Help / Zoom / Statistics, right-aligned. */
+.sle-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:6px;
+    flex-shrink:0;padding:4px 8px;border-bottom:1px solid var(--border,#ccc);
+    background:var(--surface,#fff)}
+.sle-btn{border:1px solid var(--border,#ccc);background:var(--surface,#fff);
+    color:var(--text,#333);cursor:pointer;font:inherit;font-size:.82em;
+    padding:3px 10px;border-radius:5px;line-height:1.5}
+.sle-btn:hover{background:var(--hover,#f0f0f0)}
+.sle-btn[hidden]{display:none}
+.sle-btn-primary{background:var(--accent,#4a9eff);border-color:var(--accent,#4a9eff);color:#fff}
+.sle-btn-primary:hover{background:var(--accent,#4a9eff);filter:brightness(1.08)}
+/* Zoom control — sits in the toolbar; shown only for zoomable formats. */
+.sle-zoom{display:flex;align-items:center;gap:2px}
+.sle-zoom[hidden]{display:none}
+.sle-zoom button{border:1px solid var(--border,#ccc);background:var(--surface,#fff);
+    cursor:pointer;color:var(--text,#333);font-size:1em;line-height:1;
+    padding:3px 9px;border-radius:5px}
+.sle-zoom button:hover{background:var(--hover,#f0f0f0)}
+.sle-zoom span{min-width:3.4em;text-align:center;color:var(--text-muted,#555);
+    font-size:.82em;font-variant-numeric:tabular-nums}
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-live-edit.css

@@ -0,0 +1,101 @@
+/* Live-editor standalone page styles.
+   Maps live-ed theme vars to the CSS var names that sol-live-edit (and podz) use. */
+
+:root {
+  --bg: #f5f5f5;
+  --surface: #ffffff;
+  --border: #d0d0d0;
+  --text: #2c3e50;
+  --text-muted: #7f8c8d;
+  --accent: #3498db;
+  --accent-dark: #2980b9;
+  --hover: #eaf2fb;
+  --focus-bg: #ebf5fb;
+  --code-bg: #f4f4f4;
+  --error: #e74c3c;
+  --success: #27ae60;
+  --shadow: rgba(0,0,0,0.08);
+
+  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #1a1a1a;
+    --surface: #252525;
+    --border: #3e3e3e;
+    --text: #e0e0e0;
+    --text-muted: #909090;
+    --hover: #2e2e2e;
+    --focus-bg: #2a2e34;
+    --code-bg: #1e1e1e;
+    --accent: #4dabf7;
+    --accent-dark: #339af0;
+  }
+}
+[data-theme="dark"] {
+  --bg: #1a1a1a;
+  --surface: #252525;
+  --border: #3e3e3e;
+  --text: #e0e0e0;
+  --text-muted: #909090;
+  --hover: #2e2e2e;
+  --focus-bg: #2a2e34;
+  --code-bg: #1e1e1e;
+  --accent: #4dabf7;
+  --accent-dark: #339af0;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0; padding: 0; height: 100%;
+  font-family: var(--font-ui);
+  background: var(--bg);
+  color: var(--text);
+}
+
+body { display: flex; flex-direction: column; }
+
+header {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+header h1 { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
+
+/* Header buttons use .sol-btn .sol-btn-sm / .sol-btn-primary — see buttons-css.js. */
+.sol-btn {
+  font: inherit;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.35em 0.8em;
+  line-height: 1.2;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.sol-btn:hover { background: var(--hover); border-color: var(--accent); }
+.sol-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.sol-btn[disabled], .sol-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.sol-btn-sm { padding: 3px 10px; font-size: 0.82em; }
+.sol-btn-primary {
+  background: var(--accent); color: #fff; border-color: var(--accent);
+}
+.sol-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
+.sol-btn-ghost {
+  background: transparent; border-color: transparent; color: var(--text-muted);
+}
+.sol-btn-ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }
+
+.theme-toggle { font-size: 1.1em; padding: 3px 7px; }
+
+sol-live-edit { flex: 1; overflow: hidden; min-height: 0; }
+
+.hdr-zoom { font-size: 0.82em; color: var(--text-muted); min-width: 3em; text-align: center; }

package/web/styles/sol-login-css.js

@@ -0,0 +1,116 @@
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  /* Hidden by default. Frames embed sol-login for the auth-needed
+     listener side-effect; the element surfaces UI only when an auth
+     prompt is actively in flight (host gains the 'active' attribute)
+     so callers do not need to allocate chrome space for a permanent
+     login chip. Hosts that DO want a permanent chip can override
+     with style="display: inline-flex". */
+  :host { display: none; }
+  :host([active]),
+  :host([visible]),
+  :host([external-auth]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: system-ui, -apple-system, sans-serif;
+    /* Anchor to the theme font token so the button scales with it. */
+    font-size: var(--font-size, 20px);
+  }
+
+  /* Another same-origin window/tab/iframe holds a logged-in session
+     (signaled via BroadcastChannel('sol-auth')). Surface the chip and
+     paint the button green so the user can choose to also log in
+     here. Suppressed while this element's own auth flow is in flight
+     (host has [active]) — that UI takes precedence. */
+  :host([external-auth]:not([active])) .auth-btn {
+    box-shadow: 0 0 0 2px var(--success, #388e3c);
+    border-color: var(--success, #388e3c);
+    color: var(--success, #388e3c);
+  }
+
+  .auth-status {
+    font-size: 0.7em;
+    color: var(--text-muted, #666);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 220px;
+  }
+  .auth-status.logged-in { color: var(--success, #388e3c); }
+
+  /* Match the padding of the pod header controls (select / gear) it
+     sits between, so the row reads as one set of controls. */
+  .auth-btn { padding: 6px 10px; }
+
+  /* Logged in: the button turns green (green = connected). */
+  .auth-btn.logged-in {
+    background: var(--success, #388e3c);
+    border-color: var(--success, #388e3c);
+    color: #fff;
+  }
+  .auth-btn.logged-in:hover {
+    background: var(--success-dark, #2e7d32);
+    border-color: var(--success-dark, #2e7d32);
+  }
+
+  /* Login button uses .sol-btn .sol-btn-sm; .sol-btn-primary when logged out. */
+
+  .dropdown {
+    position: fixed; z-index: 9999;
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: 6px;
+    box-shadow: 0 6px 18px var(--shadow, rgba(0,0,0,0.1));
+    padding: 8px;
+    /* Size to the widest issuer so every entry fits on one line; cap to
+       the viewport so it can't run off-screen. */
+    width: max-content;
+    min-width: 44ch; max-width: 90vw;
+    display: none;
+  }
+  .dropdown.open { display: block; }
+
+  /* Hint shown above the issuer list while auto-login is in flight.
+     Names the issuer being signed into and prompts the user to click
+     another option in the list to switch. Inserted/removed by
+     _showSwitchHint / _hideSwitchHint as part of the auth-needed
+     auto-login flow. */
+  .switch-hint {
+    font-size: 0.78em;
+    color: var(--text-muted, #4d4d4d);
+    padding: 2px 6px 6px 6px;
+    border-bottom: 1px solid var(--border-soft, #e5e5e5);
+    margin-bottom: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .issuer-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
+  .issuer-list:empty { display: none; }
+
+  .issuer-item {
+    text-align: left; background: none; border: none;
+    padding: 5px 8px; border-radius: 4px;
+    cursor: pointer; font-size: 0.84em;
+    color: var(--text, #212121);
+    white-space: nowrap;
+    font-family: inherit;
+  }
+  .issuer-item:hover { background: var(--hover, #f0f0f0); color: var(--accent, #2196f3); }
+
+  .custom-row { display: flex; gap: 4px; }
+  .custom-row .sol-btn { padding: 6px 8px; font-size: 0.82em; }
+  .custom-row .issuer-input {
+    /* 44ch floor so a full issuer URL is visible; this also drives the
+       dropdown's max-content width, so the panel grows to fit it. */
+    flex: 1; min-width: 44ch; font-size: 0.82em; padding: 6px 8px;
+    background: var(--bg, #f5f5f5);
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-menu-css.js

@@ -0,0 +1,145 @@
+import { sheetFrom } from '../../core/adopt.js';
+
+export const CSS = `
+  :host {
+    display: flex; flex-direction: row;
+    flex: 1; min-height: 0; min-width: 0;
+    max-width: 100%; height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    font-family:var(--font-ui) !important;
+    font-size: var(--font-size, var(--medium-font, 20px));
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: column;
+  }
+  .sol-menu-embed {
+    display: flex; flex-direction: column;
+    flex: 1; min-height: 0; min-width: 0;
+    width: 100%; max-width: 100%;
+    overflow: auto;
+  }
+
+  .sol-menu-nav {
+    display: flex; flex-direction: column;
+    flex-shrink: 0;
+    min-width: var(--menu-nav-min-width, 140px);
+    max-width: var(--menu-nav-max-width, 260px);
+    padding: var(--space-md, 8px);
+    gap: var(--space-xs, 2px);
+    border-right: 1px solid var(--border, #e0e0e0);
+    overflow-y: auto; overflow-x: hidden;
+    scrollbar-width: thin;
+    box-sizing: border-box;
+  }
+  :host([orientation="horizontal"]) > .sol-menu-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-width: 0; max-width: 100%;
+    padding: var(--space-sm, 4px) var(--space-lg, 12px);
+    gap: var(--space-sm, 4px);
+    border-right: none;
+    border-bottom: var(--menu-nav-border-bottom, 1px solid var(--border, #e0e0e0));
+    /* No overflow scroll on the nav itself — when items don't fit
+       the row (large font, narrow chrome) they wrap onto a second
+       row. Scroll bars belong inside component content (sol-pod's
+       tree, etc.), not on layout chrome. */
+    overflow: visible;
+  }
+
+  .sol-menu-nav button {
+    background: none; border: none;
+    text-align: left;
+    padding: var(--menu-button-padding, var(--space-md, 8px) var(--space-lg, 12px));
+    border-radius: var(--menu-button-radius, var(--radius-sm, 4px));
+    color: var(--text, black) !important;
+    cursor: pointer; font-family: inherit;
+    white-space: nowrap;
+    overflow: hidden; text-overflow: ellipsis;
+    font-size: var(--font-size, var(--medium-font, 20px)) !important;
+  }
+  :host([orientation="horizontal"]) > .sol-menu-nav > button,
+  :host([orientation="horizontal"]) > .sol-menu-nav > .sol-menu-group {
+    flex-shrink: 0;
+  }
+  .sol-menu-nav button .sol-menu-icon {
+    display: inline-flex; align-items: center;
+    vertical-align: middle;
+    pointer-events: none;
+  }
+  .sol-menu-nav button .sol-menu-icon svg {
+    fill: currentColor;
+  }
+  .sol-menu-nav button .sol-menu-icon img {
+    height: 1.2em; width: auto;
+  }
+  .sol-menu-nav button:hover {
+    background: var(--menu-hover-bg, var(--hover, #f0f0f0));
+    color: var(--menu-hover-color, var(--accent-dark, #1976d2));
+  }
+  .sol-menu-nav button:focus-visible {
+    outline: 2px solid var(--accent, #4a9eff);
+    outline-offset: 2px;
+  }
+  .sol-menu-nav button.active {
+    background: var(--menu-active-bg, var(--focus-bg, #e3f2fd)) !important;
+    color: var(--menu-active-color, var(--accent-dark, #1976d2)) !important;
+    font-weight: var(--font-weight-bold, 600);
+  }
+
+  .sol-menu-group {
+    position: relative;
+    display: block;
+  }
+  .sol-menu-group-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm, 4px);
+  }
+  .sol-menu-group-btn::after {
+    content: '▸';
+    margin-left: auto;
+    font-size: var(--small-font, 16px);
+    opacity: 0.7;
+  }
+  :host([orientation="horizontal"]) .sol-menu-nav > .sol-menu-group > .sol-menu-group-btn::after {
+    content: '▾';
+    margin-left: var(--space-sm, 4px);
+  }
+  .sol-menu-popup {
+    display: none;
+    position: fixed;
+    min-width: var(--menu-popup-min-width, 160px);
+    padding: var(--space-md, 8px);
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #e0e0e0);
+    border-radius: var(--radius-md, 6px);
+    box-shadow: var(--shadow-popup, 0 4px 12px rgba(0,0,0,0.12));
+    z-index: 1000;
+    flex-direction: column;
+    gap: var(--space-xs, 2px);
+  }
+  .sol-menu-group.open > .sol-menu-popup {
+    display: flex;
+  }
+
+  /* The content area is a light-DOM child of <sol-menu>, projected through
+     the shadow slot, so menu-click results land in light DOM and are
+     reachable by page CSS and document queries. Style it directly with
+     sol-menu > .sol-menu-content { ... } — there is no part() hook.
+     overflow:hidden (not auto) by default: app chrome doesn't scroll;
+     components placed inside scroll on their own. */
+  slot { display: contents; }
+  ::slotted(.sol-menu-content) {
+    flex: 1 1 0; min-height: 0; min-width: 0;
+    max-width: 100%;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    padding: var(--menu-content-padding, var(--space-xl, 16px) var(--space-xl, 16px));
+    box-sizing: border-box;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;

package/web/styles/sol-modal-css.js

@@ -0,0 +1,134 @@
+import { sheetFrom } from '../../core/adopt.js';
+import { BTN_CSS } from './buttons-css.js';
+
+export const CSS = BTN_CSS + `
+  :host { display: contents; }
+
+  .modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(15,17,21,0.62);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 1000;
+    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
+    color: var(--text, #212121);
+  }
+
+  .modal {
+    background: var(--surface, #fff);
+    border: 1px solid var(--border, #9aa3af);
+    border-radius: 12px;
+    box-shadow:
+      0 1px 0 rgba(255,255,255,0.6) inset,
+      0 4px 10px rgba(15,17,21,0.18),
+      0 28px 60px -20px var(--shadow-heavy, rgba(15,17,21,0.45));
+    width: calc(100vw - 4vmin);
+    height: calc(100vh - 4vmin);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+  }
+  :host([size="small"]) .modal { max-width: 460px; height: auto; min-height: 0; }
+  :host([size="large"]) .modal { max-width: 820px; height: auto; min-height: 0; }
+
+  .modal-header {
+    display: flex; align-items: center;
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--border-soft, var(--border, #d6dae2));
+    gap: 12px; flex-shrink: 0;
+    background: var(--surface, #fff);
+  }
+
+  .modal-title {
+    flex: 1; font-weight: 600; font-size: 1em;
+    letter-spacing: -0.005em;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+
+  .modal-header-actions {
+    display: flex; align-items: center; gap: 6px; margin-right: 4px;
+  }
+
+  .modal-close {
+    background: none; border: none;
+    font-size: 1.15em; line-height: 1;
+    color: var(--text-muted, #4a525e); cursor: pointer;
+    padding: 6px 10px; border-radius: 6px;
+    transition: background 0.12s, color 0.12s;
+  }
+  .modal-close:hover { background: var(--hover, #eef0f4); color: var(--text, #0f1115); }
+  .modal-close:focus-visible {
+    outline: 3px solid var(--focus-ring, var(--accent, #1565c0));
+    outline-offset: 2px;
+  }
+  /* modal-close uses raw styles (not .sol-btn) to stay minimal. */
+
+  .modal-body {
+    flex: 1; overflow-y: auto; padding: 18px 22px;
+    display: flex; flex-direction: column; gap: 12px;
+    min-height: 0;
+    background: var(--surface, #fff);
+  }
+
+  .modal-footer {
+    display: flex; gap: 10px; align-items: center;
+    padding: 12px 20px;
+    border-top: 1px solid var(--border-soft, var(--border, #d6dae2));
+    flex-shrink: 0;
+    background: var(--surface-2, #f5f6f9);
+  }
+  .modal-footer:empty { display: none; }
+
+  .modal-zoom-pct { font-size: 0.8em; color: var(--text-muted, #4a525e); min-width: 3em; text-align: center; }
+
+  .modal-input {
+    /* Fit-width with a max-width cap; does NOT fill the row. */
+    width: min(100%, 50ch);
+    min-width: 18ch;
+    max-width: 50ch;
+    box-sizing: border-box;
+    /* Reset UA form-control styling so font + line-height are ours, not
+       the browser's per-input-type defaults (which otherwise render in
+       e.g. Arial/Helvetica regardless of inherited body font). */
+    appearance: none;
+    -webkit-appearance: none;
+    font: inherit;
+    line-height: 1.2;
+    padding: 0.4em 0.7em;
+    border: 1px solid var(--border-soft, var(--border, #d6dae2));
+    border-radius: 6px;
+    /* Explicit height (not min-height) so input and the adjacent
+       .modal-row > .sol-btn are pixel-for-pixel identical. Both compute
+       to: 1.2em line + 0.8em vertical padding + 2px border. */
+    height: calc(1.2em + 0.8em + 2px);
+    background: var(--surface, #fff); color: var(--text, #0f1115);
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  .modal-input:focus {
+    outline: none;
+    border-color: var(--accent, #0f4ea0);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0f4ea0) 22%, transparent);
+  }
+
+  .modal-label { font-size: 0.9em; color: var(--text-muted, #4a525e); }
+  .modal-message { padding: 8px 0; color: var(--text-muted, #4a525e); font-size: 0.95em; }
+  .modal-message.error { color: var(--error, #b3261e); }
+  .modal-note { font-size: 0.8em; color: var(--text-faint, #7a8390); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  .modal-info-banner {
+    background: var(--warning-bg, #fff4d4);
+    border: 1px solid var(--warning-border, #e2b870);
+    border-left: 3px solid var(--warning-border, #e2b870);
+    border-radius: 6px; padding: 9px 13px;
+    font-size: 0.88em; color: var(--warning-text, #5d4037);
+    flex-shrink: 0;
+  }
+
+  .modal-body-component {
+    display: flex; flex-direction: column;
+    width: 100%; height: 100%;
+  }
+`;
+
+export const sheet = sheetFrom(CSS);
+export default sheet;