vira 31.31.6 → 32.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.31.6",
+    "version": "32.0.0-beta.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -27,9 +27,9 @@
     },
     "sideEffects": false,
     "type": "module",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "main": "src/index.ts",
+    "module": "src/index.ts",
+    "types": "src/index.ts",
     "scripts": {
         "build": "npm run docs",
         "compile": "virmator compile",
@@ -38,23 +38,23 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.2.2",
-        "@augment-vir/common": "^32.2.2",
-        "@augment-vir/web": "^32.2.2",
-        "@electrovir/color": "^1.7.11",
+        "@augment-vir/assert": "^32.3.0-beta.0",
+        "@augment-vir/common": "^32.3.0-beta.0",
+        "@augment-vir/web": "^32.3.0-beta.0",
+        "@electrovir/color": "^2.0.0-beta.0",
         "@electrovir/local-storage-client": "^0.1.1",
-        "date-vir": "^9.1.0",
-        "device-navigation": "^4.7.3",
+        "date-vir": "^9.1.1",
+        "device-navigation": "^5.0.0-beta.0",
         "json-schema-to-ts": "^3.1.1",
         "lit-css-vars": "^3.6.3",
         "object-shape-tester": "^6.15.0",
         "observavir": "^2.3.3",
         "page-active": "^1.0.4",
-        "spa-router-vir": "^6.6.1",
+        "spa-router-vir": "^6.8.0",
         "typed-event-target": "^4.3.3"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.2.2",
+        "@augment-vir/test": "^32.3.0-beta.0",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
@@ -62,18 +62,18 @@
         "@web/test-runner-visual-regression": "^1.0.1",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.31.0",
+        "lucide-static": "^1.42.0",
         "markdown-code-example-inserter": "^3.0.6",
-        "theme-vir": "^28.25.1",
+        "theme-vir": "^29.0.0-beta.0",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "vite": "^8.2.1",
+        "vite": "^8.2.2",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
-        "element-vir": "^26",
+        "element-vir": "^27.0.0-beta.3",
         "lucide-static": ">=0.460",
-        "theme-vir": ">=28"
+        "theme-vir": "^29.0.0-beta.0"
     },
     "engines": {
         "node": ">=22"

package/src/elements/color/vira-all-color-space-sliders.element.ts

@@ -0,0 +1,66 @@
+/* node:coverage disable */
+
+import {getObjectTypedKeys, getObjectTypedValues} from '@augment-vir/common';
+import {colorFormatsBySpace} from '@electrovir/color/dist/data/color-class/color-formats.js';
+import {type Color} from '@electrovir/color/dist/data/color-class/color.js';
+import {css, defineElement, defineElementEvent, html, listen} from 'element-vir';
+import {ViraColorFormatSliders} from './vira-color-format-sliders.element.js';
+
+/**
+ * Color sliders for all color spaces.
+ *
+ * @category Elements
+ */
+export const ViraAllColorSpaceSliders = defineElement<{color: Readonly<Color>}>()({
+    tagName: 'vira-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<string>(),
+    },
+    render({inputs, dispatch, events}) {
+        const colorSpaceTemplates = getObjectTypedValues(colorFormatsBySpace).map(
+            (colorSpaceFormats) => {
+                const formatTemplates = getObjectTypedKeys(colorSpaceFormats).map(
+                    (colorFormatName) => {
+                        return html`
+                            <${ViraColorFormatSliders.assign({
+                                color: inputs.color,
+                                colorFormatName,
+                                showFormatName: true,
+                            })}
+                                ${listen(ViraColorFormatSliders.events.colorChange, (event) => {
+                                    dispatch(
+                                        new events.colorChange({
+                                            detail: event.detail,
+                                        }),
+                                    );
+                                })}
+                            ></${ViraColorFormatSliders}>
+                        `;
+                    },
+                );
+
+                return html`
+                    <section class="color-space">${formatTemplates}</section>
+                `;
+            },
+        );
+
+        return html`
+            ${colorSpaceTemplates}
+        `;
+    },
+});

package/src/elements/color/vira-all-spaces-color-picker.element.ts

@@ -0,0 +1,85 @@
+/* node:coverage disable */
+
+import {
+    type ColorSyntaxName,
+    getColorSyntaxFromCssString,
+} from '@electrovir/color/dist/data/color-class/color-formats.js';
+import {Color} from '@electrovir/color/dist/data/color-class/color.js';
+import {css, defineElement, defineElementEvent, html, listen} from 'element-vir';
+import {ViraAllColorSpaceSliders} from './vira-all-color-space-sliders.element.js';
+import {ViraColorDetails} from './vira-color-details.element.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.
+ *
+ * @category Elements
+ */
+export const ViraAllSpacesColorPicker = defineElement<{color: string}>()({
+    tagName: 'vira-all-spaces-color-picker',
+    styles: css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent<string>(),
+    },
+    state() {
+        return {
+            inputColorString: undefined as undefined | string,
+            overrideInputColor: undefined as undefined | ColorSyntaxName,
+        };
+    },
+    render({inputs, dispatch, events, state, updateState}) {
+        const color = new Color(inputs.color);
+
+        if (state.overrideInputColor) {
+            updateState({
+                inputColorString: color.toCss()[state.overrideInputColor],
+            });
+        }
+
+        if (state.inputColorString == undefined) {
+            updateState({
+                inputColorString: inputs.color,
+            });
+        }
+
+        return html`
+            <${ViraColorDetails.assign({
+                color: inputs.color,
+                showInput: true,
+            })}
+                ${listen(ViraColorDetails.events.colorChange, (event) => {
+                    updateState({
+                        inputColorString: event.detail,
+                        overrideInputColor: undefined,
+                    });
+                    dispatch(
+                        new events.colorChange({
+                            detail: event.detail,
+                        }),
+                    );
+                })}
+            ></${ViraColorDetails}>
+            <${ViraAllColorSpaceSliders.assign({
+                color,
+            })}
+                ${listen(ViraAllColorSpaceSliders.events.colorChange, (event) => {
+                    const colorSyntax = getColorSyntaxFromCssString(state.inputColorString || '#');
+                    updateState({
+                        overrideInputColor: colorSyntax,
+                    });
+                    dispatch(
+                        new events.colorChange({
+                            detail: event.detail,
+                        }),
+                    );
+                })}
+            ></${ViraAllColorSpaceSliders}>
+        `;
+    },
+});

package/src/elements/color/vira-color-details.element.ts

@@ -0,0 +1,169 @@
+/* node:coverage disable */
+
+import {check} from '@augment-vir/assert';
+import {getObjectTypedEntries, mapObject} from '@augment-vir/common';
+import {ColorSyntaxName} from '@electrovir/color/dist/data/color-class/color-formats.js';
+import {Color} from '@electrovir/color/dist/data/color-class/color.js';
+import {css, defineElement, defineElementEvent, html, listen} from 'element-vir';
+import {viraFontCssVars} from '../../styles/font.js';
+import {noNativeSpacing} from '../../styles/native-styles.js';
+import {defineTable} from '../../util/define-table.js';
+import {ViraInput} from '../vira-input.element.js';
+import {ViraColorSwatch} from './vira-color-swatch.element.js';
+
+const omittedColors: ColorSyntaxName[] = [
+    ColorSyntaxName.hex,
+    ColorSyntaxName.name,
+];
+
+/**
+ * A color swatch alongside the color in all of its different supported formats.
+ *
+ * @category Internal
+ */
+export const ViraColorDetails = defineElement<{
+    color: string;
+    /** Show a text input that triggers an event when it is edited, for changing the color. */
+    showInput: boolean;
+}>()({
+    tagName: 'vira-color-details',
+    styles: css`
+        :host {
+            display: flex;
+            gap: 16px;
+        }
+
+        ${ViraColorSwatch} {
+            height: 200px;
+            width: 200px;
+        }
+
+        .swatch {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            align-items: center;
+        }
+
+        ${ViraInput} {
+            font-size: 14px;
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+            max-width: 200px;
+        }
+
+        td {
+            font-weight: bold;
+        }
+
+        th {
+            padding: 4px 8px;
+            font-weight: normal;
+            text-align: right;
+        }
+        pre {
+            ${noNativeSpacing};
+            font-family: ${viraFontCssVars['vira-monospace'].value};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent<string>(),
+    },
+    state() {
+        return {
+            inputColorString: undefined as undefined | string,
+        };
+    },
+    render({inputs, dispatch, events, state, updateState}) {
+        const color = new Color(inputs.color);
+        const colorStrings = mapObject(color.toFormattedStrings(), (key, value) => {
+            if (check.hasValue(omittedColors, key)) {
+                return undefined;
+            } else if (key === 'hexString') {
+                return {
+                    key: 'hex',
+                    value,
+                };
+            } else {
+                return {
+                    key,
+                    value,
+                };
+            }
+        });
+
+        if (state.inputColorString == undefined) {
+            updateState({
+                inputColorString: inputs.color,
+            });
+        }
+
+        const {rows} = defineTable({
+            headers: [
+                {
+                    key: 'colorFormat',
+                },
+                {
+                    key: 'formattedString',
+                },
+            ],
+            originalData: getObjectTypedEntries(colorStrings),
+            dataMap: ([
+                colorFormat,
+                value,
+            ]) => {
+                return {
+                    colorFormat: `${colorFormat}:`,
+                    formattedString: html`
+                        <pre>${value}</pre>
+                    `,
+                };
+            },
+        });
+
+        const inputTemplate = inputs.showInput
+            ? html`
+                  <${ViraInput.assign({
+                      value: state.inputColorString || '',
+                      fitText: true,
+                  })}
+                      ${listen(ViraInput.events.valueChange, (event) => {
+                          updateState({
+                              inputColorString: event.detail,
+                          });
+                          dispatch(
+                              new events.colorChange({
+                                  detail: event.detail,
+                              }),
+                          );
+                      })}
+                  ></${ViraInput}>
+              `
+            : '';
+
+        return html`
+            <div class="swatch">
+                <${ViraColorSwatch.assign({
+                    backgroundColor: inputs.color,
+                })}></${ViraColorSwatch}>
+                ${inputTemplate}
+            </div>
+            <table>
+                <tbody>
+                    ${rows.map((row) => {
+                        const cells = row.cells.map((cell, index) => {
+                            const element = index ? 'td' : 'th';
+
+                            return html`
+                                <${element}>${cell.content}</${element}>
+                            `;
+                        });
+
+                        return html`
+                            <tr>${cells}</tr>
+                        `;
+                    })}
+                </tbody>
+            </table>
+        `;
+    },
+});

package/src/elements/color/vira-color-format-sliders.element.ts

@@ -0,0 +1,78 @@
+/* node:coverage disable */
+
+import {getObjectTypedKeys} from '@augment-vir/common';
+import {
+    type ColorCoordinateName,
+    type ColorFormatName,
+    colorFormats,
+} from '@electrovir/color/dist/data/color-class/color-formats.js';
+import {type Color, type ColorUpdate} from '@electrovir/color/dist/data/color-class/color.js';
+import {css, defineElement, defineElementEvent, html, listen, nothing} from 'element-vir';
+import {noNativeSpacing} from '../../styles/native-styles.js';
+import {ViraColorSlider} from './vira-color-slider.element.js';
+
+/**
+ * Color sliders for all coordinates within a specific color format.
+ *
+ * @category Elements
+ */
+export const ViraColorFormatSliders = defineElement<{
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    showFormatName: boolean;
+}>()({
+    tagName: 'vira-color-format-sliders',
+    styles: css`
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        h3 {
+            ${noNativeSpacing};
+        }
+    `,
+    events: {
+        colorChange: defineElementEvent<string>(),
+    },
+    render({inputs, dispatch, events}) {
+        const colorFormat = colorFormats[inputs.colorFormatName];
+
+        const coordinateTemplates = getObjectTypedKeys(colorFormat.coords).map(
+            (colorCoordinate: ColorCoordinateName) => {
+                return html`
+                    <${ViraColorSlider.assign({
+                        color: inputs.color,
+                        colorCoordinateName: colorCoordinate,
+                        colorFormatName: inputs.colorFormatName,
+                    })}
+                        ${listen(ViraColorSlider.events.valueChange, (event) => {
+                            const newColor = inputs.color.clone();
+
+                            newColor.set({
+                                [inputs.colorFormatName]: {
+                                    [colorCoordinate]: event.detail,
+                                },
+                            } as ColorUpdate);
+                            const newValue = newColor.toCss()[colorFormat.conversionFormat];
+                            dispatch(
+                                new events.colorChange({
+                                    detail: newValue,
+                                }),
+                            );
+                        })}
+                    ></${ViraColorSlider}>
+                `;
+            },
+        );
+
+        return html`
+            ${inputs.showFormatName
+                ? html`
+                      <h3>${inputs.colorFormatName}</h3>
+                  `
+                : nothing}
+            ${coordinateTemplates}
+        `;
+    },
+});