@electrovir/color 1.6.0 → 1.6.2

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-slider.element.js

@@ -1,8 +1,8 @@
 /* node:coverage disable */
-import { assertWrap } from '@augment-vir/assert';
+import { assert, assertWrap } from '@augment-vir/assert';
 import { createArray } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
-import { css, defineElement, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen, onDomRendered, unsafeCSS, } from 'element-vir';
 import { viraFontCssVars, ViraInput } from 'vira';
 import { colorFormats, } from '../data/color-class/color-formats.js';
 import { Color } from '../data/color-class/color.js';
@@ -78,10 +78,18 @@ export const VirColorSlider = defineElement()({
                 style=${css `
                     ${cssVars['vir-color-slider-gradient'].name}: ${gradient};
                 `}
-                min=${coordinateDefinition.min}
-                max=${coordinateDefinition.max}
-                .value=${String(coordinateValue)}
                 step=${Math.pow(10, coordinateDefinition.digits ? -coordinateDefinition.digits : 0)}
+                ${onDomRendered((element) => {
+            /**
+             * We must set these imperatively to force the input element to match the
+             * inputs, otherwise when swapping color formats these color sliders don't
+             * update correctly.
+             */
+            assert.instanceOf(element, HTMLInputElement);
+            element.min = String(coordinateDefinition.min);
+            element.max = String(coordinateDefinition.max);
+            element.value = String(coordinateValue);
+        })}
                 ${listen('input', (event) => {
             const element = extractEventTarget(event, HTMLInputElement);
             const newValue = Number(element.value);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.6.0",
+    "version": "1.6.2",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",