vira 0.3.0 → 0.3.1

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

@@ -1,17 +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 vira_input_element_book_1 = require("../elements/vira-input/vira-input.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,
-    ...vira_input_element_book_1.viraInputBookEntries,
+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.js

@@ -1,22 +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);
-__exportStar(require("./vira-input/vira-input.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.js

@@ -1,21 +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 vira_css_vars_1 = require("../../styles/vira-css-vars");
-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,
@@ -32,7 +29,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         '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;
@@ -40,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,
@@ -57,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 {
@@ -68,7 +65,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
 
         button {
             cursor: pointer;
-            ${native_styles_1.removeNativeFormStyles};
+            ${removeNativeFormStyles};
             position: relative;
             width: 100%;
             height: 100%;
@@ -78,41 +75,41 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            border-radius: ${vira_css_vars_1.viraCssVars['vira-form-input-border-radius'].value};
+            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: ${cssVars['vira-button-padding'].value};
-            transition: color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].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,26 +1,23 @@
-"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 {
-            ${styles_1.removeNativeFormStyles};
+            ${removeNativeFormStyles};
             cursor: pointer;
         }
 
@@ -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.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.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViraInput = void 0;
-const element_vir_1 = require("element-vir");
-const styles_1 = require("../../styles");
-const focus_1 = require("../../styles/focus");
-const native_styles_1 = require("../../styles/native-styles");
-const vira_css_vars_1 = require("../../styles/vira-css-vars");
-const define_vira_element_1 = require("../define-vira-element");
-const vira_icon_element_1 = require("../vira-icon/vira-icon.element");
+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;
@@ -59,7 +56,7 @@ function filterToAllowedCharactersOnly(inputs) {
         blocked: blocked.join(''),
     };
 }
-exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
+export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     hostClasses: {
         'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
@@ -80,27 +77,27 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
          * Fires whenever a user input created a new value. Does not fire if all input letters are
          * filtered out due to input restrictions.
          */
-        valueChange: (0, element_vir_1.defineElementEvent)(),
+        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: (0, element_vir_1.defineElementEvent)(),
+        inputBlocked: defineElementEvent(),
     },
     styles: ({ hostClasses, cssVars }) => {
-        return (0, element_vir_1.css) `
+        return css `
             :host {
                 position: relative;
                 display: inline-flex;
                 width: 224px;
                 box-sizing: border-box;
-                ${focus_1.viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-input-focus-border-color'].value};
+                ${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} {
-                ${styles_1.viraDisabledStyles};
+                ${viraDisabledStyles};
             }
 
             ${hostClasses['vira-input-fit-text'].selector} {
@@ -120,7 +117,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 text-align: center;
             }
             ${hostClasses['vira-input-fit-text'].selector} .size-span {
-                ${native_styles_1.removeNativeFormStyles};
+                ${removeNativeFormStyles};
                 font-family: inherit;
                 display: inline-block;
                 font-size: inherit;
@@ -132,13 +129,13 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 pointer-events: none;
                 z-index: -1;
                 width: min-content;
-                ${styles_1.noUserSelect};
+                ${noUserSelect};
                 vertical-align: middle;
                 max-height: 100%;
             }
 
             pre {
-                ${native_styles_1.removeNativeFormStyles};
+                ${removeNativeFormStyles};
                 font: inherit;
                 /*
                     Leave at least a few pixels for the cursor bar when there is no text at all.
@@ -155,7 +152,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${vira_css_vars_1.viraCssVars['vira-form-input-border-radius'].value};
+                border-radius: ${viraCssVars['vira-form-input-border-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -165,11 +162,11 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 left: -1px;
                 border: 1px solid ${cssVars['vira-input-border-color'].value};
                 transition: border
-                    ${styles_1.viraAnimationDurations['vira-interaction-animation-duration'].value};
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
             }
 
             label {
-                ${native_styles_1.removeNativeFormStyles};
+                ${removeNativeFormStyles};
                 max-width: 100%;
                 flex-grow: 1;
                 cursor: pointer;
@@ -178,7 +175,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 align-items: center;
                 position: relative;
                 padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
-                border-radius: ${vira_css_vars_1.viraCssVars['vira-form-input-border-radius'].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
@@ -188,17 +185,17 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                 gap: 4px;
             }
 
-            ${(0, focus_1.createFocusStyles)({
+            ${createFocusStyles({
             mainSelector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
             elementBorderSize: 0,
         })}
 
-            ${vira_icon_element_1.ViraIcon} {
+            ${ViraIcon} {
                 margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
             }
 
             input {
-                ${native_styles_1.removeNativeFormStyles};
+                ${removeNativeFormStyles};
                 cursor: text;
                 margin: ${cssVars['vira-input-padding-vertical'].value} 0;
                 flex-grow: 1;
@@ -247,22 +244,22 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
             blocked: inputs.blockedInputs,
         });
         const iconTemplate = inputs.icon
-            ? (0, element_vir_1.html) `
-                  <${vira_icon_element_1.ViraIcon} ${(0, element_vir_1.assign)(vira_icon_element_1.ViraIcon, { icon: inputs.icon })}></${vira_icon_element_1.ViraIcon}>
+            ? html `
+                  <${ViraIcon} ${assign(ViraIcon, { icon: inputs.icon })}></${ViraIcon}>
               `
             : '';
         const forcedInputWidthStyles = inputs.fitText
-            ? (0, element_vir_1.css) `
+            ? css `
                   width: ${state.forcedInputWidth}px;
               `
             : '';
-        return (0, element_vir_1.html) `
+        return html `
             <label>
                 ${iconTemplate}
-                ${(0, element_vir_1.renderIf)(!!inputs.fitText, (0, element_vir_1.html) `
+                ${renderIf(!!inputs.fitText, html `
                         <span
                             class="size-span"
-                            ${(0, element_vir_1.onResize)(({ contentRect }) => {
+                            ${onResize(({ contentRect }) => {
             updateState({ forcedInputWidth: contentRect.width });
         })}
                         >
@@ -270,7 +267,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                         </span>
                     `)}
                 <input
-                    class=${(0, element_vir_1.classMap)({
+                    class=${classMap({
             'have-value': !!filteredValue,
         })}
                     style=${forcedInputWidthStyles}
@@ -280,7 +277,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
                     spellcheck=${inputs.disableBrowserHelps ? 'false' : ''}
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
-                    ${(0, element_vir_1.listen)('input', (event) => {
+                    ${listen('input', (event) => {
             /**
              * When attached to an input element (like here) this event type should
              * always be InputEvent.
@@ -338,7 +335,7 @@ exports.ViraInput = (0, define_vira_element_1.defineViraElement)()({
         })}
                     placeholder=${inputs.placeholder}
                 />
-                ${(0, element_vir_1.renderIf)(!!inputs.suffix, (0, element_vir_1.html) `
+                ${renderIf(!!inputs.suffix, html `
                         <div class="suffix">${inputs.suffix}</div>
                     `)}
                 <!--

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,11 +1,8 @@
-"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"
             fill="none"

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

@@ -1,11 +1,8 @@
-"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"
             viewBox="0 0 24 24"

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.js

@@ -1,14 +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");
-const vira_css_vars_1 = require("./vira-css-vars");
-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': (0, element_vir_1.css) `calc(${vira_css_vars_1.viraCssVars['vira-form-input-border-radius'].value} + 4px)`,
+    '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.
@@ -16,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);
@@ -28,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: ${exports.viraFocusCssVars['vira-focus-outline-border-radius'].value};
+            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,8 +1,5 @@
-"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;

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.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.viraCssVars = void 0;
-const lit_css_vars_1 = require("lit-css-vars");
-exports.viraCssVars = (0, lit_css_vars_1.defineCssVars)({
+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.3.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"
     }