@genesislcap/rapid-design-system 14.485.0 → 14.486.0

package/dist/esm/modal-theme/modal-theme.js

@@ -0,0 +1,198 @@
+import { baseLayerLuminance, configureRapidDesignSystem } from '../_config';
+import { compileTheme } from './theme-compiler';
+const STORAGE_KEY = 'foundation-ui:theme-modes';
+const THEME_CLASS_PREFIX = 'theme-';
+/** Applied luminance at or above this reads as "light" (LightMode = 1, DarkMode = 0.23). */
+const LIGHT_LUMINANCE_THRESHOLD = 0.5;
+const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Deep-merge two design_tokens trees; `override` (the mode) wins at the leaves. */
+const deepMerge = (base, override = {}) => {
+    const out = Object.assign({}, base);
+    for (const [key, value] of Object.entries(override)) {
+        const existing = out[key];
+        out[key] = isPlainObject(value) && isPlainObject(existing) ? deepMerge(existing, value) : value;
+    }
+    return out;
+};
+/**
+ * Narrow a theme loaded from JSON (or any untyped value) to a {@link ModalTheme},
+ * checking the structure a theme cannot function without. Prefer this over casting
+ * the JSON module: a malformed theme fails loudly here instead of silently
+ * rendering unthemed.
+ * @public
+ */
+export const toModalTheme = (json) => {
+    if (!isPlainObject(json)) {
+        throw new Error('[modal-theme] A theme must be a plain JSON object.');
+    }
+    const modes = json.modes;
+    if (!isPlainObject(modes) || Object.keys(modes).length === 0) {
+        throw new Error('[modal-theme] A theme must declare at least one mode under "modes".');
+    }
+    const theme = json;
+    if (theme.defaultMode && !modes[theme.defaultMode]) {
+        console.warn(`[modal-theme] defaultMode "${theme.defaultMode}" is not a declared mode ` +
+            `(${Object.keys(modes).join(', ')}); the first declared mode will be used.`);
+    }
+    return theme;
+};
+// --- selection state (per-theme memory) -------------------------------------
+const readModeMemory = () => {
+    var _a;
+    try {
+        const parsed = JSON.parse((_a = localStorage.getItem(STORAGE_KEY)) !== null && _a !== void 0 ? _a : '{}');
+        return isPlainObject(parsed) ? parsed : {};
+    }
+    catch (_b) {
+        return {};
+    }
+};
+const rememberMode = (themeId, mode) => {
+    const memory = readModeMemory();
+    memory[themeId] = mode;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(memory));
+    }
+    catch (_a) {
+        /* storage unavailable (private mode / quota) — selection is best-effort */
+    }
+};
+const themeKey = (theme) => { var _a; return (_a = theme.id) !== null && _a !== void 0 ? _a : 'default'; };
+const modeNames = (theme) => { var _a; return Object.keys((_a = theme.modes) !== null && _a !== void 0 ? _a : {}); };
+/** The declared default when it names a real mode, else the first declared mode. */
+const fallbackMode = (theme) => { var _a; return theme.defaultMode && ((_a = theme.modes) === null || _a === void 0 ? void 0 : _a[theme.defaultMode]) ? theme.defaultMode : modeNames(theme)[0]; };
+/**
+ * The mode to start on: remembered choice for this theme, else the declared default.
+ * @public
+ */
+export const resolveInitialMode = (theme) => {
+    var _a;
+    const remembered = readModeMemory()[themeKey(theme)];
+    return remembered && ((_a = theme.modes) === null || _a === void 0 ? void 0 : _a[remembered]) ? remembered : fallbackMode(theme);
+};
+/**
+ * Cycle to the next mode (for the light/dark toggle; generalises to N modes).
+ * @public
+ */
+export const nextMode = (theme, current) => {
+    const names = modeNames(theme);
+    const index = names.indexOf(current);
+    return names[(index + 1) % names.length];
+};
+/**
+ * Whether the app should offer a mode toggle. Defaults to "more than one mode exists";
+ * a `showModeToggle` on the theme overrides the inference. Use to set the header's
+ * toggle-button visibility.
+ * @public
+ */
+export const isModeToggleEnabled = (theme) => { var _a; return (_a = theme.showModeToggle) !== null && _a !== void 0 ? _a : modeNames(theme).length > 1; };
+// --- application ------------------------------------------------------------
+// One adopted sheet per root (Document or ShadowRoot). Keying by the provider's root
+// means a second provider in another root gets its own sheet (instead of silently
+// rewriting the first one's), and a remounted provider that lands in an
+// already-themed root updates the existing sheet in place. WeakMap keeps detached
+// roots collectable, so tests and remounts need no explicit teardown.
+const sheetByRoot = new WeakMap();
+// The most recent applyMode target — what reapplyTheme (the HMR hook) re-applies.
+let lastApplied = null;
+/**
+ * Compile the theme to a single mode-agnostic sheet and adopt it into the scope
+ * that actually contains the provider. The sheet contains every mode; switching
+ * never regenerates it.
+ *
+ * The provider is typically rendered inside its host app's shadow root, not the
+ * document light DOM — so a document-scoped `rapid-design-system-provider { … }`
+ * rule would never match it. We adopt the sheet onto `provider.getRootNode()` (the
+ * containing ShadowRoot, or Document if the provider sits at document scope) so the
+ * selector resolves and the surface custom properties land on the provider,
+ * inheriting down through every nested shadow boundary.
+ *
+ * Re-entrant per root: the first call for a root adopts a new sheet; later calls
+ * for the same root update it in place (`replaceSync`) rather than adopting a
+ * duplicate — this is what lets a hot theme edit refresh styles without a reload.
+ * Providers sharing one root share its sheet (the compiled CSS targets the provider
+ * tag), so themes applied to the same root contend — give concurrently-themed
+ * providers their own shadow roots.
+ *
+ * @public
+ */
+export const injectThemeStyles = (provider, theme) => {
+    const css = compileTheme(theme);
+    const root = provider.getRootNode();
+    // A detached provider's root is the provider itself (or a plain DocumentFragment),
+    // which cannot adopt stylesheets — surface an actionable diagnostic instead of
+    // crashing on the adoptedStyleSheets spread below.
+    if (!('adoptedStyleSheets' in root)) {
+        console.warn('[modal-theme] injectThemeStyles skipped: the provider is not connected to a Document ' +
+            'or ShadowRoot. Connect the provider before applying the theme.');
+        return;
+    }
+    const existing = sheetByRoot.get(root);
+    if (existing) {
+        existing.replaceSync(css);
+        return;
+    }
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    sheetByRoot.set(root, sheet);
+};
+/**
+ * Recompile and re-apply the theme after a hot edit to the theme file: updates the
+ * adopted sheet in place and re-runs the active mode's design tokens on the most
+ * recently applied provider (falling back to the theme's initial mode if the edit
+ * removed the active one). Wire to a bundler's HMR hook so theme edits show without
+ * a full page reload.
+ *
+ * @public
+ */
+export const reapplyTheme = (theme) => {
+    var _a;
+    if (!lastApplied)
+        return;
+    const { provider, mode } = lastApplied;
+    injectThemeStyles(provider, theme);
+    applyMode(provider, theme, ((_a = theme.modes) === null || _a === void 0 ? void 0 : _a[mode]) ? mode : resolveInitialMode(theme));
+};
+/**
+ * Apply a mode: design-token half via FAST, surface/parts half via the class swap.
+ * @public
+ */
+export const applyMode = (provider, theme, mode) => {
+    var _a, _b, _c, _d, _e;
+    lastApplied = { provider, mode };
+    // (b) FAST recipe inputs — accent, luminance, neutral seed, typography, etc.
+    // The API/JSON key is snake_case (`design_tokens`); use a camelCase local to satisfy lint.
+    const designTokens = deepMerge(((_b = (_a = theme.shared) === null || _a === void 0 ? void 0 : _a.design_tokens) !== null && _b !== void 0 ? _b : {}), ((_e = (_d = (_c = theme.modes) === null || _c === void 0 ? void 0 : _c[mode]) === null || _d === void 0 ? void 0 : _d.design_tokens) !== null && _e !== void 0 ? _e : {}));
+    // configureDesignSystem merges the slice over the built-in defaults, so a partial
+    // tree is valid at runtime; the config type wants the full tree — widen here only.
+    configureRapidDesignSystem(provider, {
+        design_tokens: designTokens,
+    });
+    // (a) surfaces + parts are pure CSS — swap the mode class; the sheet does the rest.
+    for (const cls of Array.from(provider.classList)) {
+        if (cls.startsWith(THEME_CLASS_PREFIX))
+            provider.classList.remove(cls);
+    }
+    provider.classList.add(`${THEME_CLASS_PREFIX}${mode}`);
+    // Read the luminance FAST actually applied (the mode's tokens merged over the
+    // built-in defaults) — one source of truth, so the classes below can never
+    // disagree with the rendered surfaces, whatever the mode is named.
+    const isLight = baseLayerLuminance.getValueFor(provider) >= LIGHT_LUMINANCE_THRESHOLD;
+    // Back-compat: existing code/components may still key off the legacy `.light` class.
+    document.body.classList.toggle('light', isLight);
+    provider.classList.toggle('light', isLight);
+    // Keep the platform `luminance` key in sync with the actually-applied mode.
+    // foundation-header (the toggle icon) writes its own, often-inverse value
+    // synchronously right after emitting the toggle event, and grid-pro reads this
+    // key to theme grids — so we write in a microtask to land last and win.
+    queueMicrotask(() => {
+        try {
+            localStorage.setItem('luminance', isLight ? 'light' : 'dark');
+        }
+        catch (_a) {
+            /* storage unavailable — best effort */
+        }
+    });
+    rememberMode(themeKey(theme), mode);
+};

package/dist/esm/modal-theme/theme-compiler.js

@@ -0,0 +1,105 @@
+/**
+ * Compiles a modal theme file into class-scoped CSS (native nesting) for deployment.
+ *
+ *   customTokens       -> custom-property declarations
+ *   componentOverrides -> nested rules keyed by any selector (::part(), a host tag, a class)
+ *
+ * Everything nests under one `rapid-design-system-provider` root. `shared` lives
+ * at the root (applies in every mode); each mode is a nested `&.theme-<name>`
+ * block whose compound selector out-specifies the root, so mode values win.
+ *
+ * design_tokens are NOT emitted: they are FAST recipe *inputs* consumed in JS
+ * (accent, luminance), applied at runtime via setValueFor (see modal-theme.ts).
+ *
+ * Input is validated, not escaped: keys, selectors, and values containing `{`/`}`
+ * throw (they would splice arbitrary rules into the sheet), and unknown section
+ * keys warn (they would otherwise be silently dropped).
+ *
+ * @public
+ */
+const HOST = 'rapid-design-system-provider';
+/** Section keys the theme runtime consumes; anything else is an authoring mistake. */
+const KNOWN_SECTION_KEYS = new Set(['customTokens', 'componentOverrides', 'design_tokens']);
+// A `{`/`}` inside a key, selector, or value terminates the current rule early and
+// splices arbitrary rules into the adopted sheet — reject outright so an authoring
+// typo fails loudly at compile time instead of silently corrupting the whole sheet.
+// Semicolons are deliberately allowed: they occur in legitimate values (e.g.
+// `url("data:image/svg+xml;base64,…")`) and can at most add a sibling declaration
+// inside the same app-authored block — the theme author already controls whole
+// property names, so `;` grants no capability braces don't already guard.
+const assertBraceFree = (kind, text) => {
+    if (text.includes('{') || text.includes('}')) {
+        throw new Error(`[theme-compiler] Invalid ${kind} ${JSON.stringify(text)}: "{" and "}" are not allowed.`);
+    }
+};
+// Declaration values arrive from JSON, so numbers and booleans are representable even
+// though the TS type says string — stringify those; reject shapes with no CSS form
+// (objects/arrays/null would otherwise emit "[object Object]" silently).
+const coerceDeclarationValue = (key, value) => {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    throw new Error(`[theme-compiler] Invalid value for "${key}" ${JSON.stringify(value)}: expected a string, number, or boolean.`);
+};
+// The compiler silently ignores keys it doesn't read, which is exactly how a whole
+// override block goes missing (e.g. the pre-rename `parts` key) — surface it.
+const warnUnknownKeys = (sectionName, sectionObj) => {
+    for (const key of Object.keys(sectionObj)) {
+        if (!KNOWN_SECTION_KEYS.has(key)) {
+            console.warn(`[theme-compiler] Unknown key "${key}" in ${sectionName} is ignored — did you mean ` +
+                `"componentOverrides"? (supported: customTokens, componentOverrides, design_tokens)`);
+        }
+    }
+};
+const props = (map, pad) => Object.entries(map)
+    .map(([k, v]) => {
+    assertBraceFree('property name', k);
+    const value = coerceDeclarationValue(k, v);
+    assertBraceFree(`value of "${k}"`, value);
+    return `${pad}${k}: ${value};`;
+})
+    .join('\n');
+const overrideRules = (overrides, pad) => Object.entries(overrides)
+    .map(([sel, decls]) => {
+    assertBraceFree('selector', sel);
+    return `${pad}${sel} {\n${props(decls, pad + '  ')}\n${pad}}`;
+})
+    .join('\n\n');
+const section = (obj, pad) => {
+    const out = [];
+    if (obj.customTokens && Object.keys(obj.customTokens).length) {
+        out.push(props(obj.customTokens, pad));
+    }
+    if (obj.componentOverrides && Object.keys(obj.componentOverrides).length) {
+        out.push(overrideRules(obj.componentOverrides, pad));
+    }
+    return out.join('\n\n');
+};
+/**
+ * Compile a modal theme into class-scoped nested CSS.
+ *
+ * @param theme - the modal theme (shared + modes; customTokens + componentOverrides).
+ * @param host - the selector the rules nest under (default `rapid-design-system-provider`).
+ * @public
+ */
+export function compileTheme(theme, { host = HOST } = {}) {
+    var _a, _b;
+    const body = [];
+    const sharedSection = (_a = theme.shared) !== null && _a !== void 0 ? _a : {};
+    warnUnknownKeys('shared', sharedSection);
+    const shared = section(sharedSection, '  ');
+    if (shared)
+        body.push(shared);
+    for (const [name, mode] of Object.entries((_b = theme.modes) !== null && _b !== void 0 ? _b : {})) {
+        assertBraceFree('mode name', name);
+        warnUnknownKeys(`mode "${name}"`, mode);
+        const modeContent = section(mode, '    ');
+        // Skip modes with no CSS to emit (e.g. adaptive modes that only carry
+        // design_tokens) so the sheet doesn't gain empty `&.theme-<name> {}` blocks.
+        if (modeContent) {
+            body.push(`  &.theme-${name} {\n${modeContent}\n  }`);
+        }
+    }
+    return `${host} {\n${body.join('\n\n')}\n}\n`;
+}

package/dist/esm/tab/tab.styles.js

@@ -15,5 +15,6 @@ export const rapidTabStyles = (context, definition) => css `
   :host([aria-selected='true']),
   :host([aria-selected='true']:hover) {
     background-color: var(--neutral-layer-4);
+    font-weight: 700;
   }
 `;

package/dist/esm/tab-panel/tab-panel.styles.js

@@ -5,7 +5,8 @@ export const rapidTabPanelStyles = (context, definition) => css `
   :host {
     padding: 0;
     background-color: var(--neutral-layer-card-container);
-    border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
+    border-radius: 0 0 var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))
+      var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));
     border-style: solid;
     border-width: var(--tabs-border-width, 1px);
     border-color: var(--tabs-border-color, var(--neutral-stroke-rest));

package/dist/react.cjs

@@ -112,11 +112,6 @@ const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
-const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
-});
-
 const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -139,6 +134,11 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
+
 const Anchor = React.forwardRef(function Anchor(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);
@@ -925,8 +925,8 @@ module.exports = {
   Accordion,
   AccordionItem,
   ActionsMenu,
-  AiIndicator,
   AiCriteriaSearch,
+  AiIndicator,
   Anchor,
   AnchoredRegion,
   Avatar,

package/dist/react.mjs

@@ -110,11 +110,6 @@ export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
   return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
 });
 
-export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
-  const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
-});
-
 export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
   const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -137,6 +132,11 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
   return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
+export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
+
 export const Anchor = React.forwardRef(function Anchor(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "14.485.0",
+  "version": "14.486.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -25,7 +25,9 @@
     "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"
+    "lint:fix": "genx lint -l ox --fix",
+    "test": "genx test",
+    "test:unit:watch": "genx test --watch"
   },
   "madge": {
     "detectiveOptions": {
@@ -36,12 +38,13 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/genx": "14.485.0",
-    "@genesislcap/rollup-builder": "14.485.0",
-    "@genesislcap/ts-builder": "14.485.0",
-    "@genesislcap/uvu-playwright-builder": "14.485.0",
-    "@genesislcap/vite-builder": "14.485.0",
-    "@genesislcap/webpack-builder": "14.485.0",
+    "@genesislcap/foundation-testing": "14.486.0",
+    "@genesislcap/genx": "14.486.0",
+    "@genesislcap/rollup-builder": "14.486.0",
+    "@genesislcap/ts-builder": "14.486.0",
+    "@genesislcap/uvu-playwright-builder": "14.486.0",
+    "@genesislcap/vite-builder": "14.486.0",
+    "@genesislcap/webpack-builder": "14.486.0",
     "flexlayout-react": "^0.8.19"
   },
   "peerDependencies": {
@@ -53,9 +56,9 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.485.0",
-    "@genesislcap/foundation-ui": "14.485.0",
-    "@genesislcap/foundation-utils": "14.485.0",
+    "@genesislcap/foundation-logger": "14.486.0",
+    "@genesislcap/foundation-ui": "14.486.0",
+    "@genesislcap/foundation-utils": "14.486.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -83,5 +86,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "6d8eacc0597e7a9a323fa3838c493e7ac8ddc589"
+  "gitHead": "5de11f8989291fe8aaf19a7048dd6be68c0be9c8"
 }