vira 28.19.7 → 29.0.0

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

@@ -59,4 +59,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';
@@ -34,13 +34,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 +120,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 +140,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 +210,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 []>;

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

@@ -2,6 +2,7 @@ import { assertWrap } from '@augment-vir/assert';
 import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
 import { listenToGlobal } from 'typed-event-target';
 import { X24Icon } from '../icons/icon-svgs/x-24.icon.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
 import { viraShadows } from '../styles/shadows.js';
 import { defineViraElement } from './define-vira-element.js';
@@ -39,11 +40,7 @@ export const ViraModal = defineViraElement()({
     },
     slotNames: ['modalTitle'],
     cssVars: {
-        'vira-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
         'vira-modal-backdrop-filter': 'blur(3px)',
-        'vira-modal-subtitle-color': '#7E7E7E',
-        'vira-modal-close-button-hover-radius': '8px',
-        'vira-modal-close-button-hover-background-color': '#E4E4E4',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
@@ -72,7 +69,7 @@ export const ViraModal = defineViraElement()({
                 display: flex;
             }
             &::backdrop {
-                background: ${cssVars['vira-modal-backdrop-color'].value};
+                background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
                 backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
             }
 
@@ -100,7 +97,7 @@ export const ViraModal = defineViraElement()({
 
                         & sub {
                             font-size: 16px;
-                            color: ${cssVars['vira-modal-subtitle-color'].value};
+                            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
                         }
                     }
 
@@ -108,10 +105,11 @@ export const ViraModal = defineViraElement()({
                         ${noNativeFormStyles};
                         cursor: pointer;
                         padding: 4px;
-                        border-radius: ${cssVars['vira-modal-close-button-hover-radius'].value};
+                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
 
                         &:hover {
-                            background-color: ${cssVars['vira-modal-close-button-hover-background-color'].value};
+                            background-color: ${viraFormCssVars['vira-form-selection-hover-color']
+        .value};
                         }
 
                         & ${ViraIcon} {
@@ -171,7 +169,7 @@ export const ViraModal = defineViraElement()({
                 ${listen('close', () => {
             close();
         })}
-                ${listen('click', (event) => {
+                ${listen('mousedown', (event) => {
             if (state.contentElement &&
                 !event.composedPath().includes(state.contentElement) &&
                 !inputs.blockLightDismissal) {

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

@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
     min: number;
     /** @default 100 */
     max: number;
-}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly [], readonly []>;
+}>>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;

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

@@ -1,6 +1,7 @@
 import { clamp } from '@augment-vir/common';
 import { applyAttributes } from 'device-navigation';
 import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
@@ -19,8 +20,6 @@ export const ViraProgress = defineViraElement()({
          * dimension which creates a perfect pill border radius.
          */
         'vira-progress-border-radius': '99999999px',
-        'vira-progress-background-color': '#eee',
-        'vira-progress-foreground-color': 'dodgerblue',
     },
     styles: ({ cssVars }) => css `
         :host {
@@ -31,7 +30,7 @@ export const ViraProgress = defineViraElement()({
             display: inline-flex;
             align-items: center;
             border-radius: ${cssVars['vira-progress-border-radius'].value};
-            color: ${cssVars['vira-progress-foreground-color'].value};
+            color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
             overflow: hidden;
         }
 
@@ -41,7 +40,7 @@ export const ViraProgress = defineViraElement()({
         }
 
         .background-bar {
-            background-color: ${cssVars['vira-progress-background-color'].value};
+            background-color: ${viraFormCssVars['vira-form-filled-background-color'].value};
             height: 100%;
             flex-grow: 1;
         }