@electrovir/color 1.7.11 → 2.0.0-beta.0

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

@@ -1,4 +1,5 @@
 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}.
@@ -42,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>);
@@ -66,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/all-book-pages.js

@@ -1,15 +1,6 @@
-import { virAllSpacesColorPickerBookPage } from '../elements/vir-all-spaces-color-picker.element.book.js';
-import { virColorPairContrastSummaryBookPage } from '../elements/vir-color-pair-contrast-summary.element.book.js';
-import { virColorPairBookPage } from '../elements/vir-color-pair.element.book.js';
-import { virColorPickerBookPage } from '../elements/vir-color-picker.element.book.js';
 import { colorExamplesPage } from './color-examples.book.js';
-import { elementsBookPage, examplesBookPage } from './top-level-pages.js';
+import { examplesBookPage } from './top-level-pages.js';
 export const allBookPages = [
-    elementsBookPage,
     examplesBookPage,
     colorExamplesPage,
-    virAllSpacesColorPickerBookPage,
-    virColorPairBookPage,
-    virColorPairContrastSummaryBookPage,
-    virColorPickerBookPage,
 ];

package/dist/demo/top-level-pages.d.ts

@@ -1,2 +1 @@
-export declare const elementsBookPage: import("element-book").BookPage<{}, undefined, {}>;
 export declare const examplesBookPage: import("element-book").BookPage<{}, undefined, {}>;

package/dist/demo/top-level-pages.js

@@ -1,8 +1,4 @@
 import { defineBookPage } from 'element-book';
-export const elementsBookPage = defineBookPage({
-    parent: undefined,
-    title: 'Elements',
-});
 export const examplesBookPage = defineBookPage({
     parent: undefined,
     title: 'Examples',

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

@@ -1,7 +1,6 @@
 /* node:coverage disable */
 import { ElementBookApp } from 'element-book';
 import { css, defineElement, html } from 'element-vir';
-import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
 import { allBookPages } from './all-book-pages.js';
 export const VirDemo = defineElement()({
     tagName: 'vir-demo',
@@ -21,7 +20,8 @@ export const VirDemo = defineElement()({
         }
 
         h1 {
-            ${noNativeSpacing};
+            padding: 0;
+            margin: 0;
             font-size: 16px;
             margin-bottom: 16px;
             text-align: center;
@@ -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/index.d.ts

@@ -3,13 +3,3 @@ export * from './data/color-class/color-name-length.js';
 export * from './data/color-class/color.js';
 export * from './data/color-css.js';
 export * from './data/contrast/contrast.js';
-export * from './elements/vir-all-color-space-sliders.element.js';
-export * from './elements/vir-all-spaces-color-picker.element.js';
-export * from './elements/vir-color-details.element.js';
-export * from './elements/vir-color-format-sliders.element.js';
-export * from './elements/vir-color-pair-contrast-summary.element.js';
-export * from './elements/vir-color-pair.element.js';
-export * from './elements/vir-color-picker.element.js';
-export * from './elements/vir-color-slider.element.js';
-export * from './elements/vir-color-swatch.element.js';
-export * from './elements/vir-contrast-indicator.element.js';

package/dist/index.js

@@ -3,13 +3,3 @@ export * from './data/color-class/color-name-length.js';
 export * from './data/color-class/color.js';
 export * from './data/color-css.js';
 export * from './data/contrast/contrast.js';
-export * from './elements/vir-all-color-space-sliders.element.js';
-export * from './elements/vir-all-spaces-color-picker.element.js';
-export * from './elements/vir-color-details.element.js';
-export * from './elements/vir-color-format-sliders.element.js';
-export * from './elements/vir-color-pair-contrast-summary.element.js';
-export * from './elements/vir-color-pair.element.js';
-export * from './elements/vir-color-picker.element.js';
-export * from './elements/vir-color-slider.element.js';
-export * from './elements/vir-color-swatch.element.js';
-export * from './elements/vir-contrast-indicator.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.7.11",
+    "version": "2.0.0-beta.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -53,52 +53,52 @@
         "@electrovir/color": "file:./"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.2.1",
-        "@augment-vir/common": "^32.2.1",
-        "@augment-vir/web": "^32.2.1",
-        "@electrovir/local-storage-client": "^0.1.0",
+        "@augment-vir/assert": "^32.3.0-beta.0",
+        "@augment-vir/common": "^32.3.0-beta.0",
+        "@augment-vir/web": "^32.3.0-beta.0",
+        "@electrovir/local-storage-client": "^0.1.1",
         "apca-w3": "^0.1.9",
         "color-name": "^2.1.1",
         "culori": "^4.0.2",
-        "object-shape-tester": "^6.14.1"
+        "object-shape-tester": "^6.15.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.2.1",
-        "@eslint/eslintrc": "^3.3.6",
+        "@augment-vir/test": "^32.3.0-beta.0",
+        "@eslint/eslintrc": "^3.3.7",
         "@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.65.0",
+        "@typescript-eslint/eslint-plugin": "^8.69.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.0.1",
-        "dependency-cruiser": "^18.1.0",
-        "element-book": "^26.17.3",
-        "element-vir": "^26.17.1",
-        "esbuild": "^0.28.1",
-        "eslint": "^10.7.0",
+        "cspell": "^10.2.0",
+        "dependency-cruiser": "^18.2.0",
+        "element-book": "^27.0.0-beta.1",
+        "element-vir": "27.0.0-beta.3",
+        "esbuild": "^0.28.2",
+        "eslint": "^10.9.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-jsdoc": "^63.2.2",
+        "eslint-plugin-jsdoc": "^64.3.4",
         "eslint-plugin-monorepo-cop": "^1.0.2",
-        "eslint-plugin-playwright": "^2.10.5",
+        "eslint-plugin-playwright": "^2.11.0",
         "eslint-plugin-prettier": "^5.5.6",
         "eslint-plugin-require-extensions": "^0.1.3",
         "eslint-plugin-sonarjs": "^4.2.0",
-        "eslint-plugin-unicorn": "^72.0.0",
-        "execute-in-browser": "^1.0.9",
+        "eslint-plugin-unicorn": "^74.0.0",
+        "execute-in-browser": "^1.0.10",
         "istanbul-smart-text-reporter": "^1.1.5",
         "lit-css-vars": "^3.6.3",
         "markdown-code-example-inserter": "^3.0.6",
-        "npm-check-updates": "^22.2.9",
+        "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.10",
+        "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",
@@ -106,15 +106,13 @@
         "runstorm": "^1.0.6",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.65.0",
-        "vira": "^31.28.1",
-        "virmator": "^14.30.0",
-        "vite": "^8.1.5"
+        "typescript-eslint": "^8.69.0",
+        "virmator": "^14.34.0",
+        "vite": "^8.2.2"
     },
     "peerDependencies": {
-        "element-vir": ">=26",
-        "lit-css-vars": ">=3",
-        "vira": ">=28"
+        "element-vir": "^27.0.0-beta.3",
+        "lit-css-vars": ">=3"
     },
     "engines": {
         "node": ">=22"

package/dist/data/local-storage.client.d.ts

@@ -1,4 +0,0 @@
-import { LocalStorageClient } from '@electrovir/local-storage-client';
-export declare const colorLocalStorageClient: LocalStorageClient<{
-    lastFormat: import("object-shape-tester").Shape<import("@sinclair/typebox").TUnion<(import("@sinclair/typebox").TLiteral<"hsl"> | import("@sinclair/typebox").TLiteral<"hwb"> | import("@sinclair/typebox").TLiteral<"lab"> | import("@sinclair/typebox").TLiteral<"lch"> | import("@sinclair/typebox").TLiteral<"oklab"> | import("@sinclair/typebox").TLiteral<"oklch"> | import("@sinclair/typebox").TLiteral<"rgb"> | import("@sinclair/typebox").TLiteral<"hex">)[]>>;
-}>;

package/dist/data/local-storage.client.js

@@ -1,6 +0,0 @@
-import { LocalStorageClient } from '@electrovir/local-storage-client';
-import { enumShape } from 'object-shape-tester';
-import { ColorFormatName } from './color-class/color-formats.js';
-export const colorLocalStorageClient = new LocalStorageClient({
-    lastFormat: enumShape(ColorFormatName),
-});

package/dist/elements/vir-all-color-space-sliders.element.d.ts

@@ -1,11 +0,0 @@
-import { type Color } from '../data/color-class/color.js';
-/**
- * Color sliders for all color spaces.
- *
- * @category Elements
- */
-export declare const VirAllColorSpaceSliders: import("element-vir").DeclarativeElementDefinition<"vir-all-color-space-sliders", {
-    color: Readonly<Color>;
-}, {}, {
-    colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-all-color-space-sliders-", "vir-all-color-space-sliders-", readonly [], readonly []>;

package/dist/elements/vir-all-color-space-sliders.element.js

@@ -1,53 +0,0 @@
-/* node:coverage disable */
-import { getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { colorFormatsBySpace } from '../data/color-class/color-formats.js';
-import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
-/**
- * Color sliders for all color spaces.
- *
- * @category Elements
- */
-export const VirAllColorSpaceSliders = defineElement()({
-    tagName: 'vir-all-color-space-sliders',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .color-space {
-            display: flex;
-            flex-wrap: wrap;
-            column-gap: 32px;
-            row-gap: 8px;
-        }
-    `,
-    events: {
-        colorChange: defineElementEvent(),
-    },
-    render({ inputs, dispatch, events }) {
-        const colorSpaceTemplates = getObjectTypedValues(colorFormatsBySpace).map((colorSpaceFormats) => {
-            const formatTemplates = getObjectTypedKeys(colorSpaceFormats).map((colorFormatName) => {
-                return html `
-                            <${VirColorFormatSliders.assign({
-                    color: inputs.color,
-                    colorFormatName,
-                    showFormatName: true,
-                })}
-                                ${listen(VirColorFormatSliders.events.colorChange, (event) => {
-                    dispatch(new events.colorChange(event.detail));
-                })}
-                            ></${VirColorFormatSliders}>
-                        `;
-            });
-            return html `
-                    <section class="color-space">${formatTemplates}</section>
-                `;
-        });
-        return html `
-            ${colorSpaceTemplates}
-        `;
-    },
-});

package/dist/elements/vir-all-spaces-color-picker.element.d.ts

@@ -1,15 +0,0 @@
-import { type ColorSyntaxName } from '../data/color-class/color-formats.js';
-/**
- * A color picker element that shows sliders for all supported color spaces at once, as well as all
- * the values for all supported color spaces in a table.
- *
- * @category Elements
- */
-export declare const VirAllSpacesColorPicker: import("element-vir").DeclarativeElementDefinition<"vir-all-spaces-color-picker", {
-    color: string;
-}, {
-    inputColorString: undefined | string;
-    overrideInputColor: undefined | ColorSyntaxName;
-}, {
-    colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-all-spaces-color-picker-", "vir-all-spaces-color-picker-", readonly [], readonly []>;

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

@@ -1,69 +0,0 @@
-/* node:coverage disable */
-import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { getColorSyntaxFromCssString, } from '../data/color-class/color-formats.js';
-import { Color } from '../data/color-class/color.js';
-import { VirAllColorSpaceSliders } from './vir-all-color-space-sliders.element.js';
-import { VirColorDetails } from './vir-color-details.element.js';
-/**
- * A color picker element that shows sliders for all supported color spaces at once, as well as all
- * the values for all supported color spaces in a table.
- *
- * @category Elements
- */
-export const VirAllSpacesColorPicker = defineElement()({
-    tagName: 'vir-all-spaces-color-picker',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-    `,
-    events: {
-        colorChange: defineElementEvent(),
-    },
-    state() {
-        return {
-            inputColorString: undefined,
-            overrideInputColor: undefined,
-        };
-    },
-    render({ inputs, dispatch, events, state, updateState }) {
-        const color = new Color(inputs.color);
-        if (state.overrideInputColor) {
-            updateState({
-                inputColorString: color.toCss()[state.overrideInputColor],
-            });
-        }
-        if (state.inputColorString == undefined) {
-            updateState({
-                inputColorString: inputs.color,
-            });
-        }
-        return html `
-            <${VirColorDetails.assign({
-            color: inputs.color,
-            showInput: true,
-        })}
-                ${listen(VirColorDetails.events.colorChange, (event) => {
-            updateState({
-                inputColorString: event.detail,
-                overrideInputColor: undefined,
-            });
-            dispatch(new events.colorChange(event.detail));
-        })}
-            ></${VirColorDetails}>
-            <${VirAllColorSpaceSliders.assign({
-            color,
-        })}
-                ${listen(VirAllColorSpaceSliders.events.colorChange, (event) => {
-            const colorSyntax = getColorSyntaxFromCssString(state.inputColorString || '#');
-            updateState({
-                overrideInputColor: colorSyntax,
-            });
-            dispatch(new events.colorChange(event.detail));
-        })}
-            ></${VirAllColorSpaceSliders}>
-        `;
-    },
-});

package/dist/elements/vir-color-details.element.d.ts

@@ -1,14 +0,0 @@
-/**
- * A color swatch alongside the color in all of its different supported formats.
- *
- * @category Internal
- */
-export declare const VirColorDetails: import("element-vir").DeclarativeElementDefinition<"vir-color-details", {
-    color: string;
-    /** Show a text input that triggers an event when it is edited, for changing the color. */
-    showInput: boolean;
-}, {
-    inputColorString: undefined | string;
-}, {
-    colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-color-details-", "vir-color-details-", readonly [], readonly []>;

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

@@ -1,151 +0,0 @@
-/* node:coverage disable */
-import { check } from '@augment-vir/assert';
-import { getObjectTypedEntries, mapObject } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { ViraInput } from 'vira/dist/elements/vira-input.element.js';
-import { viraFontCssVars } from 'vira/dist/styles/font.js';
-import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
-import { defineTable } from 'vira/dist/util/define-table.js';
-import { ColorSyntaxName } from '../data/color-class/color-formats.js';
-import { Color } from '../data/color-class/color.js';
-import { VirColorSwatch } from './vir-color-swatch.element.js';
-const omittedColors = [
-    ColorSyntaxName.hex,
-    ColorSyntaxName.name,
-];
-/**
- * A color swatch alongside the color in all of its different supported formats.
- *
- * @category Internal
- */
-export const VirColorDetails = defineElement()({
-    tagName: 'vir-color-details',
-    styles: css `
-        :host {
-            display: flex;
-            gap: 16px;
-        }
-
-        ${VirColorSwatch} {
-            height: 200px;
-            width: 200px;
-        }
-
-        .swatch {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            align-items: center;
-        }
-
-        ${ViraInput} {
-            font-size: 14px;
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-            max-width: 200px;
-        }
-
-        td {
-            font-weight: bold;
-        }
-
-        th {
-            padding: 4px 8px;
-            font-weight: normal;
-            text-align: right;
-        }
-        pre {
-            ${noNativeSpacing};
-            font-family: ${viraFontCssVars['vira-monospace'].value};
-        }
-    `,
-    events: {
-        colorChange: defineElementEvent(),
-    },
-    state() {
-        return {
-            inputColorString: undefined,
-        };
-    },
-    render({ inputs, dispatch, events, state, updateState }) {
-        const color = new Color(inputs.color);
-        const colorStrings = mapObject(color.toFormattedStrings(), (key, value) => {
-            if (check.hasValue(omittedColors, key)) {
-                return undefined;
-            }
-            else if (key === 'hexString') {
-                return {
-                    key: 'hex',
-                    value,
-                };
-            }
-            else {
-                return {
-                    key,
-                    value,
-                };
-            }
-        });
-        if (state.inputColorString == undefined) {
-            updateState({
-                inputColorString: inputs.color,
-            });
-        }
-        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 `
-                  <${ViraInput.assign({
-                value: state.inputColorString || '',
-                fitText: true,
-            })}
-                      ${listen(ViraInput.events.valueChange, (event) => {
-                updateState({
-                    inputColorString: event.detail,
-                });
-                dispatch(new events.colorChange(event.detail));
-            })}
-                  ></${ViraInput}>
-              `
-            : '';
-        return html `
-            <div class="swatch">
-                <${VirColorSwatch.assign({
-            backgroundColor: inputs.color,
-        })}></${VirColorSwatch}>
-                ${inputTemplate}
-            </div>
-            <table>
-                <tbody>
-                    ${rows.map((row) => {
-            const cells = row.cells.map((cell, index) => {
-                const element = index ? 'td' : 'th';
-                return html `
-                                <${element}>${cell.content}</${element}>
-                            `;
-            });
-            return html `
-                            <tr>${cells}</tr>
-                        `;
-        })}
-                </tbody>
-            </table>
-        `;
-    },
-});

package/dist/elements/vir-color-format-sliders.element.d.ts

@@ -1,14 +0,0 @@
-import { type ColorFormatName } from '../data/color-class/color-formats.js';
-import { type Color } from '../data/color-class/color.js';
-/**
- * Color sliders for all coordinates within a specific color format.
- *
- * @category Elements
- */
-export declare const VirColorFormatSliders: import("element-vir").DeclarativeElementDefinition<"vir-color-format-sliders", {
-    color: Readonly<Color>;
-    colorFormatName: ColorFormatName;
-    showFormatName: boolean;
-}, {}, {
-    colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-color-format-sliders-", "vir-color-format-sliders-", readonly [], readonly []>;