vira 0.7.2 → 1.0.1

package/dist/elements/common/shared-text-input-logic.d.ts

@@ -0,0 +1,38 @@
+export type SharedTextInputElementInputs = {
+    value: string;
+    /** Shown when no other text is present. Input restrictions do not apply to this property. */
+    placeholder?: string;
+    /** Set to true to trigger disabled styles and to block all user input. */
+    disabled?: boolean;
+    /**
+     * Only letters in the given string or matches to the given RegExp will be allowed.
+     * blockedInputs takes precedence over this input.
+     *
+     * For example: if allowedInputs is set to "abcd" and blockedInputs is set to "d", only "a",
+     * "b", or "c" letters will be allowed.
+     */
+    allowedInputs?: string | RegExp;
+    /** Any letters in the given string or matches to the given RegExp will be blocked. */
+    blockedInputs?: string | RegExp;
+    /** Disable all browser helps like spellchecking, autocomplete, etc. */
+    disableBrowserHelps?: boolean;
+    /** Set this to true to make the whole element size to only fit the input text. */
+    fitText?: boolean;
+};
+type IsAllowedInputs = {
+    value: string;
+    allowed: string | RegExp | undefined;
+    blocked: string | RegExp | undefined;
+};
+export declare function filterTextInputValue(inputs: IsAllowedInputs): {
+    filtered: string;
+    blocked: string;
+};
+export declare function textInputListener({ inputs, filteredValue, event, inputBlockedCallback, newValueCallback, }: {
+    inputs: SharedTextInputElementInputs;
+    filteredValue: string;
+    event: Event;
+    inputBlockedCallback: (blockedInput: string) => void;
+    newValueCallback: (newValue: string) => void;
+}): void;
+export {};

package/dist/elements/common/shared-text-input-logic.js

@@ -0,0 +1,100 @@
+import { extractEventTarget } from '@augment-vir/browser';
+function doesMatch({ input, matcher }) {
+    if (!input || !matcher) {
+        return true;
+    }
+    if (input.length > 1) {
+        return !!input.split('').every((singleInput) => doesMatch({ input: singleInput, matcher }));
+    }
+    if (matcher instanceof RegExp) {
+        return !!input.match(matcher);
+    }
+    else {
+        return matcher.includes(input);
+    }
+}
+function isAllowed({ value, allowed, blocked }) {
+    const isAllowedCharacter = allowed
+        ? doesMatch({
+            input: value,
+            matcher: allowed,
+        })
+        : true;
+    const isBlockedCharacter = blocked
+        ? doesMatch({
+            input: value,
+            matcher: blocked,
+        })
+        : false;
+    return isAllowedCharacter && !isBlockedCharacter;
+}
+export function filterTextInputValue(inputs) {
+    if (!inputs.value) {
+        return { filtered: inputs.value, blocked: '' };
+    }
+    const { filtered, blocked } = inputs.value.split('').reduce((accum, letter) => {
+        const allowed = isAllowed({ ...inputs, value: letter });
+        if (allowed) {
+            accum.filtered.push(letter);
+        }
+        else {
+            accum.blocked.push(letter);
+        }
+        return accum;
+    }, {
+        filtered: [],
+        blocked: [],
+    });
+    return {
+        filtered: filtered.join(''),
+        blocked: blocked.join(''),
+    };
+}
+export function textInputListener({ inputs, filteredValue, event, inputBlockedCallback, newValueCallback, }) {
+    if (!(event instanceof InputEvent)) {
+        throw new Error('Text input event was not an InputEvent.');
+    }
+    const inputElement = extractEventTarget(event, HTMLInputElement);
+    /**
+     * This is usually a single character, but can be a bunch of characters in some circumstances.
+     * For example, when a bunch of characters are pasted, this will be the entire pasted contents.
+     */
+    const changedText = event.data;
+    const beforeChangeText = filteredValue;
+    // this will be overwritten below if blocked characters are encountered
+    let finalText = inputElement.value ?? '';
+    /**
+     * When changedText is falsy, that means an operation other than inserting characters happened.
+     * Such as: deleting, cutting the text, etc.
+     */
+    if (changedText) {
+        if (changedText.length === 1) {
+            if (!isAllowed({
+                value: changedText,
+                allowed: inputs.allowedInputs,
+                blocked: inputs.blockedInputs,
+            })) {
+                // prevent the change from happening
+                finalText = beforeChangeText;
+                inputBlockedCallback(changedText);
+            }
+        }
+        // filters out blocked pasted letters
+        else {
+            const { filtered, blocked } = filterTextInputValue({
+                value: changedText,
+                allowed: inputs.allowedInputs,
+                blocked: inputs.blockedInputs,
+            });
+            finalText = filtered;
+            inputBlockedCallback(blocked);
+        }
+    }
+    if (inputElement.value !== finalText) {
+        // this prevents blocked inputs by simply overwriting them
+        inputElement.value = finalText;
+    }
+    if (beforeChangeText !== finalText) {
+        newValueCallback(finalText);
+    }
+}

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

@@ -3,7 +3,7 @@ import { noUserSelect } from '../../styles';
 import { viraDisabledStyles } from '../../styles/disabled';
 import { viraAnimationDurations } from '../../styles/durations';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus';
-import { removeNativeFormStyles } from '../../styles/native-styles';
+import { noNativeFormStyles } from '../../styles/native-styles';
 import { viraCssVars } from '../../styles/vira-css-vars';
 import { defineViraElement } from '../define-vira-element';
 import { ViraIcon } from '../vira-icon/vira-icon.element';
@@ -65,7 +65,7 @@ export const ViraButton = defineViraElement()({
 
         button {
             cursor: pointer;
-            ${removeNativeFormStyles};
+            ${noNativeFormStyles};
             position: relative;
             width: 100%;
             height: 100%;

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

@@ -1,5 +1,5 @@
 import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
-import { removeNativeFormStyles, viraAnimationDurations } from '../../styles';
+import { noNativeFormStyles, viraAnimationDurations } from '../../styles';
 import { defineViraElement } from '../define-vira-element';
 export var ViraCollapsibleSlotNameEnum;
 (function (ViraCollapsibleSlotNameEnum) {
@@ -17,7 +17,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         }
 
         .header-wrapper {
-            ${removeNativeFormStyles};
+            ${noNativeFormStyles};
             cursor: pointer;
         }
 

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

@@ -1,5 +1,5 @@
 import { css } from 'element-vir';
-import { viraIconColorCssVars } from '../../icons/icon-color-css-vars';
+import { viraIconCssVars } from '../../icons/icon-css-vars';
 import { defineViraElement } from '../define-vira-element';
 export const ViraIcon = defineViraElement()({
     tagName: 'vira-icon',
@@ -10,9 +10,9 @@ export const ViraIcon = defineViraElement()({
     styles: ({ hostClasses }) => css `
         :host {
             display: inline-block;
-            color: ${viraIconColorCssVars['vira-icon-color'].value};
-            fill: ${viraIconColorCssVars['vira-icon-fill-color'].value};
-            stroke: ${viraIconColorCssVars['vira-icon-stroke-color'].value};
+            color: ${viraIconCssVars['vira-icon-color'].value};
+            fill: ${viraIconCssVars['vira-icon-fill-color'].value};
+            stroke: ${viraIconCssVars['vira-icon-stroke-color'].value};
         }
 
         svg {

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

@@ -1,28 +1,10 @@
 import { ViraIconSvg } from '../../icons';
+import { SharedTextInputElementInputs } from '../common/shared-text-input-logic';
 export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
     icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
-    value: string;
-    /** Shown when no other text is present. Input restrictions do not apply to this property. */
-    placeholder?: string;
-    /** Set to true to trigger disabled styles and to block all user input. */
-    disabled?: boolean;
-    /**
-     * Only letters in the given string or matches to the given RegExp will be allowed.
-     * blockedInputs takes precedence over this input.
-     *
-     * For example: if allowedInputs is set to "abcd" and blockedInputs is set to "d", only "a",
-     * "b", or "c" letters will be allowed.
-     */
-    allowedInputs?: string | RegExp;
-    /** Any letters in the given string or matches to the given RegExp will be blocked. */
-    blockedInputs?: string | RegExp;
-    /** Disable all browser helps like spellchecking, autocomplete, etc. */
-    disableBrowserHelps?: boolean;
     /** A suffix that, if provided, is shown following the user input field. */
     suffix?: string;
-    /** Set this to true to make the whole element size to only fit the input text. */
-    fitText?: boolean;
-}, {
+} & SharedTextInputElementInputs, {
     forcedInputWidth: number;
 }, {
     /**
@@ -36,4 +18,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefinedTypedEventNameDefinition<string>;
-}, "vira-input-disabled" | "vira-input-has-value" | "vira-input-fit-text", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", import("lit-html").HTMLTemplateResult>;
+}, "vira-input-disabled" | "vira-input-fit-text", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", import("lit-html").HTMLTemplateResult>;

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

@@ -1,66 +1,15 @@
-import { classMap, css, defineElementEvent, html, listen, onResize, renderIf } from 'element-vir';
+import { css, defineElementEvent, html, listen, onResize, renderIf } from 'element-vir';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../../styles';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus';
-import { removeNativeFormStyles } from '../../styles/native-styles';
+import { noNativeFormStyles } from '../../styles/native-styles';
 import { viraCssVars } from '../../styles/vira-css-vars';
+import { filterTextInputValue, textInputListener, } from '../common/shared-text-input-logic';
 import { defineViraElement } from '../define-vira-element';
 import { ViraIcon } from '../vira-icon/vira-icon.element';
-function doesMatch({ input, matcher }) {
-    if (!input || !matcher) {
-        return true;
-    }
-    if (input.length > 1) {
-        return !!input.split('').every((singleInput) => doesMatch({ input: singleInput, matcher }));
-    }
-    if (matcher instanceof RegExp) {
-        return !!input.match(matcher);
-    }
-    else {
-        return matcher.includes(input);
-    }
-}
-function isAllowed({ value, allowed, blocked }) {
-    const isAllowedCharacter = allowed
-        ? doesMatch({
-            input: value,
-            matcher: allowed,
-        })
-        : true;
-    const isBlockedCharacter = blocked
-        ? doesMatch({
-            input: value,
-            matcher: blocked,
-        })
-        : false;
-    return isAllowedCharacter && !isBlockedCharacter;
-}
-function filterToAllowedCharactersOnly(inputs) {
-    if (!inputs.value) {
-        return { filtered: inputs.value, blocked: '' };
-    }
-    const { filtered, blocked } = inputs.value.split('').reduce((accum, letter) => {
-        const allowed = isAllowed({ ...inputs, value: letter });
-        if (allowed) {
-            accum.filtered.push(letter);
-        }
-        else {
-            accum.blocked.push(letter);
-        }
-        return accum;
-    }, {
-        filtered: [],
-        blocked: [],
-    });
-    return {
-        filtered: filtered.join(''),
-        blocked: blocked.join(''),
-    };
-}
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     hostClasses: {
         'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-input-has-value': ({ inputs }) => !!inputs.value,
         'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
     },
     cssVars: {
@@ -117,7 +66,7 @@ export const ViraInput = defineViraElement()({
                 text-align: center;
             }
             ${hostClasses['vira-input-fit-text'].selector} .size-span {
-                ${removeNativeFormStyles};
+                ${noNativeFormStyles};
                 font-family: inherit;
                 display: inline-block;
                 font-size: inherit;
@@ -135,7 +84,7 @@ export const ViraInput = defineViraElement()({
             }
 
             pre {
-                ${removeNativeFormStyles};
+                ${noNativeFormStyles};
                 font: inherit;
                 /*
                     Leave at least a few pixels for the cursor bar when there is no text at all.
@@ -166,10 +115,10 @@ export const ViraInput = defineViraElement()({
             }
 
             label {
-                ${removeNativeFormStyles};
+                ${noNativeFormStyles};
                 max-width: 100%;
                 flex-grow: 1;
-                cursor: pointer;
+                cursor: text;
                 display: inline-flex;
                 box-sizing: border-box;
                 align-items: center;
@@ -195,7 +144,7 @@ export const ViraInput = defineViraElement()({
             }
 
             input {
-                ${removeNativeFormStyles};
+                ${noNativeFormStyles};
                 cursor: text;
                 margin: ${cssVars['vira-input-padding-vertical'].value} 0;
                 flex-grow: 1;
@@ -231,6 +180,7 @@ export const ViraInput = defineViraElement()({
 
             .suffix {
                 font-weight: bold;
+                ${noUserSelect};
             }
         `;
     },
@@ -238,7 +188,7 @@ export const ViraInput = defineViraElement()({
         forcedInputWidth: 0,
     },
     renderCallback: ({ inputs, dispatch, state, updateState, events }) => {
-        const { filtered: filteredValue } = filterToAllowedCharactersOnly({
+        const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value ?? '',
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
@@ -267,9 +217,6 @@ export const ViraInput = defineViraElement()({
                         </span>
                     `)}
                 <input
-                    class=${classMap({
-            'have-value': !!filteredValue,
-        })}
                     style=${forcedInputWidthStyles}
                     autocomplete=${inputs.disableBrowserHelps ? 'off' : ''}
                     autocorrect=${inputs.disableBrowserHelps ? 'off' : ''}
@@ -278,60 +225,17 @@ export const ViraInput = defineViraElement()({
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
-            /**
-             * When attached to an input element (like here) this event type should
-             * always be InputEvent.
-             */
-            if (!(event instanceof InputEvent)) {
-                throw new Error(`Input event type mismatch: "${event.constructor.name}"`);
-            }
-            const inputElement = event.target;
-            if (!(inputElement instanceof HTMLInputElement)) {
-                throw new Error(`Failed to find input element target from input event.`);
-            }
-            /**
-             * This is usually a single character, but can be a bunch of characters in
-             * some circumstances. For example, when a bunch of characters are pasted,
-             * this will be the entire pasted contents.
-             */
-            const changedText = event.data;
-            const beforeChangeText = filteredValue;
-            // this will be overwritten below if blocked characters are encountered
-            let finalText = inputElement.value ?? '';
-            /**
-             * When changedText is falsy, that means an operation other than inserting
-             * characters happened. Such as: deleting, cutting the text, etc.
-             */
-            if (changedText) {
-                if (changedText.length === 1) {
-                    if (!isAllowed({
-                        value: changedText,
-                        allowed: inputs.allowedInputs,
-                        blocked: inputs.blockedInputs,
-                    })) {
-                        // prevent the change from happening
-                        finalText = beforeChangeText;
-                        dispatch(new events.inputBlocked(changedText));
-                    }
-                }
-                // filters out blocked pasted letters
-                else {
-                    const { filtered, blocked } = filterToAllowedCharactersOnly({
-                        value: changedText,
-                        allowed: inputs.allowedInputs,
-                        blocked: inputs.blockedInputs,
-                    });
-                    finalText = filtered;
-                    dispatch(new events.inputBlocked(blocked));
-                }
-            }
-            if (inputElement.value !== finalText) {
-                // this prevents blocked inputs by simply overwriting them
-                inputElement.value = finalText;
-            }
-            if (beforeChangeText !== finalText) {
-                dispatch(new events.valueChange(finalText));
-            }
+            textInputListener({
+                inputs,
+                filteredValue,
+                event,
+                inputBlockedCallback(blockedInput) {
+                    dispatch(new events.inputBlocked(blockedInput));
+                },
+                newValueCallback(newValue) {
+                    dispatch(new events.valueChange(newValue));
+                },
+            });
         })}
                     placeholder=${inputs.placeholder}
                 />

package/dist/icons/{icon-color-css-vars.d.ts → icon-css-vars.d.ts}

@@ -1,5 +1,6 @@
-export declare const viraIconColorCssVars: {
+export declare const viraIconCssVars: {
     'vira-icon-stroke-color': import("lit-css-vars").SingleCssVarDefinition;
     'vira-icon-fill-color': import("lit-css-vars").SingleCssVarDefinition;
+    'vira-icon-stroke-width': import("lit-css-vars").SingleCssVarDefinition;
     'vira-icon-color': import("lit-css-vars").SingleCssVarDefinition;
 };

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

@@ -13,5 +13,9 @@ const specificIconCssVars = defineCssVars({
     'vira-icon-stroke-color': genericIconColorCssVar['vira-icon-color'].value,
     /** To be used for coloring an icon's fill. */
     'vira-icon-fill-color': genericIconColorCssVar['vira-icon-color'].value,
+    'vira-icon-stroke-width': '1px',
 });
-export const viraIconColorCssVars = { ...genericIconColorCssVar, ...specificIconCssVars };
+export const viraIconCssVars = {
+    ...genericIconColorCssVar,
+    ...specificIconCssVars,
+};

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

@@ -1,4 +1,5 @@
 import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const Element16Icon = defineIcon({
     name: 'Element16Icon',
@@ -11,7 +12,7 @@ export const Element16Icon = defineIcon({
             viewBox="0 0 16 16"
         >
             <path
-                stroke-width="1"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
                 vector-effect="non-scaling-stroke"
                 d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6"
             />

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

@@ -1,16 +1,20 @@
 import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const Element24Icon = defineIcon({
     name: 'Element24Icon',
     svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
             fill="none"
-            width="24"
             height="24"
+            viewBox="0 0 24 24"
+            width="24"
         >
-            <path stroke-width="1px" d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
+            <path
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10"
+            />
         </svg>
     `,
 });

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

@@ -0,0 +1 @@
+export declare const Loader24Icon: import("../icon-svg").ViraIconSvg;

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

@@ -0,0 +1,20 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const Loader24Icon = defineIcon({
+    name: 'Loader24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+        >
+            <path
+                d="M12 8V2M16 12h6M12 16v6M8 12H2M9.17 9.17 4.93 4.93M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/loader-animated-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const LoaderAnimated24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/loader-animated-24.icon.js

@@ -0,0 +1,41 @@
+import { css, html } from 'element-vir';
+import { viraAnimationDurations } from '../../styles/durations';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+const animatedLoaderStyles = css `
+    @keyframes loader-animated-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    svg.loader-animated-24-icon {
+        animation: ${viraAnimationDurations['vira-extended-animation-duration'].value} linear
+            loader-animated-spin infinite;
+    }
+`;
+export const LoaderAnimated24Icon = defineIcon({
+    name: 'LoaderAnimated24Icon',
+    svgTemplate: html `
+        <style>
+            ${animatedLoaderStyles}
+        </style>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="loader-animated-24-icon"
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            style=${animatedLoaderStyles}
+        >
+            <path
+                d="M12 8V2M16 12h6M12 16v6M8 12H2M9.17 9.17 4.93 4.93M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

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

@@ -1,18 +1,18 @@
 import { html } from 'element-vir';
-import { viraIconColorCssVars } from '../icon-color-css-vars';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const Options24Icon = defineIcon({
     name: 'Options24Icon',
     svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <g fill="none" stroke-width="1px">
+            <g fill="none" stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}>
                 <circle cx="9.5" cy="5.5" r="2.5" />
                 <circle cx="16.5" cy="12.5" r="2.5" />
                 <circle cx="8.5" cy="18.5" r="2.5" />
             </g>
             <path
                 stroke="none"
-                fill="${viraIconColorCssVars['vira-icon-stroke-color'].value}"
+                fill="${viraIconCssVars['vira-icon-stroke-color'].value}"
                 d="M6 18a3 3 0 0 0 0 1H3v-1h3Zm5 1a3 3 0 0 0 0-1h10v1H11Zm3-7a3 3 0 0 0 0 1H3v-1h11Zm5 1a3 3 0 0 0 0-1h2v1h-2ZM7 5a3 3 0 0 0 0 1H3V5h4Zm5 1a3 3 0 0 0 0-1h9v1h-9Z"
             />
         </svg>

package/dist/icons/icon-svgs/status-failure-24.icon.js

@@ -1,5 +1,5 @@
 import { html } from 'element-vir';
-import { viraIconColorCssVars } from '../icon-color-css-vars';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const StatusFailure24Icon = defineIcon({
     name: 'StatusFailure24Icon',
@@ -16,12 +16,12 @@ export const StatusFailure24Icon = defineIcon({
                 cx="12"
                 cy="12"
                 r="9"
-                stroke=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 fill="none"
             />
             <path
                 stroke="none"
-                fill=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
                 d="m11.33 12-3.7-4.17.74-.66L12 11.25l3.63-4.08.74.66-3.7 4.17 3.7 4.17-.74.66L12 12.75l-3.63 4.08-.74-.66 3.7-4.17Z"
             />
         </svg>

package/dist/icons/icon-svgs/status-in-progress-24.icon.js

@@ -1,5 +1,5 @@
 import { html } from 'element-vir';
-import { viraIconColorCssVars } from '../icon-color-css-vars';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const StatusInProgress24Icon = defineIcon({
     name: 'StatusInProgress24Icon',
@@ -9,28 +9,28 @@ export const StatusInProgress24Icon = defineIcon({
                 cx="12"
                 cy="12"
                 r="9"
-                stroke=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 fill="none"
             />
             <circle
                 cx="7"
                 cy="12"
                 r="1"
-                fill=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke="none"
             />
             <circle
                 cx="12"
                 cy="12"
                 r="1"
-                fill=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke="none"
             />
             <circle
                 cx="17"
                 cy="12"
                 r="1"
-                fill=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke="none"
             />
         </svg>

package/dist/icons/icon-svgs/status-success-24.icon.js

@@ -1,5 +1,5 @@
 import { html } from 'element-vir';
-import { viraIconColorCssVars } from '../icon-color-css-vars';
+import { viraIconCssVars } from '../icon-css-vars';
 import { defineIcon } from '../icon-svg';
 export const StatusSuccess24Icon = defineIcon({
     name: 'StatusSuccess24Icon',
@@ -9,12 +9,12 @@ export const StatusSuccess24Icon = defineIcon({
                 cx="12"
                 cy="12"
                 r="9"
-                stroke=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 fill="none"
             />
             <path
                 d="m6.64 13.81.7-.7 2.63 2.62 6.65-7.6.74.66-7.35 8.4-3.37-3.38Z"
-                fill=${viraIconColorCssVars['vira-icon-stroke-color'].value}
+                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke="none"
             />
         </svg>

package/dist/icons/index.d.ts

@@ -1,8 +1,10 @@
 /** This file is automatically updated by update-icon-exports.ts */
-export * from './icon-color-css-vars';
+export * from './icon-css-vars';
 export * from './icon-svg';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
+export * from './icon-svgs/loader-24.icon';
+export * from './icon-svgs/loader-animated-24.icon';
 export * from './icon-svgs/options-24.icon';
 export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
@@ -10,6 +12,8 @@ export * from './icon-svgs/status-success-24.icon';
 export declare const allIconsByName: {
     readonly Element16Icon: import("./icon-svg").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg").ViraIconSvg;
+    readonly Loader24Icon: import("./icon-svg").ViraIconSvg;
+    readonly LoaderAnimated24Icon: import("./icon-svg").ViraIconSvg;
     readonly Options24Icon: import("./icon-svg").ViraIconSvg;
     readonly StatusFailure24Icon: import("./icon-svg").ViraIconSvg;
     readonly StatusInProgress24Icon: import("./icon-svg").ViraIconSvg;

package/dist/icons/index.js

@@ -1,14 +1,18 @@
 /** This file is automatically updated by update-icon-exports.ts */
 import { Element16Icon } from './icon-svgs/element-16.icon';
 import { Element24Icon } from './icon-svgs/element-24.icon';
+import { Loader24Icon } from './icon-svgs/loader-24.icon';
+import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon';
 import { Options24Icon } from './icon-svgs/options-24.icon';
 import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon';
 import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon';
 import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon';
-export * from './icon-color-css-vars';
+export * from './icon-css-vars';
 export * from './icon-svg';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
+export * from './icon-svgs/loader-24.icon';
+export * from './icon-svgs/loader-animated-24.icon';
 export * from './icon-svgs/options-24.icon';
 export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
@@ -16,6 +20,8 @@ export * from './icon-svgs/status-success-24.icon';
 export const allIconsByName = {
     Element16Icon,
     Element24Icon,
+    Loader24Icon,
+    LoaderAnimated24Icon,
     Options24Icon,
     StatusFailure24Icon,
     StatusInProgress24Icon,

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './elements';
 export * from './icons';
 export * from './styles';
-export * from './util';

package/dist/index.js

@@ -1,4 +1,3 @@
 export * from './elements';
 export * from './icons';
 export * from './styles';
-export * from './util';

package/dist/styles/durations.d.ts

@@ -1,4 +1,6 @@
 export declare const viraAnimationDurations: import("lit-css-vars").CssVarDefinitions<{
+    /** A longer duration show a full animation. */
+    'vira-extended-animation-duration': string;
     /** A longer duration to emphasize the animation. */
     'vira-pretty-animation-duration': string;
     /**

package/dist/styles/durations.js

@@ -1,5 +1,7 @@
 import { defineCssVars } from 'lit-css-vars';
 export const viraAnimationDurations = defineCssVars({
+    /** A longer duration show a full animation. */
+    'vira-extended-animation-duration': '1s',
     /** A longer duration to emphasize the animation. */
     'vira-pretty-animation-duration': '300ms',
     /**

package/dist/styles/focus.js

@@ -1,7 +1,7 @@
+import { addPx } from '@augment-vir/common';
 import { css } from 'element-vir';
 import { unsafeCSS } from 'lit';
 import { defineCssVars } from 'lit-css-vars';
-import { toPixel } from '../util/number';
 import { viraCssVars } from './vira-css-vars';
 export const viraFocusCssVars = defineCssVars({
     'vira-focus-outline-color': 'blue',
@@ -14,7 +14,7 @@ export const viraFocusCssVars = defineCssVars({
  * clicking from creating focus styles in Chrome.
  */
 export function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, outlineWidth = 3, }) {
-    const outlineSpacing = unsafeCSS(toPixel(outlineWidth + outlineGap + elementBorderSize));
+    const outlineSpacing = unsafeCSS(addPx(outlineWidth + outlineGap + elementBorderSize));
     return css `
         ${unsafeCSS(mainSelector)}::after {
             content: '';

package/dist/styles/native-styles.d.ts

@@ -1 +1,2 @@
-export declare const removeNativeFormStyles: import("element-vir").CSSResult;
+export declare const noNativeSpacing: import("element-vir").CSSResult;
+export declare const noNativeFormStyles: import("element-vir").CSSResult;

package/dist/styles/native-styles.js

@@ -1,8 +1,11 @@
 import { css } from 'element-vir';
-export const removeNativeFormStyles = css `
-    background: none;
+export const noNativeSpacing = css `
     padding: 0;
     margin: 0;
+`;
+export const noNativeFormStyles = css `
+    ${noNativeSpacing};
+    background: none;
     border: none;
     font: inherit;
     color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "0.7.2",
+    "version": "1.0.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -40,14 +40,15 @@
         "test:docs": "virmator code-in-markdown check"
     },
     "dependencies": {
-        "element-vir": "^16.3.0",
+        "@augment-vir/common": "^16.4.0",
+        "element-vir": "^16.3.1",
         "lit-css-vars": "^3.0.0",
         "spa-router-vir": "^2.1.1",
-        "type-fest": "^4.0.0"
+        "type-fest": "^4.2.0"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^16.2.0",
-        "@augment-vir/node-js": "^16.2.0",
+        "@augment-vir/browser-testing": "^16.4.0",
+        "@augment-vir/node-js": "^16.4.0",
         "@open-wc/testing": "^3.2.0",
         "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
@@ -56,11 +57,11 @@
         "@web/test-runner-commands": "^0.8.0",
         "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.2",
-        "esbuild": "^0.18.17",
+        "esbuild": "^0.19.2",
         "istanbul-smart-text-reporter": "^1.1.2",
-        "npm-check-updates": "^16.10.17",
+        "npm-check-updates": "^16.11.1",
         "typescript": "^5.1.6",
-        "vite": "^4.4.7",
+        "vite": "^4.4.9",
         "vite-tsconfig-paths": "^4.2.0"
     }
 }

package/dist/util/index.d.ts

@@ -1,2 +0,0 @@
-export * from './native-styles';
-export * from './number';

package/dist/util/index.js

@@ -1,2 +0,0 @@
-export * from './native-styles';
-export * from './number';

package/dist/util/native-styles.d.ts

@@ -1,2 +0,0 @@
-export declare const noNativeSpacing: import("element-vir").CSSResult;
-export declare const noNativeFormStyles: import("element-vir").CSSResult;

package/dist/util/native-styles.js

@@ -1,16 +0,0 @@
-import { css } from 'element-vir';
-export const noNativeSpacing = css `
-    padding: 0;
-    margin: 0;
-`;
-export const noNativeFormStyles = css `
-    ${noNativeSpacing}
-    background: none;
-    border: none;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-    text-transform: inherit;
-    text-decoration: inherit;
-    -webkit-tap-highlight-color: transparent;
-`;

package/dist/util/number.d.ts

@@ -1,2 +0,0 @@
-export declare function toPixel(value: number): string;
-export declare function toPercent(value: number): string;

package/dist/util/number.js

@@ -1,6 +0,0 @@
-export function toPixel(value) {
-    return `${value}px`;
-}
-export function toPercent(value) {
-    return `${value}%`;
-}

package/www-static/index.css

@@ -1,7 +0,0 @@
-html,
-body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-}