vira 28.19.4 → 28.19.6

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

@@ -1,14 +1,41 @@
-import { randomString } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
-import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
-import { ChevronUp24Icon } from '../icons/index.js';
-import { viraDisabledStyles } from '../styles/disabled.js';
-import { createFocusStyles } from '../styles/focus.js';
-import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraAnimationDurations, viraBorders } from '../styles/index.js';
-import { noNativeFormStyles } from '../styles/native-styles.js';
-import { defineViraElement } from './define-vira-element.js';
-import { ViraIcon } from './vira-icon.element.js';
+import {randomString, type PartialWithUndefined} from '@augment-vir/common';
+import {extractEventTarget} from '@augment-vir/web';
+import {
+    attributes,
+    classMap,
+    css,
+    defineElementEvent,
+    html,
+    ifDefined,
+    listen,
+    nothing,
+    type AttributeValues,
+} from 'element-vir';
+import {ChevronUp24Icon, type ViraIconSvg} from '../icons/index.js';
+import {viraDisabledStyles} from '../styles/disabled.js';
+import {createFocusStyles} from '../styles/focus.js';
+import {viraFormCssVars} from '../styles/form-styles.js';
+import {viraAnimationDurations, viraBorders} from '../styles/index.js';
+import {noNativeFormStyles} from '../styles/native-styles.js';
+import {defineViraElement} from './define-vira-element.js';
+import {ViraDropdown} from './vira-dropdown.element.js';
+import {ViraIcon} from './vira-icon.element.js';
+
+/**
+ * Options for {@link ViraSelect}.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export type ViraSelectOption = {
+    /** A value or id, used to keep track of which option is selected. */
+    value: string;
+    label: string;
+} & PartialWithUndefined<{
+    disabled: boolean;
+}>;
+
 /**
  * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
  *
@@ -16,7 +43,28 @@ import { ViraIcon } from './vira-icon.element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-select
  */
-export const ViraSelect = defineViraElement()({
+export const ViraSelect = defineViraElement<
+    Readonly<
+        {
+            options: ReadonlyArray<Readonly<ViraSelectOption>>;
+            /** The currently selected option value. */
+            value: undefined | string;
+        } & PartialWithUndefined<{
+            icon: Readonly<ViraIconSvg>;
+            placeholder: string;
+            label: string;
+            disabled: boolean;
+            attributePassthrough: Readonly<
+                PartialWithUndefined<{
+                    label: AttributeValues;
+                    select: AttributeValues;
+                    option: AttributeValues;
+                }>
+            >;
+            hasError: boolean;
+        }>
+    >
+>()({
     tagName: 'vira-select',
     state() {
         return {
@@ -28,7 +76,7 @@ export const ViraSelect = defineViraElement()({
         };
     },
     events: {
-        valueChange: defineElementEvent(),
+        valueChange: defineElementEvent<string>(),
     },
     cssVars: {
         'vira-select-padding-horizontal': '10px',
@@ -36,10 +84,10 @@ export const ViraSelect = defineViraElement()({
         'vira-select-icon-padding': '44px',
     },
     hostClasses: {
-        'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-select-error': ({ inputs }) => !!inputs.hasError,
+        'vira-select-disabled': ({inputs}) => !!inputs.disabled,
+        'vira-select-error': ({inputs}) => !!inputs.hasError,
     },
-    styles: ({ hostClasses, cssVars }) => css `
+    styles: ({hostClasses, cssVars}) => css`
         :host {
             position: relative;
             display: inline-flex;
@@ -84,9 +132,9 @@ export const ViraSelect = defineViraElement()({
 
                 &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
                     ${createFocusStyles({
-        elementBorderSize: 0,
-        noNesting: true,
-    })}
+                        elementBorderSize: 0,
+                        noNesting: true,
+                    })}
                 }
 
                 &.placeholder {
@@ -169,40 +217,47 @@ export const ViraSelect = defineViraElement()({
             }
         }
     `,
-    render({ inputs, state, dispatch, events }) {
+    render({inputs, state, dispatch, events}) {
         const value = inputs.value || undefined;
-        const placeholderOptionTemplate = inputs.placeholder || value == undefined
-            ? html `
+
+        const placeholderOptionTemplate =
+            inputs.placeholder || value == undefined
+                ? html`
                       <option value="" disabled ?selected=${value == undefined}>
                           ${inputs.placeholder}
                       </option>
                   `
-            : nothing;
-        const selectTemplate = html `
+                : nothing;
+
+        const selectTemplate = html`
             <span class="select-wrapper">
                 <select
                     .value=${ifDefined(value)}
                     class=${classMap({
-            placeholder: !value && !!inputs.placeholder,
-            'with-icon': !!inputs.icon,
-        })}
+                        placeholder: !value && !!inputs.placeholder,
+                        'with-icon': !!inputs.icon,
+                    })}
                     tabindex=${inputs.disabled ? -1 : 0}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
                     ${listen('input', (event) => {
-            const selectElement = extractEventTarget(event, HTMLSelectElement);
-            const newValue = selectElement.value;
-            if (selectElement.value !== value) {
-                selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
-            }
-            dispatch(new events.valueChange(newValue));
-        })}
+                        const selectElement = extractEventTarget(event, HTMLSelectElement);
+                        const newValue = selectElement.value;
+
+                        if (selectElement.value !== value) {
+                            selectElement.selectedIndex = inputs.options.findIndex(
+                                (option) => option.value === value,
+                            );
+                        }
+
+                        dispatch(new events.valueChange(newValue));
+                    })}
                     ${attributes(inputs.attributePassthrough?.select)}
                 >
                     ${placeholderOptionTemplate}
                     ${inputs.options.map((option) => {
-            return html `
+                        return html`
                             <option
                                 ?selected=${option.value === value}
                                 aria-label=${option.label}
@@ -212,7 +267,7 @@ export const ViraSelect = defineViraElement()({
                                 ${option.label}
                             </option>
                         `;
-        })}
+                    })}
                 </select>
                 <!--
                     These separate style elements are necessary so that we can select them as
@@ -223,19 +278,19 @@ export const ViraSelect = defineViraElement()({
 
                 <div class="border-style wrapper-border"></div>
 
-                <${ViraIcon.assign({ icon: inputs.icon })} class="input-icon"></${ViraIcon}>
-                <${ViraIcon.assign({ icon: ChevronUp24Icon })} class="trigger-icon"></${ViraIcon}>
+                <${ViraIcon.assign({icon: inputs.icon})} class="input-icon"></${ViraIcon}>
+                <${ViraIcon.assign({icon: ChevronUp24Icon})} class="trigger-icon"></${ViraIcon}>
             </span>
         `;
+
         if (inputs.label) {
-            return html `
+            return html`
                 <label for=${state.randomId} ${attributes(inputs.attributePassthrough?.label)}>
                     <span class="select-label">${inputs.label}</span>
                     ${selectTemplate}
                 </label>
             `;
-        }
-        else {
+        } else {
             return selectTemplate;
         }
     },

package/src/icons/icon-color.test-helper.ts

@@ -0,0 +1,9 @@
+export enum ColorType {
+    Color = 'color',
+    Fill = 'fill',
+    Stroke = 'stroke',
+}
+
+export function extractIconColor(element: Element, colorType: ColorType) {
+    return window.getComputedStyle(element).getPropertyValue(colorType);
+}

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

@@ -1,4 +1,5 @@
-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

@@ -0,0 +1,71 @@
+import {getObjectTypedKeys, stringify} from '@augment-vir/common';
+import Color, {type ColorTypes} from 'colorjs.io';
+import {type TemplateResult, html} from 'element-vir';
+import {viraIconCssVars} from './icon-css-vars.js';
+
+/**
+ * An individual Vira icon SVG definition.
+ *
+ * @category Icon
+ */
+export type ViraIconSvg = {
+    name: string;
+    svgTemplate: TemplateResult;
+};
+
+/**
+ * A function used to define an individual Vira icon SVG.
+ *
+ * @category Icon
+ */
+export function defineIcon({
+    name,
+    svgTemplate,
+}: {
+    name: string;
+    svgTemplate: TemplateResult;
+}): ViraIconSvg {
+    const iconSvg: ViraIconSvg = {
+        name,
+        svgTemplate,
+    };
+
+    return iconSvg;
+}
+
+function getAssertedValidColor(input: ColorTypes | undefined) {
+    try {
+        if (!input) {
+            throw new Error('invalid empty color');
+        }
+        return new Color(input);
+    } catch {
+        throw new Error(`Invalid color: ${stringify(input)}`);
+    }
+}
+
+/**
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
+ * the original icon can be used.
+ *
+ * @category Icon
+ */
+export function createColoredIcon(
+    icon: ViraIconSvg,
+    colors: Partial<Record<keyof typeof viraIconCssVars, string>>,
+): ViraIconSvg {
+    const colorStyles = getObjectTypedKeys(colors)
+        .map((cssVarName) => {
+            const colorValue = colors[cssVarName];
+            const color = getAssertedValidColor(colorValue);
+            return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
+        })
+        .join(' ');
+
+    return defineIcon({
+        name: icon.name,
+        svgTemplate: html`
+            <div style=${colorStyles}>${icon.svgTemplate}</div>
+        `,
+    });
+}

package/{dist/icons/icon-svgs/bell-24.icon.js → src/icons/icon-svgs/bell-24.icon.ts}

@@ -1,6 +1,7 @@
-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 bell icon.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Bell24Icon = defineIcon({
     name: 'Bell24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/chat-24.icon.js → src/icons/icon-svgs/chat-24.icon.ts}

@@ -1,6 +1,7 @@
-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 chat bubble icon.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Chat24Icon = defineIcon({
     name: 'Chat24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="M5 15.4c-1.6-1.2-2.6-2.7-2.6-4.4 0-3.5 4.3-6.3 9.6-6.3s9.6 2.8 9.6 6.3-4.3 6.4-9.6 6.4L9 17l-5 3.8 1-5.5Z"

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

@@ -1,6 +1,7 @@
-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.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Check24Icon = defineIcon({
     name: 'Check24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="m17 8.5-7 8-3-3"

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

@@ -1,6 +1,7 @@
-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. See ChevronUp24Icon or one pointing upwards.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const ChevronDown24Icon = defineIcon({
     name: 'ChevronDown24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

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

@@ -1,6 +1,7 @@
-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. See ChevronDown24Icon for one pointing downloads.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const ChevronUp24Icon = defineIcon({
     name: 'ChevronUp24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}

package/{dist/icons/icon-svgs/close-x-24.icon.js → src/icons/icon-svgs/close-x-24.icon.ts}

@@ -1,6 +1,7 @@
-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 x icon meant to be used as a "close" button.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const CloseX24Icon = defineIcon({
     name: 'CloseX24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <circle
                 cx="12"

package/{dist/icons/icon-svgs/commit-24.icon.js → src/icons/icon-svgs/commit-24.icon.ts}

@@ -1,6 +1,7 @@
-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 that represents a single commit in git.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Commit24Icon = defineIcon({
     name: 'Commit24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/copy-24.icon.js → src/icons/icon-svgs/copy-24.icon.ts}

@@ -1,6 +1,7 @@
-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 that represents copying something.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Copy24Icon = defineIcon({
     name: 'Copy24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/document-24.icon.js → src/icons/icon-svgs/document-24.icon.ts}

@@ -1,6 +1,7 @@
-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 that represents a single document file on a computer file system.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Document24Icon = defineIcon({
     name: 'Document24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/document-search-24.icon.js → src/icons/icon-svgs/document-search-24.icon.ts}

@@ -1,6 +1,7 @@
-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 that represents searching on a document or searching for a document.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const DocumentSearch24Icon = defineIcon({
     name: 'DocumentSearch24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/double-chevron-24.icon.js → src/icons/icon-svgs/double-chevron-24.icon.ts}

@@ -1,6 +1,7 @@
-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 icon with two opposing chevrons.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const DoubleChevron24Icon = defineIcon({
     name: 'DoubleChevron24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

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

@@ -1,6 +1,7 @@
-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.
  *
@@ -10,7 +11,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/element-24.icon.js → src/icons/icon-svgs/element-24.icon.ts}

@@ -1,6 +1,7 @@
-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.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Element24Icon = defineIcon({
     name: 'Element24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10"

package/{dist/icons/icon-svgs/external-link-24.icon.js → src/icons/icon-svgs/external-link-24.icon.ts}

@@ -1,6 +1,7 @@
-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 external link icon.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const ExternalLink24Icon = defineIcon({
     name: 'ExternalLink24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/{dist/icons/icon-svgs/eye-closed-24.icon.js → src/icons/icon-svgs/eye-closed-24.icon.ts}

@@ -1,6 +1,7 @@
-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 closed or disable eye icon.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const EyeClosed24Icon = defineIcon({
     name: 'EyeClosed24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             fill=${viraIconCssVars['vira-icon-fill-color'].value}

package/{dist/icons/icon-svgs/eye-open-24.icon.js → src/icons/icon-svgs/eye-open-24.icon.ts}

@@ -1,6 +1,7 @@
-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 open eye icon.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const EyeOpen24Icon = defineIcon({
     name: 'EyeOpen24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             fill=${viraIconCssVars['vira-icon-fill-color'].value}

package/{dist/icons/icon-svgs/filter-24.icon.js → src/icons/icon-svgs/filter-24.icon.ts}

@@ -1,6 +1,7 @@
-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 filtering.
  *
@@ -10,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
  */
 export const Filter24Icon = defineIcon({
     name: 'Filter24Icon',
-    svgTemplate: html `
+    svgTemplate: html`
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"