vira 30.1.0 → 30.1.2

package/dist/elements/pop-up/vira-menu-item.element.d.ts

@@ -19,4 +19,7 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * _always_ be shown, even if `selected` is set to `false`.
      */
     iconOverride: ViraIconSvg;
-}>, {}, {}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-", readonly [], readonly []>;
+}>, {
+    /** Removes event listeners registered during init. */
+    cleanup: undefined | (() => void);
+}, {}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -1,4 +1,6 @@
+import { assertWrap } from '@augment-vir/assert';
 import { css, html } from 'element-vir';
+import { listenTo } from 'typed-event-target';
 import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noUserSelect } from '../../styles/index.js';
@@ -12,6 +14,12 @@ import { ViraIcon } from '../vira-icon.element.js';
  */
 export const ViraMenuItem = defineViraElement()({
     tagName: 'vira-menu-item',
+    state() {
+        return {
+            /** Removes event listeners registered during init. */
+            cleanup: undefined,
+        };
+    },
     hostClasses: {
         'vira-menu-item-selected': ({ inputs }) => !!inputs.selected || !!inputs.iconOverride,
         'vira-menu-item-disabled': ({ inputs }) => !!inputs.disabled,
@@ -74,21 +82,61 @@ export const ViraMenuItem = defineViraElement()({
             min-width: 0;
         }
     `,
-    init({ host, inputs }) {
+    init({ state, updateState, host, inputs }) {
         host.setAttribute('role', 'menuitem');
         host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');
         host.setAttribute('aria-selected', String(!!inputs.selected));
         host.setAttribute('aria-disabled', String(!!inputs.disabled));
-        host.onmouseenter = () => {
-            if (!inputs.disabled) {
-                host.focus();
-            }
-        };
-        host.onmouseleave = () => {
-            if (!inputs.disabled) {
-                host.blur();
-            }
-        };
+        state.cleanup?.();
+        let propagating = false;
+        const listenerRemovers = [
+            listenTo(host, 'click', (event) => {
+                if (propagating) {
+                    return;
+                }
+                else if (inputs.disabled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                const slotElement = assertWrap.instanceOf(host.shadowRoot.querySelector('slot'), HTMLSlotElement);
+                slotElement
+                    .assignedElements({
+                    flatten: true,
+                })
+                    .forEach((element) => {
+                    if (element instanceof HTMLElement &&
+                        !event.composedPath().includes(element)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        propagating = true;
+                        element.dispatchEvent(new MouseEvent(event.type, event));
+                        propagating = false;
+                    }
+                });
+            }),
+            listenTo(host, 'mouseenter', () => {
+                if (!inputs.disabled) {
+                    host.focus();
+                }
+            }),
+            listenTo(host, 'mouseleave', () => {
+                if (!inputs.disabled) {
+                    host.blur();
+                }
+            }),
+        ];
+        updateState({
+            cleanup: () => {
+                listenerRemovers.forEach((remover) => remover());
+            },
+        });
+    },
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
     },
     render({ inputs }) {
         return html `

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -47,7 +47,9 @@ export const ViraPopUpTrigger = defineViraElement()({
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
-            popUpManager: new PopUpManager(new NavController(host, { activateOnMouseUp: true })),
+            popUpManager: new PopUpManager(new NavController(host, {
+                activateOnMouseUp: true,
+            })),
         };
     },
     slotNames: [
@@ -128,13 +130,17 @@ export const ViraPopUpTrigger = defineViraElement()({
         init: defineElementEvent(),
     },
     cleanup({ state, updateState }) {
-        updateState({ showPopUpResult: undefined });
+        updateState({
+            showPopUpResult: undefined,
+        });
         state.popUpManager.destroy();
     },
     init({ state, updateState, host, inputs, dispatch, events }) {
         /** Refocus the trigger and set the result to `undefined` when the pop up closes. */
         state.popUpManager.listen(HidePopUpEvent, () => {
-            updateState({ showPopUpResult: undefined });
+            updateState({
+                showPopUpResult: undefined,
+            });
             dispatch(new events.openChange(undefined));
             if (!inputs.isDisabled) {
                 const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
@@ -177,7 +183,9 @@ export const ViraPopUpTrigger = defineViraElement()({
             triggerPopUpState({
                 open,
                 callback(showPopUpResult) {
-                    updateState({ showPopUpResult });
+                    updateState({
+                        showPopUpResult,
+                    });
                     if (emitEvent) {
                         dispatch(new events.openChange(showPopUpResult));
                     }
@@ -187,14 +195,23 @@ export const ViraPopUpTrigger = defineViraElement()({
             });
         }
         if (inputs.isDisabled) {
-            triggerPopUp({ open: false, emitEvent: false }, undefined);
+            triggerPopUp({
+                open: false,
+                emitEvent: false,
+            }, undefined);
         }
         else if (inputs.z_debug_forceOpenState != undefined) {
             if (!inputs.z_debug_forceOpenState && state.showPopUpResult) {
-                triggerPopUp({ emitEvent: false, open: false }, undefined);
+                triggerPopUp({
+                    emitEvent: false,
+                    open: false,
+                }, undefined);
             }
             else if (inputs.z_debug_forceOpenState && !state.showPopUpResult) {
-                triggerPopUp({ emitEvent: false, open: true }, undefined);
+                triggerPopUp({
+                    emitEvent: false,
+                    open: true,
+                }, undefined);
             }
         }
         /**
@@ -267,7 +284,10 @@ export const ViraPopUpTrigger = defineViraElement()({
                     `
             : undefined;
         function respondToClick(event) {
-            triggerPopUp({ emitEvent: true, open: !state.showPopUpResult }, event);
+            triggerPopUp({
+                emitEvent: true,
+                open: !state.showPopUpResult,
+            }, event);
         }
         return html `
             <button
@@ -280,7 +300,10 @@ export const ViraPopUpTrigger = defineViraElement()({
                 aria-expanded=${!!state.showPopUpResult}
                 ${listen('keydown', (event) => {
             if (!state.showPopUpResult && event.code.startsWith('Arrow')) {
-                triggerPopUp({ emitEvent: true, open: true }, event);
+                triggerPopUp({
+                    emitEvent: true,
+                    open: true,
+                }, event);
             }
         })}
                 ${listen('click', (event) => {
@@ -309,7 +332,10 @@ export const ViraPopUpTrigger = defineViraElement()({
                  * open/close toggling for the trigger itself.
                  */
                 if (dropdownTrigger && !event.composedPath().includes(dropdownTrigger)) {
-                    triggerPopUp({ emitEvent: true, open: false }, event);
+                    triggerPopUp({
+                        emitEvent: true,
+                        open: false,
+                    }, event);
                 }
             }
         })}

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

@@ -106,7 +106,9 @@ export const ViraCheckbox = defineViraElement()({
             position: relative;
             cursor: pointer;
 
-            ${createFocusStyles({ elementBorderSize: 1 })}
+            ${createFocusStyles({
+        elementBorderSize: 1,
+    })}
 
             &.checked {
                 & ${ViraIcon} {

package/dist/elements/vira-collapsible-card.element.js

@@ -77,7 +77,6 @@ export const ViraCollapsibleCard = defineViraElement()({
             display: flex;
             flex-direction: column;
             align-items: stretch;
-            gap: 32px;
             overflow-x: auto;
             overflow-y: hidden;
         }

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -85,7 +85,9 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             >
                 <div
                     ${onResize(({ contentRect }) => {
-            updateState({ contentHeight: contentRect.height });
+            updateState({
+                contentHeight: contentRect.height,
+            });
         })}
                     class="content-wrapper"
                 >

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

@@ -158,7 +158,9 @@ export const ViraDropdown = defineViraElement()({
             if (!!state.showPopUpResult !== !!event.detail) {
                 dispatch(new events.openChange(event.detail));
             }
-            updateState({ showPopUpResult: event.detail });
+            updateState({
+                showPopUpResult: event.detail,
+            });
         })}
             >
                 <div
@@ -180,7 +182,9 @@ export const ViraDropdown = defineViraElement()({
                     </span>
 
                     <span class="trigger-icon-wrapper">
-                        <${ViraIcon.assign({ icon: ChevronUp24Icon })}
+                        <${ViraIcon.assign({
+            icon: ChevronUp24Icon,
+        })}
                             class="trigger-icon"
                         ></${ViraIcon}>
                     </span>

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

@@ -45,7 +45,9 @@ export const ViraForm = defineViraElement()({
             updateState({
                 lastIsValid: currentIsValid,
             });
-            dispatch(new events.validChange({ allFieldsAreValid: currentIsValid }));
+            dispatch(new events.validChange({
+                allFieldsAreValid: currentIsValid,
+            }));
         }
         const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
             if (field.isHidden) {

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

@@ -97,14 +97,20 @@ export const ViraImage = defineViraElement()({
         const statusTemplate = state.erroredUrls[imageUrl]
             ? html `
                   <slot class="status-wrapper" name=${slotNames.error}>
-                      <${ViraIcon.assign({ icon: StatusFailure24Icon })} class="error"></${ViraIcon}>
+                      <${ViraIcon.assign({
+                icon: StatusFailure24Icon,
+            })}
+                          class="error"
+                      ></${ViraIcon}>
                   </slot>
               `
             : state.loadedUrls[imageUrl]
                 ? undefined
                 : html `
                     <slot class="status-wrapper" name=${slotNames.loading}>
-                        <${ViraIcon.assign({ icon: LoaderAnimated24Icon })}></${ViraIcon}>
+                        <${ViraIcon.assign({
+                    icon: LoaderAnimated24Icon,
+                })}></${ViraIcon}>
                     </slot>
                 `;
         return html `

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

@@ -295,7 +295,11 @@ export const ViraInput = defineViraElement()({
         });
         const iconTemplate = inputs.icon
             ? html `
-                  <${ViraIcon.assign({ icon: inputs.icon })} class="left-side-icon"></${ViraIcon}>
+                  <${ViraIcon.assign({
+                icon: inputs.icon,
+            })}
+                      class="left-side-icon"
+                  ></${ViraIcon}>
               `
             : nothing;
         const forcedInputWidthStyles = inputs.fitText
@@ -326,7 +330,9 @@ export const ViraInput = defineViraElement()({
                         <span
                             class="size-span"
                             ${onResize(({ contentRect }) => {
-            updateState({ forcedInputWidth: contentRect.width });
+            updateState({
+                forcedInputWidth: contentRect.width,
+            });
         })}
                         >
                             <pre>${filteredValue || inputs.placeholder || nothing}</pre>
@@ -377,7 +383,9 @@ export const ViraInput = defineViraElement()({
             dispatch(new events.valueChange(''));
         })}
                         >
-                            <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
+                            <${ViraIcon.assign({
+            icon: CloseX24Icon,
+        })}></${ViraIcon}>
                         </button>
                     `)}
                 ${renderIf(inputs.type === ViraInputType.Password, html `
@@ -390,7 +398,9 @@ export const ViraInput = defineViraElement()({
             event.preventDefault();
         })}
                             ${listen('click', () => {
-            updateState({ showPassword: !state.showPassword });
+            updateState({
+                showPassword: !state.showPassword,
+            });
         })}
                         >
                             <${ViraIcon.assign({

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

@@ -72,4 +72,7 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
     }>>;
     /** If set to true, internal link styles are not applied. */
     disableLinkStyles: boolean;
-}>, {}, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;
+}>, {
+    /** Removes event listeners registered during init. */
+    cleanup: undefined | (() => void);
+}, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;

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

@@ -1,4 +1,6 @@
+import { assertWrap } from '@augment-vir/assert';
 import { attributes, css, html, ifDefined, listen, } from 'element-vir';
+import { listenTo } from 'typed-event-target';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
@@ -11,6 +13,12 @@ import { defineViraElement } from '../util/define-vira-element.js';
  */
 export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
+    state() {
+        return {
+            /** Removes event listeners registered during init. */
+            cleanup: undefined,
+        };
+    },
     hostClasses: {
         'vira-link-link-styles': ({ inputs }) => !inputs.disableLinkStyles,
     },
@@ -42,6 +50,37 @@ export const ViraLink = defineViraElement()({
             }
         }
     `,
+    init({ state, updateState, host }) {
+        state.cleanup?.();
+        let propagating = false;
+        const listenerRemovers = [
+            listenTo(host, 'click', (event) => {
+                if (propagating) {
+                    return;
+                }
+                const anchorElement = assertWrap.instanceOf(host.shadowRoot.querySelector('a'), HTMLAnchorElement);
+                if (event.composedPath().includes(anchorElement)) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                propagating = true;
+                anchorElement.dispatchEvent(new MouseEvent(event.type, event));
+                propagating = false;
+            }),
+        ];
+        updateState({
+            cleanup: () => {
+                listenerRemovers.forEach((remover) => remover());
+            },
+        });
+    },
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
     render({ inputs }) {
         function clickCallback(event) {
             if (!inputs.route) {

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

@@ -143,7 +143,9 @@ export const ViraModal = defineViraElement()({
         }
         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());
@@ -164,7 +166,9 @@ export const ViraModal = defineViraElement()({
         return html `
             <dialog
                 ${onDomCreated((element) => {
-            updateState({ dialogElement: assertWrap.instanceOf(element, HTMLDialogElement) });
+            updateState({
+                dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
+            });
         })}
                 ${listen('close', () => {
             close();

package/dist/elements/vira-overflow-switch.element.js

@@ -106,5 +106,7 @@ export const ViraOverflowSwitch = defineViraElement()({
 });
 function updateOverflowing({ elementToTest, host, updateState, }) {
     const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
-    updateState({ isOverflowing });
+    updateState({
+        isOverflowing,
+    });
 }

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

@@ -50,7 +50,10 @@ export const ViraProgress = defineViraElement()({
         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,

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

@@ -236,8 +236,16 @@ export const ViraSelect = defineViraElement()({
 
                 <div class="border-style wrapper-border"></div>
 
-                <${ViraIcon.assign({ icon: inputs.icon })} class="input-icon"></${ViraIcon}>
-                <${ViraIcon.assign({ icon: ChevronUp24Icon })} class="trigger-icon"></${ViraIcon}>
+                <${ViraIcon.assign({
+            icon: inputs.icon,
+        })}
+                    class="input-icon"
+                ></${ViraIcon}>
+                <${ViraIcon.assign({
+            icon: ChevronUp24Icon,
+        })}
+                    class="trigger-icon"
+                ></${ViraIcon}>
             </span>
         `;
         if (inputs.label) {

package/dist/util/pop-up-manager.js

@@ -66,7 +66,10 @@ export class PopUpManager {
     lastRootElement;
     constructor(navController, options) {
         this.navController = navController;
-        this.options = { ...this.options, ...options };
+        this.options = {
+            ...this.options,
+            ...options,
+        };
     }
     attachGlobalListeners() {
         this.cleanupCallbacks = [
@@ -81,7 +84,9 @@ export class PopUpManager {
                     return;
                 }
                 if (event.detail.success) {
-                    this.listenTarget.dispatch(new NavSelectEvent({ detail: event.detail.coords }));
+                    this.listenTarget.dispatch(new NavSelectEvent({
+                        detail: event.detail.coords,
+                    }));
                     this.navController.currentNavEntry?.entry.focus(true);
                     event.stopImmediatePropagation();
                     event.preventDefault();
@@ -94,7 +99,9 @@ export class PopUpManager {
                     return;
                 }
                 this.removePopUp();
-            }, { passive: true }),
+            }, {
+                passive: true,
+            }),
             listenToGlobal('keydown', (event) => {
                 const keyCode = event.code;
                 if (keyCode === 'Escape') {
@@ -138,7 +145,9 @@ export class PopUpManager {
                         });
                     }
                     else if ((keyCode === 'Enter' || keyCode === 'Return' || keyCode === 'Space') &&
-                        this.navController.enterInto({ fallbackToActivate: true }).success) {
+                        this.navController.enterInto({
+                            fallbackToActivate: true,
+                        }).success) {
                         event.stopImmediatePropagation();
                         event.preventDefault();
                     }
@@ -158,7 +167,10 @@ export class PopUpManager {
     /** Trigger showing the pop up. */
     showPopUp(rootElement, options) {
         this.lastRootElement = rootElement;
-        const currentOptions = { ...this.options, ...options };
+        const currentOptions = {
+            ...this.options,
+            ...options,
+        };
         const container = findOverflowAncestor(rootElement);
         assert.instanceOf(container, HTMLElement);
         const rootRect = rootElement.getBoundingClientRect();

package/dist/util/shared-text-input-logic.js

@@ -5,7 +5,10 @@ function doesMatch({ input, matcher }) {
         return true;
     }
     if (input.length > 1) {
-        return input.split('').every((singleInput) => doesMatch({ input: singleInput, matcher }));
+        return input.split('').every((singleInput) => doesMatch({
+            input: singleInput,
+            matcher,
+        }));
     }
     if (matcher instanceof RegExp) {
         return !!input.match(matcher);
@@ -38,10 +41,16 @@ function isAllowed({ value: rawValue, allowed, blocked }) {
 export function filterTextInputValue(inputs) {
     const value = String(inputs.value);
     if (!inputs.value) {
-        return { filtered: value, blocked: '' };
+        return {
+            filtered: value,
+            blocked: '',
+        };
     }
     const { filtered, blocked } = value.split('').reduce((accum, letter) => {
-        const allowed = isAllowed({ ...inputs, value: letter });
+        const allowed = isAllowed({
+            ...inputs,
+            value: letter,
+        });
         if (allowed) {
             accum.filtered.push(letter);
         }

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

@@ -27,7 +27,10 @@ export var ViraFormFieldType;
 export function applyRequiredLabel(label, isRequired) {
     if (label) {
         if (isRequired) {
-            return addSuffix({ value: label, suffix: '*' });
+            return addSuffix({
+                value: label,
+                suffix: '*',
+            });
         }
         else {
             return label;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "30.1.0",
+    "version": "30.1.2",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,21 +38,21 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.65.0",
-        "@augment-vir/common": "^31.65.0",
-        "@augment-vir/web": "^31.65.0",
+        "@augment-vir/assert": "^31.67.0",
+        "@augment-vir/common": "^31.67.0",
+        "@augment-vir/web": "^31.67.0",
         "@electrovir/color": "^1.7.8",
-        "date-vir": "^8.1.1",
+        "date-vir": "^8.2.0",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.5.0",
-        "observavir": "^2.3.1",
+        "observavir": "^2.3.2",
         "page-active": "^1.0.3",
         "spa-router-vir": "^6.4.1",
         "type-fest": "^5.4.4",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.65.0",
+        "@augment-vir/test": "^31.67.0",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -68,7 +68,7 @@
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
-        "element-vir": "^26.9.1",
+        "element-vir": ">=26",
         "theme-vir": ">=28"
     },
     "engines": {