@genesislcap/rapid-design-system 15.24.2 → 15.25.1

package/dist/esm/flexlayout-react-theme/flexlayout-react-theme.generated.js

@@ -2,73 +2,83 @@
 // =============================================================================
 // AUTO-GENERATED FILE — DO NOT EDIT BY HAND.
 //
-// Source:  flexlayout-react@0.8.19 /style/dark.css  +  flexlayout-react.overrides.css
+// Source:  flexlayout-react@0.10.8 /style/dark.css  +  flexlayout-react.overrides.css
 // Regenerate:  pnpm --filter @genesislcap/rapid-design-system flexlayout:generate
 //
 // The package build regenerates this; CI's "Check working tree" step fails the
 // build if a flexlayout-react bump is not accompanied by a regenerated theme.
 // =============================================================================
 /** The flexlayout-react version this theme was generated against. */
-export const RAPID_FLEXLAYOUT_REACT_VERSION = '0.8.19';
+export const RAPID_FLEXLAYOUT_REACT_VERSION = '0.10.8';
 /** Merged flexlayout-react base theme + Rapid Design System overrides. */
 export const FLEXLAYOUT_REACT_THEME_CSS = `/* ============================================================================
- * flexlayout-react base theme — VENDORED from flexlayout-react@0.8.19 (style/dark.css).
+ * flexlayout-react base theme — VENDORED from flexlayout-react@0.10.8 (style/dark.css).
  * ========================================================================== */
+@charset "UTF-8";
 .flexlayout__layout {
-  --color-text: #eeeeee;
-  --color-background: black;
-  --color-base: black;
-  --color-1: rgb(17.85, 17.85, 17.85);
-  --color-2: rgb(25.5, 25.5, 25.5);
-  --color-3: rgb(38.25, 38.25, 38.25);
-  --color-4: #333333;
-  --color-5: rgb(63.75, 63.75, 63.75);
-  --color-6: rgb(76.5, 76.5, 76.5);
-  --color-drag1: rgb(207, 232, 255);
-  --color-drag2: rgb(183, 209, 181);
-  --color-drag1-background: rgba(128, 128, 128, 0.15);
-  --color-drag2-background: rgba(128, 128, 128, 0.15);
-  --font-size: medium;
-  --font-family: Roboto, Arial, sans-serif;
-  --color-overflow: gray;
-  --color-icon: gray;
-  --color-tabset-background: var(--color-1);
-  --color-tabset-background-selected: var(--color-1);
-  --color-tabset-background-maximized: var(--color-6);
-  --color-tabset-divider-line: var(--color-4);
-  --color-tabset-header-background: var(--color-1);
-  --color-tabset-header: var(--color-text);
-  --color-border-tab-content: var(--color-background);
-  --color-border-background: var(--color-1);
-  --color-border-divider-line: var(--color-4);
-  --color-tab-content: var(--color-background);
-  --color-tab-selected: var(--color-text);
-  --color-tab-selected-background: var(--color-4);
-  --color-tab-unselected: gray;
-  --color-tab-unselected-background: transparent;
-  --color-tab-textbox: var(--color-text);
-  --color-tab-textbox-background: var(--color-3);
-  --color-border-tab-selected: var(--color-text);
-  --color-border-tab-selected-background: var(--color-4);
-  --color-border-tab-unselected: gray;
-  --color-border-tab-unselected-background: var(--color-2);
-  --color-splitter: var(--color-2);
-  --color-splitter-hover: var(--color-4);
-  --color-splitter-drag: var(--color-5);
-  --color-drag-rect-border: var(--color-4);
-  --color-drag-rect-background: var(--color-1);
-  --color-drag-rect: var(--color-text);
-  --color-popup-border: var(--color-6);
-  --color-popup-unselected: var(--color-text);
-  --color-popup-unselected-background: var(--color-background);
-  --color-popup-selected: var(--color-text);
-  --color-popup-selected-background: var(--color-4);
-  --color-edge-marker: gray;
-  --color-edge-icon: #eee;
-  --color-mini-scroll-indicator: rgba(128, 128, 128, 0.5);
-  --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);
-  --size-mini-scroll-indicator: 3px;
-  --color-toolbar-button-hover: var(--color-4);
+  --color-text: var(--flexlayout-color-text, #eeeeee);
+  --color-background: var(--flexlayout-color-background, black);
+  --color-base: var(--flexlayout-color-base, black);
+  --color-1: var(--flexlayout-color-1, rgb(7%, 7%, 7%));
+  --color-2: var(--flexlayout-color-2, rgb(10%, 10%, 10%));
+  --color-3: var(--flexlayout-color-3, rgb(15%, 15%, 15%));
+  --color-4: var(--flexlayout-color-4, #333333);
+  --color-5: var(--flexlayout-color-5, rgb(25%, 25%, 25%));
+  --color-6: var(--flexlayout-color-6, rgb(30%, 30%, 30%));
+  --color-drag1: var(--flexlayout-color-drag1, rgb(207, 232, 255));
+  --color-drag2: var(--flexlayout-color-drag2, rgb(183, 209, 181));
+  --color-drag1-background: var(--flexlayout-color-drag1-background, rgba(128, 128, 128, 0.15));
+  --color-drag2-background: var(--flexlayout-color-drag2-background, rgba(128, 128, 128, 0.15));
+  --font-size: var(--flexlayout-font-size, medium);
+  --font-family: var(--flexlayout-font-family, Roboto, Arial, sans-serif);
+  --font-weight: var(--flexlayout-font-weight, normal);
+  --splitter-size: var(--flexlayout-splitter-size, 8px);
+  --splitter-active-size: var(--flexlayout-splitter-active-size, 8px);
+  --splitter-handle-visibility: var(--flexlayout-splitter-handle-visibility, hidden);
+  --color-overflow: var(--flexlayout-color-overflow, gray);
+  --color-icon: var(--flexlayout-color-icon, gray);
+  --color-focus: var(--flexlayout-color-focus, #93c5fd);
+  --color-tabset-background: var(--flexlayout-color-tabset-background, var(--color-1));
+  --color-tabset-background-selected: var(--flexlayout-color-tabset-background-selected, var(--color-1));
+  --color-tabset-background-maximized: var(--flexlayout-color-tabset-background-maximized, var(--color-6));
+  --color-tabset-divider-line: var(--flexlayout-color-tabset-divider-line, var(--color-4));
+  --color-border-tab-content: var(--flexlayout-color-border-tab-content, var(--color-background));
+  --color-border-background: var(--flexlayout-color-border-background, var(--color-1));
+  --color-border-divider-line: var(--flexlayout-color-border-divider-line, var(--color-4));
+  --color-tab-content: var(--flexlayout-color-tab-content, var(--color-background));
+  --color-tab-selected: var(--flexlayout-color-tab-selected, var(--color-text));
+  --color-tab-selected-background: var(--flexlayout-color-tab-selected-background, var(--color-4));
+  --color-tab-unselected: var(--flexlayout-color-tab-unselected, gray);
+  --color-tab-unselected-background: var(--flexlayout-color-tab-unselected-background, transparent);
+  --color-tab-textbox: var(--flexlayout-color-tab-textbox, var(--color-text));
+  --color-tab-textbox-background: var(--flexlayout-color-tab-textbox-background, var(--color-3));
+  --color-border-tab-selected: var(--flexlayout-color-border-tab-selected, var(--color-text));
+  --color-border-tab-selected-background: var(--flexlayout-color-border-tab-selected-background, var(--color-4));
+  --color-border-tab-unselected: var(--flexlayout-color-border-tab-unselected, gray);
+  --color-border-tab-unselected-background: var(--flexlayout-color-border-tab-unselected-background, var(--color-2));
+  --color-splitter: var(--flexlayout-color-splitter, var(--color-2));
+  --color-splitter-hover: var(--flexlayout-color-splitter-hover, var(--color-4));
+  --color-splitter-drag: var(--flexlayout-color-splitter-drag, var(--color-5));
+  --color-splitter-handle: var(--flexlayout-color-splitter-handle, var(--color-3));
+  --color-drag-rect-border: var(--flexlayout-color-drag-rect-border, var(--color-4));
+  --color-drag-rect-background: var(--flexlayout-color-drag-rect-background, var(--color-1));
+  --color-drag-rect: var(--flexlayout-color-drag-rect, var(--color-text));
+  --color-popup-border: var(--flexlayout-color-popup-border, var(--color-6));
+  --color-popup-unselected: var(--flexlayout-color-popup-unselected, var(--color-text));
+  --color-popup-unselected-background: var(--flexlayout-color-popup-unselected-background, var(--color-background));
+  --color-popup-selected: var(--flexlayout-color-popup-selected, var(--color-text));
+  --color-popup-selected-background: var(--flexlayout-color-popup-selected-background, var(--color-4));
+  --color-edge-marker: var(--flexlayout-color-edge-marker, gray);
+  --color-edge-icon: var(--flexlayout-color-edge-icon, #eee);
+  --color-mini-scroll-indicator: var(--flexlayout-color-mini-scroll-indicator, rgba(128, 128, 128, 0.5));
+  --color-mini-scroll-indicator-hovered: var(--flexlayout-color-mini-scroll-indicator-hovered, rgba(128, 128, 128, 0.8));
+  --size-mini-scroll-indicator: var(--flexlayout-size-mini-scroll-indicator, 3px);
+  --color-toolbar-button-hover: var(--flexlayout-color-toolbar-button-hover, var(--color-4));
+  --color-float-window-header-background: var(--flexlayout-color-float-window-header-background, var(--color-tabset-background));
+  --color-tabgroup-pill-text: var(--flexlayout-color-tabgroup-pill-text, black);
+  --color-tabgroup-default: var(--flexlayout-color-tabgroup-default, #9e9e9e);
+  --color-tabgroup-menu-palette: var(--flexlayout-color-tabgroup-menu-palette, #d97a7a, #dd8a4a, #cbc688, #94b870, #7ab0b2, #7db6c6, #7895c4, #a394cf, #d187b2, #bf9e81);
+  --tabgroup-pill-radius: var(--flexlayout-tabgroup-pill-radius, 10px);
 }
 
 /*
@@ -81,9 +91,12 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   bottom: 0;
   position: absolute;
   display: flex;
-  overflow: hidden;
   background-color: var(--color-background);
 }
+.flexlayout__layout_metrics {
+  position: absolute;
+  top: -30000px;
+}
 .flexlayout__layout_overlay {
   left: 0;
   top: 0;
@@ -98,9 +111,9 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   z-index: 100;
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
 }
-.flexlayout__layout_moveables {
+.flexlayout__layout_moveables_home {
   visibility: hidden;
   position: absolute;
   width: 100px;
@@ -128,6 +141,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   min-width: 0;
   min-height: 0;
   flex-grow: 1;
+  position: relative;
 }
 .flexlayout__splitter {
   display: flex;
@@ -136,6 +150,41 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   background-color: var(--color-splitter);
   touch-action: none;
   z-index: 10;
+  position: relative;
+}
+.flexlayout__splitter:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+.flexlayout__splitter_horz {
+  width: var(--splitter-size);
+  min-width: var(--splitter-size);
+}
+.flexlayout__splitter_horz::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* Center the hit area over the thin line */
+  left: 50%;
+  width: var(--splitter-active-size);
+  transform: translateX(-50%);
+  z-index: 1;
+}
+.flexlayout__splitter_vert {
+  height: var(--splitter-size);
+  min-height: var(--splitter-size);
+}
+.flexlayout__splitter_vert::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* Center the hit area over the thin line */
+  top: 50%;
+  height: var(--splitter-active-size);
+  transform: translateY(-50%);
+  z-index: 1;
 }
 @media (hover: hover) {
   .flexlayout__splitter:hover {
@@ -155,8 +204,9 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   background-color: var(--color-splitter-drag);
 }
 .flexlayout__splitter_handle {
-  background-color: #ccc;
+  background-color: var(--color-splitter-handle);
   border-radius: 3px;
+  visibility: var(--splitter-handle-visibility);
 }
 .flexlayout__splitter_handle_horz {
   width: 3px;
@@ -166,10 +216,6 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   width: 30px;
   height: 3px;
 }
-.flexlayout__splitter_extra {
-  touch-action: none;
-  background-color: transparent;
-}
 .flexlayout__outline_rect {
   position: absolute;
   pointer-events: none;
@@ -254,25 +300,15 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 .flexlayout__tabset_leading {
   display: flex;
 }
-.flexlayout__tabset_header {
-  display: flex;
-  align-items: center;
-  padding: 3px 3px 3px 5px;
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--color-tabset-divider-line);
-  color: var(--color-tabset-header);
-  background-color: var(--color-tabset-header-background);
-  font-size: var(--font-size);
-}
-.flexlayout__tabset_header_content {
-  flex-grow: 1;
-}
 .flexlayout__tabset_tabbar_outer {
   box-sizing: border-box;
   background-color: var(--color-tabset-background);
   overflow: hidden;
   display: flex;
+  align-items: center;
+  min-height: 1.5em;
   font-size: var(--font-size);
+  font-weight: var(--font-weight);
 }
 .flexlayout__tabset_tabbar_outer_top {
   padding: 0px 2px 0px 2px;
@@ -299,6 +335,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   padding-right: 4px;
   box-sizing: border-box;
   white-space: nowrap;
+  align-items: center;
 }
 .flexlayout__tabset_tabbar_inner_tab_container_top {
   border-top: 2px solid transparent;
@@ -319,12 +356,137 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   white-space: nowrap;
   box-sizing: border-box;
 }
+.flexlayout__group_pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  padding: 2px 8px 2px 8px;
+  margin: 2px 2px;
+  border-radius: var(--tabgroup-pill-radius) 0 0 var(--tabgroup-pill-radius);
+  border: 1px solid var(--color-tabset-divider-line);
+  border-right: none;
+  background-color: var(--color-base);
+  color: var(--color-tabgroup-pill-text);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.flexlayout__group_pill:focus-visible {
+  outline: 2px solid var(--color-focus);
+}
+.flexlayout__group_pill_collapsed {
+  border-radius: var(--tabgroup-pill-radius);
+  border-right: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__group_pill_underline {
+  border-radius: var(--tabgroup-pill-radius);
+  border-right: 1px solid var(--color-tabset-divider-line);
+}
+.flexlayout__group_pill_name {
+  max-width: 10em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flexlayout__group_pill_name::before {
+  content: "​";
+}
+.flexlayout__group_pill_count {
+  opacity: 0.7;
+  font-size: 0.85em;
+}
+.flexlayout__group_end_marker {
+  display: inline-block;
+  border-radius: 0 var(--tabgroup-pill-radius) var(--tabgroup-pill-radius) 0;
+  border: 1px solid var(--color-tabset-divider-line);
+  border-left: none;
+  background-color: var(--color-base);
+  padding: 2px 7px 2px 7px;
+  margin: 2px 2px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.flexlayout__group_end_marker::before {
+  content: "​";
+}
+.flexlayout__tab_button_grouped_underline {
+  position: relative;
+}
+.flexlayout__tab_button_grouped_underline::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  height: var(--underline_height, 2px);
+  border-radius: calc(var(--underline_height, 2px) / 2);
+  background-color: var(--flexlayout-group-color, transparent);
+  pointer-events: none;
+}
+.flexlayout__group_rename {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.flexlayout__group_rename_input {
+  padding: 3px;
+  border-radius: 5px;
+  border: 1px solid var(--color-popup-border);
+  background-color: var(--color-tab-textbox-background, var(--color-3));
+  color: var(--color-tab-textbox, var(--color-text));
+}
+.flexlayout__group_picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 0;
+  max-width: 18em;
+}
+.flexlayout__group_picker_item {
+  border: 1px solid var(--color-popup-border);
+  border-radius: 10px;
+  padding: 0 8px;
+  line-height: 1.6em;
+  font-size: 0.9em;
+  cursor: pointer;
+  background-color: var(--color-base);
+  color: var(--color-popup-unselected);
+}
+.flexlayout__group_picker_item:hover {
+  filter: brightness(0.95);
+}
+.flexlayout__group_color_picker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0;
+  max-width: 14em;
+}
+.flexlayout__group_color_picker_swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid var(--color-popup-border);
+  cursor: pointer;
+  padding: 0;
+}
+.flexlayout__group_color_picker_swatch:hover {
+  transform: scale(1.1);
+}
+.flexlayout__group_color_picker_custom {
+  display: inline-flex;
+  align-items: center;
+}
+.flexlayout__group_color_picker_custom input[type=color] {
+  cursor: pointer;
+}
 .flexlayout__tab {
   overflow: hidden;
   box-sizing: border-box;
   background-color: var(--color-tab-content);
   color: var(--color-text);
-  position: relative;
+  position: absolute;
 }
 .flexlayout__tab_moveable {
   position: relative;
@@ -343,12 +505,35 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2392156863);
 }
+.flexlayout__tab_border_overlay {
+  z-index: 1000;
+}
+.flexlayout__tab_overlay_raised {
+  z-index: 1001;
+}
+.flexlayout__tab_layout_container {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+.flexlayout__tab_layout_container_user {
+  position: relative;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
 .flexlayout__tab_button {
   display: flex;
   gap: 0.3em;
   align-items: center;
   box-sizing: border-box;
   padding: 3px 0.5em;
+  font-weight: var(--font-weight);
+}
+.flexlayout__tab_button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+.flexlayout__tab_button {
   cursor: pointer;
 }
 .flexlayout__tab_button_stretch {
@@ -384,6 +569,9 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 .flexlayout__tab_button_leading {
   display: flex;
 }
+.flexlayout__tab_button_pin {
+  display: flex;
+}
 .flexlayout__tab_button_content {
   display: flex;
   text-wrap: nowrap;
@@ -392,6 +580,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   border: none;
   font-family: var(--font-family);
   font-size: var(--font-size);
+  font-weight: var(--font-weight);
   color: var(--color-tab-textbox);
   background-color: var(--color-tab-textbox-background);
   border: 1px inset var(--color-1);
@@ -399,7 +588,8 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   width: 10em;
 }
 .flexlayout__tab_button_textbox:focus {
-  outline: none;
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
 }
 .flexlayout__tab_button_trailing {
   display: flex;
@@ -442,6 +632,10 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   background-color: transparent;
   padding: 1px;
 }
+.flexlayout__tab_toolbar_icon:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
 .flexlayout__tab_toolbar_button {
   border: none;
   outline: none;
@@ -451,6 +645,10 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   border-radius: 4px;
   padding: 1px;
 }
+.flexlayout__tab_toolbar_button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
 @media (hover: hover) {
   .flexlayout__tab_toolbar_button:hover {
     background-color: var(--color-toolbar-button-hover);
@@ -466,8 +664,9 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   box-sizing: border-box;
   overflow: hidden;
   display: flex;
-  font-size: var(--font-size);
   font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
   color: var(--color-border);
   background-color: var(--color-border-background);
 }
@@ -476,6 +675,34 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   overflow: hidden;
   background-color: var(--color-border-tab-content);
 }
+.flexlayout__border_tab_overlay {
+  position: absolute;
+  z-index: 100;
+}
+.flexlayout__border_tab_overlay_top {
+  top: 0;
+  left: 0;
+  right: 0;
+  flex-direction: column;
+}
+.flexlayout__border_tab_overlay_bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  flex-direction: column;
+}
+.flexlayout__border_tab_overlay_left {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  flex-direction: row;
+}
+.flexlayout__border_tab_overlay_right {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  flex-direction: row;
+}
 .flexlayout__border_leading {
   display: flex;
 }
@@ -511,6 +738,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 .flexlayout__border_inner_tab_container {
   white-space: nowrap;
   display: flex;
+  align-items: center;
   padding-left: 2px;
   padding-right: 2px;
   box-sizing: border-box;
@@ -525,6 +753,11 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   transform-origin: top right;
   transform: rotate(-90deg);
 }
+.flexlayout__border_inner_tab_container_left_down {
+  flex-direction: row;
+  transform-origin: top left;
+  transform: rotate(90deg);
+}
 .flexlayout__border_tab_divider {
   width: 4px;
 }
@@ -537,6 +770,11 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   margin: 2px 0px;
   box-sizing: border-box;
   white-space: nowrap;
+  font-weight: var(--font-weight);
+}
+.flexlayout__border_button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
 }
 .flexlayout__border_button--selected {
   background-color: var(--color-border-tab-selected-background);
@@ -592,6 +830,10 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   border-radius: 4px;
   padding: 1px;
 }
+.flexlayout__border_toolbar_button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
 @media (hover: hover) {
   .flexlayout__border_toolbar_button:hover {
     background-color: var(--color-toolbar-button-hover);
@@ -609,6 +851,7 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 .flexlayout__popup_menu {
   font-size: var(--font-size);
   font-family: var(--font-family);
+  font-weight: var(--font-weight);
 }
 .flexlayout__popup_menu_item {
   padding: 2px 0.5em;
@@ -616,16 +859,35 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   cursor: pointer;
   border-radius: 2px;
 }
+.flexlayout__popup_menu_item.flexlayout__popup_menu_item_grouped {
+  border-left: 5px solid var(--flexlayout-group-color, var(--color-tabgroup-default));
+  padding-left: calc(0.5em - 5px);
+  border-radius: 0 !important;
+}
+.flexlayout__popup_menu_item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
 .flexlayout__popup_menu_item--selected {
   font-weight: 500;
   background-color: var(--color-tab-selected-background);
   color: var(--color-tab-selected);
 }
+.flexlayout__popup_menu_item--disabled {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
 @media (hover: hover) {
   .flexlayout__popup_menu_item:hover {
     background-color: var(--color-6);
   }
 }
+.flexlayout__popup_menu_divider {
+  height: 1px;
+  margin: 4px 2px;
+  background-color: var(--color-popup-border);
+}
 .flexlayout__popup_menu_container {
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
   border: 1px solid var(--color-popup-border);
@@ -633,12 +895,75 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   background: var(--color-popup-unselected-background);
   border-radius: 3px;
   position: absolute;
-  z-index: 1000;
+  z-index: 3000;
   max-height: 50%;
   min-width: 100px;
   overflow: auto;
   padding: 2px;
 }
+.flexlayout__float_window {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 2000;
+}
+.flexlayout__float_window_header {
+  display: flex;
+  align-items: center;
+  padding: 5px 5px;
+  background-color: var(--color-float-window-header-background);
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+  cursor: move;
+  user-select: none;
+  font-family: var(--font-family);
+  font-size: 0.8em;
+  min-height: 15px;
+}
+.flexlayout__float_window_header_title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flexlayout__float_window_drag_handle {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  opacity: 0.7;
+  cursor: grab;
+}
+.flexlayout__float_window_drag_handle:hover {
+  opacity: 1;
+}
+.flexlayout__float_window_drag_handle:active {
+  cursor: grabbing;
+}
+.flexlayout__float_window_button {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  margin: 0;
+  border: none;
+  background: none;
+  opacity: 0.7;
+  cursor: pointer;
+}
+.flexlayout__float_window_button:hover {
+  opacity: 1;
+}
+.flexlayout__float_window_content {
+  position: relative;
+  overflow: auto;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  margin: 5px;
+}
 .flexlayout__floating_window _body {
   height: 100%;
 }
@@ -664,11 +989,11 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 }
 .flexlayout__border_sizer {
   position: absolute;
-  top: -30000px;
   padding-top: 6px;
   padding-bottom: 5px;
   font-size: var(--font-size);
   font-family: var(--font-family);
+  font-weight: var(--font-weight);
 }
 .flexlayout__mini_scrollbar {
   position: absolute;
@@ -701,9 +1026,6 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 /* 
     dark theme overrides 
 */
-.flexlayout__tabset_header {
-  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
-}
 .flexlayout__tabset-selected {
   background-image: linear-gradient(var(--color-background), var(--color-4));
 }
@@ -772,6 +1094,8 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   --color-tab-selected-background: var(--accent-fill-rest);
   --color-splitter-drag: var(--accent-fill-rest);
   --color-splitter-hover: var(--accent-fill-hover);
+
+  --tabgroup-pill-radius: 9999px;
 }
 
 .flexlayout__tabset-selected,
@@ -853,29 +1177,25 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
 }
 
 .flexlayout__tab_button {
-  border-right-style: solid;
-  border-right-width: var(--tab-rest-border-width, 1px);
-  border-right-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));
   padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);
   gap: 8px;
-
-  &:first-child {
-    border-left-style: solid;
-    border-left-width: var(--tab-rest-border-width, 1px);
-    border-left-color: var(--tab-rest-border-color, var(--neutral-stroke-rest));
-  }
+  height: 100%;
 }
 
 .flexlayout__tab_button--selected {
   position: relative;
   color: var(--accent-foreground-rest) !important;
   background: var(--tab-active-background-color, var(--neutral-layer-card-container));
+
+  /*
+   * Keep this border-* trio: themes that mark selection with an underline rather than a
+   * background (corporate sets \`--tab-active-border-width: 0 0 2px 0\`) have nothing to
+   * hang the underline on without it. Defaults to 0 because the spacers now draw the
+   * separators — the old \`0 1px 0 0\` default would double up against them.
+   */
   border-style: solid;
-  border-width: var(--tab-active-border-width, 0 1px 0 0);
+  border-width: var(--tab-active-border-width, 0);
   border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));
-  .flexlayout__tab_button_content {
-    font-weight: 700;
-  }
 }
 
 .flexlayout__tab {
@@ -896,8 +1216,29 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   }
 }
 
-.flexlayout__tabset_tab_divider {
+/*
+ * Tab separators live on flexlayout's own spacer elements, not as borders on the tab
+ * buttons. flexlayout emits a spacer before every tab, group pill and end marker, plus a
+ * trailing one, and every spacer carries \`_tab_spacer\` — \`_tab_divider\` is an extra class
+ * on just the subset sitting between two tabs. Styling \`_tab_spacer\` therefore covers the
+ * dividers too, and separates every element in the strip including the leading and
+ * trailing edges. It also needs no positional selectors: the previous rule bordered the
+ * buttons and reached the leading edge via \`:nth-of-type(2)\`, which assumed exactly one
+ * leading spacer, and a leading group pill or \`tabGroupType: 'splitpill'\` pushes more.
+ *
+ * Driven by the same \`--tab-rest-border-*\` tokens the buttons used before, so the
+ * separators stay consistent with rapid-tabs (tabs.styles.ts) and foundation-layout
+ * (layout.styles.ts), which read the same pair. Set \`--tab-rest-border-color: transparent\`
+ * (or \`--tab-rest-border-width: 0\`) to hide them.
+ *
+ * \`align-self: stretch\` is required because the tab container centres its items, so the
+ * spacer would otherwise collapse to its content height and the line would not show.
+ */
+.flexlayout__tabset_tab_spacer {
+  align-self: stretch;
   width: 0;
+  border-left: var(--tab-rest-border-width, 1px) solid
+    var(--tab-rest-border-color, var(--neutral-stroke-rest));
 }
 
 .flexlayout__tab_button_trailing {
@@ -978,4 +1319,53 @@ export const FLEXLAYOUT_REACT_THEME_CSS = `/* ==================================
   bottom: 8px;
   left: 8px;
   right: 8px;
+}
+
+.flexlayout__mini_scrollbar_container {
+  height: 100%;
+}
+
+.flexlayout__group_pill {
+  margin: 2px 0 2px 8px;
+  height: calc(100% - 12px);
+  font-size: 11px;
+  + .flexlayout__tabset_tab_spacer {
+    display: none;
+  }
+}
+
+.flexlayout__group_pill_collapsed {
+  margin: 2px 8px;
+  + .flexlayout__tabset_tab_spacer {
+    display: block;
+  }
+}
+
+.flexlayout__group_end_marker {
+  margin: 2px 8px 2px 0;
+  height: calc(100% - 12px);
+}
+
+.flexlayout__tab_button_grouped {
+  &.flexlayout__tab_button {
+    border-right: 0;
+    height: auto;
+    padding: 0 8px;
+    height: calc(100% - 12px);
+    border-top: 1px solid var(--neutral-stroke-rest);
+    border-bottom: 1px solid var(--neutral-stroke-rest);
+    border-right: 1px solid var(--neutral-stroke-rest);
+    .flexlayout__tab_button_content {
+      font-size: 11px;
+    }
+    + .flexlayout__tabset_tab_divider {
+      display: none;
+    }
+    + .flexlayout__tabset_tab_spacer {
+      display: none;
+    }
+  }
+  &.flexlayout__tab_button--selected {
+    border: 0;
+  }
 }`;