vira 22.2.1 → 23.0.0

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -1,7 +1,14 @@
+/**
+ * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
+ *
+ * @category Collapsible
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-collapsible-wrapper
+ */
 export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
     expanded: boolean;
 }, {
     contentHeight: number;
 }, {
-    expandChange: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
-}, "vira-collapsible-wrapper-expanded", `vira-collapsible-wrapper-${string}`, readonly ["header"]>;
+    expandChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"]>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -1,6 +1,13 @@
 import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
-import { noNativeFormStyles, viraAnimationDurations } from '../styles';
-import { defineViraElement } from './define-vira-element';
+import { noNativeFormStyles, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
+ *
+ * @category Collapsible
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-collapsible-wrapper
+ */
 export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     hostClasses: {
@@ -39,7 +46,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     stateInitStatic: {
         contentHeight: 0,
     },
-    renderCallback({ state, slotNames, updateState, dispatch, events, inputs }) {
+    render({ state, slotNames, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
             ? css `
                   height: ${state.contentHeight}px;

package/dist/elements/vira-icon.element.d.ts

@@ -1,6 +1,13 @@
-import { ViraIconSvg } from '../icons/icon-svg';
+import { ViraIconSvg } from '../icons/icon-svg.js';
+/**
+ * An element that renders a single {@link ViraIconSvg}.
+ *
+ * @category Icon
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-icon
+ */
 export declare const ViraIcon: import("element-vir").DeclarativeElementDefinition<"vira-icon", {
-    icon: Pick<ViraIconSvg, 'svgTemplate'> | undefined;
+    icon: Pick<ViraIconSvg, "svgTemplate"> | undefined;
     /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
     fitContainer?: boolean | undefined;
-}, {}, {}, "vira-icon-fit-container", `vira-icon-${string}`, readonly string[]>;
+}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly []>;

package/dist/elements/vira-icon.element.js

@@ -1,5 +1,12 @@
 import { css } from 'element-vir';
-import { defineViraElement } from './define-vira-element';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * An element that renders a single {@link ViraIconSvg}.
+ *
+ * @category Icon
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-icon
+ */
 export const ViraIcon = defineViraElement()({
     tagName: 'vira-icon',
     hostClasses: {
@@ -24,7 +31,7 @@ export const ViraIcon = defineViraElement()({
             width: 100%;
         }
     `,
-    renderCallback({ inputs }) {
+    render({ inputs }) {
         if (!inputs.icon) {
             return '';
         }

package/dist/elements/vira-image.element.d.ts

@@ -1,15 +1,15 @@
 import { Dimensions } from '@augment-vir/common';
 import { Duration, DurationUnit } from 'date-vir';
-export declare enum ViraImageSlotNameEnum {
-    Loading = "loading",
-    Error = "error"
-}
 /**
  * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
  * indicators.
  *
  * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
  * this to control the size of the loader and error slots.
+ *
+ * @category Image
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-image
  */
 export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
     /** The URL of the image to load. This is passed directly to the `<img>` element. */
@@ -40,6 +40,6 @@ export declare const ViraImage: import("element-vir").DeclarativeElementDefiniti
         [url: string]: true;
     }>;
 }, {
-    imageLoad: import("element-vir").DefinedTypedEventNameDefinition<void>;
-    imageError: import("element-vir").DefinedTypedEventNameDefinition<unknown>;
-}, "vira-image-height-constrained", `vira-image-${string}`, readonly string[]>;
+    imageLoad: import("element-vir").DefineEvent<void>;
+    imageError: import("element-vir").DefineEvent<unknown>;
+}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"]>;

package/dist/elements/vira-image.element.js

@@ -1,25 +1,28 @@
 import { wait } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
-import { LoaderAnimated24Icon, StatusFailure24Icon } from '../icons';
-import { defineViraElement } from './define-vira-element';
-import { ViraIcon } from './vira-icon.element';
-export var ViraImageSlotNameEnum;
-(function (ViraImageSlotNameEnum) {
-    ViraImageSlotNameEnum["Loading"] = "loading";
-    ViraImageSlotNameEnum["Error"] = "error";
-})(ViraImageSlotNameEnum || (ViraImageSlotNameEnum = {}));
+import { LoaderAnimated24Icon, StatusFailure24Icon } from '../icons/index.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
  * indicators.
  *
  * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
  * this to control the size of the loader and error slots.
+ *
+ * @category Image
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-image
  */
 export const ViraImage = defineViraElement()({
     tagName: 'vira-image',
     hostClasses: {
         'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
     },
+    slotNames: [
+        'loading',
+        'error',
+    ],
     events: {
         imageLoad: defineElementEvent(),
         imageError: defineElementEvent(),
@@ -83,7 +86,7 @@ export const ViraImage = defineViraElement()({
          */
         erroredUrls: {},
     },
-    renderCallback({ inputs, state, updateState, dispatch, events }) {
+    render({ inputs, state, updateState, dispatch, events, slotNames }) {
         /**
          * Saved off for use in the image listeners. This is used to eliminate race conditions
          * between image events and the input URL changing.
@@ -91,17 +94,17 @@ export const ViraImage = defineViraElement()({
         const imageUrl = inputs.imageUrl;
         const statusTemplate = state.erroredUrls[imageUrl]
             ? html `
-                  <slot class="status-wrapper" name=${ViraImageSlotNameEnum.Error}>
+                  <slot class="status-wrapper" name=${slotNames.error}>
                       <${ViraIcon.assign({ icon: StatusFailure24Icon })} class="error"></${ViraIcon}>
                   </slot>
               `
-            : !state.loadedUrls[imageUrl]
-                ? html `
-                    <slot class="status-wrapper" name=${ViraImageSlotNameEnum.Loading}>
+            : state.loadedUrls[imageUrl]
+                ? undefined
+                : html `
+                    <slot class="status-wrapper" name=${slotNames.loading}>
                         <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
                     </slot>
-                `
-                : undefined;
+                `;
         return html `
             ${renderIf(!!statusTemplate, statusTemplate)}
             <img
@@ -110,7 +113,7 @@ export const ViraImage = defineViraElement()({
         })}
                 ${listen('load', async () => {
             if (inputs._debugLoadDelay) {
-                await wait(inputs._debugLoadDelay.milliseconds);
+                await wait(inputs._debugLoadDelay);
             }
             updateState({
                 loadedUrls: {
@@ -122,7 +125,7 @@ export const ViraImage = defineViraElement()({
         })}
                 ${listen('error', async (event) => {
             if (inputs._debugLoadDelay) {
-                await wait(inputs._debugLoadDelay.milliseconds);
+                await wait(inputs._debugLoadDelay);
             }
             updateState({
                 erroredUrls: {

package/dist/elements/vira-input.element.d.ts

@@ -1,13 +1,26 @@
-import { ViraIconSvg } from '../icons';
-import { SharedTextInputElementInputs } from './shared-text-input-logic';
-export * from './shared-text-input-logic';
+import { ViraIconSvg } from '../icons/index.js';
+import { SharedTextInputElementInputs } from './shared-text-input-logic.js';
+export * from './shared-text-input-logic.js';
+/**
+ * Input types for {@link ViraInput}.
+ *
+ * @category Input
+ */
 export declare enum ViraInputType {
     Default = "text",
     Password = "password",
     Email = "email"
 }
+/**
+ * A single line input element with all listeners properly attached. Multiple types are allowed with
+ * {@link ViraInputType}.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-input
+ */
 export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
-    icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
+    icon?: undefined | Pick<ViraIconSvg, "svgTemplate">;
     /** A suffix that, if provided, is shown following the user input field. */
     suffix?: string | undefined;
     showClearButton?: boolean | undefined;
@@ -20,11 +33,11 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * Fires whenever a user input created a new value. Does not fire if all input letters are
      * filtered out due to input restrictions.
      */
-    valueChange: import("element-vir").DefinedTypedEventNameDefinition<string>;
+    valueChange: import("element-vir").DefineEvent<string>;
     /**
      * 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: import("element-vir").DefinedTypedEventNameDefinition<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly string[]>;
+    inputBlocked: import("element-vir").DefineEvent<string>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly []>;

package/dist/elements/vira-input.element.js

@@ -1,19 +1,32 @@
 import { css, defineElementEvent, html, listen, onResize, renderIf, } from 'element-vir';
-import { EyeClosed24Icon, EyeOpen24Icon } from '../icons';
-import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon';
-import { noUserSelect, viraAnimationDurations, viraBorders, viraDisabledStyles } from '../styles';
-import { createFocusStyles, viraFocusCssVars } from '../styles/focus';
-import { noNativeFormStyles } from '../styles/native-styles';
-import { defineViraElement } from './define-vira-element';
-import { filterTextInputValue, textInputListener, } from './shared-text-input-logic';
-import { ViraIcon } from './vira-icon.element';
-export * from './shared-text-input-logic';
+import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
+import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
+import { createFocusStyles, viraFocusCssVars } from '../styles/focus.js';
+import { noUserSelect, viraAnimationDurations, viraBorders, viraDisabledStyles, } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { filterTextInputValue, textInputListener, } from './shared-text-input-logic.js';
+import { ViraIcon } from './vira-icon.element.js';
+export * from './shared-text-input-logic.js';
+/**
+ * Input types for {@link ViraInput}.
+ *
+ * @category Input
+ */
 export var ViraInputType;
 (function (ViraInputType) {
     ViraInputType["Default"] = "text";
     ViraInputType["Password"] = "password";
     ViraInputType["Email"] = "email";
 })(ViraInputType || (ViraInputType = {}));
+/**
+ * A single line input element with all listeners properly attached. Multiple types are allowed with
+ * {@link ViraInputType}.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-input
+ */
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     hostClasses: {
@@ -31,7 +44,9 @@ export const ViraInput = defineViraElement()({
         'vira-input-action-button-color': '#aaaaaa',
         'vira-input-clear-button-hover-color': '#ff0000',
         'vira-input-clear-button-active-color': '#b30000',
+        // eslint-disable-next-line sonarjs/no-hardcoded-credentials
         'vira-input-show-password-button-hover-color': '#0a89ff',
+        // eslint-disable-next-line sonarjs/no-hardcoded-credentials
         'vira-input-show-password-button-active-color': '#0261ba',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
@@ -236,9 +251,9 @@ export const ViraInput = defineViraElement()({
         forcedInputWidth: 0,
         showPassword: false,
     },
-    renderCallback: ({ inputs, dispatch, state, updateState, events }) => {
+    render: ({ inputs, dispatch, state, updateState, events }) => {
         const { filtered: filteredValue } = filterTextInputValue({
-            value: inputs.value ?? '',
+            value: inputs.value,
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
@@ -252,6 +267,7 @@ export const ViraInput = defineViraElement()({
                   width: ${state.forcedInputWidth}px;
               `
             : '';
+        const shouldBlockBrowserHelps = inputs.disableBrowserHelps || inputs.type !== ViraInputType.Default;
         return html `
             <label>
                 ${iconTemplate}
@@ -268,10 +284,10 @@ export const ViraInput = defineViraElement()({
                 <input
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
-                    autocomplete=${inputs.disableBrowserHelps ? 'off' : ''}
-                    autocorrect=${inputs.disableBrowserHelps ? 'off' : ''}
-                    autocapitalize=${inputs.disableBrowserHelps ? 'off' : ''}
-                    spellcheck=${inputs.disableBrowserHelps ? 'false' : ''}
+                    autocomplete=${shouldBlockBrowserHelps ? 'off' : ''}
+                    autocorrect=${shouldBlockBrowserHelps ? 'off' : ''}
+                    autocapitalize=${shouldBlockBrowserHelps ? 'off' : ''}
+                    spellcheck=${shouldBlockBrowserHelps ? 'false' : ''}
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
@@ -303,7 +319,7 @@ export const ViraInput = defineViraElement()({
                             <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
                         </button>
                     `)}
-                ${renderIf(!!(inputs.type === ViraInputType.Password), html `
+                ${renderIf(inputs.type === ViraInputType.Password, html `
                         <button
                             class="show-password-button"
                             title="show password"

package/dist/elements/vira-link.element.d.ts

@@ -1,5 +1,13 @@
 import { FullRoute, SpaRouter } from 'spa-router-vir';
 import { RequireExactlyOne } from 'type-fest';
+/**
+ * A hyperlink wrapper element that can be configured to emit route change events rather than just
+ * being a raw link.
+ *
+ * @category Link
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-link
+ */
 export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", RequireExactlyOne<{
     /**
      * A full raw URL link that will navigate the current window away or open a new tab. If this
@@ -15,7 +23,7 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
      */
     route: {
         route: FullRoute<any, any, any>;
-        router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
+        router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
         scrollToTop?: boolean;
     };
-}>, {}, {}, `vira-link-${string}`, "vira-link-hover-color", readonly string[]>;
+}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly []>;

package/dist/elements/vira-link.element.js

@@ -1,5 +1,13 @@
 import { css, html, listen } from 'element-vir';
-import { defineViraElement } from './define-vira-element';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * A hyperlink wrapper element that can be configured to emit route change events rather than just
+ * being a raw link.
+ *
+ * @category Link
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-link
+ */
 export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
     cssVars: {
@@ -28,7 +36,7 @@ export const ViraLink = defineViraElement()({
             color: ${cssVars['vira-link-hover-color'].value};
         }
     `,
-    renderCallback({ inputs }) {
+    render({ inputs }) {
         function clickCallback(event) {
             if (!inputs.route) {
                 return;
@@ -49,7 +57,7 @@ export const ViraLink = defineViraElement()({
         else {
             const linkUrl = inputs.link
                 ? inputs.link.url
-                : inputs.route?.router.createRouteUrl(inputs.route.route);
+                : inputs.route.router.createRouteUrl(inputs.route.route);
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
             return html `
                 <a href=${linkUrl} rel="noopener noreferrer" ${listen('click', clickCallback)}>

package/dist/icons/icon-color.test-helper.d.ts

@@ -0,0 +1,6 @@
+export declare enum ColorType {
+    Color = "color",
+    Fill = "fill",
+    Stroke = "stroke"
+}
+export declare function extractIconColor(element: Element, colorType: ColorType): string;

package/dist/icons/icon-color.test-helper.js

@@ -0,0 +1,9 @@
+export var ColorType;
+(function (ColorType) {
+    ColorType["Color"] = "color";
+    ColorType["Fill"] = "fill";
+    ColorType["Stroke"] = "stroke";
+})(ColorType || (ColorType = {}));
+export function extractIconColor(element, colorType) {
+    return window.getComputedStyle(element).getPropertyValue(colorType);
+}

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

@@ -1,7 +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. */
-    'vira-icon-stroke-color': string;
+    readonly 'vira-icon-stroke-color': "currentColor";
     /** To be used for coloring an icon's fill. */
-    'vira-icon-fill-color': string;
-    'vira-icon-stroke-width': string;
+    readonly 'vira-icon-fill-color': "none";
+    readonly 'vira-icon-stroke-width': "1px";
 }>;

package/dist/icons/icon-css-vars.js

@@ -1,4 +1,11 @@
 import { defineCssVars } from 'lit-css-vars';
+/**
+ * CSS vars that are supported by all Vira SVG icons.
+ *
+ * @category Icon
+ * @category CSS Vars
+ * @category Styles
+ */
 export const viraIconCssVars = defineCssVars({
     /** To be used for coloring an icon's stroke. */
     'vira-icon-stroke-color': 'currentColor',

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

@@ -1,11 +1,27 @@
 import { TemplateResult } from 'element-vir';
-import { viraIconCssVars } from './icon-css-vars';
+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 declare function defineIcon({ name, svgTemplate, }: {
     name: string;
     svgTemplate: TemplateResult;
 }): ViraIconSvg;
+/**
+ * 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 declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -1,7 +1,12 @@
 import { getObjectTypedKeys } from '@augment-vir/common';
 import { html } from 'element-vir';
-import { getAssertedValidColor } from '../styles/color';
-import { viraIconCssVars } from './icon-css-vars';
+import { getAssertedValidColor } from '../styles/color.js';
+import { viraIconCssVars } from './icon-css-vars.js';
+/**
+ * A function used to define an individual Vira icon SVG.
+ *
+ * @category Icon
+ */
 export function defineIcon({ name, svgTemplate, }) {
     const iconSvg = {
         name,
@@ -9,6 +14,12 @@ export function defineIcon({ name, svgTemplate, }) {
     };
     return iconSvg;
 }
+/**
+ * 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, colors) {
     const colorStyles = getObjectTypedKeys(colors)
         .map((cssVarName) => {

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

@@ -1 +1,8 @@
-export declare const Check24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * A checkmark.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/check24icon
+ */
+export declare const Check24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/check-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A checkmark.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/check24icon
+ */
 export const Check24Icon = defineIcon({
     name: 'Check24Icon',
     svgTemplate: html `

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

@@ -1 +1,8 @@
-export declare const ChevronUp24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * A chevron that points upwards. For an icon that points downwards, rotate this icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/chevronup24icon
+ */
+export declare const ChevronUp24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/chevron-up-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A chevron that points upwards. For an icon that points downwards, rotate this icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/chevronup24icon
+ */
 export const ChevronUp24Icon = defineIcon({
     name: 'ChevronUp24Icon',
     svgTemplate: html `

package/dist/icons/icon-svgs/close-x-24.icon.d.ts

@@ -1 +1,8 @@
-export declare const CloseX24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * An x icon meant to be used as a "close" button.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/closex24icon
+ */
+export declare const CloseX24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/close-x-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An x icon meant to be used as a "close" button.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/closex24icon
+ */
 export const CloseX24Icon = defineIcon({
     name: 'CloseX24Icon',
     svgTemplate: html `

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

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

package/dist/icons/icon-svgs/element-16.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon symbol that represents an HTML element.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/element16icon
+ */
 export const Element16Icon = defineIcon({
     name: 'Element16Icon',
     svgTemplate: html `

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

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