vira 32.0.0-beta.0 → 32.0.0

package/{src/elements/color/vira-color-pair-contrast-summary.element.ts → dist/elements/color/vira-color-pair-contrast-summary.element.js}

@@ -1,36 +1,24 @@
 /* node:coverage disable */
-
 // cspell:word cqmin
-
-import {assertWrap} from '@augment-vir/assert';
-import {getObjectTypedEntries, round} from '@augment-vir/common';
-import {Color} from '@electrovir/color/dist/data/color-class/color.js';
-import {
-    calculateContrast,
-    calculateFontSizes,
-    contrastLevelLabel,
-    contrastLevels,
-    fontWeightByName,
-} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {classMap, css, defineElement, html, unsafeCSS} from 'element-vir';
-import {viraFontCssVars} from '../../styles/font.js';
-import {noNativeSpacing} from '../../styles/native-styles.js';
-import {defineTable} from '../../util/define-table.js';
-import {ViraBoldText} from '../vira-bold-text.element.js';
-import {ViraColorSwatch} from './vira-color-swatch.element.js';
-import {ViraContrastIndicator} from './vira-contrast-indicator.element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { getObjectTypedEntries, round } from '@augment-vir/common';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { calculateContrast, calculateFontSizes, contrastLevelLabel, contrastLevels, fontWeightByName, } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { noNativeSpacing } from '../../styles/native-styles.js';
+import { defineTable } from '../../util/define-table.js';
+import { ViraBoldText } from '../vira-bold-text.element.js';
+import { ViraColorSwatch } from './vira-color-swatch.element.js';
+import { ViraContrastIndicator } from './vira-contrast-indicator.element.js';
 /**
  * A huge summary of a color pair's contrast levels, font sizes, font weights, etc.
  *
  * @category Elements
  */
-export const ViraColorPairContrastSummary = defineElement<{
-    foregroundColor: string;
-    backgroundColor: string;
-}>()({
+export const ViraColorPairContrastSummary = defineElement()({
     tagName: 'vira-color-pair-contrast-summary',
-    styles: css`
+    styles: css `
         :host {
             display: flex;
             justify-content: center;
@@ -131,13 +119,12 @@ export const ViraColorPairContrastSummary = defineElement<{
             font-family: ${viraFontCssVars['vira-monospace'].value};
         }
     `,
-    render({inputs}) {
+    render({ inputs }) {
         const contrast = calculateContrast({
             background: new Color(inputs.backgroundColor).toCss().rgb,
             foreground: new Color(inputs.foregroundColor).toCss().rgb,
         });
-
-        const {rows: colorPairRows} = defineTable({
+        const { rows: colorPairRows } = defineTable({
             headers: [
                 {
                     key: 'colorLayer',
@@ -151,20 +138,16 @@ export const ViraColorPairContrastSummary = defineElement<{
                 'Background:': new Color(inputs.backgroundColor).toFormattedStrings().hexString,
                 'Contrast:': `${contrast.contrast} Lc`.padEnd(9, ' '),
             }),
-            dataMap: ([
-                colorLayer,
-                value,
-            ]) => {
+            dataMap([colorLayer, value,]) {
                 return {
                     colorLayer,
-                    colorValue: html`
+                    colorValue: html `
                         <pre>${value}</pre>
                     `,
                 };
             },
         });
-
-        const {rows: weightRows} = defineTable({
+        const { rows: weightRows } = defineTable({
             headers: [
                 {
                     key: 'weight',
@@ -173,25 +156,20 @@ export const ViraColorPairContrastSummary = defineElement<{
                     key: 'size',
                 },
             ],
-            originalData: Object.entries(contrast.fontSizes).map(
-                ([
-                    weight,
+            originalData: Object.entries(contrast.fontSizes).map(([weight, size,]) => {
+                return {
+                    weight: Number(weight),
                     size,
-                ]) => {
-                    return {
-                        weight: Number(weight),
-                        size,
-                    };
-                },
-            ),
-            dataMap: ({size, weight}) => {
+                };
+            }),
+            dataMap({ size, weight }) {
                 return {
                     size: `${round(size, {
                         digits: 1,
                     })}px`,
-                    weight: html`
+                    weight: html `
                         <span
-                            style=${css`
+                            style=${css `
                                 font-weight: ${weight};
                             `}
                         >
@@ -201,8 +179,7 @@ export const ViraColorPairContrastSummary = defineElement<{
                 };
             },
         });
-
-        const {rows: levelRows} = defineTable({
+        const { rows: levelRows } = defineTable({
             headers: [
                 {
                     key: 'boundaryLc',
@@ -212,20 +189,19 @@ export const ViraColorPairContrastSummary = defineElement<{
                 },
             ],
             originalData: contrastLevels,
-            dataMap: (contrastLevel) => {
+            dataMap(contrastLevel) {
                 return {
                     boundaryLc: `${contrastLevel.min} Lc`,
                     levelName: contrastLevelLabel[contrastLevel.name],
                 };
             },
         });
-
-        return html`
+        return html `
             <div class="color-overlay">
                 <${ViraColorSwatch.assign({
-                    backgroundColor: inputs.backgroundColor,
-                    foregroundColor: inputs.foregroundColor,
-                })}>
+            backgroundColor: inputs.backgroundColor,
+            foregroundColor: inputs.foregroundColor,
+        })}>
                     <div class="foreground-content">
                         <div class="constant-size-wrapper">
                             <div class="square"></div>
@@ -233,15 +209,13 @@ export const ViraColorPairContrastSummary = defineElement<{
                         </div>
                         <div class="needed-size">
                             <span
-                                style=${css`
+                                style=${css `
                                     font-size: ${contrast.fontSizes[fontWeightByName.Normal]}px;
                                     line-height: ${contrast.fontSizes[fontWeightByName.Normal] *
-                                    0.77}px;
-                                    visibility: ${unsafeCSS(
-                                        contrast.fontSizes[fontWeightByName.Normal] > 900
-                                            ? 'hidden'
-                                            : 'visible',
-                                    )};
+            0.77}px;
+                                    visibility: ${unsafeCSS(contrast.fontSizes[fontWeightByName.Normal] > 900
+            ? 'hidden'
+            : 'visible')};
                                 `}
                             >
                                 Min Size
@@ -253,43 +227,40 @@ export const ViraColorPairContrastSummary = defineElement<{
                     <table>
                         <tbody>
                             ${colorPairRows.map((row) => {
-                                const cells = row.cells.map((cell, index) => {
-                                    const element = index ? 'td' : 'th';
-
-                                    return html`
+            const cells = row.cells.map((cell, index) => {
+                const element = index ? 'td' : 'th';
+                return html `
                                         <${element}>${cell.content}</${element}>
                                     `;
-                                });
-
-                                return html`
+            });
+            return html `
                                     <tr>${cells}</tr>
                                 `;
-                            })}
+        })}
                         </tbody>
                     </table>
 
                     <${ViraContrastIndicator.assign({
-                        contrast,
-                        fontWeight: fontWeightByName.Normal,
-                    })}></${ViraContrastIndicator}>
+            contrast,
+            fontWeight: fontWeightByName.Normal,
+        })}></${ViraContrastIndicator}>
                 </div>
             </div>
 
             <table class="text-weights">
                 ${weightRows.map((row) => {
-                    const cells = row.cells.map((cell) => {
-                        return html`
+            const cells = row.cells.map((cell) => {
+                return html `
                             <td class="cell-${cell.key} monospace-font">${cell.content}</td>
                         `;
-                    });
-
-                    return html`
+            });
+            return html `
                         <tr>
                             ${cells}
                             <td>
                                 <div
                                     class="size-display"
-                                    style=${css`
+                                    style=${css `
                                         background-color: ${unsafeCSS(inputs.backgroundColor)};
                                         color: ${unsafeCSS(inputs.foregroundColor)};
                                         font-weight: ${row.data.weight};
@@ -301,39 +272,36 @@ export const ViraColorPairContrastSummary = defineElement<{
                             </td>
                         </tr>
                     `;
-                })}
+        })}
             </table>
 
             <table class="contrast-levels">
                 ${levelRows.map((row) => {
-                    const isSelectedRow = contrast.contrastLevel.name === row.data.name;
-
-                    const cells = row.cells.map((cell) => {
-                        return html`
+            const isSelectedRow = contrast.contrastLevel.name === row.data.name;
+            const cells = row.cells.map((cell) => {
+                return html `
                             <td><${ViraBoldText.assign({
-                                bold: isSelectedRow,
-                                text: assertWrap.isString(cell.content),
-                            })}><${ViraBoldText}></td>
+                    bold: isSelectedRow,
+                    text: assertWrap.isString(cell.content),
+                })}><${ViraBoldText}></td>
                         `;
-                    });
-
-                    const title = [
-                        row.data.description,
-                        '\nFont weights to font sizes:',
-                        JSON.stringify(calculateFontSizes(row.data.min), null, 4),
-                    ].join('\n');
-
-                    return html`
+            });
+            const title = [
+                row.data.description,
+                '\nFont weights to font sizes:',
+                JSON.stringify(calculateFontSizes(row.data.min), null, 4),
+            ].join('\n');
+            return html `
                         <tr
                             title=${title}
                             class=${classMap({
-                                'selected-row': isSelectedRow,
-                            })}
+                'selected-row': isSelectedRow,
+            })}
                         >
                             ${cells}
                         </tr>
                     `;
-                })}
+        })}
             </table>
         `;
     },

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

@@ -0,0 +1,17 @@
+import { type ColorPair } from '@electrovir/color/dist/data/color-css.js';
+import { type FontWeight } from '@electrovir/color/dist/data/contrast/contrast.js';
+/**
+ * Showcase a foreground/backend color pair.
+ *
+ * @category Elements
+ */
+export declare const ViraColorPair: import("element-vir").DeclarativeElementDefinition<"vira-color-pair", {
+    color: Readonly<ColorPair>;
+    showVarValues: boolean;
+    showVarNames: boolean;
+    showContrast: boolean;
+    fontWeight: FontWeight;
+}, {
+    previewElement: undefined | HTMLElement;
+    forceShowEverything: boolean;
+}, {}, "vira-color-pair-no-contrast-tips", "vira-color-pair-", readonly [], readonly []>;

package/{src/elements/color/vira-color-pair.element.ts → dist/elements/color/vira-color-pair.element.js}

@@ -1,39 +1,30 @@
 /* node:coverage disable */
-
-import {assertWrap, check} from '@augment-vir/assert';
-import {type ColorPair} from '@electrovir/color/dist/data/color-css.js';
-import {calculateContrast, type FontWeight} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS} from 'element-vir';
-import {viraFontCssVars} from '../../styles/font.js';
-import {noNativeFormStyles, noNativeSpacing} from '../../styles/native-styles.js';
-import {ViraContrastIndicator} from './vira-contrast-indicator.element.js';
-
+import { assertWrap, check } from '@augment-vir/assert';
+import { calculateContrast } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { css, defineElement, html, listen, nothing, onDomCreated, unsafeCSS } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { noNativeFormStyles, noNativeSpacing } from '../../styles/native-styles.js';
+import { ViraContrastIndicator } from './vira-contrast-indicator.element.js';
 /**
  * Showcase a foreground/backend color pair.
  *
  * @category Elements
  */
-export const ViraColorPair = defineElement<{
-    color: Readonly<ColorPair>;
-    showVarValues: boolean;
-    showVarNames: boolean;
-    showContrast: boolean;
-    fontWeight: FontWeight;
-}>()({
+export const ViraColorPair = defineElement()({
     tagName: 'vira-color-pair',
     state() {
         return {
-            previewElement: undefined as undefined | HTMLElement,
+            previewElement: undefined,
             forceShowEverything: false,
         };
     },
     hostClasses: {
-        'vira-color-pair-no-contrast-tips': ({inputs, state}) => {
+        'vira-color-pair-no-contrast-tips'({ inputs, state }) {
             return !inputs.showContrast && !state.forceShowEverything;
         },
     },
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: flex;
                 flex-direction: column;
@@ -122,76 +113,66 @@ export const ViraColorPair = defineElement<{
             }
         `;
     },
-    render({state, updateState, inputs}) {
-        const colorRows = (
-            [
-                'foreground',
-                'background',
-            ] as const
-        ).map((layerKey) => {
+    render({ state, updateState, inputs }) {
+        const colorRows = [
+            'foreground',
+            'background',
+        ].map((layerKey) => {
             const keyString = [
                 inputs.color[layerKey].name,
                 inputs.showVarValues || state.forceShowEverything ? ':' : '',
             ]
                 .filter(check.isTruthy)
                 .join('');
-            const valueTemplate =
-                inputs.showVarValues || state.forceShowEverything
-                    ? html`
+            const valueTemplate = inputs.showVarValues || state.forceShowEverything
+                ? html `
                           <span>${inputs.color[layerKey].default}</span>
                       `
-                    : nothing;
-
-            return html`
+                : nothing;
+            return html `
                 <p>
                     <span>${keyString}</span>
                     ${valueTemplate}
                 </p>
             `;
         });
-
-        const cssVarNamesTemplate =
-            inputs.showVarNames || state.forceShowEverything
-                ? html`
+        const cssVarNamesTemplate = inputs.showVarNames || state.forceShowEverything
+            ? html `
                       <div class="css-var-names">${colorRows}</div>
                   `
-                : nothing;
-
+            : nothing;
         const contrast = state.previewElement
             ? calculateContrast({
-                  foreground: globalThis
-                      .getComputedStyle(state.previewElement)
-                      .getPropertyValue('color'),
-                  background: globalThis
-                      .getComputedStyle(state.previewElement)
-                      .getPropertyValue('background-color'),
-              })
+                foreground: globalThis
+                    .getComputedStyle(state.previewElement)
+                    .getPropertyValue('color'),
+                background: globalThis
+                    .getComputedStyle(state.previewElement)
+                    .getPropertyValue('background-color'),
+            })
             : undefined;
-
-        const contrastTemplate =
-            contrast && (inputs.showContrast || state.forceShowEverything)
-                ? html`
+        const contrastTemplate = contrast && (inputs.showContrast || state.forceShowEverything)
+            ? html `
                       <${ViraContrastIndicator.assign({
-                          contrast,
-                          fontWeight: inputs.fontWeight,
-                      })}></${ViraContrastIndicator}>
+                contrast,
+                fontWeight: inputs.fontWeight,
+            })}></${ViraContrastIndicator}>
                   `
-                : nothing;
-
-        return html`
+            : nothing;
+        return html `
             <button
                 ${listen('click', () => {
-                    updateState({
-                        forceShowEverything: !state.forceShowEverything,
-                    });
-                })}
+            updateState({
+                forceShowEverything: !state.forceShowEverything,
+            });
+        })}
                 ${onDomCreated((element) => {
-                    updateState({
-                        previewElement: assertWrap.instanceOf(element, HTMLElement),
-                    });
-                })}
+            updateState({
+                previewElement: assertWrap.instanceOf(element, HTMLElement),
+            });
+        })}
                 class="color-preview"
-                style=${css`
+                style=${css `
                     color: ${unsafeCSS(inputs.color.foreground.default)};
                     background: ${unsafeCSS(inputs.color.background.default)};
                 `}
@@ -201,12 +182,10 @@ export const ViraColorPair = defineElement<{
                 <div class="needed-size-wrapper">
                     <span class="needed-size">
                         <span
-                            style=${css`
-                                visibility: ${unsafeCSS(
-                                    (contrast?.fontSizes[400] || Infinity) > 150
-                                        ? 'hidden'
-                                        : 'visible',
-                                )};
+                            style=${css `
+                                visibility: ${unsafeCSS((contrast?.fontSizes[400] || Infinity) > 150
+            ? 'hidden'
+            : 'visible')};
                                 font-weight: ${inputs.fontWeight};
                                 font-size: ${contrast ? contrast.fontSizes[400] : 14}px;
                             `}

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

@@ -0,0 +1,20 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { Color } from '@electrovir/color/dist/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 ViraColorPicker: import("element-vir").DeclarativeElementDefinition<"vira-color-picker", Readonly<{
+    color: string | Readonly<Color> | undefined;
+} & PartialWithUndefined<{
+    alwaysShowPicker: boolean;
+    showHexValue: boolean;
+}>>, {
+    selectedFormatName: "rgb" | "hex" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch";
+    rawInput: undefined | string;
+}, {
+    colorChange: import("element-vir").DefineElementEvent<string>;
+}, "vira-color-picker-always-show", "vira-color-picker-swatch-width" | "vira-color-picker-swatch-height", readonly [], readonly []>;