theme-vir 28.25.0 → 28.25.2

package/dist/color-theme/build-color-theme.js

@@ -139,9 +139,7 @@ function resolveExtremeContrastColor({ comparison, isHighestContrast, lightestCo
             ? lightestColorString
             : darkestColorString;
 }
-function findColorWithPreference(colors, desiredContrastLevel, preference, 
-/** Pre-computed contrast-against-white values per color string. Higher = darker. */
-lightnessProxies) {
+function findColorWithPreference({ colors, desiredContrastLevel, preference, lightnessProxies, }) {
     const minContrast = contrastLevelNameMap[desiredContrastLevel].min;
     const candidateColors = check.isArray(colors.foreground)
         ? colors.foreground
@@ -214,10 +212,12 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
         const colorStrings = colors.map((color) => color.definition.default);
         const firstColor = colors[0];
         // Create an object for O(1) color lookup instead of O(n) find()
-        const colorByDefault = arrayToObject(colors, (color) => ({
-            key: color.definition.default,
-            value: color,
-        }));
+        const colorByDefault = arrayToObject(colors, (color) => {
+            return {
+                key: color.definition.default,
+                value: color,
+            };
+        });
         /** Pre-computed contrast-against-white per color. Higher value = darker shade. */
         const lightnessProxies = arrayToObject(colorStrings, (colorString) => {
             return {
@@ -229,27 +229,43 @@ export function buildColorTheme(colorPalette, { omittedColorValues = defaultOmit
             };
         });
         /** Lightest palette color (least contrast against white). */
-        const lightestColorString = colorStrings.reduce((lightest, color) => (lightnessProxies[color] ?? 0) < (lightnessProxies[lightest] ?? 0)
-            ? color
-            : lightest);
+        const lightestColorString = colorStrings.reduce((lightest, color) => {
+            return (lightnessProxies[color] ?? 0) < (lightnessProxies[lightest] ?? 0)
+                ? color
+                : lightest;
+        });
         /** Darkest palette color (most contrast against white). */
-        const darkestColorString = colorStrings.reduce((darkest, color) => (lightnessProxies[color] ?? 0) > (lightnessProxies[darkest] ?? 0) ? color : darkest);
+        const darkestColorString = colorStrings.reduce((darkest, color) => {
+            return (lightnessProxies[color] ?? 0) > (lightnessProxies[darkest] ?? 0)
+                ? color
+                : darkest;
+        });
         /**
          * On-self light mode: lightest fg achieving small-body contrast on the lightest palette
          * bg. Fixed across all on-self contrast levels.
          */
         const lightSelfFgString = assertWrap.isTruthy(findColorWithPreference({
-            foreground: colorStrings,
-            background: lightestColorString,
-        }, ContrastLevelName.SmallBodyText, 'lightest', lightnessProxies), `Failed to find light mode on-self foreground color for ${firstColor.colorName}`);
+            colors: {
+                foreground: colorStrings,
+                background: lightestColorString,
+            },
+            desiredContrastLevel: ContrastLevelName.SmallBodyText,
+            preference: 'lightest',
+            lightnessProxies,
+        }), `Failed to find light mode on-self foreground color for ${firstColor.colorName}`);
         /**
          * On-self dark mode: darkest fg achieving small-body contrast on the darkest palette
          * bg. Fixed across all on-self contrast levels.
          */
         const darkSelfFgString = assertWrap.isTruthy(findColorWithPreference({
-            foreground: colorStrings,
-            background: darkestColorString,
-        }, ContrastLevelName.SmallBodyText, 'darkest', lightnessProxies), `Failed to find dark mode on-self foreground color for ${firstColor.colorName}`);
+            colors: {
+                foreground: colorStrings,
+                background: darkestColorString,
+            },
+            desiredContrastLevel: ContrastLevelName.SmallBodyText,
+            preference: 'darkest',
+            lightnessProxies,
+        }), `Failed to find dark mode on-self foreground color for ${firstColor.colorName}`);
         /**
          * Reversed palette order for dark mode on-self backgrounds. `findColorAtContrastLevel`
          * picks the last qualifying color in array order. With the natural lightest-to-darkest

package/dist/color-theme/color-palette-book-pages.js

@@ -241,13 +241,15 @@ export function createColorPaletteBookPages({ colors, parent, title, includeCont
     }
     const blackWhiteContrastPage = createContrastPage('Contrast Black White', blackWhiteCells);
     function createSelfContrastPage(fontWeight) {
-        return createContrastPage(`Contrast Self ${fontWeight}`, (colors) => colors.map((color) => {
-            return {
-                fontWeight,
-                title: color.suffix || '',
-                foreground: color.definition,
-            };
-        }));
+        return createContrastPage(`Contrast Self ${fontWeight}`, (colors) => {
+            return colors.map((color) => {
+                return {
+                    fontWeight,
+                    title: color.suffix || '',
+                    foreground: color.definition,
+                };
+            });
+        });
     }
     function createThemePages() {
         const generatedTheme = buildColorTheme(colors, options);

package/dist/color-theme/color-theme-book-pages.js

@@ -116,11 +116,13 @@ export function createColorThemeBookPages({ parent, title, theme, hideInverseCol
                     const currentTheme = selectedOverride?.asTheme || defaultTheme;
                     return html `
                             <div class="theme-wrapper">
-                                ${group.map((entry) => buildThemeColorTemplate({
-                        controls,
-                        theme: currentTheme,
-                        themeColorName: entry,
-                    }))}
+                                ${group.map((entry) => {
+                        return buildThemeColorTemplate({
+                            controls,
+                            theme: currentTheme,
+                            themeColorName: entry,
+                        });
+                    })}
                             </div>
                         `;
                 },

package/dist/color-theme/color-theme-code.js

@@ -8,8 +8,18 @@ import { CSSResult } from 'element-vir';
  */
 export function generateThemeCode(theme, options) {
     const paletteVarName = options?.paletteVarName;
-    const defaultInitCode = colorInitToCode(theme.init.default, 1, undefined, paletteVarName);
-    const colorsInitCode = colorThemeInitToCode(theme.init.colors, 1, theme.init.default, paletteVarName);
+    const defaultInitCode = colorInitToCode({
+        colorInit: theme.init.default,
+        indentLevel: 1,
+        defaultInit: undefined,
+        paletteVarName,
+    });
+    const colorsInitCode = colorThemeInitToCode({
+        colorsInit: theme.init.colors,
+        indentLevel: 1,
+        defaultInit: theme.init.default,
+        paletteVarName,
+    });
     const themeCode = `export const theme = defineColorTheme(\n${defaultInitCode},\n${colorsInitCode},\n);`;
     const overridesCodes = (options?.overrides || []).map((override) => {
         return generateOverrideCode(override, paletteVarName);
@@ -63,6 +73,7 @@ function generateOverrideCode(override, paletteVarName) {
 function tab(level) {
     return '    '.repeat(level);
 }
+// eslint-disable-next-line @virmator/prefer-params-object
 function colorInitValuesEqual(a, b) {
     if (typeof a !== typeof b) {
         return false;
@@ -116,7 +127,7 @@ function colorInitValueToCode(value, indentLevel, paletteVarName) {
         return `'${value.default}'`;
     }
 }
-function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
+function colorInitToCode({ colorInit, indentLevel, defaultInit, paletteVarName, }) {
     const entries = [];
     if ('foreground' in colorInit &&
         (!defaultInit || !colorInitValuesEqual(colorInit.foreground, defaultInit.foreground)) &&
@@ -142,9 +153,14 @@ function colorInitToCode(colorInit, indentLevel, defaultInit, paletteVarName) {
     }
     return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
 }
-function colorThemeInitToCode(colorsInit, indentLevel, defaultInit, paletteVarName) {
+function colorThemeInitToCode({ colorsInit, indentLevel, defaultInit, paletteVarName, }) {
     const entries = getObjectTypedEntries(colorsInit).map(([colorName, colorInit,]) => {
-        return `${tab(indentLevel + 1)}'${colorName}': ${colorInitToCode(colorInit, indentLevel + 1, defaultInit, paletteVarName).trimStart()},`;
+        return `${tab(indentLevel + 1)}'${colorName}': ${colorInitToCode({
+            colorInit,
+            indentLevel: indentLevel + 1,
+            defaultInit,
+            paletteVarName,
+        }).trimStart()},`;
     });
     return `${tab(indentLevel)}{\n${entries.join('\n')}\n${tab(indentLevel)}}`;
 }

package/dist/color-theme/color-theme.js

@@ -16,6 +16,7 @@ export function noRefColorInitToString(init) {
  *
  * @category Internal
  */
+// eslint-disable-next-line @virmator/prefer-params-object
 export function createColorCssVarDefault(fromName, init, defaultInit, colorsInit) {
     const defaultForegroundKey = `${defaultInit.prefix}-default-fg`;
     const defaultBackgroundKey = `${defaultInit.prefix}-default-bg`;

package/dist/create-theme/define-theme-elements.js

@@ -77,7 +77,13 @@ function defineHeadingElement(options) {
     const headingSelectors = unsafeCSS(getEnumValues(HeadingLevel).join(', '));
     return defineElement()({
         tagName: headingTag,
-        hostClasses: typedObjectFromEntries(getEnumValues(HeadingLevel).map((headingLevel) => {
+        hostClasses: typedObjectFromEntries(
+        /**
+         * `mapEnumToObject` cannot be used here: host class keys must be prefixed with the
+         * element's tag name, not the bare enum values.
+         */
+        // eslint-disable-next-line @virmator/prefer-map-enum-to-object
+        getEnumValues(HeadingLevel).map((headingLevel) => {
             return [
                 `${headingTag}-${headingLevel}`,
                 ({ inputs }) => inputs.headingLevel === headingLevel,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "theme-vir",
-    "version": "28.25.0",
+    "version": "28.25.2",
     "description": "Create an entire web theme.",
     "keywords": [
         "design",
@@ -22,7 +22,7 @@
         "type": "git",
         "url": "git+https://github.com/electrovir/theme-vir.git"
     },
-    "license": "(MIT or CC0 1.0)",
+    "license": "(MIT OR CC0-1.0)",
     "author": {
         "name": "electrovir",
         "url": "https://github.com/electrovir"
@@ -43,35 +43,35 @@
         "test:update": "virmator test web update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.67.1",
-        "@augment-vir/common": "^31.67.1",
-        "@electrovir/color": "^1.7.8",
+        "@augment-vir/assert": "^32.2.3",
+        "@augment-vir/common": "^32.2.3",
+        "@electrovir/color": "^1.7.11",
         "apca-w3": "^0.1.9",
-        "lit-css-vars": "^3.5.0",
-        "type-fest": "^5.4.4"
+        "lit-css-vars": "^3.6.3",
+        "type-fest": "^5.8.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.67.1",
+        "@augment-vir/test": "^32.2.3",
         "@types/apca-w3": "^0.1.3",
-        "@web/dev-server-esbuild": "^1.0.5",
-        "@web/test-runner": "^0.20.2",
-        "@web/test-runner-commands": "^0.9.0",
-        "@web/test-runner-playwright": "^0.11.1",
-        "@web/test-runner-visual-regression": "^0.10.0",
-        "element-book": "^26.17.0",
-        "element-vir": "^26.14.5",
-        "esbuild": "^0.27.3",
+        "@web/dev-server-esbuild": "^2.0.0",
+        "@web/test-runner": "^1.0.0",
+        "@web/test-runner-commands": "^1.0.1",
+        "@web/test-runner-playwright": "^1.0.0",
+        "@web/test-runner-visual-regression": "^1.0.1",
+        "element-book": "^26.17.4",
+        "element-vir": "^26.17.3",
+        "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "markdown-code-example-inserter": "^3.0.3",
-        "typedoc": "^0.28.17",
+        "markdown-code-example-inserter": "^3.0.6",
+        "typedoc": "^0.28.20",
         "typescript": "5.9.3",
-        "vira": "^30.6.0",
-        "vite": "^7.3.1",
+        "vira": "^31.31.6",
+        "vite": "^8.2.2",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
         "element-book": ">=17",
-        "element-vir": ">=17",
+        "element-vir": "^26",
         "vira": ">=28"
     },
     "engines": {