vira 32.3.0 → 33.0.0

package/dist/elements/popover/vira-tooltip.element.js

@@ -0,0 +1,176 @@
+import { colorCss } from '@electrovir/color';
+import { css, html } from 'element-vir';
+import { listenTo } from 'typed-event-target';
+import { viraFormCssVars } from '../../styles/form-styles.js';
+import { viraTheme } from '../../styles/vira-color-theme.js';
+import { createAnchoredPopoverStyles } from '../../util/anchored-popover.js';
+import { defineViraElement } from '../../util/define-vira-element.js';
+/**
+ * Centered with insets instead of `position-area`, because browsers shift a centered
+ * `position-area` box back onto the screen rather than moving on to the next
+ * `position-try-fallbacks` entry. These insets leave a space that is centered on the anchor and as
+ * wide as possible, and `unsafe` stops the browser from shifting the tooltip, so a tooltip wider
+ * than that space overflows it and moves on to an aligned fallback. Each `anchor(center)` is
+ * measured from the side its inset is on, so the same formula works for `left` and `right`.
+ */
+const centeredStyles = css `
+    position-area: none;
+    top: 0;
+    bottom: anchor(top);
+    left: max(0px, 2 * anchor(center) - 100%);
+    right: max(0px, 2 * anchor(center) - 100%);
+    align-self: end;
+    justify-self: unsafe center;
+`;
+/** `unsafe` for the same reason as {@link centeredStyles}. */
+const leftAlignedStyles = css `
+    position-area: block-start span-inline-end;
+    inset: auto;
+    align-self: normal;
+    justify-self: unsafe start;
+`;
+/** `unsafe` for the same reason as {@link centeredStyles}. */
+const rightAlignedStyles = css `
+    position-area: block-start span-inline-start;
+    inset: auto;
+    align-self: normal;
+    justify-self: unsafe end;
+`;
+/**
+ * Centered but shifted to stay on the screen. For a tooltip that fits on neither side of the
+ * anchor.
+ */
+const shiftedStyles = css `
+    position-area: block-start span-all;
+    inset: auto;
+    align-self: normal;
+    justify-self: anchor-center;
+`;
+/**
+ * The popover rendered by the `tooltip` directive. The element itself is the popover, centered
+ * above `anchor` when there's room. Its children are the tooltip contents.
+ *
+ * @category Popover
+ * @category Elements
+ */
+export const ViraTooltip = defineViraElement()({
+    tagName: 'vira-tooltip',
+    styles: css `
+        ${createAnchoredPopoverStyles({
+        fallbacks: [
+            {
+                name: 'vira-tooltip-above-left-aligned',
+                styles: leftAlignedStyles,
+            },
+            {
+                name: 'vira-tooltip-above-right-aligned',
+                styles: rightAlignedStyles,
+            },
+            {
+                name: 'vira-tooltip-below-centered',
+                styles: centeredStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-below-left-aligned',
+                styles: leftAlignedStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-below-right-aligned',
+                styles: rightAlignedStyles,
+                flipBlock: true,
+            },
+            {
+                name: 'vira-tooltip-above-shifted',
+                styles: shiftedStyles,
+            },
+            {
+                name: 'vira-tooltip-below-shifted',
+                styles: shiftedStyles,
+                flipBlock: true,
+            },
+        ],
+    })}
+
+        :host {
+            anchor-name: --vira-tooltip;
+            ${colorCss(viraTheme.colors['vira-grey-behind-bg-highest-contrast'])};
+            ${centeredStyles}
+            margin-bottom: 7px;
+            padding: 4px 8px;
+            border-radius: 6px;
+            box-sizing: border-box;
+            width: max-content;
+            /*
+                Not 100%, which is the width of the current position-area. A tooltip limited to that
+                width shrinks to fit it rather than overflowing onto the next fallback.
+            */
+            max-width: min(300px, 100vw);
+            font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
+            overflow-wrap: break-word;
+            pointer-events: none;
+        }
+
+        /*
+            Separate popovers rather than children or pseudo-elements of the tooltip, because those can't
+            use anchor() to reach the anchor element from inside the tooltip's top-layer box.
+        */
+        .caret {
+            /*
+                position-anchor is set explicitly because its initial value differs between browsers.
+            */
+            position-anchor: auto;
+            position: fixed;
+            inset: auto;
+            margin: 0;
+            padding: 0;
+            border: none;
+            height: auto;
+            width: 10px;
+            left: calc(anchor(center) - 5px);
+            background-color: ${viraTheme.colors['vira-grey-behind-bg-highest-contrast'].background
+        .value};
+            pointer-events: none;
+        }
+
+        /*
+            Each caret spans the gap between the tooltip and the anchor on its own side, so the caret
+            on the side without the tooltip gets a negative height, which renders as nothing. This
+            follows the tooltip's position-try-fallbacks choice without knowing which one won.
+        */
+        .caret-down {
+            top: anchor(--vira-tooltip bottom);
+            bottom: calc(anchor(top) + 2px);
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
+        }
+
+        .caret-up {
+            bottom: anchor(--vira-tooltip top);
+            top: calc(anchor(bottom) + 2px);
+            clip-path: polygon(50% 0, 100% 100%, 0 100%);
+        }
+    `,
+    init({ host }) {
+        /** The carets must open after the tooltip so they can anchor to it. */
+        listenTo(host, 'toggle', () => {
+            if (!host.matches(':popover-open')) {
+                return;
+            }
+            host.shadowRoot.querySelectorAll('.caret').forEach((caret) => {
+                if (caret instanceof HTMLElement && !caret.matches(':popover-open')) {
+                    caret.showPopover({
+                        source: host.instanceInputs.anchor,
+                    });
+                }
+            });
+        });
+    },
+    render() {
+        return html `
+            <slot></slot>
+            <div class="caret caret-down" popover="manual"></div>
+            <div class="caret caret-up" popover="manual"></div>
+        `;
+    },
+});

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

@@ -1,5 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type AttributeValues, type CSSResult } from 'element-vir';
+import { type AttributeValues, type CSSResult, type HtmlInterpolation } from 'element-vir';
 import { ViraIcon } from './vira-icon.element.js';
 /**
  * All inner elements supported by {@link ViraCheckbox}.
@@ -19,10 +19,10 @@ export type ViraCheckboxInputs = {
     attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
     isDisabled: boolean;
     /**
-     * Text label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
+     * Label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
      * filled.
      */
-    label: string;
+    label: string | HtmlInterpolation;
     hasError: boolean;
     useHorizontalLabel: boolean;
     /** The checkbox will be filled with a form selection color when it is checked. */

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

@@ -1,3 +1,4 @@
+import { check } from '@augment-vir/assert';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, } from 'element-vir';
 import { Check24Icon, viraIconCssVars } from '../icons/index.js';
@@ -168,7 +169,7 @@ export const ViraCheckbox = defineViraElement()({
             }
         }
         const hasLabel = !!inputs.label || state.hasSlottedLabel;
-        const textLabel = html `
+        const labelTemplate = html `
             <span
                 class="label-text ${classMap({
             empty: !hasLabel,
@@ -198,7 +199,7 @@ export const ViraCheckbox = defineViraElement()({
                 style=${ifDefined(inputs.stylePassthrough?.label)}
                 ${listen('mousedown', updateValue)}
             >
-                ${textLabel}
+                ${labelTemplate}
                 <span
                     class="custom-checkbox ${classMap({
             checked: inputs.value,
@@ -206,7 +207,7 @@ export const ViraCheckbox = defineViraElement()({
             error: !!inputs.hasError,
         })}"
                     role="checkbox"
-                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
                     aria-disabled=${inputs.isDisabled ? 'true' : 'false'}
                     tabindex=${inputs.isDisabled ? '-1' : '0'}

package/dist/elements/vira-date-input.element.d.ts

@@ -1,5 +1,6 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type FullDate, type Timezone } from 'date-vir';
+import { type HtmlInterpolation } from 'element-vir';
 /**
  * A native date picker input that emits `FullDate` values. Fires `valueChange` whenever the user
  * selects (or clears) a date.
@@ -18,7 +19,7 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
     /** If true, applies error styling. */
     hasError: boolean;
     /** A label that is shown above the input, if provided. */
-    label: string;
+    label: string | HtmlInterpolation;
     /** If true, the input is disabled and cannot be edited. */
     isDisabled: boolean;
     /** If true, the current value is rendered as plain text instead of an editable input. */

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

@@ -1,7 +1,8 @@
+import { check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { calculateRelativeDate, createUtcFullDate, FullDatePart, getNowInUtcTimezone, parseInputElementValue, toHtmlInputString, userTimezone, } from 'date-vir';
-import { css, defineElementEvent, html, ifDefined, listen } from 'element-vir';
+import { css, defineElementEvent, html, ifDefined, listen, } from 'element-vir';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
@@ -113,7 +114,7 @@ export const ViraDateInput = defineViraElement()({
         const inputTemplate = html `
             <input
                 id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                aria-label=${ifDefined(inputs.label || undefined)}
+                aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
                 type="date"
                 min=${minDate}
                 max=${maxDate}

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

@@ -11,7 +11,7 @@ import { viraShadows } from '../styles/shadows.js';
 import { noUserSelect } from '../styles/user-select.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 globalEventsToCloseDrawerOn = [
     'pagehide',

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

@@ -1,22 +1,26 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type HtmlInterpolation } from 'element-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
-import { type ShowPopUpResult } from '../util/pop-up-manager.js';
-import { type ViraSelectOption } from '../util/vira-select-option.js';
-import { type PopUpTriggerPosition } from './pop-up/vira-pop-up-trigger.element.js';
+import { type ViraDropdownOption, type ViraDropdownOptionGroup } from '../util/vira-dropdown-option.js';
 /**
- * A dropdown element that uses pop-up menus.
+ * A dropdown element that uses popover menus.
  *
  * @category Dropdown
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/dropdown/vira-dropdown
  */
 export declare const ViraDropdown: import("element-vir").DeclarativeElementDefinition<"vira-dropdown", {
-    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    options: ReadonlyArray<Readonly<ViraDropdownOption> | Readonly<ViraDropdownOptionGroup>>;
     /** The selected id from the given options. */
     selected: ReadonlyArray<PropertyKey>;
 } & PartialWithUndefined<{
     /** Text to show if nothing is selected. */
     placeholder: string;
+    /**
+     * Text shown in the opened popover when `options` has no options. When omitted, opening a
+     * dropdown with no options shows no popover at all.
+     */
+    noOptionsText: string;
     /**
      * If false, this will behave like a single select dropdown, otherwise you can select
      * multiple.
@@ -25,12 +29,24 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;
-    label: string;
-    /** For debugging purposes only. Very bad for actual production code use. */
-    z_debug_forceOpenState: boolean;
-} & PopUpTriggerPosition>, {
-    /** `undefined` means the pop up is not currently showing. */
-    showPopUpResult: ShowPopUpResult | undefined;
+    /**
+     * When `true`, the currently selected options' labels are rendered as plain text with no
+     * trigger or menu.
+     */
+    isReadonly: boolean;
+    hasError: boolean;
+    label: string | HtmlInterpolation;
+    /** Attributes applied to the trigger element. */
+    attributePassthrough: Readonly<AttributeValues>;
+    /**
+     * Passed to {@link ViraMenu}'s `hoverScrollSpeed` input. How many menu items per second
+     * hovering a scroll arrow scrolls through.
+     *
+     * @default 24
+     */
+    menuHoverScrollSpeed: number;
+}>, {
+    isOpen: boolean;
     shouldSelectOnMouseUp: boolean;
     /**
      * Used to couple the label and trigger together. This is not applied if no label is
@@ -40,5 +56,6 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 }, {
     /** Emits all currently selected values. */
     selectedValuesChange: import("element-vir").DefineElementEvent<string[]>;
-    openChange: import("element-vir").DefineElementEvent<ShowPopUpResult | undefined>;
+    /** `true` when the popover just opened, `false` when it just closed. */
+    openChange: import("element-vir").DefineElementEvent<boolean>;
 }, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "trigger"]>;