vira 32.2.0 → 32.3.0

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

@@ -1,11 +1,13 @@
 import { assertWrap } from '@augment-vir/assert';
 import { css, defineElementEvent, html } from 'element-vir';
 import { listenTo } from 'typed-event-target';
-import { Check24Icon } from '../../icons/icon-svgs/24/check-24.icon.js';
+import { lucideIcons } from '../../icons/lucide-icons.js';
+import { createSizedIcon } from '../../icons/sized-icon.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noUserSelect } from '../../styles/index.js';
 import { defineViraElement } from '../../util/define-vira-element.js';
 import { ViraIcon } from '../vira-icon.element.js';
+const selectedCheckIcon = createSizedIcon(lucideIcons.Check, 16);
 /**
  * An element for an individual menu item.
  *
@@ -47,8 +49,8 @@ export const ViraMenuItem = defineViraElement()({
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
-        'vira-menu-item-icon-gap': '0',
-        'vira-menu-item-padding': '4px 8px 4px 1px',
+        'vira-menu-item-icon-gap': '3px',
+        'vira-menu-item-padding': '8px 12px 8px 0',
     },
     styles({ hostClasses, cssVars }) {
         return css `
@@ -58,9 +60,9 @@ export const ViraMenuItem = defineViraElement()({
                 ${noUserSelect};
                 box-sizing: border-box;
                 max-width: 100%;
+                padding-left: calc(${cssVars['vira-menu-item-icon-gap'].value} * 2);
                 gap: ${cssVars['vira-menu-item-icon-gap'].value};
                 overflow: hidden;
-                padding: ${cssVars['vira-menu-item-padding'].value};
                 align-items: center;
                 text-align: left;
             }
@@ -93,7 +95,7 @@ export const ViraMenuItem = defineViraElement()({
             }
 
             ${ViraIcon} {
-                width: 24px;
+                width: 16px;
                 aspect-ratio: 1;
                 align-items: center;
                 justify-content: center;
@@ -110,12 +112,21 @@ export const ViraMenuItem = defineViraElement()({
             }
 
             .slot-wrapper {
+                padding: ${cssVars['vira-menu-item-padding'].value};
                 display: flex;
                 flex-grow: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 min-width: 0;
+
+                & > slot {
+                    display: block;
+                    flex-grow: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    min-width: 0;
+                }
             }
         `;
     },
@@ -222,7 +233,7 @@ export const ViraMenuItem = defineViraElement()({
     render({ inputs }) {
         return html `
             <${ViraIcon.assign({
-            icon: inputs.iconOverride || Check24Icon,
+            icon: inputs.iconOverride || selectedCheckIcon,
         })}></${ViraIcon}>
             <div class="slot-wrapper">
                 <slot>&nbsp;</slot>

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

@@ -31,6 +31,7 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 } & PopUpTriggerPosition>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
+    shouldSelectOnMouseUp: boolean;
     /**
      * Used to couple the label and trigger together. This is not applied if no label is
      * provided.

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

@@ -1,11 +1,13 @@
 import { check } from '@augment-vir/assert';
 import { filterMap, randomString } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
+import { ViraMenuItem } from './pop-up/vira-menu-item.element.js';
 import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
 import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -118,6 +120,7 @@ export const ViraDropdown = defineViraElement()({
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
+            shouldSelectOnMouseUp: false,
             /**
              * Used to couple the label and trigger together. This is not applied if no label is
              * provided.
@@ -149,6 +152,19 @@ export const ViraDropdown = defineViraElement()({
             : inputs.isMultiSelect && selectedOptions.length > 1
                 ? `${selectedOptions.length} Selected`
                 : selectedOptions[0]?.label || '';
+        function selectOption(option) {
+            const newSelectedValues = inputs.isMultiSelect
+                ? selectedOptions.includes(option)
+                    ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
+                    : [
+                        ...selectedOptions.map((selectedOption) => selectedOption.value),
+                        option.value,
+                    ]
+                : [option.value];
+            dispatch(new events.selectedValuesChange({
+                detail: newSelectedValues,
+            }));
+        }
         const menuTemplate = html `
             <${ViraMenu.assign({
             direction: state.showPopUpResult?.popDown
@@ -156,22 +172,27 @@ export const ViraDropdown = defineViraElement()({
                 : ViraMenuPopUpDirection.Upwards,
         })}
                 slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                ${listen('mouseup', (event) => {
+            if (state.shouldSelectOnMouseUp) {
+                const menuItem = event
+                    .composedPath()
+                    .find((eventTarget) => {
+                    return eventTarget instanceof ViraMenuItem;
+                });
+                const option = menuItem
+                    ? inputs.options[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
+                    : undefined;
+                if (check.isDefined(option) && !option.disabled) {
+                    selectOption(option);
+                }
+            }
+        })}
             >
                 ${renderMenuItemEntries(inputs.options.map((option) => {
             return {
                 content: option.label,
                 onClick() {
-                    const newSelectedValues = inputs.isMultiSelect
-                        ? selectedOptions.includes(option)
-                            ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
-                            : [
-                                ...selectedOptions.map((selectedOption) => selectedOption.value),
-                                option.value,
-                            ]
-                        : [option.value];
-                    dispatch(new events.selectedValuesChange({
-                        detail: newSelectedValues,
-                    }));
+                    selectOption(option);
                 },
                 disabled: option.disabled,
                 selected: selectedOptions.includes(option),
@@ -199,6 +220,13 @@ export const ViraDropdown = defineViraElement()({
             updateState({
                 showPopUpResult: event.detail,
             });
+        })}
+                ${listen('mouseup', () => {
+            if (state.shouldSelectOnMouseUp) {
+                updateState({
+                    shouldSelectOnMouseUp: false,
+                });
+            }
         })}
             >
                 <div
@@ -210,6 +238,13 @@ export const ViraDropdown = defineViraElement()({
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
                     ${testId(testIds.trigger)}
+                    ${listen('mousedown', () => {
+            if (!state.showPopUpResult) {
+                updateState({
+                    shouldSelectOnMouseUp: true,
+                });
+            }
+        })}
                 >
                     ${leadingIconTemplate}
                     <span

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

@@ -37,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanupListeners: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineElementEvent<void>;
-}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius", readonly ["vira-modal-modal-title"], readonly []>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius" | "vira-modal-max-width", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -51,6 +51,8 @@ export const ViraModal = defineViraElement()({
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
         'vira-modal-border-radius': '8px',
+        /** Can go no wider than the viewport. */
+        'vira-modal-max-width': 'calc(100dvw - 100px)',
     },
     styles({ hostClasses, cssVars }) {
         return css `
@@ -73,7 +75,7 @@ export const ViraModal = defineViraElement()({
                 overflow: hidden;
                 min-width: inherit;
                 min-height: inherit;
-                max-width: calc(100dvw - 100px);
+                max-width: min(${cssVars['vira-modal-max-width'].value}, 100dvw);
                 max-height: calc(100dvh - 100px);
                 ${viraShadows.modal}
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "32.2.0",
+    "version": "32.3.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.3.0",
-        "@augment-vir/common": "^32.3.0",
-        "@augment-vir/web": "^32.3.0",
+        "@augment-vir/assert": "^32.3.1",
+        "@augment-vir/common": "^32.3.1",
+        "@augment-vir/web": "^32.3.1",
         "@electrovir/color": "^2.0.0",
         "@electrovir/local-storage-client": "^0.1.1",
         "date-vir": "^9.1.1",
@@ -51,10 +51,10 @@
         "observavir": "^2.3.3",
         "page-active": "^1.0.4",
         "spa-router-vir": "^6.8.0",
-        "typed-event-target": "^4.3.3"
+        "typed-event-target": "^4.3.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.3.0",
+        "@augment-vir/test": "^32.3.1",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
@@ -62,12 +62,12 @@
         "@web/test-runner-visual-regression": "^1.0.1",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.42.0",
+        "lucide-static": "^1.46.0",
         "markdown-code-example-inserter": "^3.0.6",
         "theme-vir": "^29.0.0",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "vite": "^8.2.2",
+        "vite": "^8.3.0",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {