vira 32.0.0-beta.0 → 32.1.0

package/{src/elements/vira-checkbox.element.ts → dist/elements/vira-checkbox.element.js}

@@ -1,59 +1,11 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {extractEventTarget} from '@augment-vir/web';
-import {
-    attributes,
-    classMap,
-    css,
-    defineElementEvent,
-    html,
-    ifDefined,
-    listen,
-    listenToActivate,
-    type AttributeValues,
-    type CSSResult,
-} from 'element-vir';
-import {Check24Icon, viraIconCssVars} from '../icons/index.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * All inner elements supported by {@link ViraCheckbox}.
- *
- * @category Internals
- */
-export type ViraCheckboxInnerElements =
-    | 'label'
-    | 'custom-checkbox'
-    | 'text'
-    | typeof ViraIcon.tagName;
-
-/**
- * Inputs for {@link ViraCheckbox}.
- *
- * @category Internal
- */
-export type ViraCheckboxInputs = {
-    value: boolean;
-} & PartialWithUndefined<{
-    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;
-    /** 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;
-}>;
-
+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';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * A custom checkbox.
  *
@@ -61,7 +13,7 @@ export type ViraCheckboxInputs = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
+export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     slotNames: [
         'vira-checkbox-label',
@@ -72,12 +24,18 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
         };
     },
     hostClasses: {
-        'vira-checkbox-horizontal': ({inputs}) => !!inputs.useHorizontalLabel,
-        'vira-checkbox-filled-checked': ({inputs}) => !!inputs.fillWhenChecked,
-        'vira-checkbox-filled-unchecked': ({inputs}) => !!inputs.fillWhenUnchecked,
+        'vira-checkbox-horizontal'({ inputs }) {
+            return !!inputs.useHorizontalLabel;
+        },
+        'vira-checkbox-filled-checked'({ inputs }) {
+            return !!inputs.fillWhenChecked;
+        },
+        'vira-checkbox-filled-unchecked'({ inputs }) {
+            return !!inputs.fillWhenUnchecked;
+        },
     },
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: inline-flex;
             }
@@ -105,12 +63,12 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                 label {
                     &:not(.disabled):hover .custom-checkbox.checked {
                         background-color: ${viraFormCssVars['vira-form-accent-primary-hover-color']
-                            .value};
+            .value};
                     }
 
                     &:not(.disabled):active .custom-checkbox.checked {
                         background-color: ${viraFormCssVars['vira-form-accent-primary-active-color']
-                            .value};
+            .value};
                     }
                 }
             }
@@ -169,8 +127,8 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                 cursor: pointer;
 
                 ${createFocusStyles({
-                    elementBorderSize: '1px',
-                })}
+            elementBorderSize: '1px',
+        })}
 
                 &.checked {
                     & ${ViraIcon} {
@@ -199,48 +157,43 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
         `;
     },
     events: {
-        valueChange: defineElementEvent<boolean>(),
+        valueChange: defineElementEvent(),
     },
-    render({inputs, dispatch, events, slotNames, state, updateState}) {
-        function updateValue(this: void) {
+    render({ inputs, dispatch, events, slotNames, state, updateState }) {
+        function updateValue() {
             if (!inputs.isDisabled) {
-                dispatch(
-                    new events.valueChange({
-                        detail: !inputs.value,
-                    }),
-                );
+                dispatch(new events.valueChange({
+                    detail: !inputs.value,
+                }));
             }
         }
-
         const hasLabel = !!inputs.label || state.hasSlottedLabel;
-
-        const textLabel = html`
+        const textLabel = html `
             <span
                 class="label-text ${classMap({
-                    empty: !hasLabel,
-                })}"
+            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,
-                        });
-                    })}
+            const slotElement = extractEventTarget(event, HTMLSlotElement);
+            updateState({
+                hasSlottedLabel: !!slotElement.assignedNodes().length,
+            });
+        })}
                 >
                     ${inputs.label}
                 </slot>
             </span>
         `;
-
-        return html`
+        return html `
             <label
                 class=${classMap({
-                    disabled: !!inputs.isDisabled,
-                })}
+            disabled: !!inputs.isDisabled,
+        })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
                 ${listen('mousedown', updateValue)}
@@ -248,10 +201,10 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                 ${textLabel}
                 <span
                     class="custom-checkbox ${classMap({
-                        checked: inputs.value,
-                        disabled: !!inputs.isDisabled,
-                        error: !!inputs.hasError,
-                    })}"
+            checked: inputs.value,
+            disabled: !!inputs.isDisabled,
+            error: !!inputs.hasError,
+        })}"
                     role="checkbox"
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
@@ -262,9 +215,9 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                     ${listenToActivate(updateValue)}
                 >
                     <${ViraIcon.assign({
-                        icon: Check24Icon,
-                        fitContainer: true,
-                    })}
+            icon: Check24Icon,
+            fitContainer: true,
+        })}
                         ${attributes(inputs.attributePassthrough?.[ViraIcon.tagName])}
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>

package/dist/elements/vira-collapsible-card.element.d.ts

@@ -0,0 +1,36 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A combination ViraCard and ViraCollapsibleWrapper with a collapse caret.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
+    /**
+     * When set to `true`, the card styles are diminished so you can still use this element in
+     * more flexible ways.
+     *
+     * @default false
+     */
+    rawCollapsible: boolean;
+    startExpanded: boolean;
+    /**
+     * If set to true, the card will always be expanded, expansion cannot be toggled, and the
+     * expand toggle icon is hidden.
+     *
+     * @default false
+     */
+    blockExpansion: boolean;
+    /** When true, forces the content to expand when printing regardless of collapsed state. */
+    expandOnPrint: boolean;
+    /**
+     * When set to `true`, the header is hidden.
+     *
+     * @default false
+     */
+    hideHeader: boolean;
+}>, {
+    isExpanded: boolean;
+}, {
+    expandToggle: import("element-vir").DefineElementEvent<boolean>;
+}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["vira-collapsible-card-header"], readonly ["openCaret"]>;

package/{src/elements/vira-collapsible-card.element.ts → dist/elements/vira-collapsible-card.element.js}

@@ -1,65 +1,43 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {css, defineElementEvent, html, listen, nothing, testId} from 'element-vir';
-import {ChevronUp16Icon} from '../icons/index.js';
-import {viraFontCssVars} from '../styles/font.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraCollapsibleWrapper} from './vira-collapsible-wrapper.element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
+import { ChevronUp16Icon } from '../icons/index.js';
+import { viraFontCssVars } from '../styles/font.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraCollapsibleWrapper } from './vira-collapsible-wrapper.element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * A combination ViraCard and ViraCollapsibleWrapper with a collapse caret.
  *
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export const ViraCollapsibleCard = defineViraElement<
-    PartialWithUndefined<{
-        /**
-         * When set to `true`, the card styles are diminished so you can still use this element in
-         * more flexible ways.
-         *
-         * @default false
-         */
-        rawCollapsible: boolean;
-        startExpanded: boolean;
-        /**
-         * If set to true, the card will always be expanded, expansion cannot be toggled, and the
-         * expand toggle icon is hidden.
-         *
-         * @default false
-         */
-        blockExpansion: boolean;
-        /** When true, forces the content to expand when printing regardless of collapsed state. */
-        expandOnPrint: boolean;
-        /**
-         * When set to `true`, the header is hidden.
-         *
-         * @default false
-         */
-        hideHeader: boolean;
-    }>
->()({
+export const ViraCollapsibleCard = defineViraElement()({
     tagName: 'vira-collapsible-card',
     testIds: ['openCaret'],
     events: {
-        expandToggle: defineElementEvent<boolean>(),
+        expandToggle: defineElementEvent(),
     },
-    state({inputs}) {
+    state({ inputs }) {
         return {
             isExpanded: !!inputs.startExpanded,
         };
     },
     hostClasses: {
-        'vira-collapsible-card-expanded': ({state}) => state.isExpanded,
-        'vira-collapsible-card-expansion-blocked': ({inputs}) => !!inputs.blockExpansion,
-        'vira-collapsible-card-card-styles': ({inputs}) => !inputs.rawCollapsible,
+        'vira-collapsible-card-expanded'({ state }) {
+            return state.isExpanded;
+        },
+        'vira-collapsible-card-expansion-blocked'({ inputs }) {
+            return !!inputs.blockExpansion;
+        },
+        'vira-collapsible-card-card-styles'({ inputs }) {
+            return !inputs.rawCollapsible;
+        },
     },
     cssVars: {
         'vira-collapsible-card-content-gap': '16px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 display: inline-flex;
                 max-width: 100%;
@@ -143,60 +121,55 @@ export const ViraCollapsibleCard = defineViraElement<
     slotNames: [
         'vira-collapsible-card-header',
     ],
-    render({inputs, slotNames, state, updateState, testIds, dispatch, events}) {
+    render({ inputs, slotNames, state, updateState, testIds, dispatch, events }) {
         if (inputs.blockExpansion) {
             updateState({
                 isExpanded: true,
             });
         }
-
-        const wrapperContentTemplate = html`
+        const wrapperContentTemplate = html `
             <div class="card-content">
                 <slot></slot>
             </div>
         `;
         const wrapperHeaderTemplate = inputs.hideHeader
             ? nothing
-            : html`
+            : html `
                   <div class="card-header">
                       <slot name=${slotNames['vira-collapsible-card-header']}>
                           <div class="header-filler"></div>
                       </slot>
 
                       ${inputs.blockExpansion
-                          ? nothing
-                          : html`
+                ? nothing
+                : html `
                                 <${ViraIcon.assign({
-                                    icon: ChevronUp16Icon,
-                                    fitContainer: true,
-                                })}
+                    icon: ChevronUp16Icon,
+                    fitContainer: true,
+                })}
                                     ${testId(testIds.openCaret)}
                                     class="open-caret"
                                 ></${ViraIcon}>
                             `}
                   </div>
               `;
-
-        return html`
+        return html `
             <${ViraCollapsibleWrapper.assign({
-                expanded: state.isExpanded,
-                expandOnPrint: inputs.expandOnPrint ?? false,
-            })}
+            expanded: state.isExpanded,
+            expandOnPrint: inputs.expandOnPrint ?? false,
+        })}
                 ${listen(ViraCollapsibleWrapper.events.expandChange, (event) => {
-                    event.stopImmediatePropagation();
-                    if (inputs.blockExpansion) {
-                        return;
-                    }
-
-                    updateState({
-                        isExpanded: event.detail,
-                    });
-                    dispatch(
-                        new events.expandToggle({
-                            detail: event.detail,
-                        }),
-                    );
-                })}
+            event.stopImmediatePropagation();
+            if (inputs.blockExpansion) {
+                return;
+            }
+            updateState({
+                isExpanded: event.detail,
+            });
+            dispatch(new events.expandToggle({
+                detail: event.detail,
+            }));
+        })}
             >
                 <div
                     class="header-wrapper"

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
+ *
+ * @category Collapsible
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
+ */
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
+    expanded: boolean;
+    /** When true, forces the content to expand when printing regardless of collapsed state. */
+    expandOnPrint?: boolean;
+}, {
+    contentHeight: number;
+    contentWidth: number;
+    /**
+     * Collapsed content that is merely `height: 0` is still rendered, so the browser emits
+     * a line break for it when serializing a selection to plain text. Copying a region that
+     * spans collapsed wrappers then pastes with runs of blank lines. Taking the content out
+     * of layout entirely is what drops those breaks; `visibility: hidden` and `user-select:
+     * none` both leave them behind.
+     *
+     * This starts `false` even when collapsed because the wrapper takes both its width and
+     * its animation target height from the content, so the content has to be laid out once
+     * before it can be hidden.
+     */
+    isContentHidden: boolean;
+    collapsingElement: HTMLDivElement | undefined;
+}, {
+    expandChange: import("element-vir").DefineElementEvent<boolean>;
+}, "vira-collapsible-wrapper-expand-on-print", `vira-${string}-`, readonly ["vira-collapsible-wrapper-header"], readonly []>;

package/{src/elements/vira-collapsible-wrapper.element.ts → dist/elements/vira-collapsible-wrapper.element.js}

@@ -1,8 +1,7 @@
-import {assertWrap} from '@augment-vir/assert';
-import {classMap, css, defineElementEvent, html, listen, onDomCreated, onResize} from 'element-vir';
-import {noNativeFormStyles, noUserSelect, viraAnimationDurations} from '../styles/index.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { classMap, css, defineElementEvent, html, listen, onDomCreated, onResize } from 'element-vir';
+import { noNativeFormStyles, noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
  *
@@ -10,11 +9,7 @@ import {defineViraElement} from '../util/define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
  */
-export const ViraCollapsibleWrapper = defineViraElement<{
-    expanded: boolean;
-    /** When true, forces the content to expand when printing regardless of collapsed state. */
-    expandOnPrint?: boolean;
-}>()({
+export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     state() {
         return {
@@ -32,15 +27,17 @@ export const ViraCollapsibleWrapper = defineViraElement<{
              * before it can be hidden.
              */
             isContentHidden: false,
-            collapsingElement: undefined as HTMLDivElement | undefined,
+            collapsingElement: undefined,
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expand-on-print': ({inputs}) => !!inputs.expandOnPrint,
+        'vira-collapsible-wrapper-expand-on-print'({ inputs }) {
+            return !!inputs.expandOnPrint;
+        },
     },
     slotNames: ['vira-collapsible-wrapper-header'],
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: flex;
                 flex-direction: column;
@@ -88,19 +85,18 @@ export const ViraCollapsibleWrapper = defineViraElement<{
         `;
     },
     events: {
-        expandChange: defineElementEvent<boolean>(),
+        expandChange: defineElementEvent(),
     },
-    render({state, slotNames, updateState, dispatch, events, inputs}) {
+    render({ state, slotNames, updateState, dispatch, events, inputs }) {
         if (inputs.expanded && state.isContentHidden) {
             updateState({
                 isContentHidden: false,
             });
-        } else if (
-            !inputs.expanded &&
+        }
+        else if (!inputs.expanded &&
             !state.isContentHidden &&
             state.contentHeight &&
-            !state.collapsingElement?.clientHeight
-        ) {
+            !state.collapsingElement?.clientHeight) {
             /**
              * Already at zero height, so no collapse animation will run and `transitionend` will
              * never fire. Covers a wrapper that mounts collapsed and one that gets collapsed before
@@ -114,90 +110,82 @@ export const ViraCollapsibleWrapper = defineViraElement<{
                 isContentHidden: true,
             });
         }
-
         /**
          * Hidden content contributes no width, so the wrapper would shrink to its header without
          * the width measured while the content was last laid out. `max-width` keeps that from
          * blocking a later shrink to a narrower container.
          */
         const hiddenContentStyles = state.isContentHidden
-            ? css`
+            ? css `
                   width: ${state.contentWidth}px;
                   max-width: 100%;
               `
-            : css``;
-
+            : css ``;
         /**
          * Hidden content is rendered without the resize observer rather than with a callback that
          * ignores it. An attached observer still fires when the content is hidden, and the browser
          * reports that as a resize observer loop.
          */
         const contentWrapperTemplate = state.isContentHidden
-            ? html`
+            ? html `
                   <div class="content-wrapper hidden-content">
                       <slot></slot>
                   </div>
               `
-            : html`
+            : html `
                   <div
-                      ${onResize(({contentRect}) => {
-                          updateState({
-                              contentHeight: contentRect.height,
-                              contentWidth: contentRect.width,
-                          });
-                      })}
+                      ${onResize(({ contentRect }) => {
+                updateState({
+                    contentHeight: contentRect.height,
+                    contentWidth: contentRect.width,
+                });
+            })}
                       class="content-wrapper"
                   >
                       <slot></slot>
                   </div>
               `;
-
         const collapsingStyles = inputs.expanded
-            ? css`
+            ? css `
                   height: ${state.contentHeight}px;
                   ${hiddenContentStyles}
               `
-            : css`
+            : css `
                   height: 0;
                   ${hiddenContentStyles}
               `;
-
-        return html`
+        return html `
             <button
                 class="header-wrapper"
                 ${listen('click', () => {
-                    dispatch(
-                        new events.expandChange({
-                            detail: !inputs.expanded,
-                        }),
-                    );
-                })}
+            dispatch(new events.expandChange({
+                detail: !inputs.expanded,
+            }));
+        })}
             >
                 <slot name=${slotNames['vira-collapsible-wrapper-header']}>Header</slot>
             </button>
 
             <div
                 class="collapsing-element ${classMap({
-                    collapsed: !inputs.expanded,
-                })}"
+            collapsed: !inputs.expanded,
+        })}"
                 style=${collapsingStyles}
                 disabled="disabled"
                 ${onDomCreated((element) => {
-                    updateState({
-                        collapsingElement: assertWrap.instanceOf(element, HTMLDivElement),
-                    });
-                })}
+            updateState({
+                collapsingElement: assertWrap.instanceOf(element, HTMLDivElement),
+            });
+        })}
                 ${listen('transitionend', (event) => {
-                    if (
-                        event.propertyName === 'height' &&
-                        event.target === event.currentTarget &&
-                        !inputs.expanded
-                    ) {
-                        updateState({
-                            isContentHidden: true,
-                        });
-                    }
-                })}
+            if (event.propertyName === 'height' &&
+                event.target === event.currentTarget &&
+                !inputs.expanded) {
+                updateState({
+                    isContentHidden: true,
+                });
+            }
+        })}
             >
                 ${contentWrapperTemplate}
             </div>