vira 28.6.0 → 28.7.1

package/dist/elements/index.d.ts

@@ -13,6 +13,7 @@ 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-form.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

@@ -13,6 +13,7 @@ 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-form.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';

package/dist/elements/shared-text-input-logic.d.ts

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
 import { type AttributeValues } from 'element-vir';
 /**
  * Inputs shared between the multiple input elements.
@@ -6,10 +7,11 @@ import { type AttributeValues } from 'element-vir';
  */
 export type SharedTextInputElementInputs = {
     value: string;
+} & PartialWithUndefined<{
     /** Shown when no other text is present. Input restrictions do not apply to this property. */
-    placeholder?: string;
+    placeholder: string;
     /** Set to true to trigger disabled styles and to block all user input. */
-    disabled?: boolean;
+    disabled: boolean;
     /**
      * Only letters in the given string or matches to the given RegExp will be allowed.
      * blockedInputs takes precedence over this input.
@@ -17,16 +19,16 @@ export type SharedTextInputElementInputs = {
      * For example: if allowedInputs is set to "abcd" and blockedInputs is set to "d", only "a",
      * "b", or "c" letters will be allowed.
      */
-    allowedInputs?: string | RegExp;
+    allowedInputs: string | RegExp;
     /** Any letters in the given string or matches to the given RegExp will be blocked. */
-    blockedInputs?: string | RegExp;
+    blockedInputs: string | RegExp;
     /** Disable all browser helps like spellchecking, autocomplete, etc. */
-    disableBrowserHelps?: boolean;
+    disableBrowserHelps: boolean;
     /** Set this to true to make the whole element size to only fit the input text. */
-    fitText?: boolean;
+    fitText: boolean;
     /** A set of attributes that will be applied to the inner native text element. */
-    attributePassthrough?: AttributeValues | undefined;
-};
+    attributePassthrough: AttributeValues;
+}>;
 /**
  * Inputs used to check if the current input element value is allowed.
  *

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

@@ -17,6 +17,7 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
     attributePassthrough: Record<ViraCheckboxInnerElements, AttributeValues>;
     disabled: boolean;
     label: string;
+    hasError: boolean;
 }> & {
     value: boolean;
 };

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

@@ -34,22 +34,22 @@ export const ViraCheckbox = defineViraElement()({
 
         label {
             display: inline-flex;
-            gap: 8px;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
 
             &.disabled {
                 cursor: not-allowed;
             }
 
-            & .text {
+            & .label-text {
                 cursor: pointer;
-                &::first-line {
-                    line-height: 24px;
-                }
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
             }
         }
 
         ${ViraIcon} {
-            ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+            ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
             opacity: 0;
         }
 
@@ -71,6 +71,10 @@ export const ViraCheckbox = defineViraElement()({
                 }
             }
 
+            &.error {
+                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            }
+
             &:hover {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
         .value};
@@ -98,7 +102,7 @@ export const ViraCheckbox = defineViraElement()({
         const textLabel = inputs.label
             ? html `
                   <span
-                      class="text"
+                      class="label-text"
                       ${attributes(inputs.attributePassthrough?.['text'])}
                       style=${ifDefined(inputs.stylePassthrough?.['text'])}
                   >
@@ -113,12 +117,14 @@ export const ViraCheckbox = defineViraElement()({
         })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
-                ${listen('click', updateValue)}
+                ${listen('mousedown', updateValue)}
             >
+                ${textLabel}
                 <span
                     class="custom-checkbox ${classMap({
             checked: inputs.value,
             disabled: !!inputs.disabled,
+            error: !!inputs.hasError,
         })}"
                     role="checkbox"
                     aria-checked=${inputs.value ? 'true' : 'false'}
@@ -136,7 +142,6 @@ export const ViraCheckbox = defineViraElement()({
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>
                 </span>
-                ${textLabel}
             </label>
         `;
     },

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

@@ -0,0 +1,69 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+import { type ViraSelectOption } from './vira-select.element.js';
+/**
+ * Form field types for {@link ViraFormField}.
+ *
+ * @category Internal
+ */
+export declare enum ViraFormFieldType {
+    Text = "text",
+    /** Allows auto complete for _existing_ passwords used on this website (for login). */
+    ExistingPassword = "existing-password",
+    /** Allows auto complete for _new_ passwords used on this website (for login). */
+    NewPassword = "new-password",
+    Email = "email",
+    Select = "select",
+    Checkbox = "checkbox"
+}
+/**
+ * An individual form field for {@link ViraFormFields}.
+ *
+ * @category Internal
+ */
+export type ViraFormField = {
+    type: ViraFormFieldType.Text | ViraFormFieldType.ExistingPassword | ViraFormFieldType.NewPassword | ViraFormFieldType.Email;
+    label: string;
+    value: string;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    icon?: ViraIconSvg | undefined;
+    hasError?: boolean | undefined;
+    isUsername?: boolean | undefined;
+} | {
+    type: ViraFormFieldType.Select;
+    label: string;
+    value: string | undefined;
+    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    icon?: ViraIconSvg | undefined;
+    hasError?: boolean | undefined;
+} | {
+    type: ViraFormFieldType.Checkbox;
+    label: string;
+    value: boolean;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+};
+/**
+ * A collection of form fields for {@link ViraForm}.
+ *
+ * @category Internal
+ */
+export type ViraFormFields = Record<string, ViraFormField>;
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", Readonly<{
+    fields: Readonly<ViraFormFields>;
+} & PartialWithUndefined<{
+    showClearButtons: boolean;
+}>>, {}, {
+    valueChange: import("element-vir").DefineEvent<{
+        key: string;
+    } & ViraFormField>;
+}, "vira-form-", "vira-form-", readonly [], readonly []>;

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

@@ -0,0 +1,136 @@
+import { getObjectTypedEntries } from '@augment-vir/common';
+import { css, defineElementEvent, html, listen } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraInput, ViraInputType } from './vira-input.element.js';
+import { ViraSelect } from './vira-select.element.js';
+/**
+ * Form field types for {@link ViraFormField}.
+ *
+ * @category Internal
+ */
+export var ViraFormFieldType;
+(function (ViraFormFieldType) {
+    ViraFormFieldType["Text"] = "text";
+    /** Allows auto complete for _existing_ passwords used on this website (for login). */
+    ViraFormFieldType["ExistingPassword"] = "existing-password";
+    /** Allows auto complete for _new_ passwords used on this website (for login). */
+    ViraFormFieldType["NewPassword"] = "new-password";
+    ViraFormFieldType["Email"] = "email";
+    ViraFormFieldType["Select"] = "select";
+    ViraFormFieldType["Checkbox"] = "checkbox";
+})(ViraFormFieldType || (ViraFormFieldType = {}));
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export const ViraForm = defineViraElement()({
+    tagName: 'vira-form',
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    styles: css `
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+    `,
+    render({ inputs, dispatch, events }) {
+        const formFields = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
+            if (field.type === ViraFormFieldType.Checkbox) {
+                return html `
+                        <${ViraCheckbox.assign({
+                    value: field.value,
+                    disabled: field.disabled,
+                    hasError: field.hasError,
+                    label: field.label,
+                })}
+                            ${listen(ViraCheckbox.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraCheckbox}>
+                    `;
+            }
+            else if (field.type === ViraFormFieldType.Select) {
+                return html `
+                        <${ViraSelect.assign({
+                    options: field.options,
+                    value: field.value,
+                    placeholder: field.placeholder,
+                    disabled: field.disabled,
+                    label: field.label,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                })}
+                            ${listen(ViraSelect.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraSelect}>
+                    `;
+            }
+            else {
+                return html `
+                        <${ViraInput.assign({
+                    value: field.value,
+                    disabled: field.disabled,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                    label: field.label,
+                    placeholder: field.placeholder,
+                    showClearButton: inputs.showClearButtons,
+                    attributePassthrough: field.isUsername
+                        ? {
+                            autocomplete: 'username',
+                        }
+                        : field.type === ViraFormFieldType.NewPassword
+                            ? {
+                                autocomplete: 'new-password',
+                            }
+                            : field.type === ViraFormFieldType.ExistingPassword
+                                ? {
+                                    autocomplete: 'password',
+                                }
+                                : field.type === ViraFormFieldType.Email
+                                    ? {
+                                        autocomplete: 'email',
+                                    }
+                                    : {},
+                    type: [
+                        ViraFormFieldType.NewPassword,
+                        ViraFormFieldType.ExistingPassword,
+                    ].includes(field.type)
+                        ? ViraInputType.Password
+                        : field.type === ViraFormFieldType.Email
+                            ? ViraInputType.Email
+                            : ViraInputType.Default,
+                })}
+                            ${listen(ViraInput.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraInput}>
+                    `;
+            }
+        });
+        return html `
+            <form ${listen('submit', (event) => event.preventDefault())}>
+                ${formFields}
+                <slot></slot>
+            </form>
+        `;
+    },
+});

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

@@ -1,6 +1,5 @@
 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';
 /**
  * Input types for {@link ViraInput}.
@@ -30,7 +29,17 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
     hasError: boolean;
     showClearButton: boolean;
     type: ViraInputType;
-}> & SharedTextInputElementInputs>, {
+}> & {
+    value: string;
+} & PartialWithUndefined<{
+    placeholder: string;
+    disabled: boolean;
+    allowedInputs: string | RegExp;
+    blockedInputs: string | RegExp;
+    disableBrowserHelps: boolean;
+    fitText: boolean;
+    attributePassthrough: import("element-vir").AttributeValues;
+}>>, {
     forcedInputWidth: number;
     showPassword: boolean;
     /**

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

@@ -61,6 +61,7 @@ export const ViraInput = defineViraElement()({
                 gap: 2px;
                 width: 100%;
                 max-width: 100%;
+                cursor: text;
 
                 & .input-label {
                     font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
@@ -339,6 +340,7 @@ export const ViraInput = defineViraElement()({
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
+                    autofocus=${false}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}

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

@@ -168,18 +168,20 @@ export const ViraSelect = defineViraElement()({
         }
     `,
     render({ inputs, state, dispatch, events }) {
-        const placeholderOptionTemplate = inputs.placeholder
+        const value = inputs.value || undefined;
+        const placeholderOptionTemplate = inputs.placeholder || value == undefined
             ? html `
-                  <option value="" disabled ?selected=${inputs.value == undefined}>
-                      ${inputs.placeholder}
-                  </option>
-              `
+                      <option value="" disabled ?selected=${value == undefined}>
+                          ${inputs.placeholder}
+                      </option>
+                  `
             : nothing;
         const selectTemplate = html `
             <span class="select-wrapper">
                 <select
+                    .value=${ifDefined(value)}
                     class=${classMap({
-            placeholder: !inputs.value && !!inputs.placeholder,
+            placeholder: !value && !!inputs.placeholder,
             'with-icon': !!inputs.icon,
         })}
                     tabindex=${inputs.disabled ? -1 : 0}
@@ -187,8 +189,12 @@ export const ViraSelect = defineViraElement()({
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
                     ${listen('input', (event) => {
-            const element = extractEventTarget(event, HTMLSelectElement);
-            dispatch(new events.valueChange(element.value));
+            const selectElement = extractEventTarget(event, HTMLSelectElement);
+            const newValue = selectElement.value;
+            if (selectElement.value !== value) {
+                selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
+            }
+            dispatch(new events.valueChange(newValue));
         })}
                     ${attributes(inputs.attributePassthrough?.select)}
                 >
@@ -196,9 +202,10 @@ export const ViraSelect = defineViraElement()({
                     ${inputs.options.map((option) => {
             return html `
                             <option
-                                ?selected=${option.value === inputs.value}
+                                ?selected=${option.value === value}
                                 aria-label=${option.label}
                                 ?disabled=${option.disabled}
+                                value=${option.value}
                             >
                                 ${option.label}
                             </option>

package/dist/styles/focus.js

@@ -10,7 +10,7 @@ import { viraBorders } from './border.js';
  */
 export const viraFocusCssVars = defineCssVars({
     'vira-focus-outline-color': '#59b1ff',
-    'vira-focus-outline-border-radius': css `calc(${viraBorders['vira-form-input-radius'].value} + 4px)`,
+    'vira-focus-outline-border-radius': css `calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
 });
 /**
  * Create styles that look like an outline for the given selector.

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

@@ -10,9 +10,9 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-background-color': "white";
     readonly 'vira-form-foreground-color': "black";
     readonly 'vira-form-text-selection-color': "#cfe9ff";
-    readonly 'vira-form-selection-hover-background-color': "#d2eaff";
+    readonly 'vira-form-selection-hover-background-color': "#e6f9fe";
     readonly 'vira-form-selection-hover-foreground-color': "black";
-    readonly 'vira-form-selection-active-background-color': "#d2eaff";
+    readonly 'vira-form-selection-active-background-color': "#e6f9fe";
     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

@@ -11,9 +11,9 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-background-color': 'white',
     'vira-form-foreground-color': 'black',
     'vira-form-text-selection-color': '#cfe9ff',
-    'vira-form-selection-hover-background-color': '#d2eaff',
+    'vira-form-selection-hover-background-color': '#e6f9fe',
     'vira-form-selection-hover-foreground-color': 'black',
-    'vira-form-selection-active-background-color': '#d2eaff',
+    'vira-form-selection-active-background-color': '#e6f9fe',
     '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.6.0",
+    "version": "28.7.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",