vira 31.22.2 → 31.23.0

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

@@ -18,6 +18,10 @@ export type ViraCheckboxInputs = {
     stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
     attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
     isDisabled: boolean;
+    /**
+     * Text label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
+     * filled.
+     */
     label: string;
     hasError: boolean;
     useHorizontalLabel: boolean;
@@ -33,6 +37,8 @@ export type ViraCheckboxInputs = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
+export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, Readonly<ViraCheckboxInputs>, {
+    hasSlottedLabel: boolean;
+}, {
     valueChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", "vira-checkbox-", readonly [], readonly []>;
+}, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", `vira-${string}-`, readonly ["vira-checkbox-label"], readonly []>;

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

@@ -1,4 +1,5 @@
-import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, nothing, } from 'element-vir';
+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';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
@@ -14,6 +15,14 @@ import { ViraIcon } from './vira-icon.element.js';
  */
 export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
+    slotNames: [
+        'vira-checkbox-label',
+    ],
+    state() {
+        return {
+            hasSlottedLabel: false,
+        };
+    },
     hostClasses: {
         'vira-checkbox-horizontal': ({ inputs }) => !!inputs.useHorizontalLabel,
         'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
@@ -86,6 +95,10 @@ export const ViraCheckbox = defineViraElement()({
             & .label-text {
                 cursor: pointer;
                 font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+
+                &.empty {
+                    display: none;
+                }
             }
 
             &:not(.disabled):hover .custom-checkbox {
@@ -126,7 +139,7 @@ export const ViraCheckbox = defineViraElement()({
         }
 
         ${hostClasses['vira-checkbox-horizontal'].selector} label {
-            flex-direction: row;
+            flex-direction: row-reverse;
             align-items: center;
             gap: 8px;
 
@@ -138,23 +151,34 @@ export const ViraCheckbox = defineViraElement()({
     events: {
         valueChange: defineElementEvent(),
     },
-    render({ inputs, dispatch, events }) {
+    render({ inputs, dispatch, events, slotNames, state, updateState }) {
         function updateValue() {
             if (!inputs.isDisabled) {
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
-        const textLabel = inputs.label
-            ? html `
-                  <span
-                      class="label-text"
-                      ${attributes(inputs.attributePassthrough?.['text'])}
-                      style=${ifDefined(inputs.stylePassthrough?.['text'])}
-                  >
-                      ${inputs.label}
-                  </span>
-              `
-            : nothing;
+        const hasLabel = !!inputs.label || state.hasSlottedLabel;
+        const textLabel = html `
+            <span
+                class="label-text ${classMap({
+            empty: !hasLabel,
+        })}"
+                ${attributes(inputs.attributePassthrough?.['text'])}
+                style=${ifDefined(inputs.stylePassthrough?.['text'])}
+            >
+                <slot
+                    name=${slotNames['vira-checkbox-label']}
+                    ${listen('slotchange', (event) => {
+            const slotElement = extractEventTarget(event, HTMLSlotElement);
+            updateState({
+                hasSlottedLabel: !!slotElement.assignedNodes().length,
+            });
+        })}
+                >
+                    ${inputs.label}
+                </slot>
+            </span>
+        `;
         return html `
             <label
                 class=${classMap({

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

@@ -103,20 +103,19 @@ export const ViraForm = defineViraElement()({
             }
         }
         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,
-                }
-                : {};
+            const showRequiredMarker = !!field.isRequired && !inputs.hideRequiredMarkers;
             if (field.isHidden) {
                 return nothing;
             }
             else if (field.type === ViraFormFieldType.Checkbox) {
+                const checkboxLabel = showRequiredMarker
+                    ? html `
+                              ${field.label}*
+                          `
+                    : field.label;
                 return wrapFormField({
-                    label,
+                    label: checkboxLabel,
                     fieldTemplate: html `
                             <${ViraCheckbox.assign({
                         value: field.value || false,
@@ -125,14 +124,6 @@ export const ViraForm = defineViraElement()({
                         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) => {
@@ -142,11 +133,28 @@ export const ViraForm = defineViraElement()({
                             value: event.detail,
                         }));
                     })}
-                            ></${ViraCheckbox}>
+                            >
+                                ${inputs.useHorizontalLabels
+                        ? nothing
+                        : html `
+                                          <span
+                                              slot=${ViraCheckbox.slotNames['vira-checkbox-label']}
+                                          >
+                                              ${checkboxLabel}
+                                          </span>
+                                      `}
+                            </${ViraCheckbox}>
                         `,
                 });
             }
-            else if (field.type === ViraFormFieldType.Select) {
+            const label = applyRequiredLabel(field.label, showRequiredMarker);
+            const childLabel = inputs.useHorizontalLabels ? undefined : label;
+            const horizontalLabelAttributes = inputs.useHorizontalLabels && label
+                ? {
+                    'aria-label': label,
+                }
+                : {};
+            if (field.type === ViraFormFieldType.Select) {
                 return wrapFormField({
                     label,
                     fieldTemplate: html `

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

@@ -1,5 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type FullDate } from 'date-vir';
+import { type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { type ViraSelectOption } from './vira-select-option.js';
 /**
@@ -79,12 +80,17 @@ 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;
-}> & CommonViraFormFields) | ({
+}> & Omit<CommonViraFormFields, 'label'>) | ({
     type: ViraFormFieldType.Number;
     value: number | undefined;
 } & PartialWithUndefined<{

package/package.json

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