@electrovir/color 1.6.1 → 1.6.3

package/dist/demo/all-book-pages.js

@@ -1,4 +1,5 @@
-import { virAllColorSpaceSlidersBookPage } from '../elements/vir-all-color-space-sliders.element.book.js';
+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 { virColorPickerBookPage } from '../elements/vir-color-picker.element.book.js';
 import { colorExamplesPage } from './color-examples.book.js';
 import { elementsBookPage, examplesBookPage } from './top-level-pages.js';
@@ -6,6 +7,7 @@ export const allBookPages = [
     elementsBookPage,
     examplesBookPage,
     colorExamplesPage,
-    virAllColorSpaceSlidersBookPage,
+    virAllSpacesColorPickerBookPage,
+    virColorPairContrastSummaryBookPage,
     virColorPickerBookPage,
 ];

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

@@ -1,9 +1,15 @@
 /* node:coverage disable */
-import { getObjectTypedEntries, omitObjectKeys } from '@augment-vir/common';
+import { check } from '@augment-vir/assert';
+import { getObjectTypedEntries, mapObject } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { defineTable, noNativeSpacing, viraFontCssVars, ViraInput } from 'vira';
+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.
  *
@@ -59,7 +65,21 @@ export const VirColorDetails = defineElement()({
     },
     render({ inputs, dispatch, events, state, updateState }) {
         const color = new Color(inputs.color);
-        const colorStrings = omitObjectKeys(color.toFormattedStrings(), ['name']);
+        const colorStrings = mapObject(color.toFormattedStrings(), (key, value) => {
+            if (check.hasValue(omittedColors, key)) {
+                return undefined;
+            }
+            else if (key === 'hexString') {
+                return {
+                    key: 'hex',
+                    value,
+                };
+            }
+            return {
+                key,
+                value,
+            };
+        });
         if (state.inputColorString == undefined) {
             updateState({
                 inputColorString: inputs.color,

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

@@ -128,8 +128,8 @@ export const VirColorPairContrastSummary = defineElement()({
                 key: 'colorValue',
             },
         ], getObjectTypedEntries({
-            'Foreground:': new Color(inputs.foregroundColor).toCss().hex,
-            'Background:': new Color(inputs.backgroundColor).toCss().hex,
+            'Foreground:': new Color(inputs.foregroundColor).toFormattedStrings().hexString,
+            'Background:': new Color(inputs.backgroundColor).toFormattedStrings().hexString,
             'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
         }), ([colorLayer, value,]) => {
             return {

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

@@ -1,7 +1,7 @@
 /* node:coverage disable */
 import { checkWrap } from '@augment-vir/assert';
 import { getObjectTypedValues } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen, nothing, onDomCreated, } from 'element-vir';
 import { Copy24Icon, noNativeFormStyles, viraFontCssVars, viraFormCssVars, ViraIcon, ViraInput, ViraPopUpTrigger, ViraSelect, viraShadows, } from 'vira';
 import { ColorFormatName, colorFormats } from '../data/color-class/color-formats.js';
 import { Color } from '../data/color-class/color.js';
@@ -108,6 +108,7 @@ export const VirColorPicker = defineElement()({
         }
 
         .raw-input-wrapper {
+            text-align: left;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -140,8 +141,9 @@ export const VirColorPicker = defineElement()({
             value: rawInput,
         })}
                     ${listen(ViraInput.events.valueChange, (event) => {
+            const rawInput = event.detail;
             updateState({
-                rawInput: event.detail,
+                rawInput,
             });
             if (Color.isValidColorString(rawInput)) {
                 dispatch(new events.colorChange(rawInput));
@@ -188,6 +190,14 @@ export const VirColorPicker = defineElement()({
                 <${ViraSelect.assign({
             options: colorFormatOptions,
             value: state.selectedFormatName,
+        })}
+                    ${onDomCreated(() => {
+            const storedFormat = colorLocalStorageClient.get.lastFormat();
+            if (storedFormat) {
+                updateState({
+                    selectedFormatName: storedFormat,
+                });
+            }
         })}
                     ${listen(ViraSelect.events.valueChange, (event) => {
             const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
@@ -232,15 +242,17 @@ export const VirColorPicker = defineElement()({
         }
     },
 });
-CSS.registerProperty({
-    name: String(VirColorPicker.cssVars['vir-color-picker-swatch-width'].name),
-    syntax: '<length>',
-    inherits: true,
-    initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-width'].default,
-});
-CSS.registerProperty({
-    name: String(VirColorPicker.cssVars['vir-color-picker-swatch-height'].name),
-    syntax: '<length>',
-    inherits: true,
-    initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-height'].default,
-});
+if ('CSS' in globalThis) {
+    globalThis.CSS.registerProperty({
+        name: String(VirColorPicker.cssVars['vir-color-picker-swatch-width'].name),
+        syntax: '<length>',
+        inherits: true,
+        initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-width'].default,
+    });
+    globalThis.CSS.registerProperty({
+        name: String(VirColorPicker.cssVars['vir-color-picker-swatch-height'].name),
+        syntax: '<length>',
+        inherits: true,
+        initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-height'].default,
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.6.1",
+    "version": "1.6.3",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -53,7 +53,7 @@
         "@augment-vir/assert": "^31.57.5",
         "@augment-vir/common": "^31.57.5",
         "@augment-vir/web": "^31.57.5",
-        "@electrovir/local-storage-client": "^0.0.1",
+        "@electrovir/local-storage-client": "^0.0.2",
         "apca-w3": "^0.1.9",
         "color-name": "^2.1.0",
         "culori": "^4.0.2",
@@ -64,7 +64,7 @@
         "@augment-vir/test": "^31.57.5",
         "@eslint/eslintrc": "^3.3.3",
         "@eslint/js": "^9.39.2",
-        "@stylistic/eslint-plugin": "^5.6.1",
+        "@stylistic/eslint-plugin": "^5.7.0",
         "@stylistic/eslint-plugin-ts": "^4.4.1",
         "@types/color-name": "^2.0.0",
         "@types/culori": "^4.0.1",
@@ -81,9 +81,9 @@
         "esbuild": "^0.27.2",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-jsdoc": "^61.5.0",
+        "eslint-plugin-jsdoc": "^62.0.0",
         "eslint-plugin-monorepo-cop": "^1.0.2",
-        "eslint-plugin-playwright": "^2.4.0",
+        "eslint-plugin-playwright": "^2.4.1",
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-require-extensions": "^0.1.3",
         "eslint-plugin-sonarjs": "^3.0.5",
@@ -105,7 +105,7 @@
         "typedoc": "^0.28.15",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.52.0",
-        "vira": "^28.19.0",
+        "vira": "^28.19.2",
         "virmator": "^14.4.2",
         "vite": "^7.3.1"
     },