vira 32.0.0-beta.0 → 32.1.0

package/{src/elements/vira-text-area.element.ts → dist/elements/vira-text-area.element.js}

@@ -1,17 +1,11 @@
-import {type PartialWithUndefined, randomString} from '@augment-vir/common';
-import {attributes, css, defineElementEvent, html, ifDefined, listen} from 'element-vir';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {viraDisabledStyles} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {
-    type SharedTextInputElementInputs,
-    filterTextInputValue,
-    textInputListener,
-} from '../util/shared-text-input-logic.js';
-import {type ViraInput} from './vira-input.element.js';
-
+import { randomString } from '@augment-vir/common';
+import { attributes, css, defineElementEvent, html, ifDefined, listen } from 'element-vir';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { viraDisabledStyles } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { filterTextInputValue, textInputListener, } from '../util/shared-text-input-logic.js';
 /**
  * A multi-line text area element with all listeners properly attached. Mirrors the look and feel of
  * {@link ViraInput} but for multi-line text input.
@@ -20,26 +14,14 @@ import {type ViraInput} from './vira-input.element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-text-area
  */
-export const ViraTextArea = defineViraElement<
-    PartialWithUndefined<{
-        /** A label that is shown above the text area, if provided. */
-        label: string;
-        /** If true, applies error styling. */
-        hasError: boolean;
-        /** Number of visible text rows. Defaults to 4. */
-        rows: number;
-        /** If true, blocks the user's ability to resize the text area. */
-        preventResize: boolean;
-    }> &
-        SharedTextInputElementInputs
->()({
+export const ViraTextArea = defineViraElement()({
     tagName: 'vira-text-area',
     cssVars: {
         'vira-text-area-padding-horizontal': '12px',
         'vira-text-area-padding-vertical': '8px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 position: relative;
                 display: inline-flex;
@@ -99,9 +81,9 @@ export const ViraTextArea = defineViraElement<
 
                 &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
-                        elementBorderSize: '1px',
-                        noNesting: true,
-                    })}
+            elementBorderSize: '1px',
+            noNesting: true,
+        })}
                 }
             }
 
@@ -151,13 +133,13 @@ export const ViraTextArea = defineViraElement<
          * Fires whenever a user input created a new value. Does not fire if all input letters are
          * filtered out due to input restrictions.
          */
-        valueChange: defineElementEvent<string>(),
+        valueChange: defineElementEvent(),
         /**
          * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
          * the user why their input did not propagate if it was blocked. This does not fire for text
          * that was blocked out of programmatic "value" property assignments.
          */
-        inputBlocked: defineElementEvent<string>(),
+        inputBlocked: defineElementEvent(),
     },
     state() {
         return {
@@ -169,35 +151,39 @@ export const ViraTextArea = defineViraElement<
         };
     },
     hostClasses: {
-        'vira-text-area-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-text-area-error': ({inputs}) => !!inputs.hasError,
-        'vira-text-area-prevent-resize': ({inputs}) => !!inputs.preventResize || !!inputs.disabled,
+        'vira-text-area-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-text-area-error'({ inputs }) {
+            return !!inputs.hasError;
+        },
+        'vira-text-area-prevent-resize'({ inputs }) {
+            return !!inputs.preventResize || !!inputs.disabled;
+        },
     },
-    render({inputs, dispatch, state, events}) {
-        const {filtered: filteredValue} = filterTextInputValue({
+    render({ inputs, dispatch, state, events }) {
+        const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value,
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
-
         if (inputs.isReadonly) {
-            const readonlyValueTemplate = html`
+            const readonlyValueTemplate = html `
                 <span class="readonly-value">${filteredValue}</span>
             `;
-
             if (inputs.label) {
-                return html`
+                return html `
                     <label>
                         <span class="text-area-label">${inputs.label}</span>
                         ${readonlyValueTemplate}
                     </label>
                 `;
-            } else {
+            }
+            else {
                 return readonlyValueTemplate;
             }
         }
-
-        const textAreaTemplate = html`
+        const textAreaTemplate = html `
             <span class="text-area-wrapper">
                 <textarea
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
@@ -211,42 +197,38 @@ export const ViraTextArea = defineViraElement<
                     placeholder=${ifDefined(inputs.placeholder || undefined)}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
-                        textInputListener({
-                            inputs,
-                            previousValue: filteredValue,
-                            event,
-                            elementConstructor: HTMLTextAreaElement,
-                            inputBlockedCallback(blockedInput) {
-                                dispatch(
-                                    new events.inputBlocked({
-                                        detail: blockedInput,
-                                    }),
-                                );
-                            },
-                            newValueCallback(newValue) {
-                                dispatch(
-                                    new events.valueChange({
-                                        detail: newValue,
-                                    }),
-                                );
-                            },
-                        });
-                    })}
+            textInputListener({
+                inputs,
+                previousValue: filteredValue,
+                event,
+                elementConstructor: HTMLTextAreaElement,
+                inputBlockedCallback(blockedInput) {
+                    dispatch(new events.inputBlocked({
+                        detail: blockedInput,
+                    }));
+                },
+                newValueCallback(newValue) {
+                    dispatch(new events.valueChange({
+                        detail: newValue,
+                    }));
+                },
+            });
+        })}
                     ${attributes(inputs.attributePassthrough)}
                 ></textarea>
 
                 <div class="border-style focus-border"></div>
             </span>
         `;
-
         if (inputs.label) {
-            return html`
+            return html `
                 <label for=${state.randomId}>
                     <span class="text-area-label">${inputs.label}</span>
                     ${textAreaTemplate}
                 </label>
             `;
-        } else {
+        }
+        else {
             return textAreaTemplate;
         }
     },

package/dist/elements/vira-theme-switcher.element.d.ts

@@ -0,0 +1,17 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { ViraThemeClient, ViraThemeSelection } from '../util/vira-theme-client.js';
+/**
+ * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Fires a
+ * `themeSelect` event when the user picks an option; the consumer is responsible for applying the
+ * resulting theme.
+ *
+ * @category Elements
+ */
+export declare const ViraThemeSwitcher: import("element-vir").DeclarativeElementDefinition<"vira-theme-switcher", PartialWithUndefined<{
+    themeClient: Readonly<ViraThemeClient>;
+    /** Override the default English button titles (used as `title` attributes for tooltips). */
+    labels: Readonly<Record<ViraThemeSelection, string>>;
+}>, {
+    internalThemeClient: undefined | Readonly<ViraThemeClient>;
+    currentTheme: ViraThemeSelection;
+}, {}, "vira-theme-switcher-", "vira-theme-switcher-", readonly [], readonly []>;

package/{src/elements/vira-theme-switcher.element.ts → dist/elements/vira-theme-switcher.element.js}

@@ -1,30 +1,24 @@
-import {mapEnumToObject, type PartialWithUndefined} from '@augment-vir/common';
-import {classMap, css, html, listen} from 'element-vir';
-import {AutoTheme24Icon, Moon24Icon, Sun24Icon, type ViraIconSvg} from '../icons/index.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {noNativeFormStyles, noNativeSpacing, viraTheme} from '../styles/index.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraThemeClient, ViraThemeSelection} from '../util/vira-theme-client.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-const themeIcons: Readonly<Record<ViraThemeSelection, Readonly<ViraIconSvg>>> = mapEnumToObject(
-    ViraThemeSelection,
-    (theme) => {
-        const map: Record<ViraThemeSelection, Readonly<ViraIconSvg>> = {
-            [ViraThemeSelection.Light]: Sun24Icon,
-            [ViraThemeSelection.Dark]: Moon24Icon,
-            [ViraThemeSelection.Auto]: AutoTheme24Icon,
-        };
-        return map[theme];
-    },
-);
-
-const defaultThemeLabels: Readonly<Record<ViraThemeSelection, string>> = {
+import { mapEnumToObject } from '@augment-vir/common';
+import { classMap, css, html, listen } from 'element-vir';
+import { AutoTheme24Icon, Moon24Icon, Sun24Icon } from '../icons/index.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noNativeFormStyles, noNativeSpacing, viraTheme } from '../styles/index.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraThemeClient, ViraThemeSelection } from '../util/vira-theme-client.js';
+import { ViraIcon } from './vira-icon.element.js';
+const themeIcons = mapEnumToObject(ViraThemeSelection, (theme) => {
+    const map = {
+        [ViraThemeSelection.Light]: Sun24Icon,
+        [ViraThemeSelection.Dark]: Moon24Icon,
+        [ViraThemeSelection.Auto]: AutoTheme24Icon,
+    };
+    return map[theme];
+});
+const defaultThemeLabels = {
     [ViraThemeSelection.Light]: 'Light',
     [ViraThemeSelection.Dark]: 'Dark',
     [ViraThemeSelection.Auto]: 'Auto',
 };
-
 /**
  * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Fires a
  * `themeSelect` event when the user picks an option; the consumer is responsible for applying the
@@ -32,15 +26,9 @@ const defaultThemeLabels: Readonly<Record<ViraThemeSelection, string>> = {
  *
  * @category Elements
  */
-export const ViraThemeSwitcher = defineViraElement<
-    PartialWithUndefined<{
-        themeClient: Readonly<ViraThemeClient>;
-        /** Override the default English button titles (used as `title` attributes for tooltips). */
-        labels: Readonly<Record<ViraThemeSelection, string>>;
-    }>
->()({
+export const ViraThemeSwitcher = defineViraElement()({
     tagName: 'vira-theme-switcher',
-    styles: css`
+    styles: css `
         :host {
             display: inline-flex;
             align-items: center;
@@ -79,39 +67,36 @@ export const ViraThemeSwitcher = defineViraElement<
     `,
     state() {
         return {
-            internalThemeClient: undefined as undefined | Readonly<ViraThemeClient>,
+            internalThemeClient: undefined,
             currentTheme: ViraThemeSelection.Auto,
         };
     },
-    render({inputs, state, updateState}) {
-        const themeClient =
-            inputs.themeClient || state.internalThemeClient || new ViraThemeClient();
+    render({ inputs, state, updateState }) {
+        const themeClient = inputs.themeClient || state.internalThemeClient || new ViraThemeClient();
         updateState({
             internalThemeClient: themeClient,
             currentTheme: themeClient.currentTheme,
         });
-
         const labels = inputs.labels || defaultThemeLabels;
-
         return Object.values(ViraThemeSelection).map((theme) => {
-            return html`
+            return html `
                 <button
                     class=${classMap({
-                        selected: themeClient.currentTheme === theme,
-                    })}
+                selected: themeClient.currentTheme === theme,
+            })}
                     title=${labels[theme]}
                     ${listen('click', (event) => {
-                        event.stopPropagation();
-                        themeClient.setSelectedTheme(theme);
-                        updateState({
-                            currentTheme: themeClient.currentTheme,
-                        });
-                    })}
+                event.stopPropagation();
+                themeClient.setSelectedTheme(theme);
+                updateState({
+                    currentTheme: themeClient.currentTheme,
+                });
+            })}
                 >
                     <${ViraIcon.assign({
-                        icon: themeIcons[theme],
-                        fitContainer: true,
-                    })}></${ViraIcon}>
+                icon: themeIcons[theme],
+                fitContainer: true,
+            })}></${ViraIcon}>
                 </button>
             `;
         });

package/dist/icons/colored-icon.d.ts

@@ -0,0 +1,11 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type CSSResult } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+import { type ViraIconSvg } from './icon-svg.js';
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used. Results are cached per source icon and color combination.
+ *
+ * @category Icon
+ */
+export declare function createColoredIcon(icon: ViraIconSvg, colors: PartialWithUndefined<Record<keyof typeof viraIconCssVars, string | CSSResult>>): ViraIconSvg;

package/{src/icons/colored-icon.ts → dist/icons/colored-icon.js}

@@ -1,49 +1,42 @@
-import {check} from '@augment-vir/assert';
-import {type PartialWithUndefined, getObjectTypedKeys, getOrSetFromMap} from '@augment-vir/common';
-import {type CSSResult, css, html, unsafeCSS} from 'element-vir';
-import {viraIconCssVars} from './icon-css-vars.js';
-import {type ViraIconSvg, defineIcon} from './icon-svg.js';
-
+import { check } from '@augment-vir/assert';
+import { getObjectTypedKeys, getOrSetFromMap } from '@augment-vir/common';
+import { css, html, unsafeCSS } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+import { defineIcon } from './icon-svg.js';
 /**
  * Caches colored icons keyed first by the source icon and then by the generated color styles. The
  * outer `WeakMap` lets the entire cache for a given icon be garbage collected once that icon is no
  * longer referenced, preventing a memory leak from unbounded icon definitions.
  */
-const coloredIconCache = new WeakMap<ViraIconSvg, Map<string, ViraIconSvg>>();
-
+const coloredIconCache = new WeakMap();
 /**
  * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
  * the original icon can be used. Results are cached per source icon and color combination.
  *
  * @category Icon
  */
-export function createColoredIcon(
-    icon: ViraIconSvg,
-    colors: PartialWithUndefined<Record<keyof typeof viraIconCssVars, string | CSSResult>>,
-): ViraIconSvg {
+export function createColoredIcon(icon, colors) {
     const colorStyles = getObjectTypedKeys(colors)
         .map((cssVarName) => {
-            if (colors[cssVarName]) {
-                return `${viraIconCssVars[cssVarName].name}: ${String(colors[cssVarName])};`;
-            } else {
-                return undefined;
-            }
-        })
+        if (colors[cssVarName]) {
+            return `${viraIconCssVars[cssVarName].name}: ${String(colors[cssVarName])};`;
+        }
+        else {
+            return undefined;
+        }
+    })
         .filter(check.isTruthy)
         .join(' ');
-
-    const iconCache = getOrSetFromMap(coloredIconCache, icon, () => new Map<string, ViraIconSvg>());
-
+    const iconCache = getOrSetFromMap(coloredIconCache, icon, () => new Map());
     return getOrSetFromMap(iconCache, colorStyles, () => {
-        const styles = css`
+        const styles = css `
             ${unsafeCSS(colorStyles)}
             display: inline-flex;
             vertical-align: middle;
         `;
-
         return defineIcon({
             name: icon.name,
-            svgTemplate: html`
+            svgTemplate: html `
                 <div style=${styles}>${icon.svgTemplate}</div>
             `,
         });

package/dist/icons/icon-css-vars.d.ts

@@ -0,0 +1,14 @@
+/**
+ * CSS vars that are supported by all Vira SVG icons.
+ *
+ * @category Icon
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
+    /** To be used for coloring an icon's stroke. */
+    readonly 'vira-icon-stroke-color': "currentColor";
+    /** To be used for coloring an icon's fill. */
+    readonly 'vira-icon-fill-color': "none";
+    readonly 'vira-icon-stroke-width': "1.5px";
+}>;

package/{src/icons/icon-css-vars.ts → dist/icons/icon-css-vars.js}

@@ -1,5 +1,4 @@
-import {defineCssVars} from 'lit-css-vars';
-
+import { defineCssVars } from 'lit-css-vars';
 /**
  * CSS vars that are supported by all Vira SVG icons.
  *

package/{src/icons/icon-svg.ts → dist/icons/icon-svg.d.ts}

@@ -1,5 +1,4 @@
-import {type TemplateResult} from 'element-vir';
-
+import { type TemplateResult } from 'element-vir';
 /**
  * An individual Vira icon SVG definition.
  *
@@ -11,23 +10,12 @@ export type ViraIconSvg = {
     size?: number;
     svgTemplate: TemplateResult;
 };
-
 /**
  * A function used to define an individual Vira icon SVG.
  *
  * @category Icon
  */
-export function defineIcon({
-    name,
-    svgTemplate,
-}: {
+export declare function defineIcon({ name, svgTemplate, }: {
     name: string;
     svgTemplate: TemplateResult;
-}): ViraIconSvg {
-    const iconSvg: ViraIconSvg = {
-        name,
-        svgTemplate,
-    };
-
-    return iconSvg;
-}
+}): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -0,0 +1,12 @@
+/**
+ * A function used to define an individual Vira icon SVG.
+ *
+ * @category Icon
+ */
+export function defineIcon({ name, svgTemplate, }) {
+    const iconSvg = {
+        name,
+        svgTemplate,
+    };
+    return iconSvg;
+}

package/dist/icons/icon-svgs/16/check-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A checkmark (16px).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/check16icon
+ */
+export declare const Check16Icon: import("../../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/16/check-16.icon.ts → dist/icons/icon-svgs/16/check-16.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../../icon-css-vars.js';
-import {defineIcon} from '../../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A checkmark (16px).
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../../icon-svg.js';
  */
 export const Check16Icon = defineIcon({
     name: 'Check16Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path
                 d="m12 5-6 6-3-3"

package/dist/icons/icon-svgs/16/chevron-down-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chevron that points downwards (16px). See ChevronDown24Icon for the 24px version.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevrondown16icon
+ */
+export declare const ChevronDown16Icon: import("../../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/16/chevron-down-16.icon.ts → dist/icons/icon-svgs/16/chevron-down-16.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../../icon-css-vars.js';
-import {defineIcon} from '../../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A chevron that points downwards (16px). See ChevronDown24Icon for the 24px version.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../../icon-svg.js';
  */
 export const ChevronDown16Icon = defineIcon({
     name: 'ChevronDown16Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

package/dist/icons/icon-svgs/16/chevron-up-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chevron that points upwards (16px). See ChevronUp24Icon for the 24px version.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevronup16icon
+ */
+export declare const ChevronUp16Icon: import("../../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/16/chevron-up-16.icon.ts → dist/icons/icon-svgs/16/chevron-up-16.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../../icon-css-vars.js';
-import {defineIcon} from '../../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A chevron that points upwards (16px). See ChevronUp24Icon for the 24px version.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../../icon-svg.js';
  */
 export const ChevronUp16Icon = defineIcon({
     name: 'ChevronUp16Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

package/dist/icons/icon-svgs/16/dash-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A dash (horizontal line) icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/dash16icon
+ */
+export declare const Dash16Icon: import("../../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/16/dash-16.icon.ts → dist/icons/icon-svgs/16/dash-16.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../../icon-css-vars.js';
-import {defineIcon} from '../../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A dash (horizontal line) icon.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../../icon-svg.js';
  */
 export const Dash16Icon = defineIcon({
     name: 'Dash16Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path
                 d="M4 8h8"

package/dist/icons/icon-svgs/16/element-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon symbol that represents an HTML element.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/element16icon
+ */
+export declare const Element16Icon: import("../../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/16/element-16.icon.ts → dist/icons/icon-svgs/16/element-16.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../../icon-css-vars.js';
-import {defineIcon} from '../../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * An icon symbol that represents an HTML element.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../../icon-svg.js';
  */
 export const Element16Icon = defineIcon({
     name: 'Element16Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path
                 d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6"

package/dist/icons/icon-svgs/16/plus-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A plus icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/plus16icon
+ */
+export declare const Plus16Icon: import("../../icon-svg.js").ViraIconSvg;