vira 31.20.0 → 31.21.1

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

@@ -17,10 +17,10 @@ export type ViraCheckboxInputs = {
 } & PartialWithUndefined<{
     stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
     attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
-    disabled: boolean;
+    isDisabled: boolean;
     label: string;
     hasError: boolean;
-    horizontal: boolean;
+    useHorizontalLabel: 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. */

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

@@ -15,7 +15,7 @@ import { ViraIcon } from './vira-icon.element.js';
 export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     hostClasses: {
-        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
+        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.useHorizontalLabel,
         'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
         'vira-checkbox-filled-unchecked': ({ inputs }) => !!inputs.fillWhenUnchecked,
     },
@@ -126,8 +126,8 @@ export const ViraCheckbox = defineViraElement()({
         }
 
         ${hostClasses['vira-checkbox-horizontal'].selector} label {
-            flex-direction: row-reverse;
-            align-items: flex-start;
+            flex-direction: row;
+            align-items: center;
             gap: 8px;
 
             & .label-text {
@@ -140,7 +140,7 @@ export const ViraCheckbox = defineViraElement()({
     },
     render({ inputs, dispatch, events }) {
         function updateValue() {
-            if (!inputs.disabled) {
+            if (!inputs.isDisabled) {
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
@@ -158,7 +158,7 @@ export const ViraCheckbox = defineViraElement()({
         return html `
             <label
                 class=${classMap({
-            disabled: !!inputs.disabled,
+            disabled: !!inputs.isDisabled,
         })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
@@ -168,14 +168,14 @@ export const ViraCheckbox = defineViraElement()({
                 <span
                     class="custom-checkbox ${classMap({
             checked: inputs.value,
-            disabled: !!inputs.disabled,
+            disabled: !!inputs.isDisabled,
             error: !!inputs.hasError,
         })}"
                     role="checkbox"
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
-                    aria-disabled=${inputs.disabled ? 'true' : 'false'}
-                    tabindex=${inputs.disabled ? '-1' : '0'}
+                    aria-disabled=${inputs.isDisabled ? 'true' : 'false'}
+                    tabindex=${inputs.isDisabled ? '-1' : '0'}
                     ${attributes(inputs.attributePassthrough?.['custom-checkbox'])}
                     style=${ifDefined(inputs.stylePassthrough?.['custom-checkbox'])}
                     ${listenToActivate(updateValue)}

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

@@ -29,6 +29,21 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
      * @default false
      */
     horizontalCheckboxes: boolean;
+    /**
+     * When `true`, all form field labels render to the left of their inputs instead of above
+     * them.
+     *
+     * @default false
+     */
+    useHorizontalLabels: boolean;
+    /**
+     * When `true`, all fields in this form are prevented from user edits. Inputs, selects, and
+     * text areas render their current value as plain text; checkboxes render disabled since
+     * they have no native readonly mode.
+     *
+     * @default false
+     */
+    isReadonly: boolean;
 }>, {
     lastIsValid: boolean;
 }, {

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

@@ -1,5 +1,6 @@
 import { getObjectTypedEntries } from '@augment-vir/common';
-import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
+import { css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../util/vira-form-fields.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
@@ -14,6 +15,11 @@ import { ViraTextArea } from './vira-text-area.element.js';
  */
 export const ViraForm = defineViraElement()({
     tagName: 'vira-form',
+    state() {
+        return {
+            lastIsValid: false,
+        };
+    },
     events: {
         valueChange: defineElementEvent(),
         validChange: defineElementEvent(),
@@ -34,12 +40,35 @@ export const ViraForm = defineViraElement()({
                 width: unset;
             }
         }
+
+        .horizontal-fields {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0 10px;
+
+            & th,
+            & td {
+                padding: 0;
+            }
+
+            & th {
+                padding: 0 8px;
+                vertical-align: middle;
+                white-space: nowrap;
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: right;
+            }
+
+            & td {
+                width: 100%;
+                vertical-align: top;
+
+                & > ${ViraCheckbox}, & > ${ViraInput}, & > ${ViraSelect}, & > ${ViraTextArea} {
+                    width: 100%;
+                }
+            }
+        }
     `,
-    state() {
-        return {
-            lastIsValid: false,
-        };
-    },
     render({ inputs, dispatch, events, state, updateState }) {
         const currentIsValid = areFormFieldsValid(inputs.fields);
         if (currentIsValid !== state.lastIsValid) {
@@ -50,168 +79,236 @@ export const ViraForm = defineViraElement()({
                 allFieldsAreValid: currentIsValid,
             }));
         }
+        function wrapFormField({ fieldTemplate, label, }) {
+            if (inputs.useHorizontalLabels) {
+                return html `
+                    <tr>
+                        <th scope="row">${label}</th>
+                        <td>${fieldTemplate}</td>
+                    </tr>
+                `;
+            }
+            else {
+                return fieldTemplate;
+            }
+        }
         const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
+            const label = applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers);
+            const isDisabled = !!(inputs.isDisabled || field.isDisabled);
+            const childLabel = inputs.useHorizontalLabels ? undefined : label;
+            const horizontalLabelAttributes = inputs.useHorizontalLabels && label
+                ? {
+                    'aria-label': label,
+                }
+                : {};
             if (field.isHidden) {
                 return nothing;
             }
             else if (field.type === ViraFormFieldType.Checkbox) {
-                return html `
-                        <${ViraCheckbox.assign({
-                    value: field.value || false,
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    hasError: field.hasError,
-                    horizontal: inputs.horizontalCheckboxes,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraCheckbox.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraCheckbox}>
-                    `;
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraCheckbox.assign({
+                        value: field.value || false,
+                        isDisabled: !!(isDisabled || inputs.isReadonly),
+                        hasError: field.hasError,
+                        useHorizontalLabel: inputs.horizontalCheckboxes,
+                        fillWhenChecked: field.fillWhenChecked,
+                        fillWhenUnchecked: field.fillWhenUnchecked,
+                        label: childLabel,
+                        ...(inputs.useHorizontalLabels && label
+                            ? {
+                                attributePassthrough: {
+                                    'custom-checkbox': horizontalLabelAttributes,
+                                },
+                            }
+                            : {}),
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${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: inputs.isDisabled || field.isDisabled,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                    hasError: field.hasError,
-                    icon: field.icon,
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraSelect.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraSelect}>
-                    `;
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraSelect.assign({
+                        options: field.options,
+                        value: field.value,
+                        placeholder: field.placeholder,
+                        disabled: isDisabled,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        ...(inputs.useHorizontalLabels && label
+                            ? {
+                                attributePassthrough: {
+                                    select: horizontalLabelAttributes,
+                                },
+                            }
+                            : {}),
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraSelect.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            key,
+                            ...field,
+                            value: event.detail,
+                        }));
+                    })}
+                            ></${ViraSelect}>
+                        `,
+                });
             }
             else if (field.type === ViraFormFieldType.TextArea) {
-                return html `
-                        <${ViraTextArea.assign({
-                    value: field.value || '',
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    hasError: field.hasError,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                    placeholder: field.placeholder,
-                    rows: field.rows,
-                    preventResize: field.preventResize,
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraTextArea.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraTextArea}>
-                    `;
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraTextArea.assign({
+                        value: field.value || '',
+                        disabled: isDisabled,
+                        hasError: field.hasError,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        rows: field.rows,
+                        preventResize: field.preventResize,
+                        attributePassthrough: horizontalLabelAttributes,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraTextArea.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            key,
+                            ...field,
+                            value: event.detail,
+                        }));
+                    })}
+                            ></${ViraTextArea}>
+                        `,
+                });
             }
             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}>
-                    `;
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraInput.assign({
+                        value: field.value?.toString() || '',
+                        disabled: isDisabled,
+                        allowedInputs: /\d/,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        showClearButton: inputs.showClearButtons,
+                        type: ViraInputType.Number,
+                        attributePassthrough: {
+                            ...horizontalLabelAttributes,
+                            ...(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({
-                    value: field.value || '',
-                    disabled: inputs.isDisabled || field.isDisabled,
-                    hasError: field.hasError,
-                    icon: field.icon,
-                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
-                    placeholder: field.placeholder,
-                    showClearButton: inputs.showClearButtons,
-                    attributePassthrough: field.isUsername
-                        ? {
-                            autocomplete: 'username',
-                        }
-                        : field.type === ViraFormFieldType.NewPassword
-                            ? {
-                                autocomplete: 'new-password',
-                            }
-                            : field.type === ViraFormFieldType.ExistingPassword
+                return wrapFormField({
+                    label,
+                    fieldTemplate: html `
+                            <${ViraInput.assign({
+                        value: field.value || '',
+                        disabled: isDisabled,
+                        hasError: field.hasError,
+                        icon: field.icon,
+                        isReadonly: inputs.isReadonly,
+                        label: childLabel,
+                        placeholder: field.placeholder,
+                        showClearButton: inputs.showClearButtons,
+                        attributePassthrough: {
+                            ...horizontalLabelAttributes,
+                            ...(field.isUsername
                                 ? {
-                                    autocomplete: 'password',
+                                    autocomplete: 'username',
                                 }
-                                : field.type === ViraFormFieldType.Email
+                                : field.type === ViraFormFieldType.NewPassword
                                     ? {
-                                        autocomplete: 'email',
+                                        autocomplete: 'new-password',
                                     }
-                                    : {},
-                    type: [
-                        ViraFormFieldType.NewPassword,
-                        ViraFormFieldType.ExistingPassword,
-                        ViraFormFieldType.PlainPassword,
-                    ].includes(field.type)
-                        ? ViraInputType.Password
-                        : field.type === ViraFormFieldType.Email
-                            ? ViraInputType.Email
-                            : ViraInputType.Default,
-                })}
-                            ${field.testId ? testId(field.testId) : nothing}
-                            ${listen(ViraInput.events.valueChange, (event) => {
-                    dispatch(new events.valueChange({
-                        key,
-                        ...field,
-                        value: event.detail,
-                    }));
-                })}
-                        ></${ViraInput}>
-                    `;
+                                    : field.type === ViraFormFieldType.ExistingPassword
+                                        ? {
+                                            autocomplete: 'password',
+                                        }
+                                        : field.type === ViraFormFieldType.Email
+                                            ? {
+                                                autocomplete: 'email',
+                                            }
+                                            : {}),
+                        },
+                        type: [
+                            ViraFormFieldType.NewPassword,
+                            ViraFormFieldType.ExistingPassword,
+                            ViraFormFieldType.PlainPassword,
+                        ].includes(field.type)
+                            ? ViraInputType.Password
+                            : field.type === ViraFormFieldType.Email
+                                ? ViraInputType.Email
+                                : ViraInputType.Default,
+                    })}
+                                ${field.testId ? testId(field.testId) : nothing}
+                                ${listen(ViraInput.events.valueChange, (event) => {
+                        dispatch(new events.valueChange({
+                            key,
+                            ...field,
+                            value: event.detail,
+                        }));
+                    })}
+                            ></${ViraInput}>
+                        `,
+                });
             }
         });
+        const formFieldsWrapper = inputs.useHorizontalLabels
+            ? html `
+                  <table class="horizontal-fields">
+                      <tbody>${formFieldTemplates}</tbody>
+                  </table>
+              `
+            : formFieldTemplates;
         return html `
             <form ${listen('submit', (event) => event.preventDefault())}>
-                ${formFieldTemplates}
+                ${formFieldsWrapper}
                 <slot></slot>
             </form>
         `;

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

@@ -35,6 +35,7 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
 } & PartialWithUndefined<{
     placeholder: string;
     disabled: boolean;
+    isReadonly: boolean;
     allowedInputs: string | RegExp;
     blockedInputs: string | RegExp;
     disableBrowserHelps: boolean;

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

@@ -6,6 +6,7 @@ import { CloseX24Icon } from '../icons/icon-svgs/24/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 { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
@@ -36,7 +37,7 @@ export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
         'vira-input-padding-horizontal': '10px',
-        'vira-input-padding-vertical': '6px',
+        'vira-input-padding-vertical': '5px',
     },
     styles: ({ hostClasses, cssVars }) => {
         return css `
@@ -137,6 +138,7 @@ export const ViraInput = defineViraElement()({
                 max-width: 100%;
                 flex-grow: 1;
                 display: inline-flex;
+                min-height: ${viraSizeHeights[ViraSize.Medium]}px;
                 box-sizing: border-box;
                 align-items: center;
                 position: relative;
@@ -156,6 +158,10 @@ export const ViraInput = defineViraElement()({
                 margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
             }
 
+            .readonly-value {
+                overflow-wrap: anywhere;
+            }
+
             input {
                 ${noNativeFormStyles};
                 cursor: text;
@@ -293,6 +299,22 @@ export const ViraInput = defineViraElement()({
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
+        if (inputs.isReadonly) {
+            const readonlyValueTemplate = html `
+                <span class="readonly-value">${filteredValue}</span>
+            `;
+            if (inputs.label) {
+                return html `
+                    <label>
+                        <span class="input-label">${inputs.label}</span>
+                        ${readonlyValueTemplate}
+                    </label>
+                `;
+            }
+            else {
+                return readonlyValueTemplate;
+            }
+        }
         const iconTemplate = inputs.icon
             ? html `
                   <${ViraIcon.assign({

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

@@ -290,7 +290,7 @@ export const ViraJsonForm = defineViraElement()({
                 return html `
                     <${ViraCheckbox.assign({
                     value: value === true,
-                    disabled: isDisabled,
+                    isDisabled,
                 })}
                         ${listen(ViraCheckbox.events.valueChange, (event) => {
                     emitReplaceAt(path, event.detail);

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

@@ -20,6 +20,11 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
     /** If set to `true`, only minimal styles are applied. */
     rawSelect: boolean;
     disabled: boolean;
+    /**
+     * When `true`, the currently selected option's label is rendered as plain text with no
+     * wrapper, border, or focus styles.
+     */
+    isReadonly: boolean;
     attributePassthrough: Readonly<PartialWithUndefined<{
         label: AttributeValues;
         select: AttributeValues;

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

@@ -185,6 +185,10 @@ export const ViraSelect = defineViraElement()({
             }
         }
 
+        .readonly-value {
+            overflow-wrap: anywhere;
+        }
+
         ${hostClasses['vira-select-disabled'].selector} {
             cursor: not-allowed;
 
@@ -252,6 +256,27 @@ export const ViraSelect = defineViraElement()({
     },
     render({ inputs, state, dispatch, events }) {
         const value = inputs.value || undefined;
+        if (inputs.isReadonly) {
+            const selectedOption = inputs.options
+                .flatMap((entry) => (isViraSelectOptionGroup(entry) ? [...entry.options] : [entry]))
+                .find((option) => option.value === value);
+            const readonlyValueTemplate = html `
+                <span class="readonly-value">
+                    ${selectedOption?.label || inputs.placeholder || ''}
+                </span>
+            `;
+            if (inputs.label) {
+                return html `
+                    <label ${attributes(inputs.attributePassthrough?.label)}>
+                        <span class="select-label">${inputs.label}</span>
+                        ${readonlyValueTemplate}
+                    </label>
+                `;
+            }
+            else {
+                return readonlyValueTemplate;
+            }
+        }
         const placeholderOptionTemplate = inputs.placeholder || value == undefined
             ? html `
                       <option value="" disabled ?selected=${value == undefined}>

package/dist/elements/vira-text-area.element.d.ts

@@ -21,6 +21,7 @@ export declare const ViraTextArea: import("element-vir").DeclarativeElementDefin
 } & PartialWithUndefined<{
     placeholder: string;
     disabled: boolean;
+    isReadonly: boolean;
     allowedInputs: string | RegExp;
     blockedInputs: string | RegExp;
     disableBrowserHelps: boolean;

package/dist/elements/vira-text-area.element.js

@@ -97,6 +97,11 @@ export const ViraTextArea = defineViraElement()({
             pointer-events: none;
         }
 
+        .readonly-value {
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+        }
+
         ${hostClasses['vira-text-area-prevent-resize'].selector} textarea {
             resize: none;
         }
@@ -154,6 +159,22 @@ export const ViraTextArea = defineViraElement()({
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
+        if (inputs.isReadonly) {
+            const readonlyValueTemplate = html `
+                <span class="readonly-value">${filteredValue}</span>
+            `;
+            if (inputs.label) {
+                return html `
+                    <label>
+                        <span class="text-area-label">${inputs.label}</span>
+                        ${readonlyValueTemplate}
+                    </label>
+                `;
+            }
+            else {
+                return readonlyValueTemplate;
+            }
+        }
         const textAreaTemplate = html `
             <span class="text-area-wrapper">
                 <textarea

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

@@ -12,6 +12,7 @@ export type SharedTextInputElementInputs = {
     placeholder: string;
     /** Set to true to trigger disabled styles and to block all user input. */
     disabled: boolean;
+    isReadonly: boolean;
     /**
      * Only letters in the given string or matches to the given RegExp will be allowed.
      * blockedInputs takes precedence over this input.

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

@@ -77,7 +77,12 @@ export type ViraFormField = ({
 }> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Checkbox;
     value: boolean | undefined;
-} & CommonViraFormFields) | ({
+} & PartialWithUndefined<{
+    /** 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;
+}> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Number;
     value: number | undefined;
 } & PartialWithUndefined<{

package/package.json

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