vira 28.19.7 → 29.1.0

package/dist/elements/form/vira-form-fields.d.ts

@@ -15,6 +15,7 @@ export declare enum ViraFormFieldType {
     /** Uses a password input without any attributes applied for auto complete hints. */
     PlainPassword = "plain-password",
     Email = "email",
+    Number = "number",
     Select = "select",
     Checkbox = "checkbox"
 }
@@ -75,7 +76,16 @@ export type ViraFormField = ({
 }> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Checkbox;
     value: boolean | undefined;
-} & CommonViraFormFields);
+} & CommonViraFormFields) | ({
+    type: ViraFormFieldType.Number;
+    value: number | undefined;
+} & PartialWithUndefined<{
+    placeholder: string;
+    icon: ViraIconSvg;
+    min: number;
+    max: number;
+    step: number;
+}> & CommonViraFormFields);
 /**
  * A collection of form fields for `ViraForm`.
  *

package/dist/elements/form/vira-form-fields.js

@@ -15,6 +15,7 @@ export var ViraFormFieldType;
     /** Uses a password input without any attributes applied for auto complete hints. */
     ViraFormFieldType["PlainPassword"] = "plain-password";
     ViraFormFieldType["Email"] = "email";
+    ViraFormFieldType["Number"] = "number";
     ViraFormFieldType["Select"] = "select";
     ViraFormFieldType["Checkbox"] = "checkbox";
 })(ViraFormFieldType || (ViraFormFieldType = {}));

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

@@ -92,6 +92,48 @@ export const ViraForm = defineViraElement()({
                         ></${ViraSelect}>
                     `;
             }
+            else if (field.type === ViraFormFieldType.Number) {
+                return html `
+                        <${ViraInput.assign({
+                    value: field.value?.toString() || '',
+                    disabled: inputs.isDisabled || field.isDisabled,
+                    allowedInputs: /\d/,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
+                    placeholder: field.placeholder,
+                    showClearButton: inputs.showClearButtons,
+                    type: ViraInputType.Number,
+                    attributePassthrough: {
+                        ...(field.min === undefined
+                            ? {}
+                            : {
+                                min: String(field.min),
+                            }),
+                        ...(field.max === undefined
+                            ? {}
+                            : {
+                                max: String(field.max),
+                            }),
+                        ...(field.step === undefined
+                            ? {}
+                            : {
+                                step: String(field.step),
+                            }),
+                    },
+                })}
+                            ${field.testId ? testId(field.testId) : nothing}
+                            ${listen(ViraInput.events.valueChange, (event) => {
+                    const numericValue = event.detail === '' ? undefined : Number(event.detail);
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: numericValue,
+                    }));
+                })}
+                        ></${ViraInput}>
+                    `;
+            }
             else {
                 return html `
                         <${ViraInput.assign({

package/dist/elements/pop-up/vira-menu.element.js

@@ -64,8 +64,7 @@ export const ViraMenu = defineViraElement()({
         baseSelector: '.menu-item:not(.disabled):not(.selected)',
         navValue: NavValue.Active,
     })}, .menu-item:not(.disabled):not(.selected):hover {
-            background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+            background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
             outline: none;
         }
 
@@ -80,8 +79,7 @@ export const ViraMenu = defineViraElement()({
         navValue: NavValue.Active,
     })},
                 .menu-item:not(.disabled):hover {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
                 outline: none;
             }
         }

package/dist/elements/pop-up/vira-pop-up-menu.element.js

@@ -1,5 +1,4 @@
 import { css, html } from 'element-vir';
-import { viraBorders } from '../../styles/border.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { viraShadows } from '../../styles/shadows.js';
 import { defineViraElement } from '../define-vira-element.js';
@@ -48,7 +47,7 @@ export const ViraPopUpMenu = defineViraElement()({
             overflow-y: auto;
             z-index: 99;
             box-sizing: border-box;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             border-top-left-radius: 0;
             border-top-right-radius: 0;
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
@@ -59,7 +58,7 @@ export const ViraPopUpMenu = defineViraElement()({
 
         ${hostClasses['vira-pop-up-menu-open-upwards'].selector} {
             ${viraShadows.menuShadowReversed}
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -69,7 +68,7 @@ export const ViraPopUpMenu = defineViraElement()({
         }
 
         ${hostClasses['vira-pop-up-menu-rounded'].selector} {
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
         }
     `,
     render() {

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

@@ -7,7 +7,10 @@ import { type ViraIconSvg } from '../icons/index.js';
  */
 export declare enum ViraButtonStyle {
     Default = "vira-button-default",
-    Outline = "vira-button-outline"
+    Outline = "vira-button-outline",
+    Danger = "vira-button-danger",
+    DangerOutline = "vira-button-danger-outline",
+    Ghost = "vira-button-ghost"
 }
 /**
  * A custom button with default styling.
@@ -28,4 +31,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default false
      */
     expandToFitIcon: boolean;
-}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "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", readonly [], readonly []>;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-default-style", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly [], readonly []>;

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

@@ -1,8 +1,8 @@
 import { css, html, nothing } from 'element-vir';
-import { viraBorders } from '../styles/border.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { viraAnimationDurations } from '../styles/durations.js';
-import { createFocusStyles, viraFocusCssVars } from '../styles/focus.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from './define-vira-element.js';
@@ -16,6 +16,9 @@ export var ViraButtonStyle;
 (function (ViraButtonStyle) {
     ViraButtonStyle["Default"] = "vira-button-default";
     ViraButtonStyle["Outline"] = "vira-button-outline";
+    ViraButtonStyle["Danger"] = "vira-button-danger";
+    ViraButtonStyle["DangerOutline"] = "vira-button-danger-outline";
+    ViraButtonStyle["Ghost"] = "vira-button-ghost";
 })(ViraButtonStyle || (ViraButtonStyle = {}));
 /**
  * A custom button with default styling.
@@ -27,17 +30,17 @@ export var ViraButtonStyle;
 export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
-        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline,
+        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline ||
+            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
+        'vira-button-danger-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Danger ||
+            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
+        'vira-button-ghost-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Ghost,
         'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
         'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
+        'vira-button-icon-only': ({ inputs }) => !!inputs.icon && !inputs.text,
+        'vira-button-default-style': ({ inputs }) => !inputs.buttonStyle || inputs.buttonStyle === ViraButtonStyle.Default,
     },
     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',
-        /** On the default button style this is the text color. */
-        'vira-button-secondary-color': '#ffffff',
         'vira-button-padding': '5px 10px',
         'vira-button-internal-foreground-color': 'transparent',
         'vira-button-internal-background-color': 'transparent',
@@ -51,28 +54,61 @@ export const ViraButton = defineViraElement()({
             align-items: center;
             box-sizing: border-box;
             ${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};
-            ${viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-button-primary-hover-color'].value}
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+            ${cssVars['vira-button-internal-foreground-color'].name}: ${viraFormCssVars['vira-form-background-color'].value};
+            ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
+        }
+
+        ${hostClasses['vira-button-disabled'].selector} {
+            ${viraDisabledStyles};
         }
 
         :host(:hover) button,
         button:hover {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-hover-color'].value};
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value};
         }
 
         :host(:active) button,
         button:active {
-            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-active-color'].value};
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
         }
 
-        ${hostClasses['vira-button-disabled'].selector} {
-            ${viraDisabledStyles};
+        ${hostClasses['vira-button-danger-style'].selector} {
+            & button {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-color'].value};
+            }
+
+            &:hover button,
+            & button:hover {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-hover-color'].value};
+            }
+
+            &:active button,
+            & button:active {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-active-color'].value};
+            }
+        }
+
+        ${hostClasses['vira-button-ghost-style'].selector} {
+            & button {
+                ${cssVars['vira-button-internal-background-color'].name}: transparent;
+                ${cssVars['vira-button-internal-foreground-color'].name}: currentColor;
+            }
+
+            &:hover button,
+            & button:hover {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-background-color'].value};
+            }
+
+            &:active button,
+            & button:active {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-active-background-color'].value};
+            }
         }
 
         ${hostClasses['vira-button-outline-style'].selector} button {
             color: ${cssVars['vira-button-internal-background-color'].value};
-            background-color: transparent;
+            background-color: ${cssVars['vira-button-internal-foreground-color'].value};
             border-color: currentColor;
         }
 
@@ -87,7 +123,7 @@ export const ViraButton = defineViraElement()({
             display: inline-flex;
             justify-content: center;
             align-items: center;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-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};

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

@@ -15,4 +15,4 @@ export declare enum ViraCardState {
  */
 export declare const ViraCard: import("element-vir").DeclarativeElementDefinition<"vira-card", {
     cardState?: ViraCardState | undefined;
-}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-border-radius" | "vira-card-padding", readonly [], readonly []>;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-padding", readonly [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { CssVarSyntaxName } from 'lit-css-vars';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
@@ -24,23 +25,31 @@ export const ViraCard = defineViraElement()({
         'vira-card-success': ({ inputs }) => inputs.cardState === ViraCardState.Success,
     },
     cssVars: {
-        'vira-card-border': '1px solid #d3d3d3',
-        'vira-card-border-radius': '16px',
-        'vira-card-padding': '16px',
+        'vira-card-border': {
+            default: css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
+            initialValue: 'none',
+        },
+        'vira-card-padding': {
+            default: css `
+                ${viraFormCssVars['vira-form-wrapper-radius'].value}
+            `,
+            initialValue: '16px',
+            syntax: CssVarSyntaxName.Length,
+        },
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
             display: block;
             border: ${cssVars['vira-card-border'].value};
-            border-radius: ${cssVars['vira-card-border-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
             padding: ${cssVars['vira-card-padding'].value};
         }
 
         ${hostClasses['vira-card-error'].selector} {
-            border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
         }
         ${hostClasses['vira-card-success'].selector} {
-            border-color: ${viraFormCssVars['vira-form-success-foreground-color'].value};
+            border-color: ${viraFormCssVars['vira-form-success-color'].value};
         }
     `,
     render() {

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

@@ -12,16 +12,20 @@ export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | t
  *
  * @category Internal
  */
-export type ViraCheckboxInputs = PartialWithUndefined<{
+export type ViraCheckboxInputs = {
+    value: boolean;
+} & PartialWithUndefined<{
     stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
     attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
     disabled: boolean;
     label: string;
     hasError: boolean;
     horizontal: boolean;
-}> & {
-    value: boolean;
-};
+    /** The checkbox will be filled with a form selection color when it is checked. */
+    fillWhenChecked: boolean;
+    /** The checkbox will be filled with a form error color when it is unchecked. */
+    fillWhenUnchecked: boolean;
+}>;
 /**
  * A custom checkbox.
  *
@@ -31,4 +35,4 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  */
 export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
     valueChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-checkbox-horizontal", "vira-checkbox-", readonly [], readonly []>;
+}, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", "vira-checkbox-", readonly [], readonly []>;

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

@@ -1,6 +1,5 @@
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, nothing, } from 'element-vir';
 import { Check24Icon, viraIconCssVars } from '../icons/index.js';
-import { viraBorders } from '../styles/border.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -17,6 +16,8 @@ export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     hostClasses: {
         'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
+        'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
+        'vira-checkbox-filled-unchecked': ({ inputs }) => !!inputs.fillWhenUnchecked,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -33,6 +34,43 @@ export const ViraCheckbox = defineViraElement()({
             width: 100%;
             height: 100%;
             box-sizing: border-box;
+            ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+            opacity: 0;
+        }
+
+        ${hostClasses['vira-checkbox-filled-checked'].selector} {
+            & .custom-checkbox.checked {
+                color: ${viraFormCssVars['vira-form-background-color'].value};
+                background-color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+            }
+
+            label {
+                &:hover .custom-checkbox.checked {
+                    background-color: ${viraFormCssVars['vira-form-accent-primary-hover-color']
+        .value};
+                }
+
+                &:active .custom-checkbox.checked {
+                    background-color: ${viraFormCssVars['vira-form-accent-primary-active-color']
+        .value};
+                }
+            }
+        }
+        ${hostClasses['vira-checkbox-filled-unchecked'].selector} {
+            & .custom-checkbox:not(.checked) {
+                color: ${viraFormCssVars['vira-form-background-color'].value};
+                background-color: ${viraFormCssVars['vira-form-error-color'].value};
+            }
+
+            label {
+                &:hover .custom-checkbox:not(.checked) {
+                    background-color: ${viraFormCssVars['vira-form-error-hover-color'].value};
+                }
+
+                &:active .custom-checkbox:not(.checked) {
+                    background-color: ${viraFormCssVars['vira-form-error-active-color'].value};
+                }
+            }
         }
 
         label {
@@ -51,14 +89,11 @@ export const ViraCheckbox = defineViraElement()({
             }
 
             &:hover .custom-checkbox {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
+                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
+            }
+            &:active .custom-checkbox {
+                background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
             }
-        }
-
-        ${ViraIcon} {
-            ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
-            opacity: 0;
         }
 
         /* The visible custom box */
@@ -66,7 +101,7 @@ export const ViraCheckbox = defineViraElement()({
             flex-shrink: 0;
             border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             display: inline-block;
             position: relative;
             cursor: pointer;
@@ -80,12 +115,7 @@ export const ViraCheckbox = defineViraElement()({
             }
 
             &.error {
-                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
-            }
-
-            &:active {
-                background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
-        .value};
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
             }
 
             &.disabled {

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

@@ -2,7 +2,6 @@ import { check } from '@augment-vir/assert';
 import { filterMap } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp24Icon } from '../icons/index.js';
-import { viraBorders } from '../styles/border.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from './define-vira-element.js';
@@ -87,7 +86,7 @@ export const ViraDropdown = defineViraElement()({
             align-items: center;
             padding: 3px;
             padding-left: 10px;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
         }

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

@@ -14,7 +14,7 @@ export const ViraError = defineViraElement()({
     },
     styles: ({ cssVars }) => css `
         :host {
-            color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            color: ${viraFormCssVars['vira-form-error-color'].value};
             font-weight: ${cssVars['vira-error-font-weight'].value};
         }
     `,

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

@@ -9,7 +9,8 @@ export * from './shared-text-input-logic.js';
 export declare enum ViraInputType {
     Default = "text",
     Password = "password",
-    Email = "email"
+    Email = "email",
+    Number = "number"
 }
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with
@@ -59,4 +60,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefineEvent<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;

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

@@ -6,7 +6,7 @@ import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { noUserSelect, viraAnimationDurations, viraBorders, viraDisabledStyles, } from '../styles/index.js';
+import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 import { filterTextInputValue, textInputListener, } from './shared-text-input-logic.js';
@@ -22,6 +22,7 @@ export var ViraInputType;
     ViraInputType["Default"] = "text";
     ViraInputType["Password"] = "password";
     ViraInputType["Email"] = "email";
+    ViraInputType["Number"] = "number";
 })(ViraInputType || (ViraInputType = {}));
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with
@@ -34,13 +35,6 @@ export var ViraInputType;
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
-        'vira-input-action-button-color': '#aaaaaa',
-        'vira-input-clear-button-hover-color': '#ff0000',
-        'vira-input-clear-button-active-color': '#b30000',
-        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
-        'vira-input-show-password-button-hover-color': '#0a89ff',
-        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
-        'vira-input-show-password-button-active-color': '#0261ba',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
     },
@@ -127,7 +121,7 @@ export const ViraInput = defineViraElement()({
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -147,7 +141,7 @@ export const ViraInput = defineViraElement()({
                 align-items: center;
                 position: relative;
                 padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 background-color: ${viraFormCssVars['vira-form-background-color'].value};
                 /*
                     Border colors are actually applied via the .wrapper-border class. However, we must
@@ -217,28 +211,28 @@ export const ViraInput = defineViraElement()({
 
             .clear-x-button,
             .show-password-button {
-                color: ${cssVars['vira-input-action-button-color'].value};
+                color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             }
 
             .clear-x-button:hover {
-                color: ${cssVars['vira-input-clear-button-hover-color'].value};
+                color: ${viraFormCssVars['vira-form-error-color'].value};
             }
 
             .clear-x-button:active {
-                color: ${cssVars['vira-input-clear-button-active-color'].value};
+                color: ${viraFormCssVars['vira-form-error-active-color'].value};
             }
 
             .show-password-button:hover {
-                color: ${cssVars['vira-input-show-password-button-hover-color'].value};
+                color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
             }
 
             .show-password-button:active {
-                color: ${cssVars['vira-input-show-password-button-active-color'].value};
+                color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
             }
 
             ${hostClasses['vira-input-error'].selector} {
                 & .wrapper-border {
-                    border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                    border-color: ${viraFormCssVars['vira-form-error-color'].value};
                 }
             }
 

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

@@ -70,4 +70,4 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
     attributePassthrough: Readonly<PartialWithUndefined<{
         a: AttributeValues;
     }>>;
-}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly [], readonly []>;
+}>, {}, {}, "vira-link-", "vira-link-", readonly [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { attributes, css, html, ifDefined, listen, } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
@@ -10,10 +11,7 @@ import { defineViraElement } from './define-vira-element.js';
  */
 export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
-    cssVars: {
-        'vira-link-hover-color': 'currentColor',
-    },
-    styles: ({ cssVars }) => css `
+    styles: css `
         :host {
             display: inline;
             text-decoration: underline;
@@ -30,10 +28,13 @@ export const ViraLink = defineViraElement()({
         }
 
         :host(:hover) a,
-        a:hover,
+        a:hover {
+            color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+        }
+
         :host(:active) a,
         a:active {
-            color: ${cssVars['vira-link-hover-color'].value};
+            color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
         }
     `,
     render({ inputs }) {

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

@@ -36,4 +36,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanup: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineEvent<void>;
-}, "vira-modal-phone-size", "vira-modal-backdrop-color" | "vira-modal-backdrop-filter" | "vira-modal-subtitle-color" | "vira-modal-close-button-hover-radius" | "vira-modal-close-button-hover-background-color", readonly ["modalTitle"], readonly []>;
+}, "vira-modal-phone-size", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;