vira 31.25.0 → 31.26.0

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

@@ -19,6 +19,12 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * _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);

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

@@ -119,6 +119,20 @@ export const ViraMenuItem = defineViraElement()({
                 event.stopPropagation();
                 return;
             }
+            /**
+             * Only forward `click`. Slotted content is activated by a single forwarded click, so
+             * forwarding `mousedown` as well would double-trigger interactions: a `<select>`, for
+             * example, opens its picker via `showPicker()` on both `mousedown` and `click`, and the
+             * first call consumes the transient user activation so the second throws
+             * `NotAllowedError`. `mousedown` still reaches this handler so disabled items can block
+             * it above.
+             */
+            if (event.type !== 'click') {
+                return;
+            }
+            if (inputs.keepOpenAfterInteraction) {
+                event.stopPropagation();
+            }
             const slotElement = assertWrap.instanceOf(host.shadowRoot.querySelector('slot'), HTMLSlotElement);
             slotElement
                 .assignedElements({
@@ -129,29 +143,23 @@ export const ViraMenuItem = defineViraElement()({
                     event.preventDefault();
                     event.stopPropagation();
                     propagating[event.type] = true;
-                    if (event.type === 'click') {
-                        const hasModifiers = event instanceof MouseEvent &&
-                            (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
-                        if (hasModifiers) {
-                            /**
-                             * If modifier keys are present, dispatch a synthetic MouseEvent so
-                             * that the modifier keys are preserved. This is needed so that
-                             * cmd+click opens links in a new tab.
-                             */
-                            element.dispatchEvent(new MouseEvent('click', event));
-                        }
-                        else {
-                            /**
-                             * Use `.click()` instead of dispatching a synthetic MouseEvent so
-                             * that the resulting event is trusted and carries user activation.
-                             * This is required for APIs like `showPicker()` on `<select>`
-                             * elements.
-                             */
-                            element.click();
-                        }
+                    const hasModifiers = event instanceof MouseEvent &&
+                        (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+                    if (hasModifiers) {
+                        /**
+                         * If modifier keys are present, dispatch a synthetic MouseEvent so that
+                         * the modifier keys are preserved. This is needed so that cmd+click
+                         * opens links in a new tab.
+                         */
+                        element.dispatchEvent(new MouseEvent('click', event));
                     }
                     else {
-                        element.dispatchEvent(new MouseEvent(event.type, event));
+                        /**
+                         * Use `.click()` instead of dispatching a synthetic MouseEvent so that
+                         * the resulting event carries user activation. This is required for
+                         * APIs like `showPicker()` on `<select>` elements.
+                         */
+                        element.click();
                     }
                     delete propagating[event.type];
                 }
@@ -160,16 +168,10 @@ export const ViraMenuItem = defineViraElement()({
         const listenerRemovers = [
             listenTo(host, 'click', propagateMouseEvent),
             listenTo(host, 'mousedown', propagateMouseEvent),
-            /**
-             * Emit `select` on a non-disabled activation so the containing pop-up can close. This
-             * uses the _capture_ phase because interactive slotted content can stop the click from
-             * bubbling back up to this host (which would prevent a bubble-phase listener from ever
-             * running). The `propagating` guard skips the synthetic click that
-             * `propagateMouseEvent` re-dispatches onto slotted content, so `select` fires exactly
-             * once per activation.
-             */
             listenTo(host, 'click', (event) => {
-                if (propagating[event.type] || inputs.disabled) {
+                if (propagating[event.type] ||
+                    inputs.disabled ||
+                    inputs.keepOpenAfterInteraction) {
                     return;
                 }
                 dispatch(new events.activate(undefined));

package/dist/elements/vira-absolute-time.element.d.ts

@@ -17,6 +17,13 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
      * time of day would be meaningless noise.
      */
     dateOnly: boolean;
+    /**
+     * Timezone the value is displayed in. Defaults to the user's timezone. Set this for values
+     * that are conceptually anchored to a specific timezone (e.g. a date-only value stored at
+     * midnight UTC), where converting to the user's timezone would shift the displayed
+     * date/time.
+     */
+    timezone: string;
 }>, {}, {}, "vira-absolute-time-", "vira-absolute-time-", readonly [], readonly []>;
 /**
  * Formats a `FullDate` into the same absolute string rendered by {@link ViraAbsoluteTime}.
@@ -25,4 +32,5 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
  */
 export declare function formatAbsoluteTime(time: Readonly<FullDate>, options?: Readonly<PartialWithUndefined<{
     dateOnly: boolean;
+    timezone: string;
 }>>): string;

package/dist/elements/vira-absolute-time.element.js

@@ -1,4 +1,4 @@
-import { createFullDateInUserTimezone, toFormattedString } from 'date-vir';
+import { createFullDate, createFullDateInUserTimezone, toFormattedString, } from 'date-vir';
 import { css } from 'element-vir';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
@@ -19,6 +19,7 @@ export const ViraAbsoluteTime = defineViraElement()({
     render({ inputs }) {
         return formatAbsoluteTime(inputs.time, {
             dateOnly: inputs.dateOnly,
+            timezone: inputs.timezone,
         });
     },
 });
@@ -28,5 +29,7 @@ export const ViraAbsoluteTime = defineViraElement()({
  * @category Time
  */
 export function formatAbsoluteTime(time, options) {
-    return toFormattedString(createFullDateInUserTimezone(time), options?.dateOnly ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm ZZZZ');
+    return toFormattedString(options?.timezone
+        ? createFullDate(time, options.timezone)
+        : createFullDateInUserTimezone(time), options?.dateOnly ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm ZZZZ');
 }

package/dist/elements/vira-bold-text.element.js

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { viraFontCssVars } from '../styles/font.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * Use this element to reserve space for bolded text, even if it isn't bold yet.
@@ -8,7 +9,7 @@ import { defineViraElement } from '../util/define-vira-element.js';
 export const ViraBoldText = defineViraElement()({
     tagName: 'vira-bold',
     cssVars: {
-        'vira-bold-bold-weight': 'bold',
+        'vira-bold-bold-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
     hostClasses: {
         'vira-bold-bold': ({ inputs }) => inputs.bold,

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

@@ -1,5 +1,6 @@
 import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
+import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { ViraCollapsibleWrapper } from './vira-collapsible-wrapper.element.js';
@@ -70,7 +71,7 @@ export const ViraCollapsibleCard = defineViraElement()({
         }
 
         .card-header {
-            font-weight: bold;
+            font-weight: ${viraFontCssVars['vira-font-weight-bold'].value};
             display: flex;
             align-items: center;
             justify-content: space-between;

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

@@ -79,6 +79,7 @@ export const ViraDateInput = defineViraElement()({
                       <${ViraAbsoluteTime.assign({
                     time: inputs.value,
                     dateOnly: true,
+                    timezone: inputs.timezone,
                 })}></${ViraAbsoluteTime}>
                   `
                 : html `

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

@@ -1,4 +1,5 @@
 import { css, html } from 'element-vir';
+import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
@@ -10,7 +11,7 @@ import { defineViraElement } from '../util/define-vira-element.js';
 export const ViraError = defineViraElement()({
     tagName: 'vira-error',
     cssVars: {
-        'vira-error-font-weight': 'bold',
+        'vira-error-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
     styles: ({ cssVars }) => css `
         :host {

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

@@ -5,6 +5,7 @@ import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing,
 import { CloseX24Icon } from '../icons/icon-svgs/24/close-x-24.icon.js';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
+import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
 import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles/index.js';
@@ -203,7 +204,7 @@ export const ViraInput = defineViraElement()({
             }
 
             .suffix {
-                font-weight: bold;
+                font-weight: ${viraFontCssVars['vira-font-weight-bold'].value};
                 ${noUserSelect};
             }
 

package/dist/elements/vira-json-form.element.d.ts

@@ -1,6 +1,17 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type JsonValue } from 'type-fest';
 import { ViraJsonType, type ViraJsonSchema } from '../util/vira-json-schema.js';
+/**
+ * Editing mode for a string field that offers both a fixed set of enum options and free-form text.
+ *
+ * @category Internal
+ */
+export declare enum ViraJsonStringMode {
+    /** Pick from the schema's enum options via a dropdown. */
+    Options = "options",
+    /** Enter an arbitrary string via a text input. */
+    Custom = "custom"
+}
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -16,6 +27,7 @@ export declare const ViraJsonForm: import("element-vir").DeclarativeElementDefin
     pendingKeys: Readonly<Record<string, string>>;
     pendingTypes: Readonly<Record<string, ViraJsonType>>;
     pendingArrayValues: Readonly<Record<string, JsonValue>>;
+    stringModes: Readonly<Record<string, ViraJsonStringMode>>;
     showRaw: boolean;
     rawDraft: string | undefined;
     rawError: string | undefined;

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

@@ -6,13 +6,25 @@ import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { createDefaultForJsonType, createResolveContext, deleteValueAtPath, getAdditionalPropertiesSchema, getAllowedJsonTypes, getDefinedProperties, getEnumValues, getItemSchema, getJsonType, getNewItemSchema, getPropertySchema, getRequiredProperties, getSchemaTitle, pathToKey, pickBranchForType, setValueAtPath, validateAgainstSchema, ViraJsonType, viraJsonTypeLabels, } from '../util/vira-json-schema.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 { 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.
+ *
+ * @category Internal
+ */
+export var ViraJsonStringMode;
+(function (ViraJsonStringMode) {
+    /** Pick from the schema's enum options via a dropdown. */
+    ViraJsonStringMode["Options"] = "options";
+    /** Enter an arbitrary string via a text input. */
+    ViraJsonStringMode["Custom"] = "custom";
+})(ViraJsonStringMode || (ViraJsonStringMode = {}));
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -29,6 +41,7 @@ export const ViraJsonForm = defineViraElement()({
             pendingKeys: {},
             pendingTypes: {},
             pendingArrayValues: {},
+            stringModes: {},
             showRaw: false,
             rawDraft: undefined,
             rawError: undefined,
@@ -129,7 +142,7 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-type-tag {
-            font-weight: normal;
+            font-weight: ${viraFontCssVars['vira-font-weight-normal'].value};
             color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
         }
 
@@ -238,6 +251,23 @@ export const ViraJsonForm = defineViraElement()({
                 },
             });
         }
+        function getStringMode(pathKey, value, enumValues) {
+            const stored = state.stringModes[pathKey];
+            if (stored) {
+                return stored;
+            }
+            return enumValues.includes(value)
+                ? ViraJsonStringMode.Options
+                : ViraJsonStringMode.Custom;
+        }
+        function setStringMode(pathKey, mode) {
+            updateState({
+                stringModes: {
+                    ...state.stringModes,
+                    [pathKey]: mode,
+                },
+            });
+        }
         function clearPending(pathKey) {
             updateState({
                 pendingKeys: omitObjectKeys(state.pendingKeys, [pathKey]),
@@ -260,7 +290,7 @@ export const ViraJsonForm = defineViraElement()({
         }
         function renderPrimitive(path, value, schema) {
             const type = getJsonType(value);
-            const enumValues = getEnumValues(schema, resolveContext);
+            const enumValues = getSchemaEnumValues(schema, resolveContext);
             if (enumValues && enumValues.length > 0) {
                 const options = enumValues.map((entry) => {
                     const asString = jsonPrimitiveToString(entry);
@@ -734,6 +764,64 @@ export const ViraJsonForm = defineViraElement()({
                 </table>
             `;
         }
+        function renderStringEnumOrRaw(path, value, enumValues) {
+            const pathKey = pathToKey(path);
+            const mode = getStringMode(pathKey, value, enumValues);
+            const editor = mode === ViraJsonStringMode.Options
+                ? html `
+                          <${ViraSelect.assign({
+                    options: enumValues.map((entry) => {
+                        return {
+                            value: entry,
+                            label: entry,
+                        };
+                    }),
+                    value: enumValues.includes(value) ? value : undefined,
+                    disabled: isDisabled,
+                })}
+                              ${listen(ViraSelect.events.valueChange, (event) => {
+                    emitReplaceAt(path, event.detail);
+                })}
+                          ></${ViraSelect}>
+                      `
+                : html `
+                          <${ViraInput.assign({
+                    value,
+                    disabled: isDisabled,
+                })}
+                              ${listen(ViraInput.events.valueChange, (event) => {
+                    emitReplaceAt(path, event.detail);
+                })}
+                          ></${ViraInput}>
+                      `;
+            if (isDisabled) {
+                return editor;
+            }
+            const modeOptions = [
+                {
+                    value: ViraJsonStringMode.Options,
+                    label: 'Options',
+                },
+                {
+                    value: ViraJsonStringMode.Custom,
+                    label: 'Custom',
+                },
+            ];
+            return html `
+                <div class="json-value-with-switcher">
+                    <span class="json-value-editor-slot">${editor}</span>
+                    <${ViraSelect.assign({
+                options: modeOptions,
+                value: mode,
+            })}
+                        title="Choose from options or enter a custom value"
+                        ${listen(ViraSelect.events.valueChange, (event) => {
+                setStringMode(pathKey, event.detail);
+            })}
+                    ></${ViraSelect}>
+                </div>
+            `;
+        }
         function renderValue(path, value, schema) {
             const concreteType = getJsonType(value);
             const allowedTypes = getAllowedJsonTypes(schema, resolveContext);
@@ -744,6 +832,19 @@ export const ViraJsonForm = defineViraElement()({
             else if (check.isObject(value)) {
                 return renderObjectGroup(path, value, narrowedSchema);
             }
+            /**
+             * When a string field constrains values to an enum but also permits free-form strings,
+             * offer both: an options dropdown plus a switcher to toggle to raw text entry.
+             */
+            const isStringOnlyField = allowedTypes.length === 1 && allowedTypes[0] === ViraJsonType.String;
+            const stringEnumValues = isStringOnlyField
+                ? getStringEnumValues(schema, resolveContext)
+                : [];
+            if (check.isString(value) &&
+                stringEnumValues.length > 0 &&
+                allowsFreeformString(schema, resolveContext)) {
+                return renderStringEnumOrRaw(path, value, stringEnumValues);
+            }
             const editor = renderPrimitive(path, value, narrowedSchema);
             const showSwitcher = !isDisabled &&
                 allowedTypes.length > 1 &&

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

@@ -1,7 +1,7 @@
 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 { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
@@ -41,12 +41,12 @@ export const ViraLink = defineViraElement()({
         ${hostClasses['vira-link-link-styles'].selector} {
             &:hover a,
             & a:hover {
-                color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+                color: ${viraTheme.colors['vira-blue-foreground-non-body'].foreground.value};
             }
 
             &:active a,
             & a:active {
-                color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
+                color: ${viraTheme.colors['vira-blue-foreground-body'].foreground.value};
             }
         }
     `,

package/dist/elements/vira-relative-time.element.d.ts

@@ -20,6 +20,13 @@ export declare const ViraRelativeTime: import("element-vir").DeclarativeElementD
      * @default {seconds: 5}
      */
     updateInterval: Readonly<AtLeastOneDuration>;
+    /**
+     * Timezone the absolute time is displayed in. Defaults to the user's timezone. Set this for
+     * values that are conceptually anchored to a specific timezone (e.g. a date-only value
+     * stored at midnight UTC), where converting to the user's timezone would shift the
+     * displayed date/time.
+     */
+    timezone: string;
 }>, {
     now: {
         hour: import("date-vir").Hour;

package/dist/elements/vira-relative-time.element.js

@@ -76,11 +76,18 @@ export const ViraRelativeTime = defineViraElement()({
             decimalCount: 0,
         });
         return html `
-            <span title=${formatAbsoluteTime(inputs.time)}>${relativeTime}</span>
+            <span
+                title=${formatAbsoluteTime(inputs.time, {
+            timezone: inputs.timezone,
+        })}
+            >
+                ${relativeTime}
+            </span>
             ${inputs.showAbsoluteTime
             ? html `
                       <${ViraAbsoluteTime.assign({
                 time: inputs.time,
+                timezone: inputs.timezone,
             })}></${ViraAbsoluteTime}>
                   `
             : nothing}

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

@@ -44,7 +44,25 @@ export type ViraTab = {
      * current route.
      */
     exactMatch: boolean;
+    /**
+     * Optional cluster label. Consecutive tabs sharing the same `group` string render together
+     * under that label, separated from other clusters by an inset vertical divider. Tabs with no
+     * `group` render standalone (no label, no divider). Grouping only affects rendering when at
+     * least one tab has a `group`.
+     */
+    group: string;
 }>;
+/**
+ * Groups a flat list of tabs into clusters. Consecutive tabs sharing the same `group` string are
+ * merged into a single cluster; ungrouped tabs (and tabs whose `group` differs from their
+ * predecessor) each start a new cluster.
+ *
+ * @category Internal
+ */
+export declare function buildClusters(tabList: ReadonlyArray<Readonly<ViraTab>>): {
+    group: string | undefined;
+    tabs: ReadonlyArray<Readonly<ViraTab>>;
+}[];
 /**
  * A tab bar element that renders an array of tabs with an animated selection indicator.
  *
@@ -85,13 +103,22 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
     menuIsDisabled: boolean;
     /** Offset for the dropdown pop-up. Only used when tabs overflow into a dropdown. */
     menuPopUpOffset: Readonly<PopUpOffset>;
+    /**
+     * 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
+     * a checkmark) instead. Set this to a localized string; it defaults to `'More'`.
+     *
+     * @default 'More'
+     */
+    overflowLabel: string;
     /** When true, tabs and their container expand to fill all available horizontal space. */
     shouldFillWidth: boolean;
 }>, {
-    isOverflowing: boolean;
+    /** How many of the visible tabs are collapsed into the overflow "more" menu. */
+    overflowCount: number;
     /** A callback to remove all internal observers. */
     cleanupObserver: undefined | (() => void);
 }, {
     /** Fires when a tab is clicked with the corresponding tab entry. */
     tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
-}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
+}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;