@genesislcap/rapid-design-system 14.471.0 → 14.472.0

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

@@ -0,0 +1,67 @@
+import { css } from '@microsoft/fast-element';
+import { FLEXLAYOUT_REACT_THEME_CSS, RAPID_FLEXLAYOUT_REACT_VERSION, } from './flexlayout-react-theme.generated';
+/**
+ * The flexlayout-react version this theme is built against. flexlayout-react remains an
+ * app-level dependency; this is the version the platform theme is known to be compatible
+ * with (see the optional `flexlayout-react` peerDependency).
+ */
+export { RAPID_FLEXLAYOUT_REACT_VERSION };
+/**
+ * The complete, platform-owned flexlayout-react theme as raw CSS text: the vendored
+ * flexlayout-react base theme (structural CSS + dark palette) followed by the Rapid Design
+ * System overrides (token remap + tweaks). This is the single source of truth — apps should
+ * never import flexlayout-react's own stylesheets or copy the overrides locally.
+ *
+ * Colours resolve from rapid design tokens, so render flexlayout-react under a
+ * `<rapid-design-system-provider>` (CSS custom properties inherit across shadow boundaries).
+ *
+ * Use this when you need the string directly (e.g. server-rendered `<style>`); most callers
+ * want {@link installRapidFlexLayoutReactStyles} or {@link getRapidFlexLayoutReactStyleSheet}.
+ */
+export const rapidFlexLayoutReactStyleText = FLEXLAYOUT_REACT_THEME_CSS;
+/**
+ * The platform flexlayout-react theme as FAST {@link ElementStyles}, for adoption into a
+ * web component's shadow root (e.g. composing into a component's `styles`).
+ */
+export const rapidFlexLayoutReactStyles = css `
+  ${rapidFlexLayoutReactStyleText}
+`;
+const STYLE_MARKER = 'data-rapid-flexlayout-react-theme';
+let cachedSheet;
+/**
+ * Returns a cached constructable {@link CSSStyleSheet} for the platform flexlayout-react
+ * theme, suitable for `(document | shadowRoot).adoptedStyleSheets`. The sheet is created
+ * once and shared across all adopters.
+ *
+ * @example
+ * shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, getRapidFlexLayoutReactStyleSheet()];
+ */
+export const getRapidFlexLayoutReactStyleSheet = () => {
+    if (!cachedSheet) {
+        cachedSheet = new CSSStyleSheet();
+        cachedSheet.replaceSync(rapidFlexLayoutReactStyleText);
+    }
+    return cachedSheet;
+};
+/**
+ * Installs the platform flexlayout-react theme into a `Document` (default) or `ShadowRoot`.
+ * Idempotent — calling it more than once on the same target is a no-op. Call once where
+ * flexlayout-react renders:
+ *  - light DOM: `installRapidFlexLayoutReactStyles()` at app bootstrap;
+ *  - shadow DOM: `installRapidFlexLayoutReactStyles(myShadowRoot)`.
+ *
+ * Prefers constructable stylesheets (`adoptedStyleSheets`); falls back to injecting a
+ * `<style>` element for older engines.
+ */
+export const installRapidFlexLayoutReactStyles = (target = document) => {
+    // Cast the `in` operand so TS does not narrow `target` to `never` in the fallback branch
+    // (both Document and ShadowRoot declare `adoptedStyleSheets` in the DOM lib types, so the
+    // negative branch would otherwise be considered unreachable).
+    if ('adoptedStyleSheets' in target) {
+        const sheet = getRapidFlexLayoutReactStyleSheet();
+        if (!target.adoptedStyleSheets.includes(sheet)) {
+            target.adoptedStyleSheets = [...target.adoptedStyleSheets, sheet];
+        }
+        return;
+    }
+};

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

@@ -0,0 +1,253 @@
+/*
+ * flexlayout-react.overrides.css — Rapid Design System theme overrides for flexlayout-react.
+ *
+ * THIS IS THE SINGLE SOURCE OF TRUTH for how flexlayout-react looks across every app that
+ * consumes Foundation. Do NOT copy these rules into apps — import the compiled theme from
+ * `@genesislcap/rapid-design-system` instead (see flexlayout-react-theme.ts).
+ *
+ * Build pipeline: `scripts/generate-flexlayout-theme.mjs` concatenates the vendored
+ * flexlayout-react base theme (structural CSS + dark palette) FIRST, then this file LAST,
+ * into `flexlayout-react-theme.generated.ts`. Equal specificity means the later sheet wins,
+ * so every rule here overrides the vendored default. Run `pnpm flexlayout:generate` after
+ * editing (the package build does this automatically).
+ *
+ * The flexlayout theme is almost entirely driven by CSS custom properties declared on
+ * `.flexlayout__layout` (see the full list at the top of the vendored base theme). The
+ * easiest way to re-skin is to remap those variables to rapid design-system tokens, as
+ * below. For anything the variables don't cover, target the `.flexlayout__*` classes
+ * directly (examples at the bottom).
+ *
+ * Tokens resolve from the nearest design-system provider ancestor (CSS custom properties
+ * inherit across shadow boundaries), so flexlayout-react must render under a
+ * `<rapid-design-system-provider>` for these to take effect.
+ */
+
+/* --- Variable remap: flexlayout palette -> rapid design tokens ----------------- */
+.flexlayout__layout {
+  --font-family: var(--body-font, Roboto, Arial, sans-serif);
+  --font-size: var(--type-ramp-base-font-size);
+
+  --color-text: var(--neutral-foreground-rest);
+  --color-background: var(--fill-color);
+
+  /* Greyscale ramp used across tabsets, borders and toolbars. */
+  --color-1: var(--neutral-layer-1);
+  --color-2: var(--neutral-layer-2);
+  --color-3: var(--neutral-layer-3);
+  --color-4: var(--neutral-layer-4);
+
+  /* Selected tab + active splitter pick up the accent colour. */
+  --color-tab-selected: var(--accent-foreground-rest);
+  --color-tab-unselected: var(--neutral-foreground-hint);
+  --color-tab-selected-background: var(--accent-fill-rest);
+  --color-splitter-drag: var(--accent-fill-rest);
+  --color-splitter-hover: var(--accent-fill-hover);
+}
+
+.flexlayout__tabset-selected,
+.flexlayout__tabset-maximized {
+  background-image: none !important;
+}
+
+.flexlayout__tab_button_content {
+  font-weight: 400;
+  font-size: var(--type-ramp-minus-1-font-size);
+}
+
+.flexlayout__tab_button--unselected:hover {
+  color: var(--neutral-foreground-rest, #e0e0e0) !important;
+  background-color: var(--neutral-fill-stealth-active, rgba(255, 255, 255, 0.06)) !important;
+}
+
+.flexlayout__tab_top,
+.flexlayout__tab_bottom {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.flexlayout__tab_toolbar_button-max,
+.flexlayout__tab_toolbar_button-min {
+  order: 100;
+}
+
+.flexlayout__tab_button_textbox {
+  box-sizing: border-box;
+  width: auto;
+  min-width: 8em;
+  max-width: 100%;
+  margin: 0;
+  padding: 0 calc(var(--design-unit, 4) * 1px);
+  font-family: var(--body-font);
+  font-size: var(--type-ramp-base-font-size, var(--font-size));
+  font-weight: 500;
+  line-height: var(--type-ramp-base-line-height, normal);
+  color: var(--neutral-foreground-rest);
+  background-color: var(--neutral-fill-input-rest);
+  border: 1px solid var(--neutral-stroke-rest);
+  border-radius: calc(var(--control-corner-radius, 2) * 1px);
+
+  &:focus {
+    outline: none;
+    color: var(--neutral-foreground-rest);
+    background-color: var(--neutral-fill-input-focus, var(--neutral-fill-input-rest));
+    border-color: var(--accent-fill-rest);
+  }
+}
+
+.flexlayout__tabset {
+  border: var(--card-border, 1px solid var(--neutral-stroke-rest));
+  border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
+  background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));
+}
+
+.flexlayout__tabset_content {
+  margin-top: -1px;
+}
+
+.flexlayout__tabset_tabbar_outer_top {
+  border: 0;
+  height: var(
+    --foundation-tab-height,
+    calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)
+  );
+  background: none;
+  z-index: 1;
+}
+
+.flexlayout__tabset_container {
+  border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
+}
+
+.flexlayout__tabset_tabbar_inner_tab_container_top {
+  border-top: 0;
+}
+
+.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));
+  }
+}
+
+.flexlayout__tab_button--selected {
+  position: relative;
+  color: var(--accent-foreground-rest) !important;
+  background: var(--tab-active-background-color, var(--neutral-layer-card-container));
+  border-style: solid;
+  border-width: var(--tab-active-border-width, 0 1px 0 0);
+  border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));
+  .flexlayout__tab_button_content {
+    font-weight: 700;
+  }
+}
+
+.flexlayout__tab {
+  border-radius: calc(var(--control-corner-radius) * 1.5px)
+    calc(var(--control-corner-radius) * 1.5px)
+    var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
+    var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
+  border-top: var(--card-border, 1px solid var(--neutral-stroke-rest));
+  background: var(--neutral-layer-card-container);
+
+  rapid-card {
+    display: flex;
+    flex-direction: column;
+    border: 0;
+    border-radius: 0 0 var(--card-corner-radius) var(--card-corner-radius);
+    grid-register {
+      display: block;
+      height: 100%;
+    }
+  }
+}
+
+.flexlayout__tabset_tab_divider {
+  width: 0;
+}
+
+.flexlayout__tab_button_trailing {
+  rapid-icon {
+    color: var(--accent-foreground-rest);
+
+    &:hover {
+      color: var(--accent-foreground-hover);
+    }
+  }
+}
+
+.flexlayout__popup_menu_container {
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  border: 1px solid var(--neutral-stroke-rest);
+}
+
+.flexlayout__popup_menu_item {
+  padding: calc((8 + var(--design-unit) * 2 * var(--density)) * 1px);
+  border-bottom: 1px solid var(--neutral-stroke-divider-rest);
+
+  &:hover {
+    background-color: var(--neutral-fill-rest);
+    color: contrast-color(var(--neutral-fill-rest));
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.flexlayout__popup_menu_item--selected {
+  background-color: var(--neutral-fill-rest);
+  color: contrast-color(var(--neutral-fill-rest));
+}
+
+.flexlayout__tab_toolbar_button {
+  padding: 0;
+  height: unset;
+  width: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  > svg {
+    height: 16px !important;
+    width: 16px !important;
+    padding: 4px;
+    fill: var(--neutral-foreground-hint);
+  }
+}
+
+.flexlayout__splitter_vert {
+  background-color: var(--neutral-foreground-rest);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNDE2IDI1NmEzMiAzMiAwIDEgMSAtNjQgMCAzMiAzMiAwIDEgMSA2NCAwem0tMTYwIDBhMzIgMzIgMCAxIDEgLTY0IDAgMzIgMzIgMCAxIDEgNjQgMHpNNjQgMjg4YTMyIDMyIDAgMSAxIDAtNjQgMzIgMzIgMCAxIDEgMCA2NHoiLz48L3N2Zz4=);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 12px;
+  &:hover {
+    mask-image: none;
+  }
+}
+
+.flexlayout__splitter_horz {
+  background-color: var(--neutral-foreground-rest);
+  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI0IEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNjQgMzg0YTMyIDMyIDAgMSAwIDAgNjQgMzIgMzIgMCAxIDAgMC02NHptMC0xNjBhMzIgMzIgMCAxIDAgMCA2NCAzMiAzMiAwIDEgMCAwLTY0ek05NiA5NkEzMiAzMiAwIDEgMCAzMiA5NmEzMiAzMiAwIDEgMCA2NCAweiIvPjwvc3ZnPg==);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 4px;
+  &:hover {
+    mask-image: none;
+  }
+}
+
+.flexlayout__layout {
+  top: 8px;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+}

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

@@ -0,0 +1 @@
+export * from './flexlayout-react-theme';

package/dist/esm/index.js

@@ -39,6 +39,7 @@ export * from './file-upload';
 export * from './filter';
 export * from './filter-bar';
 export * from './flex-layout';
+export * from './flexlayout-react-theme';
 export * from './flipper';
 export * from './flyout';
 export * from './grid-layout';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "14.471.0",
+  "version": "14.472.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -15,14 +15,15 @@
     "PREFIX": "rapid"
   },
   "scripts": {
-    "build": "genx build",
-    "build:rollup": "genx build -b rollup",
+    "build": "node ./scripts/generate-flexlayout-theme.mjs && genx build",
+    "build:rollup": "node ./scripts/generate-flexlayout-theme.mjs && genx build -b rollup",
     "build:rollup:stats": "genx analyze -b rollup",
     "circular": "npx -y madge --extensions ts --circular ./src",
     "clean": "rimraf dist temp tsconfig.tsbuildinfo",
     "dev": "npm run dev:tsc",
     "dev:rollup": "genx dev -b rollup",
     "dev:tsc": "genx dev -b ts",
+    "flexlayout:generate": "node ./scripts/generate-flexlayout-theme.mjs",
     "lint": "genx lint -l ox",
     "lint:fix": "genx lint -l ox --fix"
   },
@@ -35,17 +36,26 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/genx": "14.471.0",
-    "@genesislcap/rollup-builder": "14.471.0",
-    "@genesislcap/ts-builder": "14.471.0",
-    "@genesislcap/uvu-playwright-builder": "14.471.0",
-    "@genesislcap/vite-builder": "14.471.0",
-    "@genesislcap/webpack-builder": "14.471.0"
+    "@genesislcap/genx": "14.472.0",
+    "@genesislcap/rollup-builder": "14.472.0",
+    "@genesislcap/ts-builder": "14.472.0",
+    "@genesislcap/uvu-playwright-builder": "14.472.0",
+    "@genesislcap/vite-builder": "14.472.0",
+    "@genesislcap/webpack-builder": "14.472.0",
+    "flexlayout-react": "^0.8.19"
+  },
+  "peerDependencies": {
+    "flexlayout-react": "^0.8.19"
+  },
+  "peerDependenciesMeta": {
+    "flexlayout-react": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.471.0",
-    "@genesislcap/foundation-ui": "14.471.0",
-    "@genesislcap/foundation-utils": "14.471.0",
+    "@genesislcap/foundation-logger": "14.472.0",
+    "@genesislcap/foundation-ui": "14.472.0",
+    "@genesislcap/foundation-utils": "14.472.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -73,5 +83,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "610c348b892f15a2c15140528863aee389801a78"
+  "gitHead": "9518c7fe66db1d4ceafe5555d6e9ded4dd9b249c"
 }

package/scripts/generate-flexlayout-theme.mjs

@@ -0,0 +1,138 @@
+// @ts-check
+/**
+ * generate-flexlayout-theme.mjs
+ *
+ * Builds the single, platform-owned flexlayout-react theme that every Foundation app
+ * consumes (so the override can never fall out of sync across apps).
+ *
+ * It concatenates, in order:
+ *   1. the VENDORED flexlayout-react base theme — `flexlayout-react/style/dark.css`
+ *      (structural CSS + dark palette), read from the installed, pinned dependency; then
+ *   2. the Rapid Design System overrides — `flexlayout-react.overrides.css` (token remap +
+ *      class tweaks). Later sheet wins at equal specificity, so the overrides take effect.
+ *
+ * The merged CSS + the resolved flexlayout-react version are written to
+ * `flexlayout-react-theme.generated.ts` as plain string exports (no `.css` import — the
+ * package builds with tsc, which cannot import CSS).
+ *
+ * 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
+ *
+ * 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 { fileURLToPath } from 'node:url';
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(scriptDir, '..');
+const overridesPath = join(
+  pkgRoot,
+  'src',
+  'flexlayout-react-theme',
+  'flexlayout-react.overrides.css',
+);
+const outPath = join(
+  pkgRoot,
+  'src',
+  'flexlayout-react-theme',
+  'flexlayout-react-theme.generated.ts',
+);
+
+/**
+ * Locate the installed flexlayout-react package by walking up the directory tree looking
+ * for `node_modules/flexlayout-react`. Robust against pnpm layouts and `exports` maps that
+ * would otherwise block `require.resolve` of internal subpaths.
+ * @returns {string} absolute path to the flexlayout-react package root
+ */
+function findFlexlayoutPackage() {
+  let dir = pkgRoot;
+  for (;;) {
+    const candidate = join(dir, 'node_modules', 'flexlayout-react');
+    if (existsSync(join(candidate, 'package.json'))) {
+      return candidate;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) {
+      throw new Error(
+        'Could not resolve `flexlayout-react`. Add it as a devDependency of ' +
+          '@genesislcap/rapid-design-system and run `pnpm install`.',
+      );
+    }
+    dir = parent;
+  }
+}
+
+/** Escape a raw string so it is safe inside a JS template literal. */
+function escapeForTemplateLiteral(text) {
+  return text.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+
+/** Strip the trailing `/*# sourceMappingURL=... *​/` comment and normalise whitespace. */
+function stripSourceMap(css) {
+  return css.replace(/\/\*#\s*sourceMappingURL=[^*]*\*\/\s*$/, '').replace(/\s+$/, '');
+}
+
+function buildGeneratedFile() {
+  const flexlayoutPkg = findFlexlayoutPackage();
+  const version = JSON.parse(readFileSync(join(flexlayoutPkg, 'package.json'), 'utf8')).version;
+  const basePath = join(flexlayoutPkg, 'style', 'dark.css');
+  if (!existsSync(basePath)) {
+    throw new Error(`flexlayout-react base theme not found at ${basePath}`);
+  }
+
+  const base = stripSourceMap(readFileSync(basePath, 'utf8'));
+  const overrides = readFileSync(overridesPath, 'utf8').replace(/\s+$/, '');
+
+  const merged = [
+    `/* ============================================================================`,
+    ` * flexlayout-react base theme — VENDORED from flexlayout-react@${version} (style/dark.css).`,
+    ` * ========================================================================== */`,
+    base,
+    ``,
+    `/* ============================================================================`,
+    ` * Rapid Design System overrides (flexlayout-react.overrides.css) — applied last.`,
+    ` * ========================================================================== */`,
+    overrides,
+  ].join('\n');
+
+  return `/* eslint-disable */
+// =============================================================================
+// AUTO-GENERATED FILE — DO NOT EDIT BY HAND.
+//
+// Source:  flexlayout-react@${version} /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 = '${version}';
+
+/** Merged flexlayout-react base theme + Rapid Design System overrides. */
+export const FLEXLAYOUT_REACT_THEME_CSS = \`${escapeForTemplateLiteral(merged)}\`;
+`;
+}
+
+const isCheck = process.argv.includes('--check');
+const next = buildGeneratedFile();
+const current = existsSync(outPath) ? readFileSync(outPath, 'utf8') : '';
+
+if (isCheck) {
+  if (next !== current) {
+    console.error(
+      '✖ flexlayout-react theme is stale. Run `pnpm --filter @genesislcap/rapid-design-system flexlayout:generate` and commit the result.',
+    );
+    process.exit(1);
+  }
+  console.log('✔ flexlayout-react theme is up to date.');
+} else if (next !== current) {
+  writeFileSync(outPath, next);
+  console.log(`✔ Wrote ${outPath}`);
+} else {
+  console.log('✔ flexlayout-react theme already up to date.');
+}