vira 28.19.4 → 28.19.6

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

@@ -1,5 +1,28 @@
-import { attributes, css, html, ifDefined, listen, } from 'element-vir';
-import { defineViraElement } from './define-vira-element.js';
+import {type PartialWithUndefined} from '@augment-vir/common';
+import {
+    attributes,
+    css,
+    html,
+    ifDefined,
+    listen,
+    type AttributeValues,
+    type CSSResult,
+} from 'element-vir';
+import {type SpaRoute, type SpaRouter} from 'spa-router-vir';
+import {type RequireExactlyOne} from 'type-fest';
+import {defineViraElement} from './define-vira-element.js';
+
+/**
+ * The route properties required for using {@link ViraLink} with a route.
+ *
+ * @category Internal
+ */
+export type ViraLinkRoute = Readonly<{
+    route: SpaRoute<any, any, any>;
+    router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
+    scrollToTop?: boolean;
+}>;
+
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
  * being a raw link.
@@ -8,12 +31,34 @@ import { defineViraElement } from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-link
  */
-export const ViraLink = defineViraElement()({
+export const ViraLink = defineViraElement<
+    RequireExactlyOne<{
+        /**
+         * A full raw URL link that will navigate the current window away or open a new tab. If this
+         * property is provided for the inputs, don't provide a route property.
+         */
+        link: {
+            url: string;
+            newTab: boolean;
+        };
+        /**
+         * A route that'll change that current page without navigating the window. If this property
+         * is provided for the inputs, don't provide a link property.
+         */
+        route: ViraLinkRoute;
+    }> &
+        PartialWithUndefined<{
+            /** Styles that will be applied directly to the inner elements. */
+            stylePassthrough: Readonly<PartialWithUndefined<{a: CSSResult}>>;
+            /** Attributes that will be applied directly to the inner elements. */
+            attributePassthrough: Readonly<PartialWithUndefined<{a: AttributeValues}>>;
+        }>
+>()({
     tagName: 'vira-link',
     cssVars: {
         'vira-link-hover-color': 'currentColor',
     },
-    styles: ({ cssVars }) => css `
+    styles: ({cssVars}) => css`
         :host {
             display: inline;
             text-decoration: underline;
@@ -36,12 +81,17 @@ export const ViraLink = defineViraElement()({
             color: ${cssVars['vira-link-hover-color'].value};
         }
     `,
-    render({ inputs }) {
-        function clickCallback(event) {
+    render({inputs}) {
+        function clickCallback(event: MouseEvent) {
             if (!inputs.route) {
                 return;
             }
-            const routed = inputs.route.router.setRouteOnDirectNavigation(inputs.route.route, event);
+
+            const routed = inputs.route.router.setRouteOnDirectNavigation(
+                inputs.route.route,
+                event,
+            );
+
             if (routed && inputs.route.scrollToTop) {
                 window.scrollTo({
                     left: 0,
@@ -50,9 +100,10 @@ export const ViraLink = defineViraElement()({
                 });
             }
         }
+
         if (inputs.link?.newTab) {
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
-            return html `
+            return html`
                 <a
                     href=${inputs.link.url}
                     target="_blank"
@@ -63,13 +114,13 @@ export const ViraLink = defineViraElement()({
                     <slot></slot>
                 </a>
             `;
-        }
-        else {
+        } else {
             const linkUrl = inputs.link
                 ? inputs.link.url
                 : inputs.route.router.createRouteUrl(inputs.route.route);
+
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
-            return html `
+            return html`
                 <a
                     href=${linkUrl}
                     rel="noopener noreferrer"

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

@@ -1,41 +1,71 @@
-import { assertWrap } from '@augment-vir/assert';
-import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
-import { listenToGlobal } from 'typed-event-target';
-import { X24Icon } from '../icons/icon-svgs/x-24.icon.js';
-import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
-import { viraShadows } from '../styles/shadows.js';
-import { defineViraElement } from './define-vira-element.js';
-import { ViraIcon } from './vira-icon.element.js';
+import {assertWrap} from '@augment-vir/assert';
+import {type PartialWithUndefined} from '@augment-vir/common';
+import {css, defineElementEvent, html, listen, nothing, onDomCreated} from 'element-vir';
+import {listenToGlobal} from 'typed-event-target';
+import {X24Icon} from '../icons/icon-svgs/x-24.icon.js';
+import {noNativeFormStyles, noNativeSpacing} from '../styles/native-styles.js';
+import {viraShadows} from '../styles/shadows.js';
+import {defineViraElement} from './define-vira-element.js';
+import {ViraIcon} from './vira-icon.element.js';
+
 const globalEventsToCloseModalOn = [
     'pagehide',
     'pageshow',
     'popstate',
-];
+] as const satisfies (keyof WindowEventMap)[];
+
 /**
  * A modal element that uses the built-in `dialog` element.
  *
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-modal
  */
-export const ViraModal = defineViraElement()({
+export const ViraModal = defineViraElement<
+    Readonly<
+        {
+            open: boolean;
+        } & PartialWithUndefined<{
+            /** If this isn't set, make sure to use the modal title slot to fill it in. */
+            modalTitle: string;
+            /**
+             * If `true`, the following conditions trigger the modal to close:
+             *
+             * - The user clicks the "x" close button
+             * - The `open` input is set to `false`
+             *
+             * If set to `false` (the default), the following conditions trigger the modal to close:
+             *
+             * - The user clicks outside of the modal
+             * - The user presses the "Escape" key
+             * - The user clicks the "x" close button
+             * - The `open` input is set to `false`
+             *
+             * @default false
+             */
+            blockLightDismissal: boolean;
+            modalSubtitle: string;
+            isMobileSize: boolean;
+        }>
+    >
+>()({
     tagName: 'vira-modal',
     events: {
-        modalClose: defineElementEvent(),
+        modalClose: defineElementEvent<void>(),
     },
     state() {
         return {
-            dialogElement: undefined,
-            contentElement: undefined,
-            previousOpenValue: undefined,
+            dialogElement: undefined as HTMLDialogElement | undefined,
+            contentElement: undefined as HTMLDivElement | undefined,
+            previousOpenValue: undefined as undefined | boolean,
             /** Remove listeners. */
-            cleanup: undefined,
+            cleanup: undefined as undefined | (() => void),
         };
     },
-    cleanup({ state }) {
+    cleanup({state}) {
         state.cleanup?.();
     },
     hostClasses: {
-        'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
+        'vira-modal-phone-size': ({inputs}) => !!inputs.isMobileSize,
     },
     slotNames: ['modalTitle'],
     cssVars: {
@@ -45,7 +75,7 @@ export const ViraModal = defineViraElement()({
         'vira-modal-close-button-hover-radius': '8px',
         'vira-modal-close-button-hover-background-color': '#E4E4E4',
     },
-    styles: ({ hostClasses, cssVars }) => css `
+    styles: ({hostClasses, cssVars}) => css`
         :host {
             display: contents;
             min-width: 280px;
@@ -111,7 +141,9 @@ export const ViraModal = defineViraElement()({
                         border-radius: ${cssVars['vira-modal-close-button-hover-radius'].value};
 
                         &:hover {
-                            background-color: ${cssVars['vira-modal-close-button-hover-background-color'].value};
+                            background-color: ${cssVars[
+                                'vira-modal-close-button-hover-background-color'
+                            ].value};
                         }
 
                         & ${ViraIcon} {
@@ -134,22 +166,25 @@ export const ViraModal = defineViraElement()({
             }
         }
     `,
-    render({ inputs, state, updateState, events, dispatch, slotNames }) {
+    render({inputs, state, updateState, events, dispatch, slotNames}) {
         if (state.dialogElement && inputs.open !== state.dialogElement.open) {
             if (inputs.open) {
                 state.dialogElement.showModal();
-            }
-            else {
+            } else {
                 state.dialogElement.close();
             }
         }
+
         if (state.previousOpenValue !== inputs.open) {
             state.cleanup?.();
-            updateState({ previousOpenValue: inputs.open });
+            updateState({previousOpenValue: inputs.open});
             if (inputs.open) {
-                const removers = globalEventsToCloseModalOn.map((eventName) => listenToGlobal(eventName, () => {
-                    dispatch(new events.modalClose());
-                }));
+                const removers = globalEventsToCloseModalOn.map((eventName) =>
+                    listenToGlobal(eventName, () => {
+                        dispatch(new events.modalClose());
+                    }),
+                );
+
                 updateState({
                     cleanup: () => {
                         removers.forEach((remover) => remover());
@@ -157,65 +192,69 @@ export const ViraModal = defineViraElement()({
                 });
             }
         }
+
         function close() {
             if (inputs.open) {
                 state.cleanup?.();
                 dispatch(new events.modalClose());
             }
         }
-        return html `
+
+        return html`
             <dialog
                 ${onDomCreated((element) => {
-            updateState({ dialogElement: assertWrap.instanceOf(element, HTMLDialogElement) });
-        })}
+                    updateState({dialogElement: assertWrap.instanceOf(element, HTMLDialogElement)});
+                })}
                 ${listen('close', () => {
-            close();
-        })}
+                    close();
+                })}
                 ${listen('click', (event) => {
-            if (state.contentElement &&
-                !event.composedPath().includes(state.contentElement) &&
-                !inputs.blockLightDismissal) {
-                /** Background click. */
-                close();
-            }
-        })}
+                    if (
+                        state.contentElement &&
+                        !event.composedPath().includes(state.contentElement) &&
+                        !inputs.blockLightDismissal
+                    ) {
+                        /** Background click. */
+                        close();
+                    }
+                })}
             >
                 <div
                     class="modal-content-wrapper"
                     ${onDomCreated((element) => {
-            updateState({
-                contentElement: assertWrap.instanceOf(element, HTMLDivElement),
-            });
-        })}
+                        updateState({
+                            contentElement: assertWrap.instanceOf(element, HTMLDivElement),
+                        });
+                    })}
                 >
                     <div class="header">
                         <div class="header-text-wrapper">
                             <h1><slot name=${slotNames.modalTitle}>${inputs.modalTitle}</slot></h1>
                             ${inputs.modalSubtitle
-            ? html `
+                                ? html`
                                       <sub>${inputs.modalSubtitle}</sub>
                                   `
-            : nothing}
+                                : nothing}
                         </div>
                         <button
                             class="close"
                             aria-label="Close"
                             ${listen('click', () => {
-            state.dialogElement?.close();
-        })}
+                                state.dialogElement?.close();
+                            })}
                         >
                             <${ViraIcon.assign({
-            icon: X24Icon,
-        })}></${ViraIcon}>
+                                icon: X24Icon,
+                            })}></${ViraIcon}>
                         </button>
                     </div>
                     ${inputs.open
-            ? html `
+                        ? html`
                               <div class="body">
                                   <slot></slot>
                               </div>
                           `
-            : nothing}
+                        : nothing}
                 </div>
             </dialog>
         `;

package/src/elements/vira-overflow-switch.element.ts

@@ -0,0 +1,137 @@
+import {css, html, onDomCreated} from 'element-vir';
+import {type RequireExactlyOne} from 'type-fest';
+import {listenTo} from 'typed-event-target';
+import {defineViraElement} from './define-vira-element.js';
+
+/**
+ * An element switches between two slots based on their overflow.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
+ */
+export const ViraOverflowSwitch = defineViraElement<
+    Readonly<
+        RequireExactlyOne<{
+            automaticallySwitch: boolean;
+            useSmall: boolean;
+        }>
+    >
+>()({
+    tagName: 'vira-overflow-switch',
+    slotNames: [
+        /** The child to render, if it fits. */
+        'large',
+        /** The child to render if the large one does not fit. */
+        'small',
+    ],
+    state() {
+        return {
+            isOverflowing: false,
+            resizeObserver: undefined as undefined | ResizeObserver,
+            /** Called on cleanup to clear all listeners. */
+            cleanup: undefined as undefined | (() => void),
+        };
+    },
+    hostClasses: {
+        'vira-overflow-switch-show-small': ({state, inputs}) =>
+            state.isOverflowing || !!inputs.useSmall,
+    },
+    styles: ({hostClasses}) => css`
+        :host {
+            display: inline-block;
+            max-width: 100%;
+        }
+
+        .large,
+        .small {
+            display: inline-block;
+        }
+
+        .small {
+            display: none;
+        }
+
+        /**
+         * When the large content overflows, hide it but keep it in layout so we can measure it.
+         * The small content is then shown instead.
+         */
+        ${hostClasses['vira-overflow-switch-show-small'].selector} .large {
+            visibility: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        ${hostClasses['vira-overflow-switch-show-small'].selector} .small {
+            display: inline-block;
+        }
+    `,
+    cleanup({state, updateState}) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
+    render({slotNames, updateState, inputs, host, state}) {
+        return html`
+            <div
+                class="large"
+                ${onDomCreated((largeElement) => {
+                    if (!inputs.automaticallySwitch) {
+                        return;
+                    }
+
+                    const overflowParams: Parameters<typeof updateOverflowing>[0] = {
+                        elementToTest: largeElement,
+                        host,
+                        updateState,
+                    };
+
+                    const resizeObserver = new ResizeObserver(() => {
+                        updateOverflowing(overflowParams);
+                    });
+
+                    resizeObserver.observe(host);
+
+                    /**
+                     * Also observe the large slot wrapper itself in case its own layout changes
+                     * without host resizing.
+                     */
+                    resizeObserver.observe(largeElement);
+
+                    const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
+                        updateOverflowing(overflowParams);
+                    });
+
+                    /** Initial measurement: defer until after first layout. */
+                    updateOverflowing(overflowParams);
+
+                    state.cleanup?.();
+                    updateState({
+                        cleanup() {
+                            resizeObserver.disconnect();
+                            removeSlotChangeListener();
+                        },
+                    });
+                })}
+            >
+                <slot name=${slotNames.large}></slot>
+            </div>
+            <div class="small"><slot name=${slotNames.small}></slot></div>
+        `;
+    },
+});
+
+function updateOverflowing({
+    elementToTest,
+    host,
+    updateState,
+}: {
+    host: Element;
+    updateState: (newState: Partial<{isOverflowing: boolean}>) => void;
+    elementToTest: Element;
+}) {
+    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
+
+    updateState({isOverflowing});
+}

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

@@ -1,7 +1,8 @@
-import { clamp } from '@augment-vir/common';
-import { applyAttributes } from 'device-navigation';
-import { css, html } from 'element-vir';
-import { defineViraElement } from './define-vira-element.js';
+import {clamp, type PartialWithUndefined} from '@augment-vir/common';
+import {applyAttributes} from 'device-navigation';
+import {css, html} from 'element-vir';
+import {defineViraElement} from './define-vira-element.js';
+
 /**
  * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
  * alternative that supports custom styling in _all_ browsers via CSS vars _and_ prevents background
@@ -11,7 +12,18 @@ import { defineViraElement } from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-progress
  */
-export const ViraProgress = defineViraElement()({
+export const ViraProgress = defineViraElement<
+    Readonly<
+        {
+            value: number;
+        } & PartialWithUndefined<{
+            /** @default 0 */
+            min: number;
+            /** @default 100 */
+            max: number;
+        }>
+    >
+>()({
     tagName: 'vira-progress',
     cssVars: {
         /**
@@ -22,7 +34,7 @@ export const ViraProgress = defineViraElement()({
         'vira-progress-background-color': '#eee',
         'vira-progress-foreground-color': 'dodgerblue',
     },
-    styles: ({ cssVars }) => css `
+    styles: ({cssVars}) => css`
         :host {
             /* Default width that can easily be overridden because it's applied on the host. */
             width: 100px;
@@ -46,26 +58,29 @@ export const ViraProgress = defineViraElement()({
             flex-grow: 1;
         }
     `,
-    render({ inputs, host }) {
+    render({inputs, host}) {
         const min = inputs.min || 0;
         const max = inputs.max || 100;
         const totalRange = max - min;
         const value = inputs.value - min;
-        const percentFull = clamp(Math.round((value / totalRange) * 100), { min: 0, max: 100 });
+
+        const percentFull = clamp(Math.round((value / totalRange) * 100), {min: 0, max: 100});
+
         applyAttributes(host, {
             'aria-valuemin': inputs.min,
             'aria-valuemax': inputs.max,
             'aria-valuenow': inputs.value,
             'aria-role': 'progressbar',
         });
-        return html `
+
+        return html`
             <div
                 class="progress-bar"
                 style=${percentFull
-            ? css `
+                    ? css`
                           width: ${percentFull}%;
                       `
-            : css `
+                    : css`
                           display: none;
                       `}
             ></div>