vira 0.2.0 → 0.3.1

package/dist/element-book/all-element-book-entries.js

@@ -1,15 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.allElementBookEntries = void 0;
-const elements_book_1 = require("../elements/elements.book");
-const vira_button_element_book_1 = require("../elements/vira-button/vira-button.element.book");
-const vira_collapsible_wrapper_element_book_1 = require("../elements/vira-collapsible/vira-collapsible-wrapper.element.book");
-const vira_icon_element_book_1 = require("../elements/vira-icon/vira-icon.element.book");
-const icons_book_1 = require("../icons/icons.book");
-exports.allElementBookEntries = [
-    elements_book_1.elementsBookChapter,
-    ...icons_book_1.iconBookEntries,
-    ...vira_button_element_book_1.viraButtonBookEntries,
-    ...vira_collapsible_wrapper_element_book_1.viraCollapsibleBookEntries,
-    ...vira_icon_element_book_1.viraIconBookEntries,
+import { elementsBookChapter } from '../elements/elements.book';
+import { viraButtonBookEntries } from '../elements/vira-button/vira-button.element.book';
+import { viraCollapsibleBookEntries } from '../elements/vira-collapsible/vira-collapsible-wrapper.element.book';
+import { viraIconBookEntries } from '../elements/vira-icon/vira-icon.element.book';
+import { viraInputBookEntries } from '../elements/vira-input/vira-input.element.book';
+import { iconBookEntries } from '../icons/icons.book';
+export const allElementBookEntries = [
+    elementsBookChapter,
+    ...iconBookEntries,
+    ...viraButtonBookEntries,
+    ...viraCollapsibleBookEntries,
+    ...viraIconBookEntries,
+    ...viraInputBookEntries,
 ];

package/dist/element-book/book-helpers/create-element-book-url.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createElementBookUrl = void 0;
-const common_1 = require("@augment-vir/common");
+import { isTruthy, joinUrlParts } from '@augment-vir/common';
 const potentialBasePath = '/vira';
-function createElementBookUrl(...urlParts) {
+export function createElementBookUrl(...urlParts) {
     const hasBasePath = globalThis.location.pathname.startsWith(potentialBasePath);
     const allParts = [
         hasBasePath ? potentialBasePath : '',
         ...urlParts,
-    ].filter(common_1.isTruthy);
-    return (0, common_1.joinUrlParts)(...allParts);
+    ].filter(isTruthy);
+    return joinUrlParts(...allParts);
 }
-exports.createElementBookUrl = createElementBookUrl;

package/dist/element-book/vira-book-app.element.js

@@ -1,19 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViraBookApp = void 0;
-const element_book_1 = require("element-book");
-const element_vir_1 = require("element-vir");
-const all_element_book_entries_1 = require("./all-element-book-entries");
-exports.ViraBookApp = (0, element_vir_1.defineElementNoInputs)({
+import { ElementBookApp, ElementBookSlotName } from 'element-book';
+import { assign, css, defineElementNoInputs, html } from 'element-vir';
+import { allElementBookEntries } from './all-element-book-entries';
+export const ViraBookApp = defineElementNoInputs({
     tagName: 'vira-book-app',
-    styles: (0, element_vir_1.css) `
+    styles: css `
         :host {
             display: block;
             height: 100%;
             width: 100%;
         }
 
-        ${element_book_1.ElementBookApp} {
+        ${ElementBookApp} {
             height: 100%;
             width: 100%;
         }
@@ -26,19 +23,19 @@ exports.ViraBookApp = (0, element_vir_1.defineElementNoInputs)({
         }
     `,
     renderCallback() {
-        return (0, element_vir_1.html) `
-            <${element_book_1.ElementBookApp}
-                ${(0, element_vir_1.assign)(element_book_1.ElementBookApp, {
+        return html `
+            <${ElementBookApp}
+                ${assign(ElementBookApp, {
             internalRouterConfig: {
                 basePath: 'vira',
                 useInternalRouter: true,
             },
-            entries: all_element_book_entries_1.allElementBookEntries,
+            entries: allElementBookEntries,
             themeColor: '#33ccff',
         })}
             >
-                <h1 slot=${element_book_1.ElementBookSlotName.NavHeader}>Vira</h1>
-            </${element_book_1.ElementBookApp}>
+                <h1 slot=${ElementBookSlotName.NavHeader}>Vira</h1>
+            </${ElementBookApp}>
         `;
     },
 });

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

@@ -1,13 +1,9 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineViraElementNoInputs = exports.defineViraElement = exports.ViraTagNamePrefix = void 0;
-const element_vir_1 = require("element-vir");
-exports.ViraTagNamePrefix = `vira-`;
-_a = (0, element_vir_1.wrapDefineElement)({
+import { wrapDefineElement } from 'element-vir';
+export const ViraTagNamePrefix = `vira-`;
+export const { defineElement: defineViraElement, defineElementNoInputs: defineViraElementNoInputs } = wrapDefineElement({
     assertInputs: (inputs) => {
-        if (!inputs.tagName.startsWith(exports.ViraTagNamePrefix)) {
-            throw new Error(`Tag name should start with '${exports.ViraTagNamePrefix}' but got '${inputs.tagName}'`);
+        if (!inputs.tagName.startsWith(ViraTagNamePrefix)) {
+            throw new Error(`Tag name should start with '${ViraTagNamePrefix}' but got '${inputs.tagName}'`);
         }
     },
-}), exports.defineViraElement = _a.defineElement, exports.defineViraElementNoInputs = _a.defineElementNoInputs;
+});

package/dist/elements/index.d.ts

@@ -3,3 +3,4 @@ export * from './define-vira-element';
 export * from './vira-button/vira-button.element';
 export * from './vira-collapsible/vira-collapsible-wrapper.element';
 export * from './vira-icon/vira-icon.element';
+export * from './vira-input/vira-input.element';

package/dist/elements/index.js

@@ -1,21 +1,6 @@
-"use strict";
 /** This file is automatically updated by update-element-exports.ts */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./define-vira-element"), exports);
-__exportStar(require("./vira-button/vira-button.element"), exports);
-__exportStar(require("./vira-collapsible/vira-collapsible-wrapper.element"), exports);
-__exportStar(require("./vira-icon/vira-icon.element"), exports);
+export * from './define-vira-element';
+export * from './vira-button/vira-button.element';
+export * from './vira-collapsible/vira-collapsible-wrapper.element';
+export * from './vira-icon/vira-icon.element';
+export * from './vira-input/vira-input.element';

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

@@ -5,7 +5,7 @@ export declare enum ViraButtonStyleEnum {
 }
 export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", {
     text?: string;
-    icon?: undefined | ViraIconSvg;
+    icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
     disabled?: boolean | undefined;
     buttonStyle?: ViraButtonStyleEnum | undefined;
-}, {}, {}, "vira-button-outline-style" | "vira-button-disabled", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", import("lit-html").HTMLTemplateResult>;
+}, {}, {}, "vira-button-outline-style" | "vira-button-disabled", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color" | "vira-button-padding", import("lit-html").HTMLTemplateResult>;

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

@@ -1,20 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViraButton = exports.ViraButtonStyleEnum = void 0;
-const element_vir_1 = require("element-vir");
-const styles_1 = require("../../styles");
-const disabled_1 = require("../../styles/disabled");
-const durations_1 = require("../../styles/durations");
-const focus_1 = require("../../styles/focus");
-const native_styles_1 = require("../../styles/native-styles");
-const define_vira_element_1 = require("../define-vira-element");
-const vira_icon_element_1 = require("../vira-icon/vira-icon.element");
-var ViraButtonStyleEnum;
+import { assign, css, html } from 'element-vir';
+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 { viraCssVars } from '../../styles/vira-css-vars';
+import { defineViraElement } from '../define-vira-element';
+import { ViraIcon } from '../vira-icon/vira-icon.element';
+export var ViraButtonStyleEnum;
 (function (ViraButtonStyleEnum) {
     ViraButtonStyleEnum["Default"] = "vira-button-default";
     ViraButtonStyleEnum["Outline"] = "vira-button-outline";
-})(ViraButtonStyleEnum = exports.ViraButtonStyleEnum || (exports.ViraButtonStyleEnum = {}));
-exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
+})(ViraButtonStyleEnum || (ViraButtonStyleEnum = {}));
+export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
         'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyleEnum.Outline,
@@ -29,8 +27,9 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         'vira-button-secondary-color': 'white',
         'vira-button-internal-foreground-color': '',
         'vira-button-internal-background-color': '',
+        'vira-button-padding': '5px 10px',
     },
-    styles: ({ hostClasses, cssVars }) => (0, element_vir_1.css) `
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             font-weight: bold;
             display: inline-flex;
@@ -38,10 +37,10 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
             vertical-align: middle;
             align-items: center;
             box-sizing: border-box;
-            ${styles_1.noUserSelect};
+            ${noUserSelect};
             ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-color'].value};
             ${cssVars['vira-button-internal-foreground-color'].name}: ${cssVars['vira-button-secondary-color'].value};
-            ${focus_1.viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-button-primary-hover-color'].value}
+            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-button-primary-hover-color'].value}
         }
 
         :host(:hover) button,
@@ -55,7 +54,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         }
 
         ${hostClasses['vira-button-disabled'].selector} {
-            ${disabled_1.viraDisabledStyles};
+            ${viraDisabledStyles};
         }
 
         ${hostClasses['vira-button-outline-style'].selector} button {
@@ -65,7 +64,8 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         }
 
         button {
-            ${native_styles_1.removeNativeFormStyles};
+            cursor: pointer;
+            ${removeNativeFormStyles};
             position: relative;
             width: 100%;
             height: 100%;
@@ -75,41 +75,41 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            border-radius: 8px;
+            border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
             background-color: ${cssVars['vira-button-internal-background-color'].value};
             color: ${cssVars['vira-button-internal-foreground-color'].value};
-            padding: 5px 10px;
-            transition: color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
+            padding: ${cssVars['vira-button-padding'].value};
+            transition: color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
                 background-color
-                    ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
-                border-color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value};
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value},
+                border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
         }
 
-        ${(0, focus_1.createFocusStyles)({
+        ${createFocusStyles({
         mainSelector: 'button:focus:focus-visible:not(:active):not([disabled])',
         elementBorderSize: 2,
     })}
 
-        button ${vira_icon_element_1.ViraIcon} + .text-template {
+        button ${ViraIcon} + .text-template {
             margin-left: 8px;
         }
     `,
     renderCallback: ({ inputs }) => {
         const iconTemplate = inputs.icon
-            ? (0, element_vir_1.html) `
-                  <${vira_icon_element_1.ViraIcon}
-                      ${(0, element_vir_1.assign)(vira_icon_element_1.ViraIcon, {
+            ? html `
+                  <${ViraIcon}
+                      ${assign(ViraIcon, {
                 icon: inputs.icon,
             })}
-                  ></${vira_icon_element_1.ViraIcon}>
+                  ></${ViraIcon}>
               `
             : '';
         const textTemplate = inputs.text
-            ? (0, element_vir_1.html) `
+            ? html `
                   <span class="text-template">${inputs.text}</span>
               `
             : '';
-        return (0, element_vir_1.html) `
+        return html `
             <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
         `;
     },

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

@@ -1,27 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViraCollapsibleWrapper = exports.ViraCollapsibleSlotNameEnum = void 0;
-const element_vir_1 = require("element-vir");
-const styles_1 = require("../../styles");
-const define_vira_element_1 = require("../define-vira-element");
-var ViraCollapsibleSlotNameEnum;
+import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
+import { removeNativeFormStyles, viraAnimationDurations } from '../../styles';
+import { defineViraElement } from '../define-vira-element';
+export var ViraCollapsibleSlotNameEnum;
 (function (ViraCollapsibleSlotNameEnum) {
     ViraCollapsibleSlotNameEnum["Header"] = "header";
-})(ViraCollapsibleSlotNameEnum = exports.ViraCollapsibleSlotNameEnum || (exports.ViraCollapsibleSlotNameEnum = {}));
-exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()({
+})(ViraCollapsibleSlotNameEnum || (ViraCollapsibleSlotNameEnum = {}));
+export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     hostClasses: {
         'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
     },
-    styles: ({ hostClasses }) => (0, element_vir_1.css) `
+    styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             flex-direction: column;
         }
 
         .header-wrapper {
+            ${removeNativeFormStyles};
             cursor: pointer;
-            ${styles_1.removeNativeFormStyles};
         }
 
         .content-wrapper,
@@ -32,7 +29,7 @@ exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()(
         }
 
         .collapsing-element {
-            transition: height ${styles_1.viraAnimationDurations['vira-pretty-animation-duration'].value};
+            transition: height ${viraAnimationDurations['vira-pretty-animation-duration'].value};
             overflow: hidden;
         }
         ${hostClasses['vira-collapsible-wrapper-expanded'].name} .collapsing-element {
@@ -40,23 +37,23 @@ exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()(
         }
     `,
     events: {
-        expandChange: (0, element_vir_1.defineElementEvent)(),
+        expandChange: defineElementEvent(),
     },
     stateInitStatic: {
         contentHeight: 0,
     },
     renderCallback({ state, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
-            ? (0, element_vir_1.css) `
+            ? css `
                   height: ${state.contentHeight}px;
               `
-            : (0, element_vir_1.css) `
+            : css `
                   height: 0;
               `;
-        return (0, element_vir_1.html) `
+        return html `
             <button
                 class="header-wrapper"
-                ${(0, element_vir_1.listen)('click', () => {
+                ${listen('click', () => {
             dispatch(new events.expandChange(!inputs.expanded));
         })}
             >
@@ -64,7 +61,7 @@ exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()(
             </button>
             <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
                 <div
-                    ${(0, element_vir_1.onResize)(({ contentRect }) => {
+                    ${onResize(({ contentRect }) => {
             updateState({ contentHeight: contentRect.height });
         })}
                     class="content-wrapper"

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

@@ -1,6 +1,6 @@
 import { ViraIconSvg } from '../../icons/icon-svg';
 export declare const ViraIcon: import("element-vir").DeclarativeElementDefinition<"vira-icon", {
-    icon: ViraIconSvg | 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}`, import("lit-html").TemplateResult | "">;

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

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViraIcon = void 0;
-const element_vir_1 = require("element-vir");
-const icon_color_css_vars_1 = require("../../icons/icon-color-css-vars");
-const define_vira_element_1 = require("../define-vira-element");
-exports.ViraIcon = (0, define_vira_element_1.defineViraElement)()({
+import { css } from 'element-vir';
+import { viraIconColorCssVars } from '../../icons/icon-color-css-vars';
+import { defineViraElement } from '../define-vira-element';
+export const ViraIcon = defineViraElement()({
     tagName: 'vira-icon',
     hostClasses: {
         /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
         'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer,
     },
-    styles: ({ hostClasses }) => (0, element_vir_1.css) `
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-block;
-            color: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-color'].value};
-            fill: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-fill-color'].value};
-            stroke: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-stroke-color'].value};
+            color: ${viraIconColorCssVars['vira-icon-color'].value};
+            fill: ${viraIconColorCssVars['vira-icon-fill-color'].value};
+            stroke: ${viraIconColorCssVars['vira-icon-stroke-color'].value};
         }
 
         svg {

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

@@ -0,0 +1,39 @@
+import { ViraIconSvg } from '../../icons';
+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;
+}, {
+    forcedInputWidth: number;
+}, {
+    /**
+     * 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>;
+    /**
+     * 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-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>;

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

@@ -0,0 +1,350 @@
+import { assign, classMap, 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 { viraCssVars } from '../../styles/vira-css-vars';
+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: {
+        'vira-input-placeholder-color': '#ccc',
+        'vira-input-text-color': 'black',
+        'vira-input-border-color': '#ccc',
+        'vira-input-focus-border-color': '#59B1FF',
+        'vira-input-text-selection-color': '#CFE9FF',
+        'vira-input-padding-horizontal': '10px',
+        'vira-input-padding-vertical': '6px',
+    },
+    events: {
+        /**
+         * 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(),
+        /**
+         * 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(),
+    },
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            :host {
+                position: relative;
+                display: inline-flex;
+                width: 224px;
+                box-sizing: border-box;
+                ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-input-focus-border-color'].value};
+                color: ${cssVars['vira-input-text-color'].value};
+            }
+
+            ${hostClasses['vira-input-disabled'].selector} {
+                ${viraDisabledStyles};
+            }
+
+            ${hostClasses['vira-input-fit-text'].selector} {
+                width: unset;
+            }
+            ${hostClasses['vira-input-fit-text'].selector} input {
+                flex-grow: 0;
+            }
+            ${hostClasses['vira-input-fit-text'].selector} input.has-value {
+                /*
+                    Account for weird Safari <input> behavior with text alignment and size. so we
+                    don't lose a pixel on the left side.
+                    Only apply this when <input> has a value, otherwise externally-set width and a
+                    placeholder input will cause the text selector bar to initially be in the center
+                    of the element.
+                */
+                text-align: center;
+            }
+            ${hostClasses['vira-input-fit-text'].selector} .size-span {
+                ${removeNativeFormStyles};
+                font-family: inherit;
+                display: inline-block;
+                font-size: inherit;
+                line-height: inherit;
+                box-sizing: border-box;
+                position: absolute;
+                opacity: 0;
+                visibility: hidden;
+                pointer-events: none;
+                z-index: -1;
+                width: min-content;
+                ${noUserSelect};
+                vertical-align: middle;
+                max-height: 100%;
+            }
+
+            pre {
+                ${removeNativeFormStyles};
+                font: inherit;
+                /*
+                    Leave at least a few pixels for the cursor bar when there is no text at all.
+                    This also accounts for a weird Safari <input> behavior where the text moves
+                    around if it's not given a tiny bit of padding.
+                */
+                padding-left: 2px;
+                display: block;
+            }
+
+            .border-style {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
+                z-index: 0;
+                pointer-events: none;
+            }
+
+            .label-border {
+                top: -1px;
+                left: -1px;
+                border: 1px solid ${cssVars['vira-input-border-color'].value};
+                transition: border
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            }
+
+            label {
+                ${removeNativeFormStyles};
+                max-width: 100%;
+                flex-grow: 1;
+                cursor: pointer;
+                display: inline-flex;
+                box-sizing: border-box;
+                align-items: center;
+                position: relative;
+                padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
+                border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
+                background-color: transparent;
+                /*
+                    Border colors are actually applied via the .label-border class. However, we must
+                    apply a border here still so that it takes up space.
+                */
+                border: 1px solid transparent;
+                gap: 4px;
+            }
+
+            ${createFocusStyles({
+            mainSelector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
+            elementBorderSize: 0,
+        })}
+
+            ${ViraIcon} {
+                margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
+            }
+
+            input {
+                ${removeNativeFormStyles};
+                cursor: text;
+                margin: ${cssVars['vira-input-padding-vertical'].value} 0;
+                flex-grow: 1;
+                max-width: 100%;
+                /* fix input element not shrinking by default */
+                width: 0;
+                text-overflow: ellipsis;
+                box-sizing: border-box;
+                overflow: hidden;
+            }
+
+            ::selection {
+                background: ${cssVars['vira-input-text-selection-color']
+            .value}; /* WebKit/Blink Browsers */
+            }
+            ::-moz-selection {
+                background: ${cssVars['vira-input-text-selection-color']
+            .value}; /* Gecko Browsers */
+            }
+
+            input:placeholder-shown {
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            input:focus {
+                outline: none;
+            }
+
+            input::placeholder {
+                color: ${cssVars['vira-input-placeholder-color'].value};
+            }
+
+            .suffix {
+                font-weight: bold;
+            }
+        `;
+    },
+    stateInitStatic: {
+        forcedInputWidth: 0,
+    },
+    renderCallback: ({ inputs, dispatch, state, updateState, events }) => {
+        const { filtered: filteredValue } = filterToAllowedCharactersOnly({
+            value: inputs.value ?? '',
+            allowed: inputs.allowedInputs,
+            blocked: inputs.blockedInputs,
+        });
+        const iconTemplate = inputs.icon
+            ? html `
+                  <${ViraIcon} ${assign(ViraIcon, { icon: inputs.icon })}></${ViraIcon}>
+              `
+            : '';
+        const forcedInputWidthStyles = inputs.fitText
+            ? css `
+                  width: ${state.forcedInputWidth}px;
+              `
+            : '';
+        return html `
+            <label>
+                ${iconTemplate}
+                ${renderIf(!!inputs.fitText, html `
+                        <span
+                            class="size-span"
+                            ${onResize(({ contentRect }) => {
+            updateState({ forcedInputWidth: contentRect.width });
+        })}
+                        >
+                            <pre>${filteredValue || inputs.placeholder || ''}</pre>
+                        </span>
+                    `)}
+                <input
+                    class=${classMap({
+            'have-value': !!filteredValue,
+        })}
+                    style=${forcedInputWidthStyles}
+                    autocomplete=${inputs.disableBrowserHelps ? 'off' : ''}
+                    autocorrect=${inputs.disableBrowserHelps ? 'off' : ''}
+                    autocapitalize=${inputs.disableBrowserHelps ? 'off' : ''}
+                    spellcheck=${inputs.disableBrowserHelps ? 'false' : ''}
+                    ?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));
+            }
+        })}
+                    placeholder=${inputs.placeholder}
+                />
+                ${renderIf(!!inputs.suffix, html `
+                        <div class="suffix">${inputs.suffix}</div>
+                    `)}
+                <!--
+                    These separate style elements are necessary so that we can select them as
+                    siblings of the focused <input> element.
+                -->
+                <div class="border-style focus-border"></div>
+                <div class="border-style label-border"></div>
+            </label>
+        `;
+    },
+});

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

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viraIconColorCssVars = void 0;
-const lit_css_vars_1 = require("lit-css-vars");
-const genericIconColorCssVar = (0, lit_css_vars_1.defineCssVars)({
+import { defineCssVars } from 'lit-css-vars';
+const genericIconColorCssVar = defineCssVars({
     /**
      * Specifies the icon color as a whole. This will color both the icon stroke and icon fill
      * colors unless those respective CSS vars are specifically overridden. This CSS var value
@@ -11,10 +8,10 @@ const genericIconColorCssVar = (0, lit_css_vars_1.defineCssVars)({
      */
     'vira-icon-color': 'currentColor',
 });
-const specificIconCssVars = (0, lit_css_vars_1.defineCssVars)({
+const specificIconCssVars = defineCssVars({
     /** To be used for coloring an icon's stroke. */
     '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,
 });
-exports.viraIconColorCssVars = { ...genericIconColorCssVar, ...specificIconCssVars };
+export const viraIconColorCssVars = { ...genericIconColorCssVar, ...specificIconCssVars };

package/dist/icons/icon-svg.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineIcon = void 0;
-function defineIcon({ name, svgTemplate, }) {
+export function defineIcon({ name, svgTemplate, }) {
     const iconSvg = {
         name,
         svgTemplate,
     };
     return iconSvg;
 }
-exports.defineIcon = defineIcon;

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

@@ -1,21 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element16Icon = void 0;
-const element_vir_1 = require("element-vir");
-const icon_svg_1 = require("../icon-svg");
-exports.Element16Icon = (0, icon_svg_1.defineIcon)({
+import { html } from 'element-vir';
+import { defineIcon } from '../icon-svg';
+export const Element16Icon = defineIcon({
     name: 'Element16Icon',
-    svgTemplate: (0, element_vir_1.html) `
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            xml:space="preserve"
             fill="none"
             width="16"
             height="16"
             viewBox="0 0 16 16"
-            stroke-width="1px"
         >
-            <path d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6" />
+            <path
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+                d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6"
+            />
         </svg>
     `,
 });

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

@@ -1,21 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Element24Icon = void 0;
-const element_vir_1 = require("element-vir");
-const icon_svg_1 = require("../icon-svg");
-exports.Element24Icon = (0, icon_svg_1.defineIcon)({
+import { html } from 'element-vir';
+import { defineIcon } from '../icon-svg';
+export const Element24Icon = defineIcon({
     name: 'Element24Icon',
-    svgTemplate: (0, element_vir_1.html) `
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            xml:space="preserve"
             viewBox="0 0 24 24"
             fill="none"
             width="24"
             height="24"
-            stroke-width="1px"
         >
-            <path d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
+            <path stroke-width="1px" d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
         </svg>
     `,
 });

package/dist/icons/index.js

@@ -1,27 +1,10 @@
-"use strict";
 /** This file is automatically updated by update-icon-exports.ts */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.allIconsByName = void 0;
-const element_16_icon_1 = require("./icon-svgs/element-16.icon");
-const element_24_icon_1 = require("./icon-svgs/element-24.icon");
-__exportStar(require("./icon-svg"), exports);
-__exportStar(require("./icon-svgs/element-16.icon"), exports);
-__exportStar(require("./icon-svgs/element-24.icon"), exports);
-exports.allIconsByName = {
-    Element16Icon: element_16_icon_1.Element16Icon,
-    Element24Icon: element_24_icon_1.Element24Icon,
+import { Element16Icon } from './icon-svgs/element-16.icon';
+import { Element24Icon } from './icon-svgs/element-24.icon';
+export * from './icon-svg';
+export * from './icon-svgs/element-16.icon';
+export * from './icon-svgs/element-24.icon';
+export const allIconsByName = {
+    Element16Icon,
+    Element24Icon,
 };

package/dist/index.js

@@ -1,20 +1,4 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./elements"), exports);
-__exportStar(require("./icons"), exports);
-__exportStar(require("./styles"), exports);
-__exportStar(require("./util"), exports);
+export * from './elements';
+export * from './icons';
+export * from './styles';
+export * from './util';

package/dist/styles/disabled.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viraDisabledStyles = void 0;
-const element_vir_1 = require("element-vir");
-exports.viraDisabledStyles = (0, element_vir_1.css) `
+import { css } from 'element-vir';
+export const viraDisabledStyles = css `
     pointer-events: none;
     opacity: 0.3;
 `;

package/dist/styles/durations.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viraAnimationDurations = void 0;
-const lit_css_vars_1 = require("lit-css-vars");
-exports.viraAnimationDurations = (0, lit_css_vars_1.defineCssVars)({
+import { defineCssVars } from 'lit-css-vars';
+export const viraAnimationDurations = defineCssVars({
     /** A longer duration to emphasize the animation. */
     'vira-pretty-animation-duration': '300ms',
     /**

package/dist/styles/focus.d.ts

@@ -1,5 +1,6 @@
 export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
     'vira-focus-outline-color': string;
+    'vira-focus-outline-border-radius': import("element-vir").CSSResult;
 }>;
 /**
  * Create styles that look like an outline for the given selector.
@@ -17,4 +18,5 @@ export declare function createFocusStyles({ mainSelector, elementBorderSize, out
     elementBorderSize: number;
     outlineGap?: number;
     outlineWidth?: number;
+    borderRadius?: number;
 }): import("element-vir").CSSResult;

package/dist/styles/focus.js

@@ -1,12 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFocusStyles = exports.viraFocusCssVars = void 0;
-const element_vir_1 = require("element-vir");
-const lit_1 = require("lit");
-const lit_css_vars_1 = require("lit-css-vars");
-const number_1 = require("../util/number");
-exports.viraFocusCssVars = (0, lit_css_vars_1.defineCssVars)({
+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',
+    'vira-focus-outline-border-radius': css `calc(${viraCssVars['vira-form-input-border-radius'].value} + 4px)`,
 });
 /**
  * Create styles that look like an outline for the given selector.
@@ -14,10 +13,10 @@ exports.viraFocusCssVars = (0, lit_css_vars_1.defineCssVars)({
  * It is recommended to use the pseudo selectors ":focus:focus-visible:not(:active)" to preventing
  * clicking from creating focus styles in Chrome.
  */
-function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, outlineWidth = 3, }) {
-    const outlineSpacing = (0, lit_1.unsafeCSS)((0, number_1.toPixel)(outlineWidth + outlineGap + elementBorderSize));
-    return (0, element_vir_1.css) `
-        ${(0, lit_1.unsafeCSS)(mainSelector)}::after {
+export function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, outlineWidth = 3, }) {
+    const outlineSpacing = unsafeCSS(toPixel(outlineWidth + outlineGap + elementBorderSize));
+    return css `
+        ${unsafeCSS(mainSelector)}::after {
             content: '';
             top: calc(${outlineSpacing} * -1);
             left: calc(${outlineSpacing} * -1);
@@ -26,10 +25,9 @@ function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, ou
             height: calc(100% + calc(${outlineSpacing} * 2));
             box-sizing: border-box;
             pointer-events: none;
-            border: ${outlineWidth}px solid ${exports.viraFocusCssVars['vira-focus-outline-color'].value};
-            border-radius: 12px;
+            border: ${outlineWidth}px solid ${viraFocusCssVars['vira-focus-outline-color'].value};
+            border-radius: ${viraFocusCssVars['vira-focus-outline-border-radius'].value};
             z-index: 100;
         }
     `;
 }
-exports.createFocusStyles = createFocusStyles;

package/dist/styles/index.js

@@ -1,21 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./disabled"), exports);
-__exportStar(require("./durations"), exports);
-__exportStar(require("./focus"), exports);
-__exportStar(require("./native-styles"), exports);
-__exportStar(require("./user-select"), exports);
+export * from './disabled';
+export * from './durations';
+export * from './focus';
+export * from './native-styles';
+export * from './user-select';

package/dist/styles/native-styles.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeNativeFormStyles = void 0;
-const element_vir_1 = require("element-vir");
-exports.removeNativeFormStyles = (0, element_vir_1.css) `
+import { css } from 'element-vir';
+export const removeNativeFormStyles = css `
     background: none;
     padding: 0;
     margin: 0;
     border: none;
     font: inherit;
     color: inherit;
-    cursor: pointer;
     text-transform: inherit;
     text-decoration: inherit;
     -webkit-tap-highlight-color: transparent;

package/dist/styles/user-select.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.noUserSelect = void 0;
-const element_vir_1 = require("element-vir");
-exports.noUserSelect = (0, element_vir_1.css) `
+import { css } from 'element-vir';
+export const noUserSelect = css `
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
     user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

package/dist/styles/vira-css-vars.d.ts

@@ -0,0 +1,3 @@
+export declare const viraCssVars: import("lit-css-vars").CssVarDefinitions<{
+    'vira-form-input-border-radius': string;
+}>;

package/dist/styles/vira-css-vars.js

@@ -0,0 +1,4 @@
+import { defineCssVars } from 'lit-css-vars';
+export const viraCssVars = defineCssVars({
+    'vira-form-input-border-radius': '8px',
+});

package/dist/util/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./number"), exports);
+export * from './number';

package/dist/util/number.js

@@ -1,11 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toPercent = exports.toPixel = void 0;
-function toPixel(value) {
+export function toPixel(value) {
     return `${value}px`;
 }
-exports.toPixel = toPixel;
-function toPercent(value) {
+export function toPercent(value) {
     return `${value}%`;
 }
-exports.toPercent = toPercent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/electrovir/vira",
@@ -29,21 +29,22 @@
         "test:docs": "virmator code-in-markdown check"
     },
     "dependencies": {
-        "element-vir": "^13.0.0",
-        "lit-css-vars": "^2.0.2"
+        "element-vir": "^13.0.4",
+        "lit-css-vars": "^2.0.3"
     },
     "devDependencies": {
-        "@augment-vir/browser-testing": "^14.2.0",
-        "@augment-vir/node-js": "^14.2.0",
-        "@open-wc/testing": "^3.1.8",
+        "@augment-vir/browser-testing": "^14.3.0",
+        "@augment-vir/node-js": "^14.3.0",
+        "@open-wc/testing": "^3.2.0",
+        "@types/chai": "^4.3.5",
         "@types/mocha": "^10.0.1",
         "@web/dev-server-esbuild": "^0.4.1",
         "@web/test-runner": "^0.16.1",
         "@web/test-runner-commands": "^0.7.0",
-        "@web/test-runner-playwright": "^0.10.0",
+        "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.0",
-        "istanbul-smart-text-reporter": "^1.1.1",
-        "typescript": "^5.0.4",
+        "istanbul-smart-text-reporter": "^1.1.2",
+        "typescript": "^5.1.3",
         "vite": "^4.3.9",
         "vite-tsconfig-paths": "^4.2.0"
     }