@electrovir/color 1.7.12 → 2.0.0-beta.0

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;

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.12",
+    "version": "2.0.0-beta.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -53,9 +53,9 @@
         "@electrovir/color": "file:./"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.2.3",
-        "@augment-vir/common": "^32.2.3",
-        "@augment-vir/web": "^32.2.3",
+        "@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",
@@ -63,33 +63,33 @@
         "object-shape-tester": "^6.15.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.2.3",
-        "@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.68.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.1.1",
+        "cspell": "^10.2.0",
         "dependency-cruiser": "^18.2.0",
-        "element-book": "^26.17.5",
-        "element-vir": "^26.17.3",
+        "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": "^64.2.1",
+        "eslint-plugin-jsdoc": "^64.3.4",
         "eslint-plugin-monorepo-cop": "^1.0.2",
         "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": "^73.0.0",
+        "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",
@@ -106,15 +106,13 @@
         "runstorm": "^1.0.6",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.68.0",
-        "vira": "^31.31.6",
-        "virmator": "^14.33.0",
+        "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 []>;

package/dist/elements/vir-color-format-sliders.element.js

@@ -1,58 +0,0 @@
-/* node:coverage disable */
-import { getObjectTypedKeys } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
-import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
-import { colorFormats, } from '../data/color-class/color-formats.js';
-import { VirColorSlider } from './vir-color-slider.element.js';
-/**
- * Color sliders for all coordinates within a specific color format.
- *
- * @category Elements
- */
-export const VirColorFormatSliders = defineElement()({
-    tagName: 'vir-color-format-sliders',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-        }
-
-        h3 {
-            ${noNativeSpacing};
-        }
-    `,
-    events: {
-        colorChange: defineElementEvent(),
-    },
-    render({ inputs, dispatch, events }) {
-        const colorFormat = colorFormats[inputs.colorFormatName];
-        const coordinateTemplates = getObjectTypedKeys(colorFormat.coords).map((colorCoordinate) => {
-            return html `
-                    <${VirColorSlider.assign({
-                color: inputs.color,
-                colorCoordinateName: colorCoordinate,
-                colorFormatName: inputs.colorFormatName,
-            })}
-                        ${listen(VirColorSlider.events.valueChange, (event) => {
-                const newColor = inputs.color.clone();
-                newColor.set({
-                    [inputs.colorFormatName]: {
-                        [colorCoordinate]: event.detail,
-                    },
-                });
-                const newValue = newColor.toCss()[colorFormat.conversionFormat];
-                dispatch(new events.colorChange(newValue));
-            })}
-                    ></${VirColorSlider}>
-                `;
-        });
-        return html `
-            ${inputs.showFormatName
-            ? html `
-                      <h3>${inputs.colorFormatName}</h3>
-                  `
-            : nothing}
-            ${coordinateTemplates}
-        `;
-    },
-});

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

@@ -1,9 +0,0 @@
-/**
- * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
- *
- * @category Elements
- */
-export declare const VirColorPairContrastSummary: import("element-vir").DeclarativeElementDefinition<"vir-color-pair-contrast-summary", {
-    foregroundColor: string;
-    backgroundColor: string;
-}, {}, {}, "vir-color-pair-contrast-summary-", "vir-color-pair-contrast-summary-", readonly [], readonly []>;