@electrovir/color 1.7.10 → 1.7.12

package/dist/data/color-class/color.d.ts

@@ -1,5 +1,5 @@
-import { type PartialWithUndefined } from '@augment-vir/common';
-import { type RequireExactlyOne } from 'type-fest';
+import { type PartialWithUndefined, type RequireExactlyOne } from '@augment-vir/common';
+import { type Color as CuloriColor } from 'culori';
 import { ColorFormatName, ColorSyntaxName, type ColorCoordsByFormat, type ColorValue, type HexColor } from './color-formats.js';
 /**
  * An update to an existing {@link Color} instance. Used in {@link Color.set}.
@@ -43,7 +43,6 @@ export type SerializedColor = AllColorsValues & {
  * @category Color
  */
 export declare class Color {
-    #private;
     constructor(
     /** Any valid CSS color string or an object of color coordinate values. */
     initValue: string | Readonly<ColorUpdate>);
@@ -67,6 +66,7 @@ export declare class Color {
     toString(): string;
     /** The color syntax the this color was set with. */
     protected originalColorSyntax: ColorSyntaxName;
+    protected internalColor: CuloriColor;
     /** All current color values. These are updated whenever {@link Color.set} is called. */
     protected readonly _allColors: {
         names: string[];

package/dist/data/color-class/color.js

@@ -42,7 +42,7 @@ export class Color {
      */
     static deserialize(input) {
         const parsed = JSON.parse(input);
-        const newColor = new Color('black');
+        const newColor = new Color(parsed.hexString);
         getObjectTypedEntries(parsed).forEach(([key, value,]) => {
             if (key === 'originalColorSyntax') {
                 newColor.originalColorSyntax = assertWrap.isEnumValue(value, ColorSyntaxName, 'Cannot deserialize: invalid color syntax.');
@@ -55,7 +55,7 @@ export class Color {
     }
     /** Get the distance from this Color class instance to the given CSS color string. */
     getRgbDistance(distanceFrom) {
-        return distanceRgb(this.#internalColor, distanceFrom);
+        return distanceRgb(this.internalColor, distanceFrom);
     }
     /** Get the closest named CSS color to this Color class instance's current color. */
     getClosestNamedColor() {
@@ -84,7 +84,7 @@ export class Color {
     }
     /** The color syntax the this color was set with. */
     originalColorSyntax = ColorSyntaxName.hex;
-    #internalColor = assertWrap.isDefined(parse('black'));
+    internalColor = assertWrap.isDefined(parse('black'));
     /** All current color values. These are updated whenever {@link Color.set} is called. */
     _allColors = {
         names: ['black'],
@@ -146,7 +146,7 @@ export class Color {
             throw new Error(`Unable to parse invalid color string: '${cssColorString}'`);
         }
         this.originalColorSyntax = getColorSyntaxFromCssString(cssColorString);
-        this.#internalColor = newColor;
+        this.internalColor = newColor;
         this.pullFromInternalColor();
     }
     /**
@@ -186,15 +186,15 @@ export class Color {
         getEnumValues(ColorFormatName).forEach((colorFormatName) => {
             const colorFormatDefinition = colorFormats[colorFormatName];
             const mappedColorFormatName = colorFormatDefinition.conversionFormat;
-            const originalColorDefinition = check.isKeyOf(this.#internalColor.mode, colorFormats)
-                ? colorFormats[this.#internalColor.mode]
+            const originalColorDefinition = check.isKeyOf(this.internalColor.mode, colorFormats)
+                ? colorFormats[this.internalColor.mode]
                 : undefined;
             const converted = clampGamut(colorFormatDefinition.colorSpace === originalColorDefinition?.colorSpace
                 ? mappedColorFormatName
-                : 'rgb')(converter(mappedColorFormatName)(this.#internalColor));
+                : 'rgb')(converter(mappedColorFormatName)(this.internalColor));
             /* node:coverage ignore next 5: technically this shouldn't happen, idk how to manually trigger it. */
             if (!converted) {
-                assert.never(`Failed to convert color '${JSON.stringify(this.#internalColor)}' to '${colorFormatName}'.`);
+                assert.never(`Failed to convert color '${JSON.stringify(this.internalColor)}' to '${colorFormatName}'.`);
             }
             getObjectTypedKeys(this[colorFormatName]).forEach((coordName) => {
                 const coordValue = converted[coordName];
@@ -206,7 +206,7 @@ export class Color {
                 }
             });
         });
-        this._allColors.hexString = formatHex(this.#internalColor);
+        this._allColors.hexString = formatHex(this.internalColor);
         this._allColors.names = findMatchingColorNames(this.rgb);
         this._allColors[ColorSyntaxName.name] = this._allColors.names[0] || '';
     }

package/dist/data/contrast/contrast.js

@@ -30,10 +30,12 @@ export const FontWeightName = mapObjectValues(fontWeightByName, (key) => key);
  *
  * @category Internal
  */
-export const fontWeightToName = Object.fromEntries(Object.entries(fontWeightByName).map(([key, value,]) => [
-    value,
-    key,
-]));
+export const fontWeightToName = Object.fromEntries(Object.entries(fontWeightByName).map(([key, value,]) => {
+    return [
+        value,
+        key,
+    ];
+}));
 /** Cache for contrast calculations to avoid redundant computation. */
 const contrastCache = new Map();
 /**

package/dist/demo/vir-demo.element.js

@@ -36,7 +36,9 @@ export const VirDemo = defineElement()({
                 basePath: 'color',
             },
         })}>
-                <h1 slot=${ElementBookApp.slotNames.navHeader}>@electrovir/color</h1>
+                <h1 slot=${ElementBookApp.slotNames['element-book-app-nav-header']}>
+                    @electrovir/color
+                </h1>
             </${ElementBookApp}>
         `;
     },

package/dist/elements/vir-color-details.element.js

@@ -78,30 +78,36 @@ export const VirColorDetails = defineElement()({
                     value,
                 };
             }
-            return {
-                key,
-                value,
-            };
+            else {
+                return {
+                    key,
+                    value,
+                };
+            }
         });
         if (state.inputColorString == undefined) {
             updateState({
                 inputColorString: inputs.color,
             });
         }
-        const { rows } = defineTable([
-            {
-                key: 'colorFormat',
-            },
-            {
-                key: 'formattedString',
-            },
-        ], getObjectTypedEntries(colorStrings), ([colorFormat, value,]) => {
-            return {
-                colorFormat: `${colorFormat}:`,
-                formattedString: html `
+        const { rows } = defineTable({
+            headers: [
+                {
+                    key: 'colorFormat',
+                },
+                {
+                    key: 'formattedString',
+                },
+            ],
+            originalData: getObjectTypedEntries(colorStrings),
+            dataMap: ([colorFormat, value,]) => {
+                return {
+                    colorFormat: `${colorFormat}:`,
+                    formattedString: html `
                         <pre>${value}</pre>
                     `,
-            };
+                };
+            },
         });
         const inputTemplate = inputs.showInput
             ? html `

package/dist/elements/vir-color-pair-contrast-summary.element.js

@@ -123,43 +123,50 @@ export const VirColorPairContrastSummary = defineElement()({
             background: new Color(inputs.backgroundColor).toCss().rgb,
             foreground: new Color(inputs.foregroundColor).toCss().rgb,
         });
-        const { rows: colorPairRows } = defineTable([
-            {
-                key: 'colorLayer',
-            },
-            {
-                key: 'colorValue',
-            },
-        ], getObjectTypedEntries({
-            'Foreground:': new Color(inputs.foregroundColor).toFormattedStrings().hexString,
-            'Background:': new Color(inputs.backgroundColor).toFormattedStrings().hexString,
-            'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
-        }), ([colorLayer, value,]) => {
-            return {
-                colorLayer,
-                colorValue: html `
+        const { rows: colorPairRows } = defineTable({
+            headers: [
+                {
+                    key: 'colorLayer',
+                },
+                {
+                    key: 'colorValue',
+                },
+            ],
+            originalData: getObjectTypedEntries({
+                'Foreground:': new Color(inputs.foregroundColor).toFormattedStrings().hexString,
+                'Background:': new Color(inputs.backgroundColor).toFormattedStrings().hexString,
+                'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
+            }),
+            dataMap: ([colorLayer, value,]) => {
+                return {
+                    colorLayer,
+                    colorValue: html `
                         <pre>${value}</pre>
                     `,
-            };
-        });
-        const { rows: weightRows } = defineTable([
-            {
-                key: 'weight',
-            },
-            {
-                key: 'size',
+                };
             },
-        ], Object.entries(contrast.fontSizes).map(([weight, size,]) => {
-            return {
-                weight: Number(weight),
-                size,
-            };
-        }), ({ size, weight }) => {
-            return {
-                size: `${round(size, {
-                    digits: 1,
-                })}px`,
-                weight: html `
+        });
+        const { rows: weightRows } = defineTable({
+            headers: [
+                {
+                    key: 'weight',
+                },
+                {
+                    key: 'size',
+                },
+            ],
+            originalData: Object.entries(contrast.fontSizes).map(([weight, size,]) => {
+                return {
+                    weight: Number(weight),
+                    size,
+                };
+            }),
+            dataMap: ({ size, weight }) => {
+                return {
+                    size: `${round(size, {
+                        digits: 1,
+                    })}px`,
+                    weight: html `
                         <span
                             style=${css `
                                 font-weight: ${weight};
@@ -168,20 +175,25 @@ export const VirColorPairContrastSummary = defineElement()({
                             ${weight}
                         </span>
                     `,
-            };
-        });
-        const { rows: levelRows } = defineTable([
-            {
-                key: 'boundaryLc',
+                };
             },
-            {
-                key: 'levelName',
+        });
+        const { rows: levelRows } = defineTable({
+            headers: [
+                {
+                    key: 'boundaryLc',
+                },
+                {
+                    key: 'levelName',
+                },
+            ],
+            originalData: contrastLevels,
+            dataMap: (contrastLevel) => {
+                return {
+                    boundaryLc: `${contrastLevel.min} Lc`,
+                    levelName: contrastLevelLabel[contrastLevel.name],
+                };
             },
-        ], contrastLevels, (contrastLevel) => {
-            return {
-                boundaryLc: `${contrastLevel.min} Lc`,
-                levelName: contrastLevelLabel[contrastLevel.name],
-            };
         });
         return html `
             <div class="color-overlay">

package/dist/elements/vir-color-pair.element.js

@@ -19,96 +19,100 @@ export const VirColorPair = defineElement()({
         };
     },
     hostClasses: {
-        'vir-color-pair-no-contrast-tips': ({ inputs, state }) => !inputs.showContrast && !state.forceShowEverything,
+        'vir-color-pair-no-contrast-tips': ({ inputs, state }) => {
+            return !inputs.showContrast && !state.forceShowEverything;
+        },
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            max-width: 100%;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                max-width: 100%;
+            }
 
-        .color-preview {
-            ${noNativeFormStyles};
-            cursor: pointer;
-            font-size: 32px;
-            padding-left: 12px;
-            padding-right: 0;
-            border: 1px solid #ccc;
-            border-radius: 8px;
-            display: flex;
-            gap: 8px;
-            align-items: baseline;
+            .color-preview {
+                ${noNativeFormStyles};
+                cursor: pointer;
+                font-size: 32px;
+                padding-left: 12px;
+                padding-right: 0;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+                display: flex;
+                gap: 8px;
+                align-items: baseline;
 
-            & b {
-                margin: 12px 0;
-                font-weight: bold;
-                text-decoration: underline;
-            }
+                & b {
+                    margin: 12px 0;
+                    font-weight: bold;
+                    text-decoration: underline;
+                }
 
-            & .square {
-                margin: 12px 0;
-                width: 24px;
-                height: 24px;
-                background-color: currentColor;
-            }
-        }
-        ${hostClasses['vir-color-pair-no-contrast-tips'].selector} {
-            & .needed-size-wrapper {
-                display: none;
+                & .square {
+                    margin: 12px 0;
+                    width: 24px;
+                    height: 24px;
+                    background-color: currentColor;
+                }
             }
+            ${hostClasses['vir-color-pair-no-contrast-tips'].selector} {
+                & .needed-size-wrapper {
+                    display: none;
+                }
 
-            & .color-preview {
-                padding: 4px 24px;
+                & .color-preview {
+                    padding: 4px 24px;
+                }
             }
-        }
 
-        .needed-size-wrapper {
-            align-self: stretch;
-            width: 56px;
-            position: relative;
-            overflow: hidden;
-            border-left: 1px solid #ccc;
-        }
+            .needed-size-wrapper {
+                align-self: stretch;
+                width: 56px;
+                position: relative;
+                overflow: hidden;
+                border-left: 1px solid #ccc;
+            }
 
-        .needed-size {
-            top: 0;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            left: 6px;
-            position: absolute;
+            .needed-size {
+                top: 0;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                left: 6px;
+                position: absolute;
 
-            & span {
-                margin: 0 auto;
+                & span {
+                    margin: 0 auto;
+                }
             }
-        }
 
-        .css-var-names {
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-            display: flex;
-            max-width: 100%;
-            flex-direction: column;
-            opacity: 0.6;
-            margin-top: 4px;
-        }
+            .css-var-names {
+                font-family: ${viraFontCssVars['vira-monospace'].value};
+                display: flex;
+                max-width: 100%;
+                flex-direction: column;
+                opacity: 0.6;
+                margin-top: 4px;
+            }
 
-        p {
-            ${noNativeSpacing};
-            display: flex;
-            gap: 0;
-            flex-wrap: wrap;
+            p {
+                ${noNativeSpacing};
+                display: flex;
+                gap: 0;
+                flex-wrap: wrap;
 
-            & span:last-child {
-                margin-left: 1ex;
+                & span:last-child {
+                    margin-left: 1ex;
+                }
             }
-        }
 
-        ${VirContrastIndicator} {
-            margin-top: 1px;
-        }
-    `,
+            ${VirContrastIndicator} {
+                margin-top: 1px;
+            }
+        `;
+    },
     render({ state, updateState, inputs }) {
         const colorRows = [
             'foreground',

package/dist/elements/vir-color-picker.element.js

@@ -17,10 +17,12 @@ import { Color } from '../data/color-class/color.js';
 import { colorLocalStorageClient } from '../data/local-storage.client.js';
 import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
 import { VirColorSwatch } from './vir-color-swatch.element.js';
-const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => ({
-    value: formatName,
-    label: formatName.toUpperCase(),
-}));
+const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => {
+    return {
+        value: formatName,
+        label: formatName.toUpperCase(),
+    };
+});
 /**
  * A color picker element with a swatch that opens a popup with color format sliders.
  *
@@ -49,98 +51,100 @@ export const VirColorPicker = defineElement()({
     hostClasses: {
         'vir-color-picker-always-show': ({ inputs }) => !!inputs.alwaysShowPicker,
     },
-    styles: ({ cssVars, hostClasses }) => css `
-        :host {
-            display: inline-flex;
-        }
-
-        ${hostClasses['vir-color-picker-always-show'].selector} {
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-        }
-
-        button {
-            ${noNativeFormStyles}
-            cursor: pointer;
-            display: flex;
-        }
+    styles: ({ cssVars, hostClasses }) => {
+        return css `
+            :host {
+                display: inline-flex;
+            }
 
-        ${ViraPopUpTrigger} {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-        }
+            ${hostClasses['vir-color-picker-always-show'].selector} {
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+            }
 
-        .swatch-wrapper {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            align-items: center;
+            button {
+                ${noNativeFormStyles}
+                cursor: pointer;
+                display: flex;
+            }
 
-            & ${VirColorSwatch} {
-                width: ${cssVars['vir-color-picker-swatch-width'].value};
-                height: ${cssVars['vir-color-picker-swatch-height'].value};
+            ${ViraPopUpTrigger} {
+                width: 100%;
+                height: 100%;
                 box-sizing: border-box;
             }
-        }
 
-        .code-button {
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-            font-size: 12px;
-            color: #666;
-            display: flex;
-            justify-content: center;
-            gap: 2px;
-            align-items: center;
+            .swatch-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                align-items: center;
 
-            & ${ViraIcon} {
-                width: 18px;
-                aspect-ratio: 1;
+                & ${VirColorSwatch} {
+                    width: ${cssVars['vir-color-picker-swatch-width'].value};
+                    height: ${cssVars['vir-color-picker-swatch-height'].value};
+                    box-sizing: border-box;
+                }
             }
 
-            &:hover {
-                color: #000;
-            }
+            .code-button {
+                font-family: ${viraFontCssVars['vira-monospace'].value};
+                font-size: 12px;
+                color: #666;
+                display: flex;
+                justify-content: center;
+                gap: 2px;
+                align-items: center;
 
-            &:active {
-                color: dodgerblue;
+                & ${ViraIcon} {
+                    width: 18px;
+                    aspect-ratio: 1;
+                }
+
+                &:hover {
+                    color: #000;
+                }
+
+                &:active {
+                    color: dodgerblue;
+                }
             }
-        }
 
-        .picker {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            padding: 16px;
-            background: white;
-            border: 1px solid #ccc;
-            border-radius: 8px;
-        }
+            .picker {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                padding: 16px;
+                background: white;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+            }
 
-        .pop-up .picker {
-            ${viraShadows.menuShadow}
-        }
+            .pop-up .picker {
+                ${viraShadows.menuShadow}
+            }
 
-        .raw-input-wrapper {
-            text-align: left;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            font-size: 12px;
-            ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
-            color: #666;
+            .raw-input-wrapper {
+                text-align: left;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+                font-size: 12px;
+                ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
+                color: #666;
 
-            & ${ViraInput} {
-                flex-grow: 1;
-                width: unset;
-                color: inherit;
-                height: 20px;
-                border: none;
+                & ${ViraInput} {
+                    flex-grow: 1;
+                    width: unset;
+                    color: inherit;
+                    height: 20px;
+                    border: none;
+                }
             }
-        }
-    `,
+        `;
+    },
     events: {
         colorChange: defineElementEvent(),
     },

package/dist/elements/vir-color-slider.element.js

@@ -17,32 +17,34 @@ export const VirColorSlider = defineElement()({
     cssVars: {
         'vir-color-slider-gradient': 'black',
     },
-    styles: ({ cssVars }) => css `
-        :host {
-            display: flex;
-            align-items: center;
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-            gap: 2px;
-        }
+    styles: ({ cssVars }) => {
+        return css `
+            :host {
+                display: flex;
+                align-items: center;
+                font-family: ${viraFontCssVars['vira-monospace'].value};
+                gap: 2px;
+            }
 
-        input[type='range'] {
-            flex-grow: 1;
-            appearance: none;
-            background: ${cssVars['vir-color-slider-gradient'].value};
-            height: 9px;
-            border-radius: 4px;
-            cursor: pointer;
-        }
+            input[type='range'] {
+                flex-grow: 1;
+                appearance: none;
+                background: ${cssVars['vir-color-slider-gradient'].value};
+                height: 9px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
 
-        ${ViraInput} {
-            width: 76px;
-        }
+            ${ViraInput} {
+                width: 76px;
+            }
 
-        .coordinate {
-            font-size: 18px;
-            margin-top: -4px;
-        }
-    `,
+            .coordinate {
+                font-size: 18px;
+                margin-top: -4px;
+            }
+        `;
+    },
     events: {
         valueChange: defineElementEvent(),
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.7.10",
+    "version": "1.7.12",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -53,67 +53,66 @@
         "@electrovir/color": "file:./"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.71.3",
-        "@augment-vir/common": "^31.71.3",
-        "@augment-vir/web": "^31.71.3",
-        "@electrovir/local-storage-client": "^0.1.0",
+        "@augment-vir/assert": "^32.2.3",
+        "@augment-vir/common": "^32.2.3",
+        "@augment-vir/web": "^32.2.3",
+        "@electrovir/local-storage-client": "^0.1.1",
         "apca-w3": "^0.1.9",
-        "color-name": "^2.1.0",
+        "color-name": "^2.1.1",
         "culori": "^4.0.2",
-        "object-shape-tester": "^6.13.0",
-        "type-fest": "^5.6.0"
+        "object-shape-tester": "^6.15.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.71.3",
-        "@eslint/eslintrc": "^3.3.5",
+        "@augment-vir/test": "^32.2.3",
+        "@eslint/eslintrc": "^3.3.6",
         "@eslint/js": "10.0.1",
         "@stylistic/eslint-plugin": "^5.10.0",
         "@stylistic/eslint-plugin-ts": "^4.4.1",
         "@types/color-name": "^2.0.0",
         "@types/culori": "^4.0.1",
-        "@typescript-eslint/eslint-plugin": "^8.60.0",
-        "@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",
-        "cspell": "^10.0.0",
-        "dependency-cruiser": "^17.4.3",
-        "element-book": "^26.17.3",
-        "element-vir": "^26.17.0",
-        "esbuild": "^0.28.0",
-        "eslint": "^10.4.0",
+        "@typescript-eslint/eslint-plugin": "^8.68.0",
+        "@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",
+        "cspell": "^10.1.1",
+        "dependency-cruiser": "^18.2.0",
+        "element-book": "^26.17.5",
+        "element-vir": "^26.17.3",
+        "esbuild": "^0.28.2",
+        "eslint": "^10.9.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-jsdoc": "^63.0.0",
+        "eslint-plugin-jsdoc": "^64.2.1",
         "eslint-plugin-monorepo-cop": "^1.0.2",
-        "eslint-plugin-playwright": "^2.10.4",
+        "eslint-plugin-playwright": "^2.11.0",
         "eslint-plugin-prettier": "^5.5.6",
         "eslint-plugin-require-extensions": "^0.1.3",
-        "eslint-plugin-sonarjs": "^4.0.3",
-        "eslint-plugin-unicorn": "^64.0.0",
-        "execute-in-browser": "^1.0.9",
+        "eslint-plugin-sonarjs": "^4.2.0",
+        "eslint-plugin-unicorn": "^73.0.0",
+        "execute-in-browser": "^1.0.10",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lit-css-vars": "^3.6.2",
-        "markdown-code-example-inserter": "^3.0.5",
-        "npm-check-updates": "^22.2.1",
+        "lit-css-vars": "^3.6.3",
+        "markdown-code-example-inserter": "^3.0.6",
+        "npm-check-updates": "^23.1.0",
         "prettier": "~3.3.3",
-        "prettier-plugin-interpolated-html-tags": "^2.0.1",
+        "prettier-plugin-interpolated-html-tags": "^2.0.2",
         "prettier-plugin-jsdoc": "^1.8.1",
-        "prettier-plugin-multiline-arrays": "^4.1.8",
+        "prettier-plugin-multiline-arrays": "^4.1.11",
         "prettier-plugin-organize-imports": "^4.3.0",
         "prettier-plugin-packagejson": "^3.0.2",
         "prettier-plugin-sort-json": "^4.2.0",
         "prettier-plugin-toml": "^2.0.6",
-        "runstorm": "^1.0.2",
-        "typedoc": "^0.28.19",
+        "runstorm": "^1.0.6",
+        "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.60.0",
-        "vira": "^31.22.2",
-        "virmator": "^14.21.1",
-        "vite": "^8.0.14"
+        "typescript-eslint": "^8.68.0",
+        "vira": "^31.31.6",
+        "virmator": "^14.33.0",
+        "vite": "^8.2.2"
     },
     "peerDependencies": {
-        "element-vir": ">=26",
+        "element-vir": "^26",
         "lit-css-vars": ">=3",
         "vira": ">=28"
     },