@genesislcap/rapid-design-system 15.24.2 → 15.25.1

package/dist/esm/flexlayout-react-theme/flexlayout-react.overrides.css

@@ -42,6 +42,8 @@
   --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,
@@ -123,29 +125,25 @@
 }
 
 .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 {
@@ -166,8 +164,29 @@
   }
 }
 
-.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 {
@@ -249,3 +268,52 @@
   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;
+  }
+}

package/dist/react.cjs

@@ -104,14 +104,14 @@ const Accordion = React.forwardRef(function Accordion(props, ref) {
   return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
-const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
 const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
@@ -1000,8 +1000,8 @@ const SystemHealthOverlay = React.forwardRef(function SystemHealthOverlay(props,
 
 module.exports = {
   Accordion,
-  ActionsMenu,
   AccordionItem,
+  ActionsMenu,
   AiCriteriaSearch,
   AiIndicator,
   Anchor,

package/dist/react.mjs

@@ -102,14 +102,14 @@ export const Accordion = React.forwardRef(function Accordion(props, ref) {
   return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
-export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
 export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "15.24.2",
+  "version": "15.25.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -24,6 +24,8 @@
     "dev:rollup": "genx dev -b rollup",
     "dev:tsc": "genx dev -b ts",
     "flexlayout:generate": "node ./scripts/generate-flexlayout-theme.mjs",
+    "flexlayout:generate:watch": "node ./scripts/generate-flexlayout-theme.mjs --watch",
+    "dev:assets": "npm run flexlayout:generate:watch",
     "lint": "genx lint -l ox",
     "lint:fix": "genx lint -l ox --fix",
     "test": "genx test",
@@ -38,17 +40,17 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/foundation-testing": "15.24.2",
-    "@genesislcap/genx": "15.24.2",
-    "@genesislcap/rollup-builder": "15.24.2",
-    "@genesislcap/ts-builder": "15.24.2",
-    "@genesislcap/uvu-playwright-builder": "15.24.2",
-    "@genesislcap/vite-builder": "15.24.2",
-    "@genesislcap/webpack-builder": "15.24.2",
-    "flexlayout-react": "^0.8.19"
+    "@genesislcap/foundation-testing": "15.25.1",
+    "@genesislcap/genx": "15.25.1",
+    "@genesislcap/rollup-builder": "15.25.1",
+    "@genesislcap/ts-builder": "15.25.1",
+    "@genesislcap/uvu-playwright-builder": "15.25.1",
+    "@genesislcap/vite-builder": "15.25.1",
+    "@genesislcap/webpack-builder": "15.25.1",
+    "flexlayout-react": "^0.10.8"
   },
   "peerDependencies": {
-    "flexlayout-react": "^0.8.19"
+    "flexlayout-react": "^0.10.8"
   },
   "peerDependenciesMeta": {
     "flexlayout-react": {
@@ -56,9 +58,9 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "15.24.2",
-    "@genesislcap/foundation-ui": "15.24.2",
-    "@genesislcap/foundation-utils": "15.24.2",
+    "@genesislcap/foundation-logger": "15.25.1",
+    "@genesislcap/foundation-ui": "15.25.1",
+    "@genesislcap/foundation-utils": "15.25.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",

package/scripts/generate-flexlayout-theme.mjs

@@ -18,13 +18,14 @@
  * Usage:
  *   node scripts/generate-flexlayout-theme.mjs           # write the generated file
  *   node scripts/generate-flexlayout-theme.mjs --check   # exit 1 if the file is stale
+ *   node scripts/generate-flexlayout-theme.mjs --watch   # rewrite it on every overrides save
  *
  * The package `build` runs this in write mode, so a flexlayout-react version bump that is
  * not accompanied by a regenerated theme leaves the working tree dirty and fails CI's
  * "Check working tree" gate — turning silent, per-app drift into one loud build failure.
  */
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import { dirname, join, resolve } from 'node:path';
+import { existsSync, readFileSync, watch, writeFileSync } from 'node:fs';
+import { basename, dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const scriptDir = dirname(fileURLToPath(import.meta.url));
@@ -118,11 +119,66 @@ export const FLEXLAYOUT_REACT_THEME_CSS = \`${escapeForTemplateLiteral(merged)}\
 `;
 }
 
-const isCheck = process.argv.includes('--check');
-const next = buildGeneratedFile();
-const current = existsSync(outPath) ? readFileSync(outPath, 'utf8') : '';
+/**
+ * Regenerate the file, writing only when the content actually changes.
+ * @returns {boolean} whether the file on disk was rewritten
+ */
+function generate() {
+  const next = buildGeneratedFile();
+  const current = existsSync(outPath) ? readFileSync(outPath, 'utf8') : '';
+  if (next === current) {
+    return false;
+  }
+  writeFileSync(outPath, next);
+  return true;
+}
+
+/**
+ * Rewrite the generated theme on every save of the overrides stylesheet, so a CSS edit reaches
+ * a running dev server: the regenerated `.ts` is what the package's `tsc -b -w` watches, and its
+ * rebuilt `dist` output is what the app's bundler hot reloads.
+ *
+ * Watches the containing directory rather than the file itself, because editors that save
+ * atomically (write a temp file, then rename over the original) replace the inode, which
+ * silently deafens a single-file watch after the first save.
+ */
+function watchOverrides() {
+  /** Coalesce the burst of events an editor fires for a single save. */
+  const debounceMs = 50;
+  const dir = dirname(overridesPath);
+  const target = basename(overridesPath);
+  let timer;
 
-if (isCheck) {
+  const regenerate = () => {
+    const time = new Date().toLocaleTimeString();
+    try {
+      console.log(
+        generate()
+          ? `${time} - Regenerated flexlayout-react theme.`
+          : `${time} - flexlayout-react theme unchanged.`,
+      );
+    } catch (error) {
+      // A transient read (a half-written save) must not kill the watcher.
+      console.error(`${time} - ${error instanceof Error ? error.message : error}`);
+    }
+  };
+
+  watch(dir, (_event, filename) => {
+    // Ignore everything else in the directory - notably the generated file this writes.
+    if (filename !== target) {
+      return;
+    }
+    clearTimeout(timer);
+    timer = setTimeout(regenerate, debounceMs);
+  });
+
+  regenerate();
+  console.log(`Watching ${target} for changes...`);
+}
+
+if (process.argv.includes('--check')) {
+  const next = buildGeneratedFile();
+  const current = existsSync(outPath) ? readFileSync(outPath, 'utf8') : '';
   if (next !== current) {
     console.error(
       '✖ flexlayout-react theme is stale. Run `pnpm --filter @genesislcap/rapid-design-system flexlayout:generate` and commit the result.',
@@ -130,9 +186,8 @@ if (isCheck) {
     process.exit(1);
   }
   console.log('✔ flexlayout-react theme is up to date.');
-} else if (next !== current) {
-  writeFileSync(outPath, next);
-  console.log(`✔ Wrote ${outPath}`);
+} else if (process.argv.includes('--watch')) {
+  watchOverrides();
 } else {
-  console.log('✔ flexlayout-react theme already up to date.');
+  console.log(generate() ? `✔ Wrote ${outPath}` : '✔ flexlayout-react theme already up to date.');
 }