vira 0.1.2 → 0.3.0

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

@@ -3,11 +3,15 @@ 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,
 ];

package/dist/elements/index.d.ts

@@ -1,4 +1,6 @@
 /** This file is automatically updated by update-element-exports.ts */
 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

@@ -17,4 +17,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 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);

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

@@ -7,6 +7,7 @@ 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;
@@ -29,6 +30,7 @@ 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) `
         :host {
@@ -65,6 +67,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         }
 
         button {
+            cursor: pointer;
             ${native_styles_1.removeNativeFormStyles};
             position: relative;
             width: 100%;
@@ -75,10 +78,10 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            border-radius: 8px;
+            border-radius: ${vira_css_vars_1.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;
+            padding: ${cssVars['vira-button-padding'].value};
             transition: color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
                 background-color
                     ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
@@ -86,7 +89,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
         }
 
         ${(0, focus_1.createFocusStyles)({
-        mainSelector: 'button:focus:focus-visible:not(:active)',
+        mainSelector: 'button:focus:focus-visible:not(:active):not([disabled])',
         elementBorderSize: 2,
     })}
 
@@ -110,7 +113,7 @@ exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
               `
             : '';
         return (0, element_vir_1.html) `
-            <button>${iconTemplate} ${textTemplate}</button>
+            <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
         `;
     },
 });

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

@@ -0,0 +1,10 @@
+export declare enum ViraCollapsibleSlotNameEnum {
+    Header = "header"
+}
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+    expanded: boolean;
+}, {
+    contentHeight: number;
+}, {
+    expandChange: import("element-vir").DefinedTypedEventNameDefinition<boolean>;
+}, "vira-collapsible-wrapper-expanded", `vira-collapsible-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;

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

@@ -0,0 +1,77 @@
+"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;
+(function (ViraCollapsibleSlotNameEnum) {
+    ViraCollapsibleSlotNameEnum["Header"] = "header";
+})(ViraCollapsibleSlotNameEnum = exports.ViraCollapsibleSlotNameEnum || (exports.ViraCollapsibleSlotNameEnum = {}));
+exports.ViraCollapsibleWrapper = (0, define_vira_element_1.defineViraElement)()({
+    tagName: 'vira-collapsible-wrapper',
+    hostClasses: {
+        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
+    },
+    styles: ({ hostClasses }) => (0, element_vir_1.css) `
+        :host {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .header-wrapper {
+            ${styles_1.removeNativeFormStyles};
+            cursor: pointer;
+        }
+
+        .content-wrapper,
+        .collapsing-element {
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+        }
+
+        .collapsing-element {
+            transition: height ${styles_1.viraAnimationDurations['vira-pretty-animation-duration'].value};
+            overflow: hidden;
+        }
+        ${hostClasses['vira-collapsible-wrapper-expanded'].name} .collapsing-element {
+            pointer-events: none;
+        }
+    `,
+    events: {
+        expandChange: (0, element_vir_1.defineElementEvent)(),
+    },
+    stateInitStatic: {
+        contentHeight: 0,
+    },
+    renderCallback({ state, updateState, dispatch, events, inputs }) {
+        const collapsingStyles = inputs.expanded
+            ? (0, element_vir_1.css) `
+                  height: ${state.contentHeight}px;
+              `
+            : (0, element_vir_1.css) `
+                  height: 0;
+              `;
+        return (0, element_vir_1.html) `
+            <button
+                class="header-wrapper"
+                ${(0, element_vir_1.listen)('click', () => {
+            dispatch(new events.expandChange(!inputs.expanded));
+        })}
+            >
+                <slot name=${ViraCollapsibleSlotNameEnum.Header}>Header</slot>
+            </button>
+            <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
+                <div
+                    ${(0, element_vir_1.onResize)(({ contentRect }) => {
+            updateState({ contentHeight: contentRect.height });
+        })}
+                    class="content-wrapper"
+                >
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    },
+});

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-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,353 @@
+"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");
+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(''),
+    };
+}
+exports.ViraInput = (0, define_vira_element_1.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: (0, element_vir_1.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)(),
+    },
+    styles: ({ hostClasses, cssVars }) => {
+        return (0, element_vir_1.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};
+                color: ${cssVars['vira-input-text-color'].value};
+            }
+
+            ${hostClasses['vira-input-disabled'].selector} {
+                ${styles_1.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 {
+                ${native_styles_1.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;
+                ${styles_1.noUserSelect};
+                vertical-align: middle;
+                max-height: 100%;
+            }
+
+            pre {
+                ${native_styles_1.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: ${vira_css_vars_1.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
+                    ${styles_1.viraAnimationDurations['vira-interaction-animation-duration'].value};
+            }
+
+            label {
+                ${native_styles_1.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: ${vira_css_vars_1.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;
+            }
+
+            ${(0, focus_1.createFocusStyles)({
+            mainSelector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
+            elementBorderSize: 0,
+        })}
+
+            ${vira_icon_element_1.ViraIcon} {
+                margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
+            }
+
+            input {
+                ${native_styles_1.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
+            ? (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}>
+              `
+            : '';
+        const forcedInputWidthStyles = inputs.fitText
+            ? (0, element_vir_1.css) `
+                  width: ${state.forcedInputWidth}px;
+              `
+            : '';
+        return (0, element_vir_1.html) `
+            <label>
+                ${iconTemplate}
+                ${(0, element_vir_1.renderIf)(!!inputs.fitText, (0, element_vir_1.html) `
+                        <span
+                            class="size-span"
+                            ${(0, element_vir_1.onResize)(({ contentRect }) => {
+            updateState({ forcedInputWidth: contentRect.width });
+        })}
+                        >
+                            <pre>${filteredValue || inputs.placeholder || ''}</pre>
+                        </span>
+                    `)}
+                <input
+                    class=${(0, element_vir_1.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}
+                    ${(0, element_vir_1.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}
+                />
+                ${(0, element_vir_1.renderIf)(!!inputs.suffix, (0, element_vir_1.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-svgs/element-16.icon.js

@@ -8,14 +8,16 @@ exports.Element16Icon = (0, icon_svg_1.defineIcon)({
     svgTemplate: (0, element_vir_1.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

@@ -8,14 +8,12 @@ exports.Element24Icon = (0, icon_svg_1.defineIcon)({
     svgTemplate: (0, element_vir_1.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/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

@@ -5,8 +5,10 @@ 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)({
     '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)`,
 });
 /**
  * Create styles that look like an outline for the given selector.
@@ -27,7 +29,7 @@ function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, ou
             box-sizing: border-box;
             pointer-events: none;
             border: ${outlineWidth}px solid ${exports.viraFocusCssVars['vira-focus-outline-color'].value};
-            border-radius: 12px;
+            border-radius: ${exports.viraFocusCssVars['vira-focus-outline-border-radius'].value};
             z-index: 100;
         }
     `;

package/dist/styles/native-styles.js

@@ -9,7 +9,6 @@ exports.removeNativeFormStyles = (0, element_vir_1.css) `
     border: none;
     font: inherit;
     color: inherit;
-    cursor: pointer;
     text-transform: inherit;
     text-decoration: inherit;
     -webkit-tap-highlight-color: transparent;

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,7 @@
+"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)({
+    'vira-form-input-border-radius': '8px',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "0.1.2",
+    "version": "0.3.0",
     "description": "",
     "keywords": [],
     "homepage": "https://github.com/electrovir/vira",