vira 28.3.0 → 28.5.0

package/dist/elements/index.d.ts

@@ -12,6 +12,7 @@ export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
+export * from './vira-error.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/index.js

@@ -12,6 +12,7 @@ export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
+export * from './vira-error.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

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-error-color" | "vira-card-success-color" | "vira-card-padding", readonly [], readonly []>;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-border-radius" | "vira-card-padding", readonly [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * State options for {@link ViraCard}.
@@ -25,8 +26,6 @@ export const ViraCard = defineViraElement()({
     cssVars: {
         'vira-card-border': '1px solid #d3d3d3',
         'vira-card-border-radius': '16px',
-        'vira-card-error-color': 'red',
-        'vira-card-success-color': 'green',
         'vira-card-padding': '16px',
     },
     styles: ({ hostClasses, cssVars }) => css `
@@ -38,10 +37,10 @@ export const ViraCard = defineViraElement()({
         }
 
         ${hostClasses['vira-card-error'].selector} {
-            border-color: ${cssVars['vira-card-error-color'].value};
+            border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
         }
         ${hostClasses['vira-card-success'].selector} {
-            border-color: ${cssVars['vira-card-success-color'].value};
+            border-color: ${viraFormCssVars['vira-form-success-foreground-color'].value};
         }
     `,
     render() {

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

@@ -0,0 +1,7 @@
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export declare const ViraError: import("element-vir").DeclarativeElementDefinition<"vira-error", {}, {}, {}, "vira-error-", "vira-error-font-weight", readonly [], readonly []>;

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

@@ -0,0 +1,26 @@
+import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * An error wrapper that applies error coloring (red, by default).
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-error
+ */
+export const ViraError = defineViraElement()({
+    tagName: 'vira-error',
+    cssVars: {
+        'vira-error-font-weight': 'bold',
+    },
+    styles: ({ cssVars }) => css `
+        :host {
+            color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            font-weight: ${cssVars['vira-error-font-weight'].value};
+        }
+    `,
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    },
+});

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

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/index.js';
 import { type SharedTextInputElementInputs } from './shared-text-input-logic.js';
 export * from './shared-text-input-logic.js';
@@ -19,15 +20,24 @@ export declare enum ViraInputType {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-input
  */
-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 | undefined;
-    showClearButton?: boolean | undefined;
-    type?: ViraInputType;
-} & SharedTextInputElementInputs, {
+export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", Readonly<PartialWithUndefined<{
+    icon: Pick<ViraIconSvg, "svgTemplate">;
+    /** A suffix that, if provided, is shown following the input field. */
+    suffix: string;
+    /** A label that is shown above the input, if provided. */
+    label: string;
+    /** If true, applies error styling. */
+    hasError: boolean;
+    showClearButton: boolean;
+    type: ViraInputType;
+}> & SharedTextInputElementInputs>, {
     forcedInputWidth: number;
     showPassword: boolean;
+    /**
+     * Used to couple the label and input together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
 }, {
     /**
      * Fires whenever a user input created a new value. Does not fire if all input letters are
@@ -40,4 +50,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-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "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-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "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 []>;

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

@@ -1,9 +1,11 @@
 import { assertWrap } from '@augment-vir/assert';
+import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
 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 { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from './define-vira-element.js';
@@ -57,6 +59,15 @@ export const ViraInput = defineViraElement()({
                 color: ${cssVars['vira-input-text-color'].value};
             }
 
+            label {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                gap: 2px;
+                width: 100%;
+                max-width: 100%;
+            }
+
             ${hostClasses['vira-input-disabled'].selector} {
                 ${viraDisabledStyles};
             }
@@ -226,6 +237,12 @@ export const ViraInput = defineViraElement()({
             .show-password-button:active {
                 color: ${cssVars['vira-input-show-password-button-active-color'].value};
             }
+
+            ${hostClasses['vira-input-error'].selector} {
+                & .wrapper-border {
+                    border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                }
+            }
         `;
     },
     events: {
@@ -245,12 +262,18 @@ export const ViraInput = defineViraElement()({
         return {
             forcedInputWidth: 0,
             showPassword: false,
+            /**
+             * Used to couple the label and input together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
         };
     },
     hostClasses: {
         'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
         'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
         'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
+        'vira-input-error': ({ inputs }) => !!inputs.hasError,
     },
     render: ({ inputs, dispatch, state, updateState, events, host }) => {
         const { filtered: filteredValue } = filterTextInputValue({
@@ -274,11 +297,7 @@ export const ViraInput = defineViraElement()({
              * spellchecking).
              */
             inputs.type === ViraInputType.Password;
-        /**
-         * Don't use a wrapping `<label>` element here because it will mess with browser and
-         * password manager autocomplete for passwords and usernames.
-         */
-        return html `
+        const inputTemplate = html `
             <span
                 class="input-wrapper"
                 ${listen('mousedown', (event) => {
@@ -305,6 +324,8 @@ export const ViraInput = defineViraElement()({
                     `)}
 
                 <input
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}
@@ -377,6 +398,17 @@ export const ViraInput = defineViraElement()({
                 <div class="border-style wrapper-border"></div>
             </span>
         `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId}>
+                    <span class="input-label">${inputs.label}</span>
+                    ${inputTemplate}
+                </label>
+            `;
+        }
+        else {
+            return inputTemplate;
+        }
     },
 });
 function calculateEffectiveInputType(type, showPassword) {

package/dist/styles/form-styles.d.ts

@@ -12,4 +12,6 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-selection-hover-foreground-color': "black";
     readonly 'vira-form-selection-active-background-color': "#d2eaff";
     readonly 'vira-form-selection-active-foreground-color': "black";
+    readonly 'vira-form-error-foreground-color': "red";
+    readonly 'vira-form-success-foreground-color': "green";
 }>;

package/dist/styles/form-styles.js

@@ -13,4 +13,6 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-selection-hover-foreground-color': 'black',
     'vira-form-selection-active-background-color': '#d2eaff',
     'vira-form-selection-active-foreground-color': 'black',
+    'vira-form-error-foreground-color': 'red',
+    'vira-form-success-foreground-color': 'green',
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.3.0",
+    "version": "28.5.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",