vira 31.31.7 → 32.0.0

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

@@ -0,0 +1,278 @@
+/* node:coverage disable */
+import { checkWrap } from '@augment-vir/assert';
+import { getObjectTypedValues } from '@augment-vir/common';
+import { ColorFormatName, colorFormats, } 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, nothing } from 'element-vir';
+import { CssVarSyntaxName } from 'lit-css-vars';
+import { Copy24Icon } from '../../icons/icon-svgs/24/copy-24.icon.js';
+import { viraFontCssVars } from '../../styles/font.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
+import { noNativeFormStyles } from '../../styles/native-styles.js';
+import { viraShadows } from '../../styles/shadows.js';
+import { colorLocalStorageClient } from '../../util/color-local-storage.client.js';
+import { ViraPopUpTrigger } from '../pop-up/vira-pop-up-trigger.element.js';
+import { ViraIcon } from '../vira-icon.element.js';
+import { ViraInput } from '../vira-input.element.js';
+import { ViraSelect } from '../vira-select.element.js';
+import { ViraColorFormatSliders } from './vira-color-format-sliders.element.js';
+import { ViraColorSwatch } from './vira-color-swatch.element.js';
+const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => {
+    return {
+        value: formatName,
+        label: formatName.toUpperCase(),
+    };
+});
+/**
+ * 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 ViraColorPicker = defineElement()({
+    tagName: 'vira-color-picker',
+    cssVars: {
+        'vira-color-picker-swatch-width': {
+            default: '100px',
+            syntax: CssVarSyntaxName.Length,
+        },
+        'vira-color-picker-swatch-height': {
+            default: '100px',
+            syntax: CssVarSyntaxName.Length,
+        },
+    },
+    state() {
+        return {
+            selectedFormatName: colorLocalStorageClient.get.lastFormat() || ColorFormatName.rgb,
+            rawInput: undefined,
+        };
+    },
+    hostClasses: {
+        'vira-color-picker-always-show'({ inputs }) {
+            return !!inputs.alwaysShowPicker;
+        },
+    },
+    styles({ cssVars, hostClasses }) {
+        return css `
+            :host {
+                display: inline-flex;
+            }
+
+            ${hostClasses['vira-color-picker-always-show'].selector} {
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+            }
+
+            button {
+                ${noNativeFormStyles}
+                cursor: pointer;
+                display: flex;
+            }
+
+            ${ViraPopUpTrigger} {
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+            }
+
+            .swatch-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                align-items: center;
+
+                & ${ViraColorSwatch} {
+                    width: ${cssVars['vira-color-picker-swatch-width'].value};
+                    height: ${cssVars['vira-color-picker-swatch-height'].value};
+                    box-sizing: border-box;
+                }
+            }
+
+            .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: 4px;
+                padding: 16px;
+                background: white;
+                border: 1px solid #ccc;
+                border-radius: 8px;
+            }
+
+            .pop-up .picker {
+                ${viraShadows.menuShadow}
+            }
+
+            .raw-input-wrapper {
+                text-align: left;
+                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(),
+    },
+    render({ inputs, dispatch, events, state, updateState }) {
+        const color = Color.isColor(inputs.color)
+            ? inputs.color
+            : new Color(inputs.color || 'black');
+        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,
+        })}
+                    ${listen(ViraInput.events.valueChange, (event) => {
+            const rawInput = event.detail;
+            updateState({
+                rawInput,
+            });
+            if (Color.isValidColorString(rawInput)) {
+                dispatch(new events.colorChange({
+                    detail: 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">
+                <${ViraColorSwatch.assign({
+            backgroundColor: color,
+        })}></${ViraColorSwatch}>
+                ${inputs.showHexValue ? hexValueTemplate : nothing}
+            </div>
+        `;
+        const pickerTemplate = html `
+            <div class="picker">
+                <${ViraSelect.assign({
+            options: colorFormatOptions,
+            value: state.selectedFormatName,
+        })}
+                    ${listen(ViraSelect.events.valueChange, (event) => {
+            const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
+            if (selectedFormat) {
+                updateState({
+                    selectedFormatName: selectedFormat,
+                });
+                colorLocalStorageClient.set.lastFormat(selectedFormat);
+            }
+        })}
+                ></${ViraSelect}>
+                ${rawInputTemplate}
+                <${ViraColorFormatSliders.assign({
+            color,
+            colorFormatName: state.selectedFormatName,
+            showFormatName: false,
+        })}
+                    ${listen(ViraColorFormatSliders.events.colorChange, (event) => {
+            dispatch(new events.colorChange({
+                detail: event.detail,
+            }));
+            updateState({
+                rawInput: undefined,
+            });
+        })}
+                ></${ViraColorFormatSliders}>
+            </div>
+        `;
+        if (inputs.alwaysShowPicker) {
+            return html `
+                ${swatchTemplate} ${pickerTemplate}
+            `;
+        }
+        else {
+            return html `
+                <${ViraPopUpTrigger.assign({
+                keepOpenAfterInteraction: true,
+            })}>
+                    <button
+                        class="trigger"
+                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                        ${listen('mousedown', () => {
+                const storedFormat = colorLocalStorageClient.get.lastFormat();
+                if (storedFormat) {
+                    updateState({
+                        selectedFormatName: storedFormat,
+                    });
+                }
+            })}
+                    >
+                        ${swatchTemplate}
+                    </button>
+                    <div
+                        class="pop-up"
+                        slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                    >
+                        ${pickerTemplate}
+                    </div>
+                </${ViraPopUpTrigger}>
+            `;
+        }
+    },
+});

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

@@ -0,0 +1,14 @@
+import { type ColorCoordinateName, type ColorFormatName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/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 ViraColorSlider: import("element-vir").DeclarativeElementDefinition<"vira-color-slider", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    colorCoordinateName: ColorCoordinateName;
+}, {}, {
+    valueChange: import("element-vir").DefineElementEvent<number>;
+}, "vira-color-slider-", "vira-color-slider-gradient", readonly [], readonly []>;

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

@@ -0,0 +1,124 @@
+/* node:coverage disable */
+import { assert, assertWrap } from '@augment-vir/assert';
+import { createArray } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { colorFormats, } 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, onDomRendered, unsafeCSS, } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { ViraInput } from '../vira-input.element.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export const ViraColorSlider = defineElement()({
+    tagName: 'vira-color-slider',
+    cssVars: {
+        'vira-color-slider-gradient': 'black',
+    },
+    styles({ cssVars }) {
+        return 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['vira-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()[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
+                type="range"
+                style=${css `
+                    ${cssVars['vira-color-slider-gradient'].name}: ${gradient};
+                `}
+                step=${Math.pow(10, coordinateDefinition.digits ? -coordinateDefinition.digits : 0)}
+                ${onDomRendered((element) => {
+            /**
+             * We must set these imperatively to force the input element to match the
+             * inputs, otherwise when swapping color formats these color sliders don't
+             * update correctly.
+             */
+            assert.instanceOf(element, HTMLInputElement);
+            element.min = String(coordinateDefinition.min);
+            element.max = String(coordinateDefinition.max);
+            element.value = String(coordinateValue);
+        })}
+                ${listen('input', (event) => {
+            const element = extractEventTarget(event, HTMLInputElement);
+            const newValue = Number(element.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange({
+                detail: newValue,
+            }));
+        })}
+            />
+            <${ViraInput.assign({
+            value: displayValue,
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            const newValue = coordinateDefinition.radix
+                ? parseInt(event.detail, coordinateDefinition.radix)
+                : Number(event.detail);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange({
+                detail: newValue,
+            }));
+        })}
+            ></${ViraInput}>
+        `;
+    },
+});

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

@@ -0,0 +1,20 @@
+import { type Color } from '@electrovir/color/dist/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.
+ *
+ * @category Elements
+ */
+export declare const ViraColorSwatch: import("element-vir").DeclarativeElementDefinition<"vira-color-swatch", ((Required<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "foregroundColor">> & Partial<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "backgroundColor">>) | (Required<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "backgroundColor">> & Partial<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "foregroundColor">>)) & {}, {}, {}, "vira-color-swatch-", "vira-color-swatch-", readonly [], readonly []>;

package/dist/elements/color/vira-color-swatch.element.js

@@ -0,0 +1,48 @@
+/* node:coverage disable */
+import { css, defineElement, html, unsafeCSS } from 'element-vir';
+/**
+ * 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.
+ *
+ * @category Elements
+ */
+export const ViraColorSwatch = defineElement()({
+    tagName: 'vira-color-swatch',
+    styles: css `
+        :host {
+            display: flex;
+            height: 400px;
+            width: 400px;
+            border: 1px solid black;
+            max-height: 100%;
+            max-width: 100%;
+            container-type: size;
+            overflow: hidden;
+        }
+
+        div {
+            flex-grow: 1;
+            height: 100%;
+            max-height: 100%;
+            width: 100%;
+            max-width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    `,
+    render({ inputs }) {
+        const backgroundColor = inputs.backgroundColor || inputs.foregroundColor;
+        const foregroundColor = inputs.foregroundColor || 'transparent';
+        return html `
+            <div
+                style=${css `
+                    background-color: ${unsafeCSS(backgroundColor)};
+                    color: ${unsafeCSS(foregroundColor)};
+                `}
+            >
+                <slot></slot>
+            </div>
+        `;
+    },
+});

package/dist/elements/color/vira-contrast-indicator.element.d.ts

@@ -0,0 +1,10 @@
+import { type CalculatedContrast, type FontWeight } from '@electrovir/color/dist/data/contrast/contrast.js';
+/**
+ * Show contrast details for a calculated contrast.
+ *
+ * @category Elements
+ */
+export declare const ViraContrastIndicator: import("element-vir").DeclarativeElementDefinition<"vira-contrast-indicator", {
+    contrast: Readonly<CalculatedContrast>;
+    fontWeight: FontWeight;
+}, {}, {}, "vira-contrast-indicator-", "vira-contrast-indicator-", readonly [], readonly []>;

package/dist/elements/color/vira-contrast-indicator.element.js

@@ -0,0 +1,96 @@
+/* node:coverage disable */
+import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
+/**
+ * Show contrast details for a calculated contrast.
+ *
+ * @category Elements
+ */
+export const ViraContrastIndicator = defineElement()({
+    tagName: 'vira-contrast-indicator',
+    styles: css `
+        :host {
+            display: inline-flex;
+            max-width: 100%;
+            font-size: 12px;
+        }
+
+        .wrapper {
+            text-align: center;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 100%;
+            color: #aaa;
+        }
+
+        .${unsafeCSS(ContrastLevelName.Invisible)} {
+            color: red;
+        }
+        .${unsafeCSS(ContrastLevelName.Decoration)} {
+            color: #ff6600;
+        }
+        .${unsafeCSS(ContrastLevelName.Placeholder)} {
+            color: #a5a520;
+        }
+
+        .gauge {
+            align-self: center;
+            background-color: currentColor;
+            display: flex;
+            padding: 1px;
+            gap: 1px;
+            margin-bottom: 2px;
+            /* Sure sure if I actually want to keep this. */
+            display: none;
+        }
+
+        .gauge-level {
+            width: 10px;
+            height: 2px;
+
+            &.active {
+                background-color: white;
+            }
+        }
+
+        .gauge-text + .gauge-text {
+            border-left: 1px solid #ccc;
+            padding-left: 1ex;
+        }
+    `,
+    render({ inputs }) {
+        const gaugeLevels = contrastLevels
+            .toReversed()
+            .slice(1)
+            .map((level) => {
+            return html `
+                    <div
+                        class="gauge-level ${classMap({
+                active: level.min <= Math.abs(inputs.contrast.contrast),
+            })}"
+                    ></div>
+                `;
+        });
+        const title = [
+            inputs.contrast.contrastLevel.description,
+            '\nFont weights to font sizes:',
+            JSON.stringify(inputs.contrast.fontSizes, null, 4),
+        ].join('\n');
+        const fontSize = inputs.contrast.fontSizes[inputs.fontWeight] > 150
+            ? '-'
+            : `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
+        return html `
+            <div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
+                <div class="gauge">${gaugeLevels}</div>
+                <span>
+                    <span class="gauge-text">${Math.round(inputs.contrast.contrast)} Lc</span>
+                    <span class="gauge-text">
+                        ${contrastLevelLabel[inputs.contrast.contrastLevel.name]}
+                    </span>
+                    <span class="gauge-text">${fontSize}</span>
+                </span>
+            </div>
+        `;
+    },
+});

package/dist/elements/index.d.ts

@@ -1,3 +1,13 @@
+export * from './color/vira-all-color-space-sliders.element.js';
+export * from './color/vira-all-spaces-color-picker.element.js';
+export * from './color/vira-color-details.element.js';
+export * from './color/vira-color-format-sliders.element.js';
+export * from './color/vira-color-pair-contrast-summary.element.js';
+export * from './color/vira-color-pair.element.js';
+export * from './color/vira-color-picker.element.js';
+export * from './color/vira-color-slider.element.js';
+export * from './color/vira-color-swatch.element.js';
+export * from './color/vira-contrast-indicator.element.js';
 export * from './pop-up/vira-menu-item.element.js';
 export * from './pop-up/vira-menu-trigger.element.js';
 export * from './pop-up/vira-menu.element.js';

package/dist/elements/index.js

@@ -1,3 +1,13 @@
+export * from './color/vira-all-color-space-sliders.element.js';
+export * from './color/vira-all-spaces-color-picker.element.js';
+export * from './color/vira-color-details.element.js';
+export * from './color/vira-color-format-sliders.element.js';
+export * from './color/vira-color-pair-contrast-summary.element.js';
+export * from './color/vira-color-pair.element.js';
+export * from './color/vira-color-picker.element.js';
+export * from './color/vira-color-slider.element.js';
+export * from './color/vira-color-swatch.element.js';
+export * from './color/vira-contrast-indicator.element.js';
 export * from './pop-up/vira-menu-item.element.js';
 export * from './pop-up/vira-menu-trigger.element.js';
 export * from './pop-up/vira-menu.element.js';

package/dist/elements/pop-up/vira-menu-item.element.d.ts

@@ -34,5 +34,5 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
      * gated by `keepOpenAfterInteraction`.
      */
-    activate: import("element-vir").DefineEvent<undefined>;
+    activate: import("element-vir").DefineElementEvent<undefined>;
 }, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;