@mochabug/adapt-web 1.0.1-rc.11 → 1.0.1-rc.13

package/dist/umd/adapt-web.core.js

@@ -32,7 +32,8 @@ var MbAdapt = (() => {
     clearPersistedState: () => clearPersistedState,
     configure: () => configure,
     createConnectClient: () => createConnectClient,
-    resetConfig: () => resetConfig
+    resetConfig: () => resetConfig,
+    resolveTheme: () => resolveTheme
   });
 
   // ../node_modules/@bufbuild/protobuf/dist/esm/is-message.js
@@ -6715,89 +6716,116 @@ var MbAdapt = (() => {
   min-height: inherit;
   display: flex;
   flex-direction: column;
-  background: var(--mb-adapt-bg);
-  --mb-adapt-bg: transparent;
-  --mb-adapt-font: system-ui, -apple-system, sans-serif;
-  --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.2);
-  --mb-adapt-separator-active: rgba(59, 130, 246, 0.5);
-  --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15);
-  --mb-adapt-floating-border: none;
-  --mb-adapt-floating-backdrop: none;
-  --mb-adapt-floating-radius: 8px;
-  --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
-  --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --mb-adapt-border-radius: 8px;
+
+  /* Two-layer CSS variables: --_X reads user-set --mb-adapt-X first, falls back to light default */
+  --_bg: var(--mb-adapt-bg, transparent);
+  --_font: var(--mb-adapt-font, system-ui, -apple-system, sans-serif);
+  --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.2));
+  --_separator-active: var(--mb-adapt-separator-active, rgba(59, 130, 246, 0.5));
+  --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15));
+  --_floating-border: var(--mb-adapt-floating-border, none);
+  --_floating-backdrop: var(--mb-adapt-floating-backdrop, none);
+  --_floating-radius: var(--mb-adapt-floating-radius, 8px);
+  --_status-card-bg: var(--mb-adapt-status-card-bg, #ffffff);
+  --_status-card-border: var(--mb-adapt-status-card-border, #e5e7eb);
+  --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));
+  --_status-icon-bg: var(--mb-adapt-status-icon-bg, #fef2f2);
+  --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #f3f4f6));
+  --_status-text: var(--mb-adapt-status-text, #374151);
+  --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  --_border-radius: var(--mb-adapt-border-radius, 8px);
   --mb-adapt-responsive-breakpoint: 768;
   --mb-adapt-responsive-hysteresis: 40;
 
-  /* Cap.js widget customization variables */
-  --mb-adapt-cap-background: #ffffff;
-  --mb-adapt-cap-border-color: #e2e8f0;
-  --mb-adapt-cap-border-radius: 16px;
-  --mb-adapt-cap-height: 72px;
-  --mb-adapt-cap-width: 380px;
-  --mb-adapt-cap-padding: 20px 28px;
-  --mb-adapt-cap-gap: 20px;
-  --mb-adapt-cap-color: #1e293b;
-  --mb-adapt-cap-checkbox-size: 36px;
-  --mb-adapt-cap-checkbox-border: 2px solid #cbd5e1;
-  --mb-adapt-cap-checkbox-radius: 10px;
-  --mb-adapt-cap-checkbox-background: #f8fafc;
-  --mb-adapt-cap-spinner-color: #6366f1;
-  --mb-adapt-cap-spinner-bg: #e2e8f0;
-  --mb-adapt-cap-font: inherit;
-  --mb-adapt-cap-spinner-thickness: 3px;
-  --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
-  --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
-
-  /* Fork panel theming \u2014 customizable via CSS variables */
-  --mb-adapt-fork-bg: #ffffff;
-  --mb-adapt-fork-tab-bg: #f3f3f3;
-  --mb-adapt-fork-tab-active-bg: #ffffff;
-  --mb-adapt-fork-tab-color: rgb(51, 51, 51);
-  --mb-adapt-fork-tab-inactive-color: rgba(51, 51, 51, 0.7);
-  --mb-adapt-fork-separator: rgba(128, 128, 128, 0.35);
+  /* Cap.js widget variables */
+  --_cap-background: var(--mb-adapt-cap-background, #ffffff);
+  --_cap-border-color: var(--mb-adapt-cap-border-color, #e2e8f0);
+  --_cap-border-radius: var(--mb-adapt-cap-border-radius, 16px);
+  --_cap-height: var(--mb-adapt-cap-height, 72px);
+  --_cap-width: var(--mb-adapt-cap-width, 380px);
+  --_cap-padding: var(--mb-adapt-cap-padding, 20px 28px);
+  --_cap-gap: var(--mb-adapt-cap-gap, 20px);
+  --_cap-color: var(--mb-adapt-cap-color, #1e293b);
+  --_cap-checkbox-size: var(--mb-adapt-cap-checkbox-size, 36px);
+  --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #cbd5e1);
+  --_cap-checkbox-radius: var(--mb-adapt-cap-checkbox-radius, 10px);
+  --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #f8fafc);
+  --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #6366f1);
+  --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #e2e8f0);
+  --_cap-font: var(--mb-adapt-cap-font, inherit);
+  --_cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness, 3px);
+  --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));
+  --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06));
+
+  /* Fork panel theming */
+  --_fork-bg: var(--mb-adapt-fork-bg, #ffffff);
+  --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #f3f3f3);
+  --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #ffffff);
+  --_fork-tab-color: var(--mb-adapt-fork-tab-color, rgb(51, 51, 51));
+  --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, rgba(51, 51, 51, 0.7));
+  --_fork-separator: var(--mb-adapt-fork-separator, rgba(128, 128, 128, 0.35));
+
+  /* Tab shape */
+  --_tab-radius: var(--mb-adapt-tab-radius, 0);
+  --_tab-shadow: var(--mb-adapt-tab-shadow, none);
+  --_tab-active-shadow: var(--mb-adapt-tab-active-shadow, none);
+  --_tab-gap: var(--mb-adapt-tab-gap, 0px);
+  --_tab-padding: var(--mb-adapt-tab-padding, 0 14px);
+  --_tab-font-size: var(--mb-adapt-tab-font-size, 13px);
+  --_tab-min-width: var(--mb-adapt-tab-min-width, 100px);
+  --_tab-spacing: var(--mb-adapt-tab-spacing, 6px);
+  --_toolbar-height: var(--mb-adapt-toolbar-height, 40px);
+  --_toolbar-padding: var(--mb-adapt-toolbar-padding, 0);
+
+  /* Drop targets \u2014 light defaults */
+  --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18));
+  --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));
+  --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));
+  --_drop-border: var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
+
+  background: var(--_bg);
 }
 
 .mb-adapt--dark {
   /* Cap.js widget dark mode */
-  --mb-adapt-cap-background: #1e293b;
-  --mb-adapt-cap-border-color: #334155;
-  --mb-adapt-cap-color: #f1f5f9;
-  --mb-adapt-cap-checkbox-border: 2px solid #475569;
-  --mb-adapt-cap-checkbox-background: #0f172a;
-  --mb-adapt-cap-spinner-color: #818cf8;
-  --mb-adapt-cap-spinner-bg: #334155;
-  --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
-  --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
+  --_cap-background: var(--mb-adapt-cap-background, #1e293b);
+  --_cap-border-color: var(--mb-adapt-cap-border-color, #334155);
+  --_cap-color: var(--mb-adapt-cap-color, #f1f5f9);
+  --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #475569);
+  --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #0f172a);
+  --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #818cf8);
+  --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #334155);
+  --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));
+  --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2));
 
   /* Status card dark mode */
-  --mb-adapt-status-card-bg: #1e293b;
-  --mb-adapt-status-card-border: #334155;
-  --mb-adapt-status-icon-bg: #351c1c;
-  --mb-adapt-status-text: #e2e8f0;
+  --_status-card-bg: var(--mb-adapt-status-card-bg, #1e293b);
+  --_status-card-border: var(--mb-adapt-status-card-border, #334155);
+  --_status-icon-bg: var(--mb-adapt-status-icon-bg, #351c1c);
+  --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #1e293b));
+  --_status-text: var(--mb-adapt-status-text, #e2e8f0);
 
   /* Panel dark mode overrides */
-  --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.3);
-  --mb-adapt-separator-active: rgba(99, 130, 246, 0.6);
-  --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3);
-  --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.06);
-  --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
-  --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.3));
+  --_separator-active: var(--mb-adapt-separator-active, rgba(99, 130, 246, 0.6));
+  --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3));
+  --_floating-border: var(--mb-adapt-floating-border, 1px solid rgba(255, 255, 255, 0.06));
+  --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));
+  --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.35));
 
   /* Fork panel dark mode */
-  --mb-adapt-fork-bg: #1e1e1e;
-  --mb-adapt-fork-tab-bg: #252526;
-  --mb-adapt-fork-tab-active-bg: #1e1e1e;
-  --mb-adapt-fork-tab-color: #ffffff;
-  --mb-adapt-fork-tab-inactive-color: #969696;
-  --mb-adapt-fork-separator: rgb(68, 68, 68);
+  --_fork-bg: var(--mb-adapt-fork-bg, #1e1e1e);
+  --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #252526);
+  --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #1e1e1e);
+  --_fork-tab-color: var(--mb-adapt-fork-tab-color, #ffffff);
+  --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, #969696);
+  --_fork-separator: var(--mb-adapt-fork-separator, rgb(68, 68, 68));
 
   /* Drop target dark mode */
-  --mb-adapt-drop-header-bg: rgba(129, 140, 248, 0.22);
-  --mb-adapt-drop-center-bg: rgba(129, 140, 248, 0.15);
-  --mb-adapt-drop-split-bg: rgba(129, 140, 248, 0.18);
-  --mb-adapt-drop-border: rgba(129, 140, 248, 0.6);
+  --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(129, 140, 248, 0.22));
+  --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(129, 140, 248, 0.15));
+  --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(129, 140, 248, 0.18));
+  --_drop-border: var(--mb-adapt-drop-border, rgba(129, 140, 248, 0.6));
 }
 
 /* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -6837,7 +6865,7 @@ var MbAdapt = (() => {
 /* Draggable separator between split panels */
 .mb-layout-separator {
   flex: 0 0 5px;
-  background: var(--mb-adapt-fork-separator);
+  background: var(--_fork-separator);
   transition: background 0.15s;
   position: relative;
   z-index: 1;
@@ -6849,7 +6877,7 @@ var MbAdapt = (() => {
 
 .mb-layout-separator:hover,
 .mb-layout-separator--active {
-  background: var(--mb-adapt-separator-active);
+  background: var(--_separator-active);
 }
 
 /* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -6857,16 +6885,17 @@ var MbAdapt = (() => {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--mb-adapt-bg);
+  background: var(--_bg);
 }
 
 .mb-group-header {
   display: flex;
   align-items: stretch;
-  height: 40px;
-  min-height: 40px;
-  background: var(--mb-adapt-fork-tab-bg);
-  border-bottom: 1px solid var(--mb-adapt-fork-separator);
+  height: var(--_toolbar-height);
+  min-height: var(--_toolbar-height);
+  padding: var(--_toolbar-padding);
+  background: var(--_fork-tab-bg);
+  border-bottom: 1px solid var(--_fork-separator);
   user-select: none;
 }
 
@@ -6877,7 +6906,7 @@ var MbAdapt = (() => {
 
 .mb-group-tabs {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   overflow-x: auto;
   overflow-y: hidden;
   flex: 0 1 auto;
@@ -6904,16 +6933,16 @@ var MbAdapt = (() => {
   flex: 1;
   position: relative;
   overflow: hidden;
-  background: var(--mb-adapt-fork-bg);
+  background: var(--_fork-bg);
 }
 
 /* Main group overrides */
 .mb-group[data-main-group="true"] {
-  background: var(--mb-adapt-bg);
+  background: var(--_bg);
 }
 
 .mb-group[data-main-group="true"] .mb-group-content {
-  background: var(--mb-adapt-bg);
+  background: var(--_bg);
 }
 
 
@@ -6921,27 +6950,31 @@ var MbAdapt = (() => {
 .mb-tab {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 14px;
-  min-width: 100px;
-  font-size: 13px;
-  font-family: var(--mb-adapt-font);
+  gap: var(--_tab-spacing);
+  padding: var(--_tab-padding);
+  min-width: var(--_tab-min-width);
+  font-size: var(--_tab-font-size);
+  font-family: var(--_font);
   white-space: nowrap;
   cursor: pointer;
   touch-action: none;
-  color: var(--mb-adapt-fork-tab-inactive-color);
-  background: var(--mb-adapt-fork-tab-bg);
-  border-right: 1px solid var(--mb-adapt-fork-separator);
-  transition: background 0.1s;
+  color: var(--_fork-tab-inactive-color);
+  background: var(--_fork-tab-bg);
+  border-right: 1px solid var(--_fork-separator);
+  border-radius: var(--_tab-radius);
+  box-shadow: var(--_tab-shadow);
+  margin: var(--_tab-gap);
+  transition: background 0.15s, box-shadow 0.15s;
 }
 
 .mb-tab[data-active="true"] {
-  color: var(--mb-adapt-fork-tab-color);
-  background: var(--mb-adapt-fork-tab-active-bg);
+  color: var(--_fork-tab-color);
+  background: var(--_fork-tab-active-bg);
+  box-shadow: var(--_tab-active-shadow);
 }
 
 .mb-tab:hover {
-  background: var(--mb-adapt-fork-tab-active-bg);
+  background: var(--_fork-tab-active-bg);
 }
 
 .mb-tab-label {
@@ -6992,7 +7025,7 @@ var MbAdapt = (() => {
 
 .mb-tab-close:hover {
   opacity: 1 !important;
-  background: var(--mb-adapt-button-hover-bg);
+  background: var(--_button-hover-bg);
 }
 
 .mb-tab-close svg {
@@ -7020,11 +7053,11 @@ var MbAdapt = (() => {
 .mb-floating-overlay {
   position: fixed;
   z-index: 100000;
-  box-shadow: var(--mb-adapt-floating-shadow);
-  border: var(--mb-adapt-floating-border);
-  backdrop-filter: var(--mb-adapt-floating-backdrop);
-  -webkit-backdrop-filter: var(--mb-adapt-floating-backdrop);
-  border-radius: var(--mb-adapt-floating-radius);
+  box-shadow: var(--_floating-shadow);
+  border: var(--_floating-border);
+  backdrop-filter: var(--_floating-backdrop);
+  -webkit-backdrop-filter: var(--_floating-backdrop);
+  border-radius: var(--_floating-radius);
   display: flex;
   flex-direction: column;
   /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)
@@ -7034,7 +7067,7 @@ var MbAdapt = (() => {
 
 .mb-floating-overlay > .mb-group {
   flex: 1;
-  border-radius: var(--mb-adapt-floating-radius);
+  border-radius: var(--_floating-radius);
   overflow: hidden;
 }
 
@@ -7046,7 +7079,7 @@ var MbAdapt = (() => {
   flex: 1;
   min-width: 0;
   min-height: 0;
-  border-radius: var(--mb-adapt-floating-radius);
+  border-radius: var(--_floating-radius);
   overflow: hidden;
 }
 
@@ -7091,7 +7124,7 @@ var MbAdapt = (() => {
   border: 0;
   display: block;
   background: transparent;
-  border-radius: var(--mb-adapt-border-radius);
+  border-radius: var(--_border-radius);
   pointer-events: auto;
   opacity: 0;
   transition: opacity 0.1s ease-out;
@@ -7126,10 +7159,10 @@ var MbAdapt = (() => {
   padding: 32px 40px;
   max-width: 380px;
   border-radius: 16px;
-  background: var(--mb-adapt-status-card-bg, #ffffff);
-  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
-  box-shadow: var(--mb-adapt-status-card-shadow);
-  font-family: var(--mb-adapt-font);
+  background: var(--_status-card-bg);
+  border: 1px solid var(--_status-card-border);
+  box-shadow: var(--_status-card-shadow);
+  font-family: var(--_font);
   text-align: center;
 }
 
@@ -7140,7 +7173,7 @@ var MbAdapt = (() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--mb-adapt-status-icon-bg, #fef2f2);
+  background: var(--_status-icon-bg);
 }
 
 .mb-adapt__status-icon svg {
@@ -7149,11 +7182,11 @@ var MbAdapt = (() => {
 }
 
 .mb-adapt__status-icon--stopped {
-  background: var(--mb-adapt-status-icon-bg, #f3f4f6);
+  background: var(--_status-icon-stopped-bg);
 }
 
 .mb-adapt__status-text {
-  color: var(--mb-adapt-status-text, #374151);
+  color: var(--_status-text);
   font-size: 15px;
   line-height: 1.5;
   margin: 0;
@@ -7161,19 +7194,19 @@ var MbAdapt = (() => {
 
 .mb-adapt__status-restart {
   padding: 8px 20px;
-  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
+  border: 1px solid var(--_status-card-border);
   border-radius: 8px;
   background: transparent;
-  color: var(--mb-adapt-status-text, #374151);
+  color: var(--_status-text);
   font-size: 14px;
   font-weight: 500;
-  font-family: var(--mb-adapt-font);
+  font-family: var(--_font);
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s;
 }
 
 .mb-adapt__status-restart:hover {
-  background: var(--mb-adapt-status-card-border, #e5e7eb);
+  background: var(--_status-card-border);
 }
 
 /* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -7203,18 +7236,18 @@ var MbAdapt = (() => {
   padding: 24px 28px;
   max-width: 360px;
   width: 100%;
-  border-radius: var(--mb-adapt-floating-radius);
-  background: var(--mb-adapt-fork-tab-active-bg);
-  border: 1px solid var(--mb-adapt-fork-separator);
-  box-shadow: var(--mb-adapt-floating-shadow);
-  font-family: var(--mb-adapt-font);
+  border-radius: var(--_floating-radius);
+  background: var(--_fork-tab-active-bg);
+  border: 1px solid var(--_fork-separator);
+  box-shadow: var(--_floating-shadow);
+  font-family: var(--_font);
   text-align: center;
 }
 
 .mb-adapt__confirm-text {
   font-size: 14px;
   line-height: 1.5;
-  color: var(--mb-adapt-fork-tab-color);
+  color: var(--_fork-tab-color);
   margin: 0;
 }
 
@@ -7228,7 +7261,7 @@ var MbAdapt = (() => {
   padding: 8px 16px;
   border-radius: 6px;
   font-size: 13px;
-  font-family: var(--mb-adapt-font);
+  font-family: var(--_font);
   cursor: pointer;
   font-weight: 500;
   transition: background 0.15s, border-color 0.15s;
@@ -7236,17 +7269,17 @@ var MbAdapt = (() => {
 
 .mb-adapt__confirm-btn--cancel {
   background: transparent;
-  border: 1px solid var(--mb-adapt-fork-separator);
-  color: var(--mb-adapt-fork-tab-color);
+  border: 1px solid var(--_fork-separator);
+  color: var(--_fork-tab-color);
 }
 
 .mb-adapt__confirm-btn--cancel:hover {
-  background: var(--mb-adapt-button-hover-bg);
+  background: var(--_button-hover-bg);
 }
 
 .mb-adapt__confirm-btn--confirm {
-  background: var(--mb-adapt-fork-tab-color);
-  color: var(--mb-adapt-fork-tab-active-bg);
+  background: var(--_fork-tab-color);
+  color: var(--_fork-tab-active-bg);
   border: 1px solid transparent;
 }
 
@@ -7271,23 +7304,23 @@ var MbAdapt = (() => {
 
 /* Cap.js widget styling */
 .mb-adapt cap-widget {
-  --cap-background: var(--mb-adapt-cap-background);
-  --cap-border-color: var(--mb-adapt-cap-border-color);
-  --cap-border-radius: var(--mb-adapt-cap-border-radius);
-  --cap-widget-height: var(--mb-adapt-cap-height);
-  --cap-widget-width: var(--mb-adapt-cap-width);
-  --cap-widget-padding: var(--mb-adapt-cap-padding);
-  --cap-gap: var(--mb-adapt-cap-gap);
-  --cap-color: var(--mb-adapt-cap-color);
-  --cap-checkbox-size: var(--mb-adapt-cap-checkbox-size);
-  --cap-checkbox-border: var(--mb-adapt-cap-checkbox-border);
-  --cap-checkbox-border-radius: var(--mb-adapt-cap-checkbox-radius);
-  --cap-checkbox-background: var(--mb-adapt-cap-checkbox-background);
+  --cap-background: var(--_cap-background);
+  --cap-border-color: var(--_cap-border-color);
+  --cap-border-radius: var(--_cap-border-radius);
+  --cap-widget-height: var(--_cap-height);
+  --cap-widget-width: var(--_cap-width);
+  --cap-widget-padding: var(--_cap-padding);
+  --cap-gap: var(--_cap-gap);
+  --cap-color: var(--_cap-color);
+  --cap-checkbox-size: var(--_cap-checkbox-size);
+  --cap-checkbox-border: var(--_cap-checkbox-border);
+  --cap-checkbox-border-radius: var(--_cap-checkbox-radius);
+  --cap-checkbox-background: var(--_cap-checkbox-background);
   --cap-checkbox-margin: 0;
-  --cap-font: var(--mb-adapt-cap-font);
-  --cap-spinner-color: var(--mb-adapt-cap-spinner-color);
-  --cap-spinner-background-color: var(--mb-adapt-cap-spinner-bg);
-  --cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness);
+  --cap-font: var(--_cap-font);
+  --cap-spinner-color: var(--_cap-spinner-color);
+  --cap-spinner-background-color: var(--_cap-spinner-bg);
+  --cap-spinner-thickness: var(--_cap-spinner-thickness);
 }
 
 /* Hide Cap.js credits */
@@ -7308,7 +7341,7 @@ cap-widget::part(attribution) {
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--mb-adapt-fork-tab-color);
+  color: var(--_fork-tab-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7319,7 +7352,7 @@ cap-widget::part(attribution) {
 }
 .mb-adapt-fork-actions button:hover {
   opacity: 1;
-  background: var(--mb-adapt-button-hover-bg);
+  background: var(--_button-hover-bg);
 }
 .mb-adapt-fork-actions button svg {
   width: 14px;
@@ -7332,12 +7365,12 @@ cap-widget::part(attribution) {
    docked panels are minimized \u2014 the iframe gets the remaining height. */
 .mb-adapt-minimized-tabs {
   display: none;
-  height: 40px;
+  height: var(--_toolbar-height);
   flex-shrink: 0;
   z-index: 100;
   align-items: stretch;
-  background: var(--mb-adapt-fork-tab-bg);
-  border-bottom: 1px solid var(--mb-adapt-fork-separator);
+  background: var(--_fork-tab-bg);
+  border-bottom: 1px solid var(--_fork-separator);
   user-select: none;
 }
 .mb-adapt-minimized-tab {
@@ -7346,12 +7379,12 @@ cap-widget::part(attribution) {
   gap: 8px;
   padding: 0 12px;
   flex: 1;
-  background: var(--mb-adapt-fork-tab-bg);
-  color: var(--mb-adapt-fork-tab-color);
-  font-size: 13px;
-  font-family: var(--mb-adapt-font);
+  background: var(--_fork-tab-bg);
+  color: var(--_fork-tab-color);
+  font-size: var(--_tab-font-size);
+  font-family: var(--_font);
   white-space: nowrap;
-  border-right: 1px solid var(--mb-adapt-fork-separator);
+  border-right: 1px solid var(--_fork-separator);
   cursor: default;
 }
 .mb-adapt-minimized-tab-label {
@@ -7384,7 +7417,7 @@ cap-widget::part(attribution) {
 }
 .mb-adapt-minimized-tab-action:hover {
   opacity: 1;
-  background: var(--mb-adapt-button-hover-bg);
+  background: var(--_button-hover-bg);
 }
 .mb-adapt-minimized-tab-action svg {
   width: 14px;
@@ -7399,8 +7432,8 @@ cap-widget::part(attribution) {
 
 /* Drop target highlight for minimized tab merge */
 .mb-adapt-minimized-tab--drop-target {
-  background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;
-  box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));
+  background: var(--_drop-header-bg) !important;
+  box-shadow: inset 0 0 0 2px var(--_drop-border);
 }
 
 /* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -7409,14 +7442,14 @@ cap-widget::part(attribution) {
   pointer-events: none;
   z-index: 999999;
   padding: 4px 10px;
-  background: var(--mb-adapt-fork-tab-bg);
-  color: var(--mb-adapt-fork-tab-color);
-  border: 1px solid var(--mb-adapt-fork-separator);
-  border-radius: 4px;
-  font-size: 13px;
-  font-family: var(--mb-adapt-font);
+  background: var(--_fork-tab-bg);
+  color: var(--_fork-tab-color);
+  border: 1px solid var(--_fork-separator);
+  border-radius: var(--_tab-radius, 4px);
+  font-size: var(--_tab-font-size);
+  font-family: var(--_font);
   white-space: nowrap;
-  box-shadow: var(--mb-adapt-drag-ghost-shadow);
+  box-shadow: var(--_drag-ghost-shadow);
   opacity: 0.92;
   display: flex;
   align-items: center;
@@ -7429,8 +7462,8 @@ cap-widget::part(attribution) {
 
 /* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .mb-group-header--drop-target {
-  background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;
-  box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));
+  background: var(--_drop-header-bg) !important;
+  box-shadow: inset 0 0 0 2px var(--_drop-border);
 }
 
 /* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */
@@ -7445,16 +7478,16 @@ cap-widget::part(attribution) {
 }
 
 .mb-drop-overlay[data-zone="center"] {
-  background: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));
-  border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
+  background: var(--_drop-center-bg);
+  border: 2px solid var(--_drop-border);
 }
 
 .mb-drop-overlay[data-zone="top"],
 .mb-drop-overlay[data-zone="bottom"],
 .mb-drop-overlay[data-zone="left"],
 .mb-drop-overlay[data-zone="right"] {
-  background: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));
-  border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
+  background: var(--_drop-split-bg);
+  border: 2px solid var(--_drop-border);
 }
 
 /* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -7486,7 +7519,7 @@ html.mb-dragging webview {
 
 .mb-tab-popout:hover {
   opacity: 1 !important;
-  background: var(--mb-adapt-button-hover-bg);
+  background: var(--_button-hover-bg);
 }
 
 .mb-tab-popout svg {
@@ -10422,6 +10455,78 @@ html.mb-dragging webview {
     }
   };
 
+  // src/theme.ts
+  function parseHex(hex) {
+    const m = /^#([0-9a-f]{3,8})$/i.exec(hex.trim());
+    if (!m) return null;
+    const h = m[1];
+    if (h.length === 3) {
+      return [
+        parseInt(h[0] + h[0], 16),
+        parseInt(h[1] + h[1], 16),
+        parseInt(h[2] + h[2], 16)
+      ];
+    }
+    if (h.length === 6 || h.length === 8) {
+      return [
+        parseInt(h.slice(0, 2), 16),
+        parseInt(h.slice(2, 4), 16),
+        parseInt(h.slice(4, 6), 16)
+      ];
+    }
+    return null;
+  }
+  function hexToRgba(hex, alpha) {
+    const rgb = parseHex(hex);
+    if (!rgb) return hex;
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+  }
+  function resolveTheme(theme) {
+    const result = {};
+    if (theme.primary) {
+      const p = theme.primary;
+      result["--mb-adapt-separator-active"] = hexToRgba(p, 0.4);
+      result["--mb-adapt-drop-border"] = p;
+      result["--mb-adapt-drop-header-bg"] = hexToRgba(p, 0.15);
+      result["--mb-adapt-drop-center-bg"] = hexToRgba(p, 0.1);
+      result["--mb-adapt-drop-split-bg"] = hexToRgba(p, 0.12);
+      result["--mb-adapt-status-icon-bg"] = hexToRgba(p, 0.08);
+      result["--mb-adapt-cap-spinner-color"] = p;
+    }
+    if (theme.background) {
+      result["--mb-adapt-bg"] = theme.background;
+      result["--mb-adapt-fork-tab-active-bg"] = theme.background;
+      result["--mb-adapt-status-card-bg"] = theme.background;
+    }
+    if (theme.surface) {
+      result["--mb-adapt-fork-bg"] = theme.surface;
+      result["--mb-adapt-fork-tab-bg"] = theme.surface;
+    }
+    if (theme.text) {
+      result["--mb-adapt-fork-tab-color"] = theme.text;
+      result["--mb-adapt-status-text"] = theme.text;
+      result["--mb-adapt-cap-color"] = theme.text;
+    }
+    if (theme.textSecondary) {
+      result["--mb-adapt-fork-tab-inactive-color"] = theme.textSecondary;
+    }
+    if (theme.border) {
+      result["--mb-adapt-fork-separator"] = theme.border;
+      result["--mb-adapt-status-card-border"] = theme.border;
+      result["--mb-adapt-cap-border-color"] = theme.border;
+    }
+    if (theme.font) {
+      result["--mb-adapt-font"] = theme.font;
+      result["--mb-adapt-cap-font"] = theme.font;
+    }
+    if (theme.vars) {
+      for (const [key, value] of Object.entries(theme.vars)) {
+        result[`--mb-adapt-${key}`] = value;
+      }
+    }
+    return result;
+  }
+
   // src/AdaptAutomationElement.ts
   var OBSERVED_ATTRIBUTES = [
     "automation-id",
@@ -10454,6 +10559,13 @@ html.mb-dragging webview {
     static get observedAttributes() {
       return OBSERVED_ATTRIBUTES;
     }
+    get theme() {
+      return this._theme;
+    }
+    set theme(v) {
+      this._theme = v;
+      this._client?.setTheme(v);
+    }
     // --- Attribute ↔ Property reflection ---
     get automationId() {
       return this.getAttribute("automation-id");
@@ -10706,6 +10818,7 @@ html.mb-dragging webview {
       if (this.classNames !== void 0) options.classNames = this.classNames;
       if (this.styles !== void 0) options.styles = this.styles;
       if (this.text !== void 0) options.text = this.text;
+      if (this._theme !== void 0) options.theme = this._theme;
       if (this.persistOptions !== void 0) {
         options.persist = this.persistOptions;
       } else if (this.persist) {
@@ -10796,6 +10909,7 @@ html.mb-dragging webview {
       this.allowMaximize = options.allowMaximize ?? true;
       this.floatingAutoResize = options.floatingAutoResize ?? false;
       this.confirmOnClose = options.confirmOnClose ?? false;
+      this.theme = options.theme;
       const container = typeof options.container === "string" ? document.getElementById(options.container) : options.container;
       if (!container) {
         throw new Error(`Container with id '${options.container}' not found`);
@@ -10998,11 +11112,43 @@ html.mb-dragging webview {
       this.darkMode = darkMode;
       this.rootElement?.classList.toggle("mb-adapt--dark", darkMode);
       this.capWidgetInstance?.setDarkMode(darkMode);
+      this.applyTheme();
       const msg = { type: "adapt-darkMode", darkMode };
       for (const c of this.components.values()) {
         this.postToComponent(c, msg);
       }
     }
+    /**
+     * Set the theme. Applies CSS custom properties derived from semantic tokens.
+     * Pass `undefined` to clear all theme overrides.
+     */
+    setTheme(theme) {
+      this.theme = theme;
+      this.clearThemeVars();
+      if (theme?.mode !== void 0) {
+        const dark = theme.mode === "dark";
+        if (this.darkMode !== dark) {
+          this.setDarkMode(dark);
+          return;
+        }
+      }
+      this.applyTheme();
+    }
+    clearThemeVars() {
+      if (!this.rootElement || !this._appliedThemeVars) return;
+      for (const key of this._appliedThemeVars) {
+        this.rootElement.style.removeProperty(key);
+      }
+      this._appliedThemeVars = void 0;
+    }
+    applyTheme() {
+      if (!this.rootElement || !this.theme) return;
+      const vars = resolveTheme(this.theme);
+      for (const [key, value] of Object.entries(vars)) {
+        this.rootElement.style.setProperty(key, value);
+      }
+      this._appliedThemeVars = Object.keys(vars);
+    }
     /**
      * Enable or disable auto-resizing based on iframe content height.
      */
@@ -11207,6 +11353,7 @@ html.mb-dragging webview {
       if (this.options.styles) {
         Object.assign(this.rootElement.style, this.options.styles);
       }
+      this.applyTheme();
       this.container.appendChild(this.rootElement);
     }
     // --- URL handling ---