vira 32.3.0 → 32.4.0

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

@@ -1,5 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type AttributeValues, type CSSResult } from 'element-vir';
+import { type AttributeValues, type CSSResult, type HtmlInterpolation } from 'element-vir';
 import { ViraIcon } from './vira-icon.element.js';
 /**
  * All inner elements supported by {@link ViraCheckbox}.
@@ -19,10 +19,10 @@ export type ViraCheckboxInputs = {
     attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
     isDisabled: boolean;
     /**
-     * Text label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
+     * Label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
      * filled.
      */
-    label: string;
+    label: string | HtmlInterpolation;
     hasError: boolean;
     useHorizontalLabel: boolean;
     /** The checkbox will be filled with a form selection color when it is checked. */

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

@@ -1,3 +1,4 @@
+import { check } from '@augment-vir/assert';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, } from 'element-vir';
 import { Check24Icon, viraIconCssVars } from '../icons/index.js';
@@ -168,7 +169,7 @@ export const ViraCheckbox = defineViraElement()({
             }
         }
         const hasLabel = !!inputs.label || state.hasSlottedLabel;
-        const textLabel = html `
+        const labelTemplate = html `
             <span
                 class="label-text ${classMap({
             empty: !hasLabel,
@@ -198,7 +199,7 @@ export const ViraCheckbox = defineViraElement()({
                 style=${ifDefined(inputs.stylePassthrough?.label)}
                 ${listen('mousedown', updateValue)}
             >
-                ${textLabel}
+                ${labelTemplate}
                 <span
                     class="custom-checkbox ${classMap({
             checked: inputs.value,
@@ -206,7 +207,7 @@ export const ViraCheckbox = defineViraElement()({
             error: !!inputs.hasError,
         })}"
                     role="checkbox"
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
                     aria-disabled=${inputs.isDisabled ? 'true' : 'false'}
                     tabindex=${inputs.isDisabled ? '-1' : '0'}

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

@@ -1,5 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type FullDate, type Timezone } from 'date-vir';
+import { type HtmlInterpolation } from 'element-vir';
 /**
  * A native date picker input that emits `FullDate` values. Fires `valueChange` whenever the user
  * selects (or clears) a date.
@@ -18,7 +19,7 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
     /** If true, applies error styling. */
     hasError: boolean;
     /** A label that is shown above the input, if provided. */
-    label: string;
+    label: string | HtmlInterpolation;
     /** If true, the input is disabled and cannot be edited. */
     isDisabled: boolean;
     /** If true, the current value is rendered as plain text instead of an editable input. */

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

@@ -1,7 +1,8 @@
+import { check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { calculateRelativeDate, createUtcFullDate, FullDatePart, getNowInUtcTimezone, parseInputElementValue, toHtmlInputString, userTimezone, } from 'date-vir';
-import { css, defineElementEvent, html, ifDefined, listen } from 'element-vir';
+import { css, defineElementEvent, html, ifDefined, listen, } from 'element-vir';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
@@ -113,7 +114,7 @@ export const ViraDateInput = defineViraElement()({
         const inputTemplate = html `
             <input
                 id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                aria-label=${ifDefined(inputs.label || undefined)}
+                aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                 type="date"
                 min=${minDate}
                 max=${maxDate}

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

@@ -1,4 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { type ShowPopUpResult } from '../util/pop-up-manager.js';
 import { type ViraSelectOption } from '../util/vira-select-option.js';
@@ -25,7 +26,7 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;
-    label: string;
+    label: string | HtmlInterpolation;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
 } & PopUpTriggerPosition>, {

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

@@ -236,7 +236,7 @@ export const ViraDropdown = defineViraElement()({
         })}"
                     slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     ${testId(testIds.trigger)}
                     ${listen('mousedown', () => {
             if (!state.showPopUpResult) {

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

@@ -1,3 +1,4 @@
+import { check } from '@augment-vir/assert';
 import { getObjectTypedEntries } from '@augment-vir/common';
 import { css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -111,11 +112,7 @@ export const ViraForm = defineViraElement()({
                 return nothing;
             }
             else if (field.type === ViraFormFieldType.Checkbox) {
-                const checkboxLabel = showRequiredMarker
-                    ? html `
-                              ${field.label}*
-                          `
-                    : field.label;
+                const checkboxLabel = applyRequiredLabel(field.label, showRequiredMarker);
                 return wrapFormField({
                     label: checkboxLabel,
                     fieldTemplate: html `
@@ -153,7 +150,7 @@ export const ViraForm = defineViraElement()({
             }
             const label = applyRequiredLabel(field.label, showRequiredMarker);
             const childLabel = inputs.useHorizontalLabels ? undefined : label;
-            const horizontalLabelAttributes = inputs.useHorizontalLabels && label
+            const horizontalLabelAttributes = inputs.useHorizontalLabels && check.isString(label) && label
                 ? {
                     'aria-label': label,
                 }

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

@@ -1,4 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/index.js';
 export * from '../util/shared-text-input-logic.js';
 /**
@@ -25,7 +26,7 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
     /** 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;
+    label: string | HtmlInterpolation;
     /** If true, applies error styling. */
     hasError: boolean;
     showClearButton: boolean;

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

@@ -1,4 +1,4 @@
-import { assertWrap } from '@augment-vir/assert';
+import { assertWrap, check } 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';
@@ -374,7 +374,7 @@ export const ViraInput = defineViraElement()({
 
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}

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

@@ -1,5 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type AttributeValues } from 'element-vir';
+import { type AttributeValues, type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/index.js';
 import { type ViraSelectOption, type ViraSelectOptionGroup } from '../util/vira-select-option.js';
 /**
@@ -16,7 +16,7 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
 } & PartialWithUndefined<{
     icon: Readonly<ViraIconSvg>;
     placeholder: string;
-    label: string;
+    label: string | HtmlInterpolation;
     /** If set to `true`, only minimal styles are applied. */
     rawSelect: boolean;
     disabled: boolean;

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

@@ -1,4 +1,4 @@
-import { assertWrap } from '@augment-vir/assert';
+import { assertWrap, check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
@@ -348,7 +348,7 @@ export const ViraSelect = defineViraElement()({
         })}
                     tabindex=${inputs.disabled ? -1 : 0}
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
                     ${listen('input', (event) => {
             const selectElement = extractEventTarget(event, HTMLSelectElement);

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

@@ -1,4 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
 /**
  * A multi-line text area element with all listeners properly attached. Mirrors the look and feel of
  * {@link ViraInput} but for multi-line text input.
@@ -9,7 +10,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  */
 export declare const ViraTextArea: import("element-vir").DeclarativeElementDefinition<"vira-text-area", PartialWithUndefined<{
     /** A label that is shown above the text area, if provided. */
-    label: string;
+    label: string | HtmlInterpolation;
     /** If true, applies error styling. */
     hasError: boolean;
     /** Number of visible text rows. Defaults to 4. */

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

@@ -1,5 +1,6 @@
+import { check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
-import { attributes, css, defineElementEvent, html, ifDefined, listen } from 'element-vir';
+import { attributes, css, defineElementEvent, html, ifDefined, listen, } from 'element-vir';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { viraDisabledStyles } from '../styles/index.js';
@@ -187,7 +188,7 @@ export const ViraTextArea = defineViraElement()({
             <span class="text-area-wrapper">
                 <textarea
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     rows=${inputs.rows ?? 4}
                     ?disabled=${inputs.disabled}
                     autocomplete=${ifDefined(inputs.disableBrowserHelps ? 'off' : undefined)}

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

@@ -29,7 +29,7 @@ export declare enum ViraFormFieldType {
  * @category Internal
  */
 export type CommonViraFormFields = {
-    label: string;
+    label: string | HtmlInterpolation;
 } & PartialWithUndefined<{
     /** Applies a test id to the form field element. */
     testId: string;
@@ -80,17 +80,12 @@ export type ViraFormField = ({
 }> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Checkbox;
     value: boolean | undefined;
-    /**
-     * Label for the checkbox. Unlike other field types, this accepts arbitrary HTML so the
-     * checkbox's label slot can be filled with rich content.
-     */
-    label: HtmlInterpolation;
 } & 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;
-}> & Omit<CommonViraFormFields, 'label'>) | ({
+}> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Number;
     value: number | undefined;
 } & PartialWithUndefined<{
@@ -132,7 +127,7 @@ export type ViraFormFields = Record<string, ViraFormField>;
  *
  * @category Internal
  */
-export declare function applyRequiredLabel(label: string | undefined, isRequired: boolean): string | undefined;
+export declare function applyRequiredLabel(label: string | HtmlInterpolation | undefined, isRequired: boolean): string | HtmlInterpolation | undefined;
 /**
  * Checks if all the {@link ViraFormField} entries in a given {@link ViraFormFields} are valid through
  * the following checks:

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

@@ -1,5 +1,6 @@
 import { check } from '@augment-vir/assert';
 import { addSuffix, getObjectTypedValues } from '@augment-vir/common';
+import { html } from 'element-vir';
 /**
  * Form field types for {@link ViraFormField}.
  *
@@ -27,19 +28,22 @@ export var ViraFormFieldType;
  * @category Internal
  */
 export function applyRequiredLabel(label, isRequired) {
-    if (label) {
-        if (isRequired) {
-            return addSuffix({
-                value: label,
-                suffix: '*',
-            });
-        }
-        else {
-            return label;
-        }
+    if (!label) {
+        return undefined;
+    }
+    else if (!isRequired) {
+        return label;
+    }
+    else if (check.isString(label)) {
+        return addSuffix({
+            value: label,
+            suffix: '*',
+        });
     }
     else {
-        return undefined;
+        return html `
+            ${label}*
+        `;
     }
 }
 /**

package/package.json

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