@electrovir/color 1.0.0 → 1.2.0

package/dist/color-class/color-formats.d.ts

@@ -28,16 +28,6 @@ export type ColorCoordinateDefinition = {
     factor?: number | undefined;
     suffix?: string;
 }>;
-/**
- * A single color format definition.
- *
- * @category Internal
- */
-export type ColorFormatDefinition<ColorSpace extends string = string> = {
-    coords: Record<string, ColorCoordinateDefinition>;
-    /** This name for this color to be used in `Colorjs.to()`. Defaults to the color format key. */
-    colorSpace: ColorSpace;
-};
 /**
  * All raw supported color formats.
  *
@@ -184,15 +174,35 @@ export declare const rawColorFormats: {
     };
 };
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
+ *
+ * @category Internal
+ * @enum
+ */
+export declare const ColorFormatName: { [Key in ColorFormatName]: Key; };
+/**
+ * {@link ColorFormatName} combined with hex and named CSS color representation.
  *
  * @category Internal
+ * @enum
  */
-export declare const ColorFormatName: { [FormatName in ColorFormatName]: FormatName; };
+export declare const ColorSyntaxName: {
+    readonly hex: "hex";
+    readonly name: "name";
+    readonly rgb: "rgb";
+    readonly hsl: "hsl";
+    readonly hwb: "hwb";
+    readonly lab: "lab";
+    readonly lch: "lch";
+    readonly oklab: "oklab";
+    readonly oklch: "oklch";
+};
+export type ColorSyntaxName = Values<typeof ColorSyntaxName>;
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
  *
  * @category Internal
+ * @enum
  */
 export type ColorFormatName = keyof typeof rawColorFormats;
 /**
@@ -210,9 +220,9 @@ export type ColorCoordsByFormat = {
  * @category Internal
  */
 export type ColorFormats = Readonly<{
-    [FormatName in ColorFormatName]: ColorFormatDefinition<'colorSpace' extends keyof (typeof rawColorFormats)[FormatName] ? Extract<(typeof rawColorFormats)[FormatName], {
+    [FormatName in ColorFormatName]: ColorFormatDefinition<Extract<(typeof rawColorFormats)[FormatName], {
         colorSpace: any;
-    }>['colorSpace'] : FormatName>;
+    }>['colorSpace'], FormatName>;
 }>;
 /**
  * All supported color formats.
@@ -221,17 +231,25 @@ export type ColorFormats = Readonly<{
  */
 export declare const colorFormats: ColorFormats;
 /**
- * All available color space names.
+ * All supported color space names.
  *
  * @category Internal
+ * @enum
  */
 export type ColorSpaceName = Values<typeof rawColorFormats>['colorSpace'];
+/**
+ * All supported color space names.
+ *
+ * @category Internal
+ * @enum
+ */
+export declare const ColorSpaceName: { [Key in ColorSpaceName]: Key; };
 /**
  * All value types for all supported color formats.
  *
  * @category Internal
  */
-export type ColorValues = {
+export type ColorValue = {
     [FormatName in ColorFormatName]: Record<keyof (typeof rawColorFormats)[FormatName]['coords'], number>;
 };
 /**
@@ -239,16 +257,28 @@ export type ColorValues = {
  *
  * @category Color Format
  */
-export declare const colorSpaces: Record<"rgb" | "lab" | "oklab", Record<"rgb" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch", ColorFormatDefinition<string>>>;
+export declare const colorFormatsBySpace: { [ColorSpace in ColorSpaceName]: { [ColorFormat in ColorFormatName]: ColorFormatDefinition<ColorSpace, ColorFormat>; }; };
 /**
- * All color format names in an array.
+ * Determines the color syntax / format in use based on the given CSS color string.
  *
- * @category Internal
+ * @category Util
  */
-export declare const colorFormatNames: ColorFormatName[];
+export declare function getColorSyntaxFromCssString(cssString: string): ColorSyntaxName;
 /**
  * All possible coordinate names for all supported color formats in a union.
  *
  * @category Internal
  */
 export type ColorCoordinateName = keyof UnionToIntersection<Values<typeof rawColorFormats>['coords']>;
+/**
+ * A single color format definition.
+ *
+ * @category Internal
+ */
+export type ColorFormatDefinition<ColorSpace extends ColorSpaceName = any, ColorFormat extends ColorFormatName = any> = {
+    /** Which exact color coordinates exist in here depends on the set color space. */
+    coords: Record<ColorCoordsByFormat[ColorFormat], ColorCoordinateDefinition>;
+    /** This name for this color to be used in `Colorjs.to()`. Defaults to the color format key. */
+    colorSpace: ColorSpace;
+    colorFormat: ColorFormat;
+};

package/dist/color-class/color-formats.js

@@ -1,4 +1,4 @@
-import { getObjectTypedEntries, getObjectTypedKeys, getOrSet, mapObjectValues, } from '@augment-vir/common';
+import { arrayToObject, getObjectTypedEntries, getObjectTypedValues, getOrSet, mapObjectValues, } from '@augment-vir/common';
 /**
  * All raw supported color formats.
  *
@@ -145,31 +145,90 @@ export const rawColorFormats = {
     },
 };
 /**
- * All supported color format names. This can be used as an enum.
+ * All supported color format names.
  *
  * @category Internal
+ * @enum
  */
 export const ColorFormatName = mapObjectValues(rawColorFormats, (colorName) => colorName);
+/**
+ * {@link ColorFormatName} combined with hex and named CSS color representation.
+ *
+ * @category Internal
+ * @enum
+ */
+export const ColorSyntaxName = {
+    ...ColorFormatName,
+    hex: 'hex',
+    name: 'name',
+};
 /**
  * All supported color formats.
  *
  * @category Color Format
  */
-export const colorFormats = rawColorFormats;
+export const colorFormats = mapObjectValues(rawColorFormats, (colorFormatName, colorFormatValue) => {
+    return {
+        ...colorFormatValue,
+        colorFormat: colorFormatName,
+    };
+});
+/**
+ * All supported color space names.
+ *
+ * @category Internal
+ * @enum
+ */
+export const ColorSpaceName = arrayToObject(getObjectTypedValues(rawColorFormats), (format) => {
+    return {
+        key: format.colorSpace,
+        value: format.colorSpace,
+    };
+}, {
+    useRequired: true,
+});
 /**
  * All color formats grouped by their color space.
  *
  * @category Color Format
  */
-export const colorSpaces = getObjectTypedEntries(colorFormats).reduce((accum, [colorFormatName, colorFormatDefinition,]) => {
+export const colorFormatsBySpace = getObjectTypedEntries(colorFormats).reduce((accum, [colorFormatName, colorFormatDefinition,]) => {
     getOrSet(accum, colorFormatDefinition.colorSpace, () => {
         return {};
     })[colorFormatName] = colorFormatDefinition;
     return accum;
 }, {});
 /**
- * All color format names in an array.
+ * Determines the color syntax / format in use based on the given CSS color string.
  *
- * @category Internal
+ * @category Util
  */
-export const colorFormatNames = getObjectTypedKeys(colorFormats);
+export function getColorSyntaxFromCssString(cssString) {
+    if (cssString.startsWith('rgb')) {
+        return ColorSyntaxName.rgb;
+    }
+    else if (cssString.startsWith('hsl')) {
+        return ColorSyntaxName.hsl;
+    }
+    else if (cssString.startsWith('hwb')) {
+        return ColorSyntaxName.hwb;
+    }
+    else if (cssString.startsWith('oklab')) {
+        return ColorSyntaxName.oklab;
+    }
+    else if (cssString.startsWith('oklch')) {
+        return ColorSyntaxName.oklch;
+    }
+    else if (cssString.startsWith('lab')) {
+        return ColorSyntaxName.lab;
+    }
+    else if (cssString.startsWith('lch')) {
+        return ColorSyntaxName.lch;
+    }
+    else if (cssString.startsWith('#')) {
+        return ColorSyntaxName.hex;
+    }
+    else {
+        return ColorSyntaxName.name;
+    }
+}

package/dist/color-class/color.d.ts

@@ -1,6 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type RequireExactlyOne } from 'type-fest';
-import { type ColorCoordsByFormat, type ColorFormatName, type ColorValues, type HexColor } from './color-formats.js';
+import { ColorFormatName, ColorSyntaxName, type ColorCoordsByFormat, type ColorValue, type HexColor } from './color-formats.js';
 /**
  * An update to an existing {@link Color} instance. Used in {@link Color.set}.
  *
@@ -9,8 +9,8 @@ import { type ColorCoordsByFormat, type ColorFormatName, type ColorValues, type
 export type ColorUpdate = RequireExactlyOne<{
     [FormatName in ColorFormatName]: PartialWithUndefined<Record<ColorCoordsByFormat[FormatName], number>>;
 } & {
-    hex: HexColor;
-    name: string;
+    [ColorSyntaxName.hex]: HexColor;
+    [ColorSyntaxName.name]: string;
 }>;
 /**
  * The values of all supported color formats for a given {@link Color} instance. Accessed via
@@ -18,8 +18,9 @@ export type ColorUpdate = RequireExactlyOne<{
  *
  * @category Internal
  */
-export type AllColorsValues = ColorValues & {
-    hex: HexColor;
+export type AllColorsValues = ColorValue & {
+    [ColorSyntaxName.hex]: HexColor;
+    [ColorSyntaxName.name]: string;
     names: string[];
 };
 /**
@@ -46,6 +47,7 @@ export declare class Color {
     /** All current color values. These are updated whenever {@link Color.set} is called. */
     protected readonly _allColors: {
         names: string[];
+        name: string;
         hex: HexColor;
         rgb: {
             r: number;
@@ -112,18 +114,27 @@ export declare class Color {
     /**
      * Converts the values for each supported color format into a padded string for easy display
      * purposes.
+     *
+     * @see `.toCss()`
      */
-    toFormattedStrings(): Record<ColorFormatName | 'hex' | 'names', string>;
+    toFormattedStrings(): Record<ColorSyntaxName | 'names', string>;
     /**
      * Converts the values for each supported color format in a CSS string that can be directly used
      * in any modern CSS code.
+     *
+     * @see `.toFormattedStrings()`
      */
-    toCss(): Record<ColorFormatName | 'hex' | 'name', string>;
+    toCss(): Record<ColorSyntaxName, string>;
     /**
      * The current color expressed as hardcoded CSS color keywords. If no CSS color keywords match
      * the current color, this array will be empty.
      */
     get names(): string[];
+    /**
+     * The current color expressed as a single CSS color name string. If there is no color name that
+     * matches the current color, this will be an empty string.
+     */
+    get name(): string;
     /** The current color expressed as an RGB hex string. */
     get hex(): HexColor;
     /** The current color expressed as its RGB coordinate values. */

package/dist/color-class/color.js

@@ -1,8 +1,8 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
-import { copyThroughJson, filterMap, getObjectTypedEntries, joinWithFinalConjunction, mapObjectValues, round, } from '@augment-vir/common';
+import { copyThroughJson, filterMap, getEnumValues, getObjectTypedEntries, getObjectTypedKeys, joinWithFinalConjunction, mapObjectValues, round, } from '@augment-vir/common';
 import colorNames from 'color-name';
 import { clampGamut, converter, formatHex, parse } from 'culori';
-import { colorFormatNames, colorFormats, } from './color-formats.js';
+import { ColorFormatName, colorFormats, ColorSyntaxName, } from './color-formats.js';
 import { maxColorNameLength } from './color-name-length.js';
 /**
  * A `Color` class with state and the following features:
@@ -37,38 +37,39 @@ export class Color {
     /** All current color values. These are updated whenever {@link Color.set} is called. */
     _allColors = {
         names: ['black'],
-        hex: '#000000',
-        rgb: {
+        [ColorSyntaxName.name]: 'black',
+        [ColorSyntaxName.hex]: '#000000',
+        [ColorSyntaxName.rgb]: {
             r: 0,
             g: 0,
             b: 0,
         },
-        hsl: {
+        [ColorSyntaxName.hsl]: {
             h: 0,
             s: 0,
             l: 0,
         },
-        hwb: {
+        [ColorSyntaxName.hwb]: {
             h: 0,
             w: 0,
             b: 0,
         },
-        lab: {
+        [ColorSyntaxName.lab]: {
             l: 0,
             a: 0,
             b: 0,
         },
-        lch: {
+        [ColorSyntaxName.lch]: {
             l: 0,
             c: 0,
             h: 0,
         },
-        oklab: {
+        [ColorSyntaxName.oklab]: {
             l: 0,
             a: 0,
             b: 0,
         },
-        oklch: {
+        [ColorSyntaxName.oklch]: {
             l: 0,
             c: 0,
             h: 0,
@@ -109,7 +110,7 @@ export class Color {
             const colorFormatDefinition = colorFormats[colorFormatName];
             const orderedColorCoords = Object.values(mapObjectValues(colorFormatDefinition.coords, (coordName) => {
                 const coordValue = colorValues[coordName];
-                const coordDefinition = assertWrap.isDefined(colorFormatDefinition.coords[coordName]);
+                const coordDefinition = colorFormatDefinition.coords[assertWrap.isKeyOf(coordName, colorFormatDefinition.coords)];
                 const rawCoordValue = coordValue != undefined &&
                     coordValue >= coordDefinition.min &&
                     coordValue <= coordDefinition.max
@@ -125,7 +126,7 @@ export class Color {
      * internal color object.
      */
     pullFromInternalColor() {
-        colorFormatNames.forEach((colorFormatName) => {
+        getEnumValues(ColorFormatName).forEach((colorFormatName) => {
             const colorFormatDefinition = colorFormats[colorFormatName];
             const originalColorDefinition = check.isKeyOf(this.#internalColor.mode, colorFormats)
                 ? colorFormats[this.#internalColor.mode]
@@ -137,17 +138,19 @@ export class Color {
             if (!converted) {
                 assert.never(`Failed to convert color '${JSON.stringify(this.#internalColor)}' to '${colorFormatName}'.`);
             }
-            Object.keys(this[colorFormatName]).forEach((coordName) => {
+            getObjectTypedKeys(this[colorFormatName]).forEach((coordName) => {
                 const coordValue = converted[coordName];
+                const coordinateDefinition = colorFormatDefinition.coords[assertWrap.isKeyOf(coordName, colorFormatDefinition.coords)];
                 if (coordValue != undefined) {
-                    this._allColors[colorFormatName][coordName] = round((coordValue || 0) * (colorFormatDefinition.coords[coordName]?.factor || 1), {
-                        digits: colorFormatDefinition.coords[coordName]?.digits || 0,
+                    this._allColors[colorFormatName][coordName] = round((coordValue || 0) * (coordinateDefinition.factor || 1), {
+                        digits: coordinateDefinition.digits || 0,
                     });
                 }
             });
         });
-        this._allColors.hex = formatHex(this.#internalColor);
+        this._allColors[ColorSyntaxName.hex] = formatHex(this.#internalColor);
         this._allColors.names = findMatchingColorNames(this.rgb);
+        this._allColors[ColorSyntaxName.name] = this._allColors.names[0] || '';
     }
     /**
      * Create a string that can be serialized into a new {@link Color} instance which will exactly
@@ -163,6 +166,8 @@ export class Color {
     /**
      * Converts the values for each supported color format into a padded string for easy display
      * purposes.
+     *
+     * @see `.toCss()`
      */
     toFormattedStrings() {
         const colorFormatStrings = mapObjectValues(colorFormats, (colorFormatName) => {
@@ -170,14 +175,17 @@ export class Color {
             return coordValues.map((coordValue) => String(coordValue).padStart(6, ' ')).join(' ');
         });
         return {
-            hex: this.hex,
+            [ColorSyntaxName.hex]: this.hex,
             ...colorFormatStrings,
             names: this.names.join(', ').padEnd(maxColorNameLength, ' '),
+            name: (this.names[0] || '').padEnd(maxColorNameLength, ' '),
         };
     }
     /**
      * Converts the values for each supported color format in a CSS string that can be directly used
      * in any modern CSS code.
+     *
+     * @see `.toFormattedStrings()`
      */
     toCss() {
         const colorFormatStrings = mapObjectValues(colorFormats, (colorFormatName) => {
@@ -185,7 +193,7 @@ export class Color {
             return `${colorFormatName}(${coordValues.join(' ')})`;
         });
         return {
-            hex: this.hex,
+            [ColorSyntaxName.hex]: this.hex,
             ...colorFormatStrings,
             name: this.names[0] || '',
         };
@@ -197,37 +205,44 @@ export class Color {
     get names() {
         return copyThroughJson(this._allColors.names);
     }
+    /**
+     * The current color expressed as a single CSS color name string. If there is no color name that
+     * matches the current color, this will be an empty string.
+     */
+    get name() {
+        return this._allColors.names[0] || '';
+    }
     /** The current color expressed as an RGB hex string. */
     get hex() {
-        return copyThroughJson(this._allColors.hex);
+        return copyThroughJson(this._allColors[ColorSyntaxName.hex]);
     }
     /** The current color expressed as its RGB coordinate values. */
     get rgb() {
-        return copyThroughJson(this._allColors.rgb);
+        return copyThroughJson(this._allColors[ColorSyntaxName.rgb]);
     }
     /** The current color expressed as its HSL coordinate values. */
     get hsl() {
-        return copyThroughJson(this._allColors.hsl);
+        return copyThroughJson(this._allColors[ColorSyntaxName.hsl]);
     }
     /** The current color expressed as its HWB coordinate values. */
     get hwb() {
-        return copyThroughJson(this._allColors.hwb);
+        return copyThroughJson(this._allColors[ColorSyntaxName.hwb]);
     }
     /** The current color expressed as its LAB coordinate values. */
     get lab() {
-        return copyThroughJson(this._allColors.lab);
+        return copyThroughJson(this._allColors[ColorSyntaxName.lab]);
     }
     /** The current color expressed as its LCH coordinate values. */
     get lch() {
-        return copyThroughJson(this._allColors.lch);
+        return copyThroughJson(this._allColors[ColorSyntaxName.lch]);
     }
     /** The current color expressed as its Oklab coordinate values. */
     get oklab() {
-        return copyThroughJson(this._allColors.oklab);
+        return copyThroughJson(this._allColors[ColorSyntaxName.oklab]);
     }
     /** The current color expressed as its Oklch coordinate values. */
     get oklch() {
-        return copyThroughJson(this._allColors.oklch);
+        return copyThroughJson(this._allColors[ColorSyntaxName.oklch]);
     }
 }
 function findMatchingColorNames(rgb) {

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

@@ -0,0 +1,11 @@
+import { type Color } from '../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

@@ -0,0 +1,52 @@
+/* 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 { 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,
+                })}
+                                ${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-color-format-sliders.element.d.ts

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

@@ -0,0 +1,54 @@
+/* node:coverage disable */
+import { getObjectTypedKeys } from '@augment-vir/common';
+import { css, defineElement, defineElementEvent, html, listen } from 'element-vir';
+import { noNativeSpacing } from 'vira';
+import { colorFormats, } from '../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()[inputs.colorFormatName];
+                dispatch(new events.colorChange(newValue));
+            })}
+                    ></${VirColorSlider}>
+                `;
+        });
+        return html `
+            <h3>${inputs.colorFormatName}</h3>
+            ${coordinateTemplates}
+        `;
+    },
+});

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

@@ -0,0 +1,14 @@
+import { type ColorCoordinateName, type ColorFormatName } from '../color-class/color-formats.js';
+import { Color } from '../color-class/color.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export declare const VirColorSlider: import("element-vir").DeclarativeElementDefinition<"vir-color-slider", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    colorCoordinateName: ColorCoordinateName;
+}, {}, {
+    valueChange: import("element-vir").DefineEvent<number>;
+}, "vir-color-slider-", "vir-color-slider-gradient", readonly [], readonly []>;

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

@@ -0,0 +1,101 @@
+/* node:coverage disable */
+import { 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 { viraFontCssVars, ViraInput } from 'vira';
+import { colorFormats, } from '../color-class/color-formats.js';
+import { Color } from '../color-class/color.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export const VirColorSlider = defineElement()({
+    tagName: 'vir-color-slider',
+    cssVars: {
+        'vir-color-slider-gradient': 'black',
+    },
+    styles: ({ cssVars }) => css `
+        :host {
+            display: flex;
+            align-items: center;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            gap: 2px;
+        }
+
+        input[type='range'] {
+            flex-grow: 1;
+            appearance: none;
+            background: ${cssVars['vir-color-slider-gradient'].value};
+            height: 9px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        ${ViraInput} {
+            width: 76px;
+        }
+
+        .coordinate {
+            font-size: 18px;
+            margin-top: -4px;
+        }
+    `,
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    render({ inputs, events, dispatch, cssVars }) {
+        const formatDefinition = colorFormats[inputs.colorFormatName];
+        const coordinateDefinition = formatDefinition.coords[inputs.colorCoordinateName];
+        if (!coordinateDefinition) {
+            throw new Error(`Invalid color coordinate '${inputs.colorCoordinateName}' for color format '${inputs.colorFormatName}'`);
+        }
+        const totalStops = 10;
+        const colorStops = createArray(totalStops, (index) => {
+            const value = coordinateDefinition.min +
+                (coordinateDefinition.max - coordinateDefinition.min) * (index / totalStops);
+            const stopColor = new Color({
+                [inputs.colorFormatName]: {
+                    ...inputs.color[inputs.colorFormatName],
+                    [inputs.colorCoordinateName]: value,
+                },
+            });
+            return stopColor.toCss()[inputs.colorFormatName];
+        });
+        const gradient = css `linear-gradient(to right, ${unsafeCSS(colorStops.join(','))})`;
+        const coordinateValue = assertWrap.isNumber(inputs.color[inputs.colorFormatName][inputs.colorCoordinateName]);
+        return html `
+            <span class="coordinate">${inputs.colorCoordinateName.toUpperCase()}</span>
+            <input
+                type="range"
+                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)}
+                ${listen('input', (event) => {
+            const element = extractEventTarget(event, HTMLInputElement);
+            const newValue = Number(element.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
+            />
+            <${ViraInput.assign({
+            value: String(coordinateValue),
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            const newValue = Number(event.detail);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
+            ></${ViraInput}>
+        `;
+    },
+});

package/dist/index.d.ts

@@ -2,5 +2,8 @@ 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 './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-color-format-sliders.element.js';
 export * from './elements/vir-color-pair.element.js';
+export * from './elements/vir-color-slider.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/dist/index.js

@@ -2,5 +2,8 @@ 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 './elements/vir-all-color-space-sliders.element.js';
+export * from './elements/vir-color-format-sliders.element.js';
 export * from './elements/vir-color-pair.element.js';
+export * from './elements/vir-color-slider.element.js';
 export * from './elements/vir-contrast-indicator.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@electrovir/color",
-    "version": "1.0.0",
+    "version": "1.2.0",
     "description": "A wrapper for culori with an extremely simple API.",
     "keywords": [
         "color",
@@ -52,6 +52,7 @@
     "dependencies": {
         "@augment-vir/assert": "^31.57.3",
         "@augment-vir/common": "^31.57.3",
+        "@augment-vir/web": "^31.57.3",
         "apca-w3": "^0.1.9",
         "color-name": "^2.1.0",
         "culori": "^4.0.2",
@@ -101,7 +102,7 @@
         "typedoc": "^0.28.15",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.51.0",
-        "vira": "^28.15.0",
+        "vira": "^28.16.0",
         "virmator": "^14.4.0",
         "vite": "^7.3.0"
     },