@electrovir/color 1.6.2 → 1.6.4

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);
@@ -207,6 +217,9 @@ export const VirColorPicker = defineElement()({
         })}
                     ${listen(VirColorFormatSliders.events.colorChange, (event) => {
             dispatch(new events.colorChange(event.detail));
+            updateState({
+                rawInput: undefined,
+            });
         })}
                 ></${VirColorFormatSliders}>
             </div>
@@ -232,15 +245,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.2",
+    "version": "1.6.4",
     "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"
     },