vira 1.0.1 → 2.0.0

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

@@ -8,4 +8,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
     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" | "vira-button-padding", 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-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", import("lit-html").HTMLTemplateResult>;

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

@@ -20,14 +20,14 @@ export const ViraButton = defineViraElement()({
     },
     cssVars: {
         /** On the default button style this is the background color. */
-        'vira-button-primary-color': '#0A89FF',
-        'vira-button-primary-hover-color': '#59B1FF',
-        'vira-button-primary-active-color': '#007FF6',
+        'vira-button-primary-color': '#0a89ff',
+        'vira-button-primary-hover-color': '#59b1ff',
+        'vira-button-primary-active-color': '#007ff6',
         /** On the default button style this is the text color. */
-        'vira-button-secondary-color': 'white',
+        'vira-button-secondary-color': '#ffffff',
+        'vira-button-padding': '5px 10px',
         'vira-button-internal-foreground-color': '',
         'vira-button-internal-background-color': '',
-        'vira-button-padding': '5px 10px',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {

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

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

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

@@ -3,7 +3,8 @@ import { SharedTextInputElementInputs } from '../common/shared-text-input-logic'
 export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", {
     icon?: undefined | Pick<ViraIconSvg, 'svgTemplate'>;
     /** A suffix that, if provided, is shown following the user input field. */
-    suffix?: string;
+    suffix?: string | undefined;
+    showClearButton?: boolean | undefined;
 } & SharedTextInputElementInputs, {
     forcedInputWidth: number;
 }, {

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

@@ -1,4 +1,5 @@
 import { css, defineElementEvent, html, listen, onResize, renderIf } from 'element-vir';
+import { CloseX24Icon } from '../../icons/icon-svgs/close-x-24.icon';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../../styles';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus';
 import { noNativeFormStyles } from '../../styles/native-styles';
@@ -13,11 +14,11 @@ export const ViraInput = defineViraElement()({
         '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-placeholder-color': '#cccccc',
+        'vira-input-text-color': '#000000',
+        'vira-input-border-color': '#cccccc',
+        'vira-input-focus-border-color': '#59b1ff',
+        'vira-input-text-selection-color': '#cfe9ff',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
     },
@@ -118,7 +119,6 @@ export const ViraInput = defineViraElement()({
                 ${noNativeFormStyles};
                 max-width: 100%;
                 flex-grow: 1;
-                cursor: text;
                 display: inline-flex;
                 box-sizing: border-box;
                 align-items: center;
@@ -132,6 +132,7 @@ export const ViraInput = defineViraElement()({
                 */
                 border: 1px solid transparent;
                 gap: 4px;
+                cursor: text;
             }
 
             ${createFocusStyles({
@@ -139,7 +140,7 @@ export const ViraInput = defineViraElement()({
             elementBorderSize: 0,
         })}
 
-            ${ViraIcon} {
+            .left-side-icon {
                 margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
             }
 
@@ -182,6 +183,18 @@ export const ViraInput = defineViraElement()({
                 font-weight: bold;
                 ${noUserSelect};
             }
+
+            .close-x-button {
+                color: ${cssVars['vira-input-text-color'].value};
+                ${noNativeFormStyles};
+                cursor: pointer;
+                display: flex;
+                transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            }
+
+            .close-x-button:hover {
+                color: red;
+            }
         `;
     },
     stateInitStatic: {
@@ -195,7 +208,7 @@ export const ViraInput = defineViraElement()({
         });
         const iconTemplate = inputs.icon
             ? html `
-                  <${ViraIcon.assign({ icon: inputs.icon })}></${ViraIcon}>
+                  <${ViraIcon.assign({ icon: inputs.icon })} class="left-side-icon"></${ViraIcon}>
               `
             : '';
         const forcedInputWidthStyles = inputs.fitText
@@ -239,6 +252,20 @@ export const ViraInput = defineViraElement()({
         })}
                     placeholder=${inputs.placeholder}
                 />
+                ${renderIf(!!(inputs.showClearButton && inputs.value), html `
+                        <button
+                            class="close-x-button"
+                            title="clear input"
+                            ${listen('click', (event) => {
+            /** Prevent focus of the input. */
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            dispatch(new events.valueChange(''));
+        })}
+                        >
+                            <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
+                        </button>
+                    `)}
                 ${renderIf(!!inputs.suffix, html `
                         <div class="suffix">${inputs.suffix}</div>
                     `)}

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

@@ -1,6 +1,7 @@
-export declare const viraIconCssVars: {
-    'vira-icon-stroke-color': import("lit-css-vars").SingleCssVarDefinition;
-    'vira-icon-fill-color': import("lit-css-vars").SingleCssVarDefinition;
-    'vira-icon-stroke-width': import("lit-css-vars").SingleCssVarDefinition;
-    'vira-icon-color': import("lit-css-vars").SingleCssVarDefinition;
-};
+export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
+    /** To be used for coloring an icon's stroke. */
+    'vira-icon-stroke-color': string;
+    /** To be used for coloring an icon's fill. */
+    'vira-icon-fill-color': string;
+    'vira-icon-stroke-width': string;
+}>;

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

@@ -1,21 +1,8 @@
 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
-     * defaults to "currentColor", so in most cases you don't even need to override this variable,
-     * you just need to change the icon's "color" property.
-     */
-    'vira-icon-color': 'currentColor',
-});
-const specificIconCssVars = defineCssVars({
+export const viraIconCssVars = defineCssVars({
     /** To be used for coloring an icon's stroke. */
-    'vira-icon-stroke-color': genericIconColorCssVar['vira-icon-color'].value,
+    'vira-icon-stroke-color': 'currentColor',
     /** To be used for coloring an icon's fill. */
-    'vira-icon-fill-color': genericIconColorCssVar['vira-icon-color'].value,
+    'vira-icon-fill-color': 'none',
     'vira-icon-stroke-width': '1px',
 });
-export const viraIconCssVars = {
-    ...genericIconColorCssVar,
-    ...specificIconCssVars,
-};

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

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

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

@@ -0,0 +1,30 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars';
+import { defineIcon } from '../icon-svg';
+export const CloseX24Icon = defineIcon({
+    name: 'CloseX24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="8"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M9 8.5l6 7m0 -7l-6 7"
+            />
+        </svg>
+    `,
+});

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

@@ -12,9 +12,10 @@ export const Element16Icon = defineIcon({
             viewBox="0 0 16 16"
         >
             <path
-                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
-                vector-effect="non-scaling-stroke"
                 d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
         </svg>
     `,

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

@@ -12,6 +12,8 @@ export const Element24Icon = defineIcon({
             width="24"
         >
             <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
                 d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10"
             />

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

@@ -10,9 +10,12 @@ export const Loader24Icon = defineIcon({
             height="24"
             viewBox="0 0 24 24"
             width="24"
+            class="loader-animated-24-icon"
         >
             <path
                 d="M12 8V2M16 12h6M12 16v6M8 12H2M9.17 9.17 4.93 4.93M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
         </svg>

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

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

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

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

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

@@ -7,7 +7,6 @@ export const StatusFailure24Icon = defineIcon({
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"
-            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -15,14 +14,16 @@ export const StatusFailure24Icon = defineIcon({
             <circle
                 cx="12"
                 cy="12"
-                r="9"
+                r="10"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                fill="none"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
             <path
-                stroke="none"
-                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                d="m11.33 12-3.7-4.17.74-.66L12 11.25l3.63-4.08.74.66-3.7 4.17 3.7 4.17-.74.66L12 12.75l-3.63 4.08-.74-.66 3.7-4.17Z"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M8 16.5 L16 7.5 M8 7.5 L16 16.5"
             />
         </svg>
     `,

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

@@ -8,30 +8,34 @@ export const StatusInProgress24Icon = defineIcon({
             <circle
                 cx="12"
                 cy="12"
-                r="9"
+                r="10"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                fill="none"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
             <circle
                 cx="7"
                 cy="12"
                 r="1"
                 fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
             />
             <circle
                 cx="12"
                 cy="12"
                 r="1"
                 fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
             />
             <circle
                 cx="17"
                 cy="12"
                 r="1"
                 fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width="calc(${viraIconCssVars['vira-icon-stroke-width'].value} - 1px)"
             />
         </svg>
     `,

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

@@ -8,14 +8,16 @@ export const StatusSuccess24Icon = defineIcon({
             <circle
                 cx="12"
                 cy="12"
-                r="9"
+                r="10"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                fill="none"
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
             <path
-                d="m6.64 13.81.7-.7 2.63 2.62 6.65-7.6.74.66-7.35 8.4-3.37-3.38Z"
-                fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke="none"
+                d="m17 8.5-7 8-3-3"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
         </svg>
     `,

package/dist/icons/index.d.ts

@@ -1,6 +1,7 @@
 /** This file is automatically updated by update-icon-exports.ts */
 export * from './icon-css-vars';
 export * from './icon-svg';
+export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
 export * from './icon-svgs/loader-24.icon';
@@ -10,6 +11,7 @@ export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
 export * from './icon-svgs/status-success-24.icon';
 export declare const allIconsByName: {
+    readonly CloseX24Icon: import("./icon-svg").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg").ViraIconSvg;
     readonly Loader24Icon: import("./icon-svg").ViraIconSvg;

package/dist/icons/index.js

@@ -1,4 +1,5 @@
 /** This file is automatically updated by update-icon-exports.ts */
+import { CloseX24Icon } from './icon-svgs/close-x-24.icon';
 import { Element16Icon } from './icon-svgs/element-16.icon';
 import { Element24Icon } from './icon-svgs/element-24.icon';
 import { Loader24Icon } from './icon-svgs/loader-24.icon';
@@ -9,6 +10,7 @@ import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon';
 import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon';
 export * from './icon-css-vars';
 export * from './icon-svg';
+export * from './icon-svgs/close-x-24.icon';
 export * from './icon-svgs/element-16.icon';
 export * from './icon-svgs/element-24.icon';
 export * from './icon-svgs/loader-24.icon';
@@ -18,6 +20,7 @@ export * from './icon-svgs/status-failure-24.icon';
 export * from './icon-svgs/status-in-progress-24.icon';
 export * from './icon-svgs/status-success-24.icon';
 export const allIconsByName = {
+    CloseX24Icon,
     Element16Icon,
     Element24Icon,
     Loader24Icon,

package/dist/styles/durations.js

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

package/dist/styles/native-styles.js

@@ -5,6 +5,7 @@ export const noNativeSpacing = css `
 `;
 export const noNativeFormStyles = css `
     ${noNativeSpacing};
+    cursor: unset;
     background: none;
     border: none;
     font: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "1.0.1",
+    "version": "2.0.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -29,11 +29,11 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "build": "npm run compile && virmator frontend build",
-        "compile": "virmator compile",
+        "compile": "virmator compile && rm -rf ../../node_modules/element-book/node_modules/vira",
         "prepublishOnly": "cd ../scripts && npm run publish:pre",
-        "preview": "virmator frontend preview",
+        "preview": "npm run compile && virmator frontend preview --outDir ./book-dist",
         "postpublish": "cd ../scripts && npm run publish:post",
-        "start": "virmator frontend",
+        "start": "npm run compile && virmator frontend",
         "test": "virmator test-web",
         "test:all": "npm test",
         "test:coverage": "npm run test",