vira 32.4.0 → 33.1.0

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

@@ -9,9 +9,9 @@ import { defineViraElement } from '../util/define-vira-element.js';
 import { allowsFreeformString, createDefaultForJsonType, createResolveContext, deleteValueAtPath, getAdditionalPropertiesSchema, getAllowedJsonTypes, getDefinedProperties, getItemSchema, getJsonType, getNewItemSchema, getPropertySchema, getRequiredProperties, getSchemaEnumValues, getSchemaTitle, getStringEnumValues, pathToKey, pickBranchForType, setValueAtPath, validateAgainstSchema, ViraJsonType, viraJsonTypeLabels, } from '../util/vira-json-schema.js';
 import { ViraButton } from './vira-button.element.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraDropdown } from './vira-dropdown.element.js';
 import { ViraError } from './vira-error.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
-import { ViraSelect } from './vira-select.element.js';
 import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * Editing mode for a string field that offers both a fixed set of enum options and free-form text.
@@ -25,6 +25,9 @@ export var ViraJsonStringMode;
     /** Enter an arbitrary string via a text input. */
     ViraJsonStringMode["Custom"] = "custom";
 })(ViraJsonStringMode || (ViraJsonStringMode = {}));
+function toSelectedValues(value) {
+    return value == undefined ? [] : [value];
+}
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -163,7 +166,7 @@ export const ViraJsonForm = defineViraElement()({
             min-width: 0;
         }
 
-        .json-value-with-switcher > ${ViraSelect} {
+        .json-value-with-switcher > ${ViraDropdown} {
             flex-shrink: 0;
             width: 130px;
         }
@@ -177,7 +180,7 @@ export const ViraJsonForm = defineViraElement()({
             padding: 8px 0;
         }
 
-        .json-add-row ${ViraInput}, .json-add-row ${ViraSelect} {
+        .json-add-row ${ViraInput}, .json-add-row ${ViraDropdown} {
             width: 160px;
         }
 
@@ -310,16 +313,17 @@ export const ViraJsonForm = defineViraElement()({
                     check.isNumber(value) ||
                     check.isBoolean(value);
                 return html `
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                     options,
-                    value: isPrimitive ? jsonPrimitiveToString(value) : undefined,
-                    disabled: isDisabled,
+                    selected: toSelectedValues(isPrimitive ? jsonPrimitiveToString(value) : undefined),
+                    isDisabled,
                 })}
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                    const selected = enumValues.find((entry) => jsonPrimitiveToString(entry) === event.detail);
-                    emitReplaceAt(path, selected ?? event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    const selectedValue = assertWrap.isDefined(event.detail[0]);
+                    const selected = enumValues.find((entry) => jsonPrimitiveToString(entry) === selectedValue);
+                    emitReplaceAt(path, selected ?? selectedValue);
                 })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 `;
             }
             else if (type === ViraJsonType.Boolean) {
@@ -463,14 +467,14 @@ export const ViraJsonForm = defineViraElement()({
                 };
             });
             return html `
-                <${ViraSelect.assign({
+                <${ViraDropdown.assign({
                 options,
-                value: selectedType,
+                selected: toSelectedValues(selectedType),
             })}
-                    ${listen(ViraSelect.events.valueChange, (event) => {
-                setPendingType(pathKey, event.detail);
+                    ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
             })}
-                ></${ViraSelect}>
+                ></${ViraDropdown}>
                 ${renderPlusButton({
                 isAddDisabled,
                 tooltip: isAddDisabled
@@ -527,14 +531,14 @@ export const ViraJsonForm = defineViraElement()({
                     };
                 });
                 return html `
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                     options,
-                    value: selectedType,
+                    selected: toSelectedValues(selectedType),
                 })}
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                    setPendingType(pathKey, event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
                 })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                     ${renderPlusButton({
                     isAddDisabled: false,
                     tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
@@ -798,20 +802,20 @@ export const ViraJsonForm = defineViraElement()({
             });
             const editor = mode === ViraJsonStringMode.Options
                 ? html `
-                          <${ViraSelect.assign({
+                          <${ViraDropdown.assign({
                     options: enumValues.map((entry) => {
                         return {
                             value: entry,
                             label: entry,
                         };
                     }),
-                    value: enumValues.includes(value) ? value : undefined,
-                    disabled: isDisabled,
+                    selected: toSelectedValues(enumValues.includes(value) ? value : undefined),
+                    isDisabled,
                 })}
-                              ${listen(ViraSelect.events.valueChange, (event) => {
-                    emitReplaceAt(path, event.detail);
+                              ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                    emitReplaceAt(path, assertWrap.isDefined(event.detail[0]));
                 })}
-                          ></${ViraSelect}>
+                          ></${ViraDropdown}>
                       `
                 : html `
                           <${ViraInput.assign({
@@ -839,15 +843,15 @@ export const ViraJsonForm = defineViraElement()({
             return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                 options: modeOptions,
-                value: mode,
+                selected: toSelectedValues(mode),
             })}
                         title="Choose from options or enter a custom value"
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                setStringMode(pathKey, event.detail);
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                setStringMode(pathKey, assertWrap.isDefined(event.detail[0]));
             })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 </div>
             `;
         }
@@ -894,16 +898,16 @@ export const ViraJsonForm = defineViraElement()({
             return html `
                 <div class="json-value-with-switcher">
                     <span class="json-value-editor-slot">${editor}</span>
-                    <${ViraSelect.assign({
+                    <${ViraDropdown.assign({
                 options: switcherOptions,
-                value: switcherSelected,
+                selected: toSelectedValues(switcherSelected),
             })}
                         title="Change type"
-                        ${listen(ViraSelect.events.valueChange, (event) => {
-                const newType = event.detail;
+                        ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
+                const newType = assertWrap.isDefined(event.detail[0]);
                 emitReplaceAt(path, createDefaultForJsonType(newType));
             })}
-                    ></${ViraSelect}>
+                    ></${ViraDropdown}>
                 </div>
             `;
         }

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

@@ -9,7 +9,7 @@ import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js'
 import { viraShadows } from '../styles/shadows.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
+import { isMouseEventOnScrollbar } from '../util/popover-manager.js';
 import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseModalOn = [
     'pagehide',

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

@@ -3,7 +3,7 @@ import { type FullSpaRoute, type GenericTreePaths, type SpaRouter } from 'spa-ro
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { ViraColorVariant } from '../styles/form-variants.js';
 import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
-import { type HorizontalAnchor, type PopUpOffset } from './pop-up/vira-pop-up-trigger.element.js';
+import { type PopoverOffset } from './popover/vira-popover-trigger.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -93,16 +93,10 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
      * @default ViraTabsIconLayout.Vertical
      */
     iconLayout: ViraTabsIconLayout;
-    /**
-     * Horizontal anchor for the dropdown menu. Only used when tabs overflow into a dropdown.
-     *
-     * @default HorizontalAnchor.Left
-     */
-    menuHorizontalAnchor: HorizontalAnchor;
     /** Whether the dropdown trigger is disabled. Only used when tabs overflow into a dropdown. */
     menuIsDisabled: boolean;
-    /** Offset for the dropdown pop-up. Only used when tabs overflow into a dropdown. */
-    menuPopUpOffset: Readonly<PopUpOffset>;
+    /** Offset for the dropdown popover. Only used when tabs overflow into a dropdown. */
+    menuPopoverOffset: Readonly<PopoverOffset>;
     /**
      * Text shown on the overflow "more" trigger when the selected tab is _not_ collapsed into
      * the menu. When the selected tab _is_ collapsed, the trigger shows that tab's label (with

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

@@ -13,9 +13,9 @@ import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClas
 import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from '../styles/index.js';
 import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
-import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
-import { ViraMenuCornerStyle } from './pop-up/vira-menu.element.js';
+import { renderMenuItemEntries } from '../util/menu-helpers.js';
+import { ViraMenuTrigger } from './popover/vira-menu-trigger.element.js';
+import { ViraMenuCornerStyle } from './popover/vira-menu.element.js';
 import { ViraBoldText } from './vira-bold-text.element.js';
 import { ViraButton } from './vira-button.element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -786,10 +786,9 @@ export const ViraTabs = defineViraElement()({
             ? html `
                   <div class="tab-more">
                       <${ViraMenuTrigger.assign({
-                horizontalAnchor: inputs.menuHorizontalAnchor,
                 isDisabled: inputs.menuIsDisabled,
-                popUpOffset: inputs.menuPopUpOffset,
-                menuCornerStyle: ViraMenuCornerStyle.AllRounded,
+                popoverOffset: inputs.menuPopoverOffset,
+                menuCornerStyle: ViraMenuCornerStyle.Round,
             })}>
                           <${ViraButton.assign({
                 text: selectedIsCollapsed ? selectedTab?.label : overflowLabel,

package/dist/elements/vira-theme-switcher.element.js

@@ -75,21 +75,21 @@ export const ViraThemeSwitcher = defineViraElement()({
         const themeClient = inputs.themeClient || state.internalThemeClient || new ViraThemeClient();
         updateState({
             internalThemeClient: themeClient,
-            currentTheme: themeClient.currentTheme,
+            currentTheme: themeClient.getCurrentTheme(),
         });
         const labels = inputs.labels || defaultThemeLabels;
         return Object.values(ViraThemeSelection).map((theme) => {
             return html `
                 <button
                     class=${classMap({
-                selected: themeClient.currentTheme === theme,
+                selected: themeClient.getCurrentTheme() === theme,
             })}
                     title=${labels[theme]}
                     ${listen('click', (event) => {
                 event.stopPropagation();
                 themeClient.setSelectedTheme(theme);
                 updateState({
-                    currentTheme: themeClient.currentTheme,
+                    currentTheme: themeClient.getCurrentTheme(),
                 });
             })}
                 >

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './directives/index.js';
 export * from './elements/index.js';
 export * from './icons/index.js';
 export * from './styles/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './directives/index.js';
 export * from './elements/index.js';
 export * from './icons/index.js';
 export * from './styles/index.js';

package/dist/util/anchored-popover.d.ts

@@ -0,0 +1,40 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type CSSResult } from 'element-vir';
+/**
+ * The class that `PopoverManager` toggles on a popover to make the browser re-run its
+ * `position-try-fallbacks` from the first entry.
+ *
+ * @category Internal
+ */
+export declare const anchoredPopoverRetryClass = "retry-position";
+/**
+ * A single `position-try-fallbacks` entry for {@link createAnchoredPopoverStyles}.
+ *
+ * @category Popover
+ */
+export type AnchoredPopoverFallback = {
+    /**
+     * The `@position-try` rule name, without the leading `--`. Only needs to be unique within the
+     * shadow root that the styles are used in.
+     */
+    name: string;
+    /** Only the properties that `@position-try` rules accept have any effect here. */
+    styles: CSSResult;
+} & PartialWithUndefined<{
+    /** Adds `flip-block` to this entry, which mirrors it (and its block margins) vertically. */
+    flipBlock: boolean;
+}>;
+/**
+ * Creates the shared styles for a `popover` element that is positioned with CSS anchor positioning
+ * and opened through `PopoverManager`. Put the popover's default position (such as `position-area`)
+ * in a rule _after_ these styles. `fallbacks` are tried in order whenever the default position
+ * overflows the viewport.
+ *
+ * @category Popover
+ */
+export declare function createAnchoredPopoverStyles({ selector, fallbacks, }: Readonly<{
+    fallbacks: ReadonlyArray<Readonly<AnchoredPopoverFallback>>;
+} & PartialWithUndefined<{
+    /** Selects the popover element. Omit this when the host element itself is the popover. */
+    selector: CSSResult | string;
+}>>): CSSResult;

package/dist/util/anchored-popover.js

@@ -0,0 +1,70 @@
+import { css, unsafeCSS } from 'element-vir';
+/**
+ * The class that `PopoverManager` toggles on a popover to make the browser re-run its
+ * `position-try-fallbacks` from the first entry.
+ *
+ * @category Internal
+ */
+export const anchoredPopoverRetryClass = 'retry-position';
+function createFallbackEntry({ name, flipBlock }) {
+    return flipBlock ? `--${name} flip-block` : `--${name}`;
+}
+/**
+ * Creates the shared styles for a `popover` element that is positioned with CSS anchor positioning
+ * and opened through `PopoverManager`. Put the popover's default position (such as `position-area`)
+ * in a rule _after_ these styles. `fallbacks` are tried in order whenever the default position
+ * overflows the viewport.
+ *
+ * @category Popover
+ */
+export function createAnchoredPopoverStyles({ selector, fallbacks, }) {
+    const fallbackEntries = fallbacks.map((fallback) => createFallbackEntry(fallback));
+    const retryClass = unsafeCSS(anchoredPopoverRetryClass);
+    return css `
+        /*
+            Anchored through showPopover({source}).
+        */
+        ${selector ? unsafeCSS(selector) : unsafeCSS(':host')} {
+            /*
+                position-anchor is set explicitly because its initial value differs between browsers.
+            */
+            position-anchor: auto;
+            /* Override the browser's default popover styles. */
+            position: fixed;
+            inset: auto;
+            margin: 0;
+            padding: 0;
+            border: none;
+            height: auto;
+            overflow: visible;
+            background: none;
+            color: inherit;
+
+            position-try-fallbacks: ${unsafeCSS(fallbackEntries.join(', ') || 'none')};
+        }
+
+        /*
+            Browsers keep using the last position-try-fallbacks entry that fit until it no longer
+            fits, even when an earlier entry fits again, so without this the popover would not return
+            to its default position after a resize or scroll. Changing the computed
+            position-try-fallbacks value is what makes browsers start over from the first entry, so
+            this repeats an entry, which does not change the result.
+        */
+        ${selector
+        ? css `
+                  ${unsafeCSS(selector)}.${retryClass}
+              `
+        : unsafeCSS(`:host(.${anchoredPopoverRetryClass})`)} {
+            position-try-fallbacks: ${unsafeCSS([
+        ...fallbackEntries,
+        ...fallbackEntries.slice(-1),
+    ].join(', ') || 'none')};
+        }
+
+        ${unsafeCSS(fallbacks
+        .map(({ name, styles }) => {
+        return `@position-try --${name} {${styles.cssText}}`;
+    })
+        .join('\n'))}
+    `;
+}

package/dist/util/fuzzy-match.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Checks if every non-whitespace character of `search` appears in `text`, in order, ignoring case.
+ * An empty `search` matches everything.
+ *
+ * @category Internal
+ * @example
+ *
+ * ```ts
+ * fuzzyMatch({search: 'opa', text: 'Option A'}); // true
+ * fuzzyMatch({search: 'apo', text: 'Option A'}); // false
+ * ```
+ */
+export declare function fuzzyMatch({ search, text, }: Readonly<{
+    search: string;
+    text: string;
+}>): boolean;

package/dist/util/fuzzy-match.js

@@ -0,0 +1,24 @@
+/**
+ * Checks if every non-whitespace character of `search` appears in `text`, in order, ignoring case.
+ * An empty `search` matches everything.
+ *
+ * @category Internal
+ * @example
+ *
+ * ```ts
+ * fuzzyMatch({search: 'opa', text: 'Option A'}); // true
+ * fuzzyMatch({search: 'apo', text: 'Option A'}); // false
+ * ```
+ */
+export function fuzzyMatch({ search, text, }) {
+    const lowerText = text.toLowerCase();
+    return (search
+        .replaceAll(/\s/g, '')
+        .toLowerCase()
+        .split('')
+        .reduce((textIndex, character) => {
+        return textIndex < 0
+            ? textIndex
+            : lowerText.indexOf(character, textIndex) + 1 || -1;
+    }, 0) >= 0);
+}

package/dist/util/index.d.ts

@@ -1,11 +1,13 @@
+export * from './anchored-popover.js';
 export * from './define-table.js';
 export * from './define-vira-element.js';
 export * from './dynamic-element.js';
+export * from './fuzzy-match.js';
+export * from './menu-helpers.js';
 export * from './overflow-observer.js';
-export * from './pop-up-helpers.js';
-export * from './pop-up-manager.js';
+export * from './popover-manager.js';
 export * from './shared-text-input-logic.js';
+export * from './vira-dropdown-option.js';
 export * from './vira-form-fields.js';
 export * from './vira-json-schema.js';
-export * from './vira-select-option.js';
 export * from './vira-theme-client.js';

package/dist/util/index.js

@@ -1,11 +1,13 @@
+export * from './anchored-popover.js';
 export * from './define-table.js';
 export * from './define-vira-element.js';
 export * from './dynamic-element.js';
+export * from './fuzzy-match.js';
+export * from './menu-helpers.js';
 export * from './overflow-observer.js';
-export * from './pop-up-helpers.js';
-export * from './pop-up-manager.js';
+export * from './popover-manager.js';
 export * from './shared-text-input-logic.js';
+export * from './vira-dropdown-option.js';
 export * from './vira-form-fields.js';
 export * from './vira-json-schema.js';
-export * from './vira-select-option.js';
 export * from './vira-theme-client.js';

package/dist/util/{pop-up-helpers.d.ts → menu-helpers.d.ts}

@@ -1,7 +1,7 @@
 import { type MaybePromise, type PartialWithUndefined } from '@augment-vir/common';
+import { type NavController } from 'device-navigation';
 import { type HtmlInterpolation } from 'element-vir';
-import { ViraMenuItem } from '../elements/pop-up/vira-menu-item.element.js';
-import { type PopUpManager, type PopUpManagerOptions, type ShowPopUpResult } from './pop-up-manager.js';
+import { ViraMenuItem } from '../elements/popover/vira-menu-item.element.js';
 /**
  * Verifies that all items have unique ids.
  *
@@ -10,23 +10,10 @@ import { type PopUpManager, type PopUpManagerOptions, type ShowPopUpResult } fro
 export declare function assertUniqueIdProps(items: ReadonlyArray<Readonly<{
     id: PropertyKey;
 }>>): void;
-/**
- * Handles toggling pop up state for `ViraDropdown`.
- *
- * @category Internal
- */
-export declare function triggerPopUpState({ open, callback, popUpManager, host, options, }: Readonly<{
-    open: boolean;
-    popUpManager: PopUpManager;
-    host: HTMLElement;
-} & PartialWithUndefined<{
-    callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
-    options?: Partial<PopUpManagerOptions> | undefined;
-}>>): void;
 /**
  * A helper type to be used with {@link renderMenuItemEntries}.
  *
- * @category PopUp
+ * @category Popover
  */
 export type ViraMenuItemEntry = {
     content: HtmlInterpolation;
@@ -44,7 +31,7 @@ export type ViraMenuItemEntry = {
 /**
  * A callback for menu items getting activated, to be used with {@link renderMenuItemEntries}.
  *
- * @category PopUp
+ * @category Popover
  */
 export type MenuItemClickCallback = (params: Readonly<{
     /** The menu item's index in the array. */
@@ -54,6 +41,8 @@ export type MenuItemClickCallback = (params: Readonly<{
 /**
  * A helper for rendering a bunch of menu items.
  *
- * @category PopUp
+ * @category Popover
  */
-export declare function renderMenuItemEntries(items: ReadonlyArray<Readonly<ViraMenuItemEntry>>): import("lit-html").HTMLTemplateResult[];
+export declare function renderMenuItemEntries(items: ReadonlyArray<Readonly<ViraMenuItemEntry>>, 
+/** Enables arrow key navigation between the menu items. */
+navController?: NavController | undefined): import("lit-html").HTMLTemplateResult[];

package/dist/util/{pop-up-helpers.js → menu-helpers.js}

@@ -1,6 +1,7 @@
 import { filterMap, joinWithFinalConjunction, } from '@augment-vir/common';
-import { html, listen } from 'element-vir';
-import { ViraMenuItem } from '../elements/pop-up/vira-menu-item.element.js';
+import { nav } from 'device-navigation';
+import { html, listen, nothing } from 'element-vir';
+import { ViraMenuItem } from '../elements/popover/vira-menu-item.element.js';
 /**
  * Verifies that all items have unique ids.
  *
@@ -21,32 +22,24 @@ export function assertUniqueIdProps(items) {
         throw new Error(`Duplicate option ids were given: ${joinWithFinalConjunction(duplicateIds)}`);
     }
 }
-/**
- * Handles toggling pop up state for `ViraDropdown`.
- *
- * @category Internal
- */
-export function triggerPopUpState({ open, callback, popUpManager, host, options, }) {
-    if (open) {
-        const showPopUpResult = popUpManager.showPopUp(host, options);
-        callback?.(showPopUpResult);
-    }
-    else {
-        popUpManager.removePopUp();
-        callback?.(undefined);
-    }
-}
 /**
  * A helper for rendering a bunch of menu items.
  *
- * @category PopUp
+ * @category Popover
  */
-export function renderMenuItemEntries(items) {
+export function renderMenuItemEntries(items, 
+/** Enables arrow key navigation between the menu items. */
+navController) {
     return filterMap(items, (item, index) => {
         return html `
                 <${ViraMenuItem.assign({
             ...item,
         })}
+                    ${navController
+            ? nav(navController, {
+                disabled: item.disabled,
+            })
+            : nothing}
                     ${listen('click', async (event) => {
             if (item.disabled) {
                 event.stopImmediatePropagation();