@electrovir/color 1.5.3 → 1.6.0

package/dist/{color-class → data/color-class}/color-formats.d.ts

@@ -26,8 +26,53 @@ export type ColorCoordinateDefinition = {
      * @default 1
      */
     factor?: number | undefined;
-    suffix?: string;
+    suffix?: string | undefined;
+    radix?: number | undefined;
+    radixPad?: number | undefined;
 }>;
+/**
+ * Color formats supported by culori conversions.
+ *
+ * @category Internal
+ */
+export declare enum CuloriConversionFormat {
+    a98 = "a98",
+    cubehelix = "cubehelix",
+    dlab = "dlab",
+    dlch = "dlch",
+    hsi = "hsi",
+    hsl = "hsl",
+    hsv = "hsv",
+    hwb = "hwb",
+    itp = "itp",
+    jab = "jab",
+    jch = "jch",
+    lab = "lab",
+    lab65 = "lab65",
+    lch = "lch",
+    lch65 = "lch65",
+    lchuv = "lchuv",
+    lrgb = "lrgb",
+    luv = "luv",
+    okhsl = "okhsl",
+    okhsv = "okhsv",
+    oklab = "oklab",
+    oklch = "oklch",
+    p3 = "p3",
+    prophoto = "prophoto",
+    rec2020 = "rec2020",
+    rgb = "rgb",
+    xyb = "xyb",
+    xyz50 = "xyz50",
+    xyz65 = "xyz65",
+    yiq = "yiq"
+}
+/**
+ * The subset of {@link ColorFormatName} that supports color conversion (via culori).
+ *
+ * @category Internal
+ */
+export type SupportedConversionFormat = Extract<ColorFormatName, `${CuloriConversionFormat}`>;
 /**
  * All raw supported color formats.
  *
@@ -54,6 +99,34 @@ export declare const rawColorFormats: {
         };
         readonly colorSpace: "rgb";
     };
+    readonly hex: {
+        readonly coords: {
+            readonly r: {
+                readonly min: 0;
+                readonly max: 255;
+                readonly factor: 255;
+                readonly radix: 16;
+                readonly radixPad: 2;
+            };
+            readonly g: {
+                readonly min: 0;
+                readonly max: 255;
+                readonly factor: 255;
+                readonly radix: 16;
+                readonly radixPad: 2;
+            };
+            readonly b: {
+                readonly min: 0;
+                readonly max: 255;
+                readonly factor: 255;
+                readonly radix: 16;
+                readonly radixPad: 2;
+            };
+        };
+        readonly conversionFormat: CuloriConversionFormat.rgb;
+        readonly rawSyntax: "hexString";
+        readonly colorSpace: "rgb";
+    };
     readonly hsl: {
         readonly coords: {
             readonly h: {
@@ -187,15 +260,16 @@ export declare const ColorFormatName: { [Key in ColorFormatName]: Key; };
  * @enum
  */
 export declare const ColorSyntaxName: {
-    readonly hex: "hex";
     readonly name: "name";
-    readonly rgb: "rgb";
+    readonly hexString: "hexString";
     readonly hsl: "hsl";
     readonly hwb: "hwb";
     readonly lab: "lab";
     readonly lch: "lch";
     readonly oklab: "oklab";
     readonly oklch: "oklch";
+    readonly rgb: "rgb";
+    readonly hex: "hex";
 };
 export type ColorSyntaxName = Values<typeof ColorSyntaxName>;
 /**
@@ -281,4 +355,6 @@ export type ColorFormatDefinition<ColorSpace extends ColorSpaceName = any, Color
     /** This name for this color to be used in `Colorjs.to()`. Defaults to the color format key. */
     colorSpace: ColorSpace;
     colorFormat: ColorFormat;
+    conversionFormat: SupportedConversionFormat;
+    rawSyntax: ColorSyntaxName;
 };

package/dist/{color-class → data/color-class}/color-formats.js

@@ -1,4 +1,43 @@
-import { arrayToObject, getObjectTypedEntries, getObjectTypedValues, getOrSet, mapObjectValues, } from '@augment-vir/common';
+import { assert, assertWrap, check } from '@augment-vir/assert';
+import { arrayToObject, getObjectTypedEntries, getObjectTypedValues, getOrSet, mapObjectValues, stringify, } from '@augment-vir/common';
+/**
+ * Color formats supported by culori conversions.
+ *
+ * @category Internal
+ */
+export var CuloriConversionFormat;
+(function (CuloriConversionFormat) {
+    CuloriConversionFormat["a98"] = "a98";
+    CuloriConversionFormat["cubehelix"] = "cubehelix";
+    CuloriConversionFormat["dlab"] = "dlab";
+    CuloriConversionFormat["dlch"] = "dlch";
+    CuloriConversionFormat["hsi"] = "hsi";
+    CuloriConversionFormat["hsl"] = "hsl";
+    CuloriConversionFormat["hsv"] = "hsv";
+    CuloriConversionFormat["hwb"] = "hwb";
+    CuloriConversionFormat["itp"] = "itp";
+    CuloriConversionFormat["jab"] = "jab";
+    CuloriConversionFormat["jch"] = "jch";
+    CuloriConversionFormat["lab"] = "lab";
+    CuloriConversionFormat["lab65"] = "lab65";
+    CuloriConversionFormat["lch"] = "lch";
+    CuloriConversionFormat["lch65"] = "lch65";
+    CuloriConversionFormat["lchuv"] = "lchuv";
+    CuloriConversionFormat["lrgb"] = "lrgb";
+    CuloriConversionFormat["luv"] = "luv";
+    CuloriConversionFormat["okhsl"] = "okhsl";
+    CuloriConversionFormat["okhsv"] = "okhsv";
+    CuloriConversionFormat["oklab"] = "oklab";
+    CuloriConversionFormat["oklch"] = "oklch";
+    CuloriConversionFormat["p3"] = "p3";
+    CuloriConversionFormat["prophoto"] = "prophoto";
+    CuloriConversionFormat["rec2020"] = "rec2020";
+    CuloriConversionFormat["rgb"] = "rgb";
+    CuloriConversionFormat["xyb"] = "xyb";
+    CuloriConversionFormat["xyz50"] = "xyz50";
+    CuloriConversionFormat["xyz65"] = "xyz65";
+    CuloriConversionFormat["yiq"] = "yiq";
+})(CuloriConversionFormat || (CuloriConversionFormat = {}));
 /**
  * All raw supported color formats.
  *
@@ -25,6 +64,34 @@ export const rawColorFormats = {
         },
         colorSpace: 'rgb',
     },
+    hex: {
+        coords: {
+            r: {
+                min: 0,
+                max: 255,
+                factor: 255,
+                radix: 16,
+                radixPad: 2,
+            },
+            g: {
+                min: 0,
+                max: 255,
+                factor: 255,
+                radix: 16,
+                radixPad: 2,
+            },
+            b: {
+                min: 0,
+                max: 255,
+                factor: 255,
+                radix: 16,
+                radixPad: 2,
+            },
+        },
+        conversionFormat: CuloriConversionFormat.rgb,
+        rawSyntax: 'hexString',
+        colorSpace: 'rgb',
+    },
     hsl: {
         coords: {
             h: {
@@ -159,8 +226,8 @@ export const ColorFormatName = mapObjectValues(rawColorFormats, (colorName) => c
  */
 export const ColorSyntaxName = {
     ...ColorFormatName,
-    hex: 'hex',
     name: 'name',
+    hexString: 'hexString',
 };
 /**
  * All supported color formats.
@@ -168,10 +235,29 @@ export const ColorSyntaxName = {
  * @category Color Format
  */
 export const colorFormats = mapObjectValues(rawColorFormats, (colorFormatName, colorFormatValue) => {
+    /* node:coverage disable */
+    const conversionFormat = check.isEnumValue(colorFormatName, CuloriConversionFormat) &&
+        check.isEnumValue(colorFormatName, ColorFormatName)
+        ? colorFormatName
+        : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            'conversionFormat' in colorFormatValue && colorFormatValue.conversionFormat
+                ? check.isEnumValue(colorFormatValue.conversionFormat, CuloriConversionFormat) &&
+                    check.isEnumValue(colorFormatValue.conversionFormat, ColorFormatName)
+                    ? colorFormatValue.conversionFormat
+                    : undefined
+                : undefined;
+    assert.isTruthy(conversionFormat, `Invalid conversion format for color format '${colorFormatName}' ${stringify(colorFormatValue)}.`);
     return {
         ...colorFormatValue,
         colorFormat: colorFormatName,
+        conversionFormat,
+        rawSyntax: assertWrap.isEnumValue(
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        'rawSyntax' in colorFormatValue && colorFormatValue.rawSyntax
+            ? colorFormatValue.rawSyntax
+            : colorFormatName, ColorSyntaxName),
     };
+    /* node:coverage enable */
 });
 /**
  * All supported color space names.
@@ -226,7 +312,7 @@ export function getColorSyntaxFromCssString(cssString) {
         return ColorSyntaxName.lch;
     }
     else if (cssString.startsWith('#')) {
-        return ColorSyntaxName.hex;
+        return ColorSyntaxName.hexString;
     }
     else {
         return ColorSyntaxName.name;

package/dist/{color-class → data/color-class}/color.d.ts

@@ -9,7 +9,7 @@ import { ColorFormatName, ColorSyntaxName, type ColorCoordsByFormat, type ColorV
 export type ColorUpdate = RequireExactlyOne<{
     [FormatName in ColorFormatName]: PartialWithUndefined<Record<ColorCoordsByFormat[FormatName], number>>;
 } & {
-    [ColorSyntaxName.hex]: HexColor;
+    [ColorSyntaxName.hexString]: HexColor;
     [ColorSyntaxName.name]: string;
 }>;
 /**
@@ -19,7 +19,7 @@ export type ColorUpdate = RequireExactlyOne<{
  * @category Internal
  */
 export type AllColorsValues = ColorValue & {
-    [ColorSyntaxName.hex]: HexColor;
+    hexString: HexColor;
     [ColorSyntaxName.name]: string;
     names: string[];
 };
@@ -47,13 +47,15 @@ export declare class Color {
     constructor(
     /** Any valid CSS color string or an object of color coordinate values. */
     initValue: string | Readonly<ColorUpdate>);
+    /** Checks if the input string can be converted into a color. */
+    static isValidColorString(this: void, value: string): boolean;
     /** Checks, with a type guard, that a given input is a Color class instance. */
-    static isColor<T>(value: T): value is Extract<T, Readonly<Color>>;
+    static isColor<T>(this: void, value: T): value is Extract<T, Readonly<Color>>;
     /**
      * Create a new {@link Color} instance by parsing the output of another instance's
      * {@link Color.serialize} method.
      */
-    static deserialize(input: string): Color;
+    static deserialize(this: void, input: string): Color;
     /**
      * Converts the color class to a CSS string format in the color space and format that it was
      * originally set with.
@@ -65,7 +67,12 @@ export declare class Color {
     protected readonly _allColors: {
         names: string[];
         name: string;
-        hex: HexColor;
+        hexString: HexColor;
+        hex: {
+            r: number;
+            g: number;
+            b: number;
+        };
         rgb: {
             r: number;
             g: number;
@@ -153,7 +160,13 @@ export declare class Color {
      */
     get name(): string;
     /** The current color expressed as an RGB hex string. */
-    get hex(): HexColor;
+    get hexString(): `#${string}`;
+    /** The current color expressed as an RGB hex coordinates. */
+    get hex(): {
+        r: number;
+        g: number;
+        b: number;
+    };
     /** The current color expressed as its RGB coordinate values. */
     get rgb(): {
         r: number;

package/dist/{color-class → data/color-class}/color.js

@@ -21,6 +21,16 @@ export class Color {
     initValue) {
         this.set(initValue);
     }
+    /** Checks if the input string can be converted into a color. */
+    static isValidColorString(value) {
+        try {
+            new Color(value);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
     /** Checks, with a type guard, that a given input is a Color class instance. */
     static isColor(value) {
         return value instanceof Color;
@@ -56,7 +66,12 @@ export class Color {
     _allColors = {
         names: ['black'],
         [ColorSyntaxName.name]: 'black',
-        [ColorSyntaxName.hex]: '#000000',
+        hexString: '#000000',
+        [ColorSyntaxName.hex]: {
+            r: 0,
+            g: 0,
+            b: 0,
+        },
         [ColorSyntaxName.rgb]: {
             r: 0,
             g: 0,
@@ -121,8 +136,8 @@ export class Color {
             return this.setByString(newValue);
         }
         assert.isLengthExactly(Object.keys(newValue), 1, `Cannot set multiple color formats at once: got '${joinWithFinalConjunction(Object.keys(newValue))}'`);
-        if (newValue.hex || newValue.name) {
-            this.setByString(newValue.hex || newValue.name);
+        if (newValue.hexString || newValue.name) {
+            this.setByString(newValue.hexString || newValue.name);
         }
         else {
             const [colorFormatName, colorValues,] = assertWrap.isDefined(getObjectTypedEntries(newValue)[0]);
@@ -137,7 +152,7 @@ export class Color {
                     : this[colorFormatName][coordName];
                 return assertWrap.isDefined(rawCoordValue);
             }));
-            this.setByString(`${colorFormatName}(${orderedColorCoords.join(' ')})`);
+            this.setByString(`${colorFormatDefinition.conversionFormat}(${orderedColorCoords.join(' ')})`);
         }
     }
     /**
@@ -147,12 +162,13 @@ export class Color {
     pullFromInternalColor() {
         getEnumValues(ColorFormatName).forEach((colorFormatName) => {
             const colorFormatDefinition = colorFormats[colorFormatName];
+            const mappedColorFormatName = colorFormatDefinition.conversionFormat;
             const originalColorDefinition = check.isKeyOf(this.#internalColor.mode, colorFormats)
                 ? colorFormats[this.#internalColor.mode]
                 : undefined;
             const converted = clampGamut(colorFormatDefinition.colorSpace === originalColorDefinition?.colorSpace
-                ? colorFormatName
-                : 'rgb')(converter(colorFormatName)(this.#internalColor));
+                ? mappedColorFormatName
+                : '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}'.`);
@@ -167,7 +183,7 @@ export class Color {
                 }
             });
         });
-        this._allColors[ColorSyntaxName.hex] = formatHex(this.#internalColor);
+        this._allColors.hexString = formatHex(this.#internalColor);
         this._allColors.names = findMatchingColorNames(this.rgb);
         this._allColors[ColorSyntaxName.name] = this._allColors.names[0] || '';
     }
@@ -197,10 +213,10 @@ export class Color {
             return coordValues.map((coordValue) => String(coordValue).padStart(6, ' ')).join(' ');
         });
         return {
-            [ColorSyntaxName.hex]: this.hex,
             ...colorFormatStrings,
             names: this.names.join(', ').padEnd(maxColorNameLength, ' '),
-            name: (this.names[0] || '').padEnd(maxColorNameLength, ' '),
+            [ColorSyntaxName.name]: (this.names[0] || '').padEnd(maxColorNameLength, ' '),
+            [ColorSyntaxName.hexString]: this[ColorSyntaxName.hexString],
         };
     }
     /**
@@ -215,9 +231,9 @@ export class Color {
             return `${colorFormatName}(${coordValues.join(' ')})`;
         });
         return {
-            [ColorSyntaxName.hex]: this.hex,
             ...colorFormatStrings,
-            name: this.names[0] || '',
+            [ColorSyntaxName.hexString]: this[ColorSyntaxName.hexString],
+            [ColorSyntaxName.name]: this.names[0] || '',
         };
     }
     /**
@@ -235,6 +251,10 @@ export class Color {
         return this._allColors.names[0] || '';
     }
     /** The current color expressed as an RGB hex string. */
+    get hexString() {
+        return this._allColors[ColorSyntaxName.hexString];
+    }
+    /** The current color expressed as an RGB hex coordinates. */
     get hex() {
         return copyThroughJson(this._allColors[ColorSyntaxName.hex]);
     }

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,6 @@
+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/demo/all-book-pages.js

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

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

@@ -1,6 +1,7 @@
 /* node:coverage disable */
-import { ElementBookApp } from 'element-book';
+import { ElementBookApp, ElementBookSlotName } from 'element-book';
 import { css, defineElement, html } from 'element-vir';
+import { noNativeSpacing } from 'vira';
 import { allBookPages } from './all-book-pages.js';
 export const VirDemo = defineElement()({
     tagName: 'vir-demo',
@@ -18,6 +19,13 @@ export const VirDemo = defineElement()({
             max-width: 100%;
             box-sizing: border-box;
         }
+
+        h1 {
+            ${noNativeSpacing};
+            font-size: 16px;
+            margin-bottom: 16px;
+            text-align: center;
+        }
     `,
     render() {
         return html `
@@ -27,7 +35,9 @@ export const VirDemo = defineElement()({
                 useInternalRouter: true,
                 basePath: 'color',
             },
-        })}></${ElementBookApp}>
+        })}>
+                <h1 slot=${ElementBookSlotName.NavHeader}>@electrovir/color</h1>
+            </${ElementBookApp}>
         `;
     },
 });

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

@@ -1,4 +1,4 @@
-import { type Color } from '../color-class/color.js';
+import { type Color } from '../data/color-class/color.js';
 /**
  * Color sliders for all color spaces.
  *

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

@@ -1,7 +1,7 @@
 /* node:coverage disable */
 import { getObjectTypedKeys, getObjectTypedValues } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { colorFormatsBySpace } from '../color-class/color-formats.js';
+import { colorFormatsBySpace } from '../data/color-class/color-formats.js';
 import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
 /**
  * Color sliders for all color spaces.
@@ -34,6 +34,7 @@ export const VirAllColorSpaceSliders = defineElement()({
                             <${VirColorFormatSliders.assign({
                     color: inputs.color,
                     colorFormatName,
+                    showFormatName: true,
                 })}
                                 ${listen(VirColorFormatSliders.events.colorChange, (event) => {
                     dispatch(new events.colorChange(event.detail));

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

@@ -1,4 +1,4 @@
-import { type ColorSyntaxName } from '../color-class/color-formats.js';
+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.

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

@@ -1,7 +1,7 @@
 /* node:coverage disable */
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
-import { getColorSyntaxFromCssString } from '../color-class/color-formats.js';
-import { Color } from '../color-class/color.js';
+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';
 /**

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

@@ -2,7 +2,7 @@
 import { getObjectTypedEntries, omitObjectKeys } from '@augment-vir/common';
 import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
 import { defineTable, noNativeSpacing, viraFontCssVars, ViraInput } from 'vira';
-import { Color } from '../color-class/color.js';
+import { Color } from '../data/color-class/color.js';
 import { VirColorSwatch } from './vir-color-swatch.element.js';
 /**
  * A color swatch alongside the color in all of its different supported formats.

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

@@ -1,5 +1,5 @@
-import { type ColorFormatName } from '../color-class/color-formats.js';
-import { type Color } from '../color-class/color.js';
+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.
  *
@@ -8,6 +8,7 @@ import { type Color } from '../color-class/color.js';
 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,8 +1,8 @@
 /* node:coverage disable */
 import { getObjectTypedKeys } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
 import { noNativeSpacing } from 'vira';
-import { colorFormats, } from '../color-class/color-formats.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.
@@ -40,14 +40,18 @@ export const VirColorFormatSliders = defineElement()({
                         [colorCoordinate]: event.detail,
                     },
                 });
-                const newValue = newColor.toCss()[inputs.colorFormatName];
+                const newValue = newColor.toCss()[colorFormat.conversionFormat];
                 dispatch(new events.colorChange(newValue));
             })}
                     ></${VirColorSlider}>
                 `;
         });
         return html `
-            <h3>${inputs.colorFormatName}</h3>
+            ${inputs.showFormatName
+            ? html `
+                      <h3>${inputs.colorFormatName}</h3>
+                  `
+            : nothing}
             ${coordinateTemplates}
         `;
     },

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

@@ -3,8 +3,8 @@ import { assertWrap } from '@augment-vir/assert';
 import { getObjectTypedEntries, round } from '@augment-vir/common';
 import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
 import { defineTable, noNativeSpacing, ViraBoldText, viraFontCssVars } from 'vira';
-import { Color } from '../color-class/color.js';
-import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '../contrast/contrast.js';
+import { Color } from '../data/color-class/color.js';
+import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '../data/contrast/contrast.js';
 import { VirColorSwatch } from './vir-color-swatch.element.js';
 import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
 /**

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

@@ -1,5 +1,5 @@
 import { type SingleCssVarDefinition } from 'lit-css-vars';
-import { type FontWeight } from '../contrast/contrast.js';
+import { type FontWeight } from '../data/contrast/contrast.js';
 /**
  * A foreground/background color pair.
  *

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

@@ -1,8 +1,8 @@
 /* node:coverage disable */
 import { assertWrap, check } from '@augment-vir/assert';
 import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
-import { noNativeFormStyles, noNativeSpacing } from 'vira';
-import { calculateContrast } from '../contrast/contrast.js';
+import { noNativeFormStyles, noNativeSpacing, viraFontCssVars } from 'vira';
+import { calculateContrast } from '../data/contrast/contrast.js';
 import { VirContrastIndicator } from './vir-contrast-indicator.element.js';
 /**
  * Showcase a foreground/backend color pair.
@@ -85,7 +85,7 @@ export const VirColorPair = defineElement()({
         }
 
         .css-var-names {
-            font-family: monospace;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
             display: flex;
             max-width: 100%;
             flex-direction: column;

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

@@ -1,14 +1,20 @@
-import { type ColorFormatName as ColorFormatNameType } from '../color-class/color-formats.js';
-import { Color } from '../color-class/color.js';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { Color } from '../data/color-class/color.js';
 /**
  * A color picker element with a swatch that opens a popup with color format sliders.
  *
+ * Set the width and height of the swatch using the provided CSS variables.
+ *
  * @category Elements
  */
-export declare const VirColorPicker: import("element-vir").DeclarativeElementDefinition<"vir-color-picker", {
+export declare const VirColorPicker: import("element-vir").DeclarativeElementDefinition<"vir-color-picker", Readonly<{
     color: string | Readonly<Color> | undefined;
-}, {
-    selectedFormatName: ColorFormatNameType;
+} & PartialWithUndefined<{
+    alwaysShowPicker: boolean;
+    showHexValue: boolean;
+}>>, {
+    selectedFormatName: "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "rgb" | "hex";
+    rawInput: undefined | string;
 }, {
     colorChange: import("element-vir").DefineEvent<string>;
-}, "vir-color-picker-", "vir-color-picker-width" | "vir-color-picker-height", readonly [], readonly []>;
+}, "vir-color-picker-always-show", "vir-color-picker-swatch-width" | "vir-color-picker-swatch-height", readonly [], readonly []>;

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

@@ -1,11 +1,11 @@
 /* node:coverage disable */
 import { checkWrap } from '@augment-vir/assert';
 import { getObjectTypedValues } from '@augment-vir/common';
-import { css, defineElement, defineElementEvent, html, listen, onResize } from 'element-vir';
-import { setCssVarValue } from 'lit-css-vars';
-import { ViraPopUpTrigger, ViraSelect, viraShadows } from 'vira';
-import { ColorFormatName, } from '../color-class/color-formats.js';
-import { Color } from '../color-class/color.js';
+import { css, defineElement, defineElementEvent, html, listen, nothing } 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';
+import { colorLocalStorageClient } from '../data/local-storage.client.js';
 import { VirColorFormatSliders } from './vir-color-format-sliders.element.js';
 import { VirColorSwatch } from './vir-color-swatch.element.js';
 const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => ({
@@ -15,17 +15,40 @@ const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName
 /**
  * A color picker element with a swatch that opens a popup with color format sliders.
  *
+ * Set the width and height of the swatch using the provided CSS variables.
+ *
  * @category Elements
  */
 export const VirColorPicker = defineElement()({
     tagName: 'vir-color-picker',
     cssVars: {
-        'vir-color-picker-width': '100px',
-        'vir-color-picker-height': '100px',
+        'vir-color-picker-swatch-width': '100px',
+        'vir-color-picker-swatch-height': '100px',
     },
-    styles: ({ cssVars }) => css `
+    state() {
+        return {
+            selectedFormatName: colorLocalStorageClient.get.lastFormat() || ColorFormatName.rgb,
+            rawInput: undefined,
+        };
+    },
+    hostClasses: {
+        'vir-color-picker-always-show': ({ inputs }) => !!inputs.alwaysShowPicker,
+    },
+    styles: ({ cssVars, hostClasses }) => css `
         :host {
-            display: inline-block;
+            display: inline-flex;
+        }
+
+        ${hostClasses['vir-color-picker-always-show'].selector} {
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }
+
+        button {
+            ${noNativeFormStyles}
+            cursor: pointer;
+            display: flex;
         }
 
         ${ViraPopUpTrigger} {
@@ -34,82 +57,190 @@ export const VirColorPicker = defineElement()({
             box-sizing: border-box;
         }
 
-        ${VirColorSwatch} {
-            width: ${cssVars['vir-color-picker-width'].value};
-            height: ${cssVars['vir-color-picker-height'].value};
-            cursor: pointer;
-            box-sizing: border-box;
+        .swatch-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            align-items: center;
+
+            & ${VirColorSwatch} {
+                width: ${cssVars['vir-color-picker-swatch-width'].value};
+                height: ${cssVars['vir-color-picker-swatch-height'].value};
+                box-sizing: border-box;
+            }
         }
 
-        .popup-content {
+        .code-button {
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            font-size: 12px;
+            color: #666;
+            display: flex;
+            justify-content: center;
+            gap: 2px;
+            align-items: center;
+
+            & ${ViraIcon} {
+                width: 18px;
+                aspect-ratio: 1;
+            }
+
+            &:hover {
+                color: #000;
+            }
+
+            &:active {
+                color: dodgerblue;
+            }
+        }
+
+        .picker {
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 4px;
             padding: 16px;
             background: white;
             border: 1px solid #ccc;
             border-radius: 8px;
+        }
+
+        .pop-up .picker {
             ${viraShadows.menuShadow}
         }
+
+        .raw-input-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 12px;
+            ${viraFormCssVars['vira-form-border-color'].name}: #ddd;
+            color: #666;
+
+            & ${ViraInput} {
+                flex-grow: 1;
+                width: unset;
+                color: inherit;
+                height: 20px;
+                border: none;
+            }
+        }
     `,
     events: {
         colorChange: defineElementEvent(),
     },
-    state() {
-        return {
-            selectedFormatName: ColorFormatName.rgb,
-        };
-    },
-    render({ inputs, dispatch, events, state, updateState, host, cssVars }) {
+    render({ inputs, dispatch, events, state, updateState }) {
         const color = Color.isColor(inputs.color)
             ? inputs.color
             : new Color(inputs.color || 'black');
-        return html `
-            <${ViraPopUpTrigger.assign({
-            keepOpenAfterInteraction: true,
+        const formatDefinition = colorFormats[state.selectedFormatName];
+        const rawInput = state.rawInput ?? color.toCss()[formatDefinition.rawSyntax];
+        const rawInputTemplate = html `
+            <div class="raw-input-wrapper">
+                <${ViraInput.assign({
+            value: rawInput,
         })}
-                ${onResize((size) => {
-            setCssVarValue({
-                onElement: host,
-                forCssVar: cssVars['vir-color-picker-width'],
-                toValue: `${size.contentRect.width}px`,
-            });
-            setCssVarValue({
-                onElement: host,
-                forCssVar: cssVars['vir-color-picker-height'],
-                toValue: `${size.contentRect.height}px`,
+                    ${listen(ViraInput.events.valueChange, (event) => {
+            updateState({
+                rawInput: event.detail,
             });
+            if (Color.isValidColorString(rawInput)) {
+                dispatch(new events.colorChange(rawInput));
+            }
+        })}
+                ></${ViraInput}>
+                <button
+                    class="code-button"
+                    ${listen('click', async () => {
+            await globalThis.navigator.clipboard.writeText(rawInput);
+        })}
+                >
+                    <${ViraIcon.assign({
+            icon: Copy24Icon,
+            fitContainer: true,
+        })}></${ViraIcon}>
+                </button>
+            </div>
+        `;
+        const hexValueTemplate = html `
+            <button
+                class="code-button"
+                ${listen('click', async () => {
+            await globalThis.navigator.clipboard.writeText(color.hexString);
         })}
             >
+                <span>${color.hexString}</span>
+                <${ViraIcon.assign({
+            icon: Copy24Icon,
+            fitContainer: true,
+        })}></${ViraIcon}>
+            </button>
+        `;
+        const swatchTemplate = html `
+            <div class="swatch-wrapper">
                 <${VirColorSwatch.assign({
             backgroundColor: color,
-        })}
-                    slot=${ViraPopUpTrigger.slotNames.trigger}
-                ></${VirColorSwatch}>
-                <div class="popup-content" slot=${ViraPopUpTrigger.slotNames.popUp}>
-                    <${ViraSelect.assign({
+        })}></${VirColorSwatch}>
+                ${inputs.showHexValue ? hexValueTemplate : nothing}
+            </div>
+        `;
+        const pickerTemplate = html `
+            <div class="picker">
+                <${ViraSelect.assign({
             options: colorFormatOptions,
             value: state.selectedFormatName,
         })}
-                        ${listen(ViraSelect.events.valueChange, (event) => {
+                    ${listen(ViraSelect.events.valueChange, (event) => {
             const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
             if (selectedFormat) {
                 updateState({
                     selectedFormatName: selectedFormat,
                 });
+                colorLocalStorageClient.set.lastFormat(selectedFormat);
             }
         })}
-                    ></${ViraSelect}>
-                    <${VirColorFormatSliders.assign({
+                ></${ViraSelect}>
+                ${rawInputTemplate}
+                <${VirColorFormatSliders.assign({
             color,
             colorFormatName: state.selectedFormatName,
+            showFormatName: false,
         })}
-                        ${listen(VirColorFormatSliders.events.colorChange, (event) => {
+                    ${listen(VirColorFormatSliders.events.colorChange, (event) => {
             dispatch(new events.colorChange(event.detail));
         })}
-                    ></${VirColorFormatSliders}>
-                </div>
-            </${ViraPopUpTrigger}>
+                ></${VirColorFormatSliders}>
+            </div>
         `;
+        if (inputs.alwaysShowPicker) {
+            return html `
+                ${swatchTemplate} ${pickerTemplate}
+            `;
+        }
+        else {
+            return html `
+                <${ViraPopUpTrigger.assign({
+                keepOpenAfterInteraction: true,
+            })}>
+                    <button class="trigger" slot=${ViraPopUpTrigger.slotNames.trigger}>
+                        ${swatchTemplate}
+                    </button>
+                    <div class="pop-up" slot=${ViraPopUpTrigger.slotNames.popUp}>
+                        ${pickerTemplate}
+                    </div>
+                </${ViraPopUpTrigger}>
+            `;
+        }
     },
 });
+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,
+});

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

@@ -1,5 +1,5 @@
-import { type ColorCoordinateName, type ColorFormatName } from '../color-class/color-formats.js';
-import { Color } from '../color-class/color.js';
+import { type ColorCoordinateName, type ColorFormatName } from '../data/color-class/color-formats.js';
+import { Color } from '../data/color-class/color.js';
 /**
  * A slider for a specific color coordinate in a specific color space in a specific color.
  *

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

@@ -4,8 +4,8 @@ import { createArray } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { css, defineElement, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
 import { viraFontCssVars, ViraInput } from 'vira';
-import { colorFormats, } from '../color-class/color-formats.js';
-import { Color } from '../color-class/color.js';
+import { colorFormats, } from '../data/color-class/color-formats.js';
+import { Color } from '../data/color-class/color.js';
 /**
  * A slider for a specific color coordinate in a specific color space in a specific color.
  *
@@ -61,10 +61,16 @@ export const VirColorSlider = defineElement()({
                     [inputs.colorCoordinateName]: value,
                 },
             });
-            return stopColor.toCss()[inputs.colorFormatName];
+            return stopColor.toCss()[formatDefinition.conversionFormat];
         });
         const gradient = css `linear-gradient(to right, ${unsafeCSS(colorStops.join(','))})`;
         const coordinateValue = assertWrap.isNumber(inputs.color[inputs.colorFormatName][inputs.colorCoordinateName]);
+        const displayValue = coordinateDefinition.radix
+            ? Math.round(coordinateValue)
+                .toString(coordinateDefinition.radix)
+                .toUpperCase()
+                .padStart(coordinateDefinition.radixPad || 0, '0')
+            : String(coordinateValue);
         return html `
             <span class="coordinate">${inputs.colorCoordinateName.toUpperCase()}</span>
             <input
@@ -86,10 +92,12 @@ export const VirColorSlider = defineElement()({
         })}
             />
             <${ViraInput.assign({
-            value: String(coordinateValue),
+            value: displayValue,
         })}
                 ${listen(ViraInput.events.valueChange, (event) => {
-            const newValue = Number(event.detail);
+            const newValue = coordinateDefinition.radix
+                ? parseInt(event.detail, coordinateDefinition.radix)
+                : Number(event.detail);
             if (isNaN(newValue)) {
                 return;
             }

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

@@ -1,4 +1,4 @@
-import { type Color } from '../color-class/color.js';
+import { type Color } from '../data/color-class/color.js';
 /**
  * Show a background and/or foreground color. Note that if a foreground color is provided that it is
  * not actually applied to anything, you must provide a child element for it to be applied to.

package/dist/elements/vir-contrast-indicator.element.d.ts

@@ -1,4 +1,4 @@
-import { type CalculatedContrast, type FontWeight } from '../contrast/contrast.js';
+import { type CalculatedContrast, type FontWeight } from '../data/contrast/contrast.js';
 /**
  * Show contrast details for a calculated contrast.
  *

package/dist/elements/vir-contrast-indicator.element.js

@@ -1,6 +1,6 @@
 /* node:coverage disable */
 import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
-import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '../contrast/contrast.js';
+import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '../data/contrast/contrast.js';
 /**
  * Show contrast details for a calculated contrast.
  *

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export * from './color-class/color-formats.js';
-export * from './color-class/color-name-length.js';
-export * from './color-class/color.js';
-export * from './contrast/contrast.js';
+export * from './data/color-class/color-formats.js';
+export * from './data/color-class/color-name-length.js';
+export * from './data/color-class/color.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';

package/dist/index.js

@@ -1,7 +1,7 @@
-export * from './color-class/color-formats.js';
-export * from './color-class/color-name-length.js';
-export * from './color-class/color.js';
-export * from './contrast/contrast.js';
+export * from './data/color-class/color-formats.js';
+export * from './data/color-class/color-name-length.js';
+export * from './data/color-class/color.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';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.5.3",
+    "version": "1.6.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -50,31 +50,33 @@
         "test:update": "npm test update"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.57.3",
-        "@augment-vir/common": "^31.57.3",
-        "@augment-vir/web": "^31.57.3",
+        "@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",
         "apca-w3": "^0.1.9",
         "color-name": "^2.1.0",
         "culori": "^4.0.2",
+        "object-shape-tester": "^6.11.0",
         "type-fest": "^5.3.1"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.57.3",
+        "@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-ts": "^4.4.1",
         "@types/color-name": "^2.0.0",
         "@types/culori": "^4.0.1",
-        "@typescript-eslint/eslint-plugin": "^8.51.0",
+        "@typescript-eslint/eslint-plugin": "^8.52.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
         "cspell": "^9.4.0",
-        "dependency-cruiser": "^17.3.5",
-        "element-book": "^26.14.1",
+        "dependency-cruiser": "^17.3.6",
+        "element-book": "^26.14.2",
         "element-vir": "^26.14.0",
         "esbuild": "^0.27.2",
         "eslint": "^9.39.2",
@@ -90,7 +92,7 @@
         "istanbul-smart-text-reporter": "^1.1.5",
         "lit-css-vars": "^3.0.11",
         "markdown-code-example-inserter": "^3.0.3",
-        "npm-check-updates": "^19.2.0",
+        "npm-check-updates": "^19.3.1",
         "prettier": "~3.3.3",
         "prettier-plugin-interpolated-html-tags": "^2.0.1",
         "prettier-plugin-jsdoc": "^1.8.0",
@@ -102,10 +104,10 @@
         "runstorm": "^1.0.0",
         "typedoc": "^0.28.15",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.51.0",
-        "vira": "^28.16.0",
-        "virmator": "^14.4.0",
-        "vite": "^7.3.0"
+        "typescript-eslint": "^8.52.0",
+        "vira": "^28.19.0",
+        "virmator": "^14.4.2",
+        "vite": "^7.3.1"
     },
     "peerDependencies": {
         "element-vir": ">=26",