vira 32.0.0-beta.0 → 32.1.0

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

@@ -1,37 +1,28 @@
 /* node:coverage disable */
-
-import {checkWrap} from '@augment-vir/assert';
-import {getObjectTypedValues, type PartialWithUndefined} from '@augment-vir/common';
-import {
-    ColorFormatName,
-    colorFormats,
-} from '@electrovir/color/dist/data/color-class/color-formats.js';
-import {Color} from '@electrovir/color/dist/data/color-class/color.js';
-import {css, defineElement, defineElementEvent, html, listen, nothing} from 'element-vir';
-import {CssVarSyntaxName} from 'lit-css-vars';
-import {Copy24Icon} from '../../icons/icon-svgs/24/copy-24.icon.js';
-import {viraFontCssVars} from '../../styles/font.js';
-import {viraFormCssVars} from '../../styles/form-styles.js';
-import {noNativeFormStyles} from '../../styles/native-styles.js';
-import {viraShadows} from '../../styles/shadows.js';
-import {colorLocalStorageClient} from '../../util/color-local-storage.client.js';
-import {type ViraSelectOption} from '../../util/vira-select-option.js';
-import {ViraPopUpTrigger} from '../pop-up/vira-pop-up-trigger.element.js';
-import {ViraIcon} from '../vira-icon.element.js';
-import {ViraInput} from '../vira-input.element.js';
-import {ViraSelect} from '../vira-select.element.js';
-import {ViraColorFormatSliders} from './vira-color-format-sliders.element.js';
-import {ViraColorSwatch} from './vira-color-swatch.element.js';
-
-const colorFormatOptions: ReadonlyArray<Readonly<ViraSelectOption>> = getObjectTypedValues(
-    ColorFormatName,
-).map((formatName) => {
+import { checkWrap } from '@augment-vir/assert';
+import { getObjectTypedValues } from '@augment-vir/common';
+import { ColorFormatName, colorFormats, } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
+import { CssVarSyntaxName } from 'lit-css-vars';
+import { Copy24Icon } from '../../icons/icon-svgs/24/copy-24.icon.js';
+import { viraFontCssVars } from '../../styles/font.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
+import { noNativeFormStyles } from '../../styles/native-styles.js';
+import { viraShadows } from '../../styles/shadows.js';
+import { colorLocalStorageClient } from '../../util/color-local-storage.client.js';
+import { ViraPopUpTrigger } from '../pop-up/vira-pop-up-trigger.element.js';
+import { ViraIcon } from '../vira-icon.element.js';
+import { ViraInput } from '../vira-input.element.js';
+import { ViraSelect } from '../vira-select.element.js';
+import { ViraColorFormatSliders } from './vira-color-format-sliders.element.js';
+import { ViraColorSwatch } from './vira-color-swatch.element.js';
+const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName) => {
     return {
         value: formatName,
         label: formatName.toUpperCase(),
     };
 });
-
 /**
  * A color picker element with a swatch that opens a popup with color format sliders.
  *
@@ -39,16 +30,7 @@ const colorFormatOptions: ReadonlyArray<Readonly<ViraSelectOption>> = getObjectT
  *
  * @category Elements
  */
-export const ViraColorPicker = defineElement<
-    Readonly<
-        {
-            color: string | Readonly<Color> | undefined;
-        } & PartialWithUndefined<{
-            alwaysShowPicker: boolean;
-            showHexValue: boolean;
-        }>
-    >
->()({
+export const ViraColorPicker = defineElement()({
     tagName: 'vira-color-picker',
     cssVars: {
         'vira-color-picker-swatch-width': {
@@ -63,14 +45,16 @@ export const ViraColorPicker = defineElement<
     state() {
         return {
             selectedFormatName: colorLocalStorageClient.get.lastFormat() || ColorFormatName.rgb,
-            rawInput: undefined as undefined | string,
+            rawInput: undefined,
         };
     },
     hostClasses: {
-        'vira-color-picker-always-show': ({inputs}) => !!inputs.alwaysShowPicker,
+        'vira-color-picker-always-show'({ inputs }) {
+            return !!inputs.alwaysShowPicker;
+        },
     },
-    styles: ({cssVars, hostClasses}) => {
-        return css`
+    styles({ cssVars, hostClasses }) {
+        return css `
             :host {
                 display: inline-flex;
             }
@@ -164,129 +148,120 @@ export const ViraColorPicker = defineElement<
         `;
     },
     events: {
-        colorChange: defineElementEvent<string>(),
+        colorChange: defineElementEvent(),
     },
-    render({inputs, dispatch, events, state, updateState}) {
-        const color: Readonly<Color> = Color.isColor(inputs.color)
+    render({ inputs, dispatch, events, state, updateState }) {
+        const color = Color.isColor(inputs.color)
             ? inputs.color
             : new Color(inputs.color || 'black');
         const formatDefinition = colorFormats[state.selectedFormatName];
-
         const rawInput = state.rawInput ?? color.toCss()[formatDefinition.rawSyntax];
-
-        const rawInputTemplate = html`
+        const rawInputTemplate = html `
             <div class="raw-input-wrapper">
                 <${ViraInput.assign({
-                    value: rawInput,
-                })}
+            value: rawInput,
+        })}
                     ${listen(ViraInput.events.valueChange, (event) => {
-                        const rawInput = event.detail;
-                        updateState({
-                            rawInput,
-                        });
-                        if (Color.isValidColorString(rawInput)) {
-                            dispatch(
-                                new events.colorChange({
-                                    detail: rawInput,
-                                }),
-                            );
-                        }
-                    })}
+            const rawInput = event.detail;
+            updateState({
+                rawInput,
+            });
+            if (Color.isValidColorString(rawInput)) {
+                dispatch(new events.colorChange({
+                    detail: rawInput,
+                }));
+            }
+        })}
                 ></${ViraInput}>
                 <button
                     class="code-button"
                     ${listen('click', async () => {
-                        await globalThis.navigator.clipboard.writeText(rawInput);
-                    })}
+            await globalThis.navigator.clipboard.writeText(rawInput);
+        })}
                 >
                     <${ViraIcon.assign({
-                        icon: Copy24Icon,
-                        fitContainer: true,
-                    })}></${ViraIcon}>
+            icon: Copy24Icon,
+            fitContainer: true,
+        })}></${ViraIcon}>
                 </button>
             </div>
         `;
-
-        const hexValueTemplate = html`
+        const hexValueTemplate = html `
             <button
                 class="code-button"
                 ${listen('click', async () => {
-                    await globalThis.navigator.clipboard.writeText(color.hexString);
-                })}
+            await globalThis.navigator.clipboard.writeText(color.hexString);
+        })}
             >
                 <span>${color.hexString}</span>
                 <${ViraIcon.assign({
-                    icon: Copy24Icon,
-                    fitContainer: true,
-                })}></${ViraIcon}>
+            icon: Copy24Icon,
+            fitContainer: true,
+        })}></${ViraIcon}>
             </button>
         `;
-
-        const swatchTemplate = html`
+        const swatchTemplate = html `
             <div class="swatch-wrapper">
                 <${ViraColorSwatch.assign({
-                    backgroundColor: color,
-                })}></${ViraColorSwatch}>
+            backgroundColor: color,
+        })}></${ViraColorSwatch}>
                 ${inputs.showHexValue ? hexValueTemplate : nothing}
             </div>
         `;
-
-        const pickerTemplate = html`
+        const pickerTemplate = html `
             <div class="picker">
                 <${ViraSelect.assign({
-                    options: colorFormatOptions,
-                    value: state.selectedFormatName,
-                })}
+            options: colorFormatOptions,
+            value: state.selectedFormatName,
+        })}
                     ${listen(ViraSelect.events.valueChange, (event) => {
-                        const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
-                        if (selectedFormat) {
-                            updateState({
-                                selectedFormatName: selectedFormat,
-                            });
-                            colorLocalStorageClient.set.lastFormat(selectedFormat);
-                        }
-                    })}
+            const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
+            if (selectedFormat) {
+                updateState({
+                    selectedFormatName: selectedFormat,
+                });
+                colorLocalStorageClient.set.lastFormat(selectedFormat);
+            }
+        })}
                 ></${ViraSelect}>
                 ${rawInputTemplate}
                 <${ViraColorFormatSliders.assign({
-                    color,
-                    colorFormatName: state.selectedFormatName,
-                    showFormatName: false,
-                })}
+            color,
+            colorFormatName: state.selectedFormatName,
+            showFormatName: false,
+        })}
                     ${listen(ViraColorFormatSliders.events.colorChange, (event) => {
-                        dispatch(
-                            new events.colorChange({
-                                detail: event.detail,
-                            }),
-                        );
-                        updateState({
-                            rawInput: undefined,
-                        });
-                    })}
+            dispatch(new events.colorChange({
+                detail: event.detail,
+            }));
+            updateState({
+                rawInput: undefined,
+            });
+        })}
                 ></${ViraColorFormatSliders}>
             </div>
         `;
-
         if (inputs.alwaysShowPicker) {
-            return html`
+            return html `
                 ${swatchTemplate} ${pickerTemplate}
             `;
-        } else {
-            return html`
+        }
+        else {
+            return html `
                 <${ViraPopUpTrigger.assign({
-                    keepOpenAfterInteraction: true,
-                })}>
+                keepOpenAfterInteraction: true,
+            })}>
                     <button
                         class="trigger"
                         slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
                         ${listen('mousedown', () => {
-                            const storedFormat = colorLocalStorageClient.get.lastFormat();
-                            if (storedFormat) {
-                                updateState({
-                                    selectedFormatName: storedFormat,
-                                });
-                            }
-                        })}
+                const storedFormat = colorLocalStorageClient.get.lastFormat();
+                if (storedFormat) {
+                    updateState({
+                        selectedFormatName: storedFormat,
+                    });
+                }
+            })}
                     >
                         ${swatchTemplate}
                     </button>

package/dist/elements/color/vira-color-slider.element.d.ts

@@ -0,0 +1,14 @@
+import { type ColorCoordinateName, type ColorFormatName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export declare const ViraColorSlider: import("element-vir").DeclarativeElementDefinition<"vira-color-slider", {
+    color: Readonly<Color>;
+    colorFormatName: ColorFormatName;
+    colorCoordinateName: ColorCoordinateName;
+}, {}, {
+    valueChange: import("element-vir").DefineElementEvent<number>;
+}, "vira-color-slider-", "vira-color-slider-gradient", readonly [], readonly []>;

package/dist/elements/color/vira-color-slider.element.js

@@ -0,0 +1,124 @@
+/* node:coverage disable */
+import { assert, assertWrap } from '@augment-vir/assert';
+import { createArray } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { colorFormats, } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { Color } from '@electrovir/color/dist/data/color-class/color.js';
+import { css, defineElement, defineElementEvent, html, listen, onDomRendered, unsafeCSS, } from 'element-vir';
+import { viraFontCssVars } from '../../styles/font.js';
+import { ViraInput } from '../vira-input.element.js';
+/**
+ * A slider for a specific color coordinate in a specific color space in a specific color.
+ *
+ * @category Elements
+ */
+export const ViraColorSlider = defineElement()({
+    tagName: 'vira-color-slider',
+    cssVars: {
+        'vira-color-slider-gradient': 'black',
+    },
+    styles({ cssVars }) {
+        return css `
+            :host {
+                display: flex;
+                align-items: center;
+                font-family: ${viraFontCssVars['vira-monospace'].value};
+                gap: 2px;
+            }
+
+            input[type='range'] {
+                flex-grow: 1;
+                appearance: none;
+                background: ${cssVars['vira-color-slider-gradient'].value};
+                height: 9px;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+
+            ${ViraInput} {
+                width: 76px;
+            }
+
+            .coordinate {
+                font-size: 18px;
+                margin-top: -4px;
+            }
+        `;
+    },
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    render({ inputs, events, dispatch, cssVars }) {
+        const formatDefinition = colorFormats[inputs.colorFormatName];
+        const coordinateDefinition = formatDefinition.coords[inputs.colorCoordinateName];
+        if (!coordinateDefinition) {
+            throw new Error(`Invalid color coordinate '${inputs.colorCoordinateName}' for color format '${inputs.colorFormatName}'`);
+        }
+        const totalStops = 10;
+        const colorStops = createArray(totalStops, (index) => {
+            const value = coordinateDefinition.min +
+                (coordinateDefinition.max - coordinateDefinition.min) * (index / totalStops);
+            const stopColor = new Color({
+                [inputs.colorFormatName]: {
+                    ...inputs.color[inputs.colorFormatName],
+                    [inputs.colorCoordinateName]: value,
+                },
+            });
+            return stopColor.toCss()[formatDefinition.conversionFormat];
+        });
+        const gradient = css `linear-gradient(to right, ${unsafeCSS(colorStops.join(','))})`;
+        const coordinateValue = assertWrap.isNumber(inputs.color[inputs.colorFormatName][inputs.colorCoordinateName]);
+        const displayValue = coordinateDefinition.radix
+            ? Math.round(coordinateValue)
+                .toString(coordinateDefinition.radix)
+                .toUpperCase()
+                .padStart(coordinateDefinition.radixPad || 0, '0')
+            : String(coordinateValue);
+        return html `
+            <span class="coordinate">${inputs.colorCoordinateName.toUpperCase()}</span>
+            <input
+                type="range"
+                style=${css `
+                    ${cssVars['vira-color-slider-gradient'].name}: ${gradient};
+                `}
+                step=${Math.pow(10, coordinateDefinition.digits ? -coordinateDefinition.digits : 0)}
+                ${onDomRendered((element) => {
+            /**
+             * We must set these imperatively to force the input element to match the
+             * inputs, otherwise when swapping color formats these color sliders don't
+             * update correctly.
+             */
+            assert.instanceOf(element, HTMLInputElement);
+            element.min = String(coordinateDefinition.min);
+            element.max = String(coordinateDefinition.max);
+            element.value = String(coordinateValue);
+        })}
+                ${listen('input', (event) => {
+            const element = extractEventTarget(event, HTMLInputElement);
+            const newValue = Number(element.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange({
+                detail: newValue,
+            }));
+        })}
+            />
+            <${ViraInput.assign({
+            value: displayValue,
+        })}
+                ${listen(ViraInput.events.valueChange, (event) => {
+            const newValue = coordinateDefinition.radix
+                ? parseInt(event.detail, coordinateDefinition.radix)
+                : Number(event.detail);
+            if (isNaN(newValue)) {
+                return;
+            }
+            dispatch(new events.valueChange({
+                detail: newValue,
+            }));
+        })}
+            ></${ViraInput}>
+        `;
+    },
+});

package/dist/elements/color/vira-color-swatch.element.d.ts

@@ -0,0 +1,20 @@
+import { type Color } from '@electrovir/color/dist/data/color-class/color.js';
+/**
+ * Show a background and/or foreground color. Note that if a foreground color is provided that it is
+ * not actually applied to anything, you must provide a child element for it to be applied to.
+ *
+ * @category Elements
+ */
+export declare const ViraColorSwatch: import("element-vir").DeclarativeElementDefinition<"vira-color-swatch", ((Required<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "foregroundColor">> & Partial<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "backgroundColor">>) | (Required<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "backgroundColor">> & Partial<Pick<{
+    foregroundColor: string | Readonly<Color>;
+    backgroundColor: string | Readonly<Color>;
+}, "foregroundColor">>)) & {}, {}, {}, "vira-color-swatch-", "vira-color-swatch-", readonly [], readonly []>;

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

@@ -1,23 +1,14 @@
 /* node:coverage disable */
-
-import {type RequireAtLeastOne} from '@augment-vir/common';
-import {type Color} from '@electrovir/color/dist/data/color-class/color.js';
-import {css, defineElement, html, unsafeCSS} from 'element-vir';
-
+import { css, defineElement, html, unsafeCSS } from 'element-vir';
 /**
  * Show a background and/or foreground color. Note that if a foreground color is provided that it is
  * not actually applied to anything, you must provide a child element for it to be applied to.
  *
  * @category Elements
  */
-export const ViraColorSwatch = defineElement<
-    RequireAtLeastOne<{
-        foregroundColor: string | Readonly<Color>;
-        backgroundColor: string | Readonly<Color>;
-    }>
->()({
+export const ViraColorSwatch = defineElement()({
     tagName: 'vira-color-swatch',
-    styles: css`
+    styles: css `
         :host {
             display: flex;
             height: 400px;
@@ -40,13 +31,12 @@ export const ViraColorSwatch = defineElement<
             align-items: center;
         }
     `,
-    render({inputs}) {
+    render({ inputs }) {
         const backgroundColor = inputs.backgroundColor || inputs.foregroundColor;
         const foregroundColor = inputs.foregroundColor || 'transparent';
-
-        return html`
+        return html `
             <div
-                style=${css`
+                style=${css `
                     background-color: ${unsafeCSS(backgroundColor)};
                     color: ${unsafeCSS(foregroundColor)};
                 `}

package/dist/elements/color/vira-contrast-indicator.element.d.ts

@@ -0,0 +1,10 @@
+import { type CalculatedContrast, type FontWeight } from '@electrovir/color/dist/data/contrast/contrast.js';
+/**
+ * Show contrast details for a calculated contrast.
+ *
+ * @category Elements
+ */
+export declare const ViraContrastIndicator: import("element-vir").DeclarativeElementDefinition<"vira-contrast-indicator", {
+    contrast: Readonly<CalculatedContrast>;
+    fontWeight: FontWeight;
+}, {}, {}, "vira-contrast-indicator-", "vira-contrast-indicator-", readonly [], readonly []>;

package/{src/elements/color/vira-contrast-indicator.element.ts → dist/elements/color/vira-contrast-indicator.element.js}

@@ -1,25 +1,14 @@
 /* node:coverage disable */
-
-import {
-    contrastLevelLabel,
-    ContrastLevelName,
-    contrastLevels,
-    type CalculatedContrast,
-    type FontWeight,
-} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {classMap, css, defineElement, html, unsafeCSS} from 'element-vir';
-
+import { contrastLevelLabel, ContrastLevelName, contrastLevels, } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { classMap, css, defineElement, html, unsafeCSS } from 'element-vir';
 /**
  * Show contrast details for a calculated contrast.
  *
  * @category Elements
  */
-export const ViraContrastIndicator = defineElement<{
-    contrast: Readonly<CalculatedContrast>;
-    fontWeight: FontWeight;
-}>()({
+export const ViraContrastIndicator = defineElement()({
     tagName: 'vira-contrast-indicator',
-    styles: css`
+    styles: css `
         :host {
             display: inline-flex;
             max-width: 100%;
@@ -70,32 +59,28 @@ export const ViraContrastIndicator = defineElement<{
             padding-left: 1ex;
         }
     `,
-    render({inputs}) {
+    render({ inputs }) {
         const gaugeLevels = contrastLevels
             .toReversed()
             .slice(1)
             .map((level) => {
-                return html`
+            return html `
                     <div
                         class="gauge-level ${classMap({
-                            active: level.min <= Math.abs(inputs.contrast.contrast),
-                        })}"
+                active: level.min <= Math.abs(inputs.contrast.contrast),
+            })}"
                     ></div>
                 `;
-            });
-
+        });
         const title = [
             inputs.contrast.contrastLevel.description,
             '\nFont weights to font sizes:',
             JSON.stringify(inputs.contrast.fontSizes, null, 4),
         ].join('\n');
-
-        const fontSize =
-            inputs.contrast.fontSizes[inputs.fontWeight] > 150
-                ? '-'
-                : `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
-
-        return html`
+        const fontSize = inputs.contrast.fontSizes[inputs.fontWeight] > 150
+            ? '-'
+            : `${inputs.contrast.fontSizes[inputs.fontWeight]}px`;
+        return html `
             <div title=${title} class="wrapper ${inputs.contrast.contrastLevel.name}">
                 <div class="gauge">${gaugeLevels}</div>
                 <span>

package/dist/elements/index.js

@@ -0,0 +1,39 @@
+export * from './color/vira-all-color-space-sliders.element.js';
+export * from './color/vira-all-spaces-color-picker.element.js';
+export * from './color/vira-color-details.element.js';
+export * from './color/vira-color-format-sliders.element.js';
+export * from './color/vira-color-pair-contrast-summary.element.js';
+export * from './color/vira-color-pair.element.js';
+export * from './color/vira-color-picker.element.js';
+export * from './color/vira-color-slider.element.js';
+export * from './color/vira-color-swatch.element.js';
+export * from './color/vira-contrast-indicator.element.js';
+export * from './pop-up/vira-menu-item.element.js';
+export * from './pop-up/vira-menu-trigger.element.js';
+export * from './pop-up/vira-menu.element.js';
+export * from './pop-up/vira-pop-up-trigger.element.js';
+export * from './vira-absolute-time.element.js';
+export * from './vira-bold-text.element.js';
+export * from './vira-button.element.js';
+export * from './vira-card.element.js';
+export * from './vira-checkbox.element.js';
+export * from './vira-collapsible-card.element.js';
+export * from './vira-collapsible-wrapper.element.js';
+export * from './vira-date-input.element.js';
+export * from './vira-drawer.element.js';
+export * from './vira-dropdown.element.js';
+export * from './vira-error.element.js';
+export * from './vira-form.element.js';
+export * from './vira-icon.element.js';
+export * from './vira-image.element.js';
+export * from './vira-input.element.js';
+export * from './vira-json-form.element.js';
+export * from './vira-link.element.js';
+export * from './vira-modal.element.js';
+export * from './vira-progress.element.js';
+export * from './vira-relative-time.element.js';
+export * from './vira-select.element.js';
+export * from './vira-tabs.element.js';
+export * from './vira-tag.element.js';
+export * from './vira-text-area.element.js';
+export * from './vira-theme-switcher.element.js';

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

@@ -0,0 +1,38 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../../icons/icon-svg.js';
+/**
+ * An element for an individual menu item.
+ *
+ * @category PopUp
+ * @category Elements
+ */
+export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", PartialWithUndefined<{
+    selected: boolean;
+    disabled: boolean;
+    /**
+     * Set this to `true` to disable the default `ViraMenuItem` hover and active styles so you
+     * can apply your own.
+     */
+    disablePointerStyles: boolean;
+    /**
+     * If provided, this will override the checkmark icon. If this is provided, the icon will
+     * _always_ be shown, even if `selected` is set to `false`.
+     */
+    iconOverride: ViraIconSvg;
+    /**
+     * When `true`, activating this item will _not_ close the containing pop-up.
+     *
+     * @default false
+     */
+    keepOpenAfterInteraction: boolean;
+}>, {
+    /** Removes event listeners registered during init. */
+    cleanupListeners: undefined | (() => void);
+}, {
+    /**
+     * Fired when this menu item is activated by the user (a non-disabled click). Pop-up
+     * containers (e.g. `ViraPopUpTrigger`) listen to this to close the pop-up on selection,
+     * gated by `keepOpenAfterInteraction`.
+     */
+    activate: import("element-vir").DefineElementEvent<undefined>;
+}, "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-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;