vira 31.27.0 → 31.28.0

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

@@ -11,12 +11,10 @@ import { type FullDate } from 'date-vir';
 export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementDefinition<"vira-absolute-time", {
     time: Readonly<FullDate>;
 } & PartialWithUndefined<{
-    /**
-     * Show only the date part (`Jun 3, 2026`), omitting the time of day and timezone. Use this
-     * for values that are conceptually dates (e.g. captured via a date-only input), where the
-     * time of day would be meaningless noise.
-     */
-    dateOnly: boolean;
+    /** Show only the date part (`Jun 3, 2026`), omitting the time of day and timezone. */
+    showDateOnly: boolean;
+    /** Show only the time part (`14:30 PDT`), omitting the date. */
+    showTimeOnly: 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
@@ -31,6 +29,7 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
  * @category Time
  */
 export declare function formatAbsoluteTime(time: Readonly<FullDate>, options?: Readonly<PartialWithUndefined<{
-    dateOnly: boolean;
+    showDateOnly: boolean;
+    showTimeOnly: boolean;
     timezone: string;
 }>>): string;

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

@@ -1,3 +1,4 @@
+import { check } from '@augment-vir/assert';
 import { createFullDate, createFullDateInUserTimezone, toFormattedString, } from 'date-vir';
 import { css } from 'element-vir';
 import { defineViraElement } from '../util/define-vira-element.js';
@@ -18,7 +19,8 @@ export const ViraAbsoluteTime = defineViraElement()({
     `,
     render({ inputs }) {
         return formatAbsoluteTime(inputs.time, {
-            dateOnly: inputs.dateOnly,
+            showDateOnly: inputs.showDateOnly,
+            showTimeOnly: inputs.showTimeOnly,
             timezone: inputs.timezone,
         });
     },
@@ -29,7 +31,13 @@ export const ViraAbsoluteTime = defineViraElement()({
  * @category Time
  */
 export function formatAbsoluteTime(time, options) {
+    const dateFormat = [
+        !options?.showTimeOnly && 'MMM d, yyyy',
+        !options?.showDateOnly && 'HH:mm ZZZZ',
+    ]
+        .filter(check.isTruthy)
+        .join(' ');
     return toFormattedString(options?.timezone
         ? createFullDate(time, options.timezone)
-        : createFullDateInUserTimezone(time), options?.dateOnly ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm ZZZZ');
+        : createFullDateInUserTimezone(time), dateFormat);
 }

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

@@ -170,7 +170,7 @@ export const ViraButton = defineViraElement()({
         'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
     styles: ({ hostClasses, cssVars }) => {
-        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+        function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
             return css `
                 ${variantSelector}${emphasisSelector} {
                     ${cssVars['vira-button-background-color'].name}: ${colors.idle.backgroundColor
@@ -201,14 +201,30 @@ export const ViraButton = defineViraElement()({
                     const colorKey = viraColorVariantToHostClassKey[colorVariant];
                     const colors = buildThemedButtonColors(colorKey)[emphasis];
                     const variantSelector = hostClasses[`vira-button-color-${colorKey}`].selector;
-                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
+                });
+                const plainStyle = buildVariantCssRule({
+                    variantSelector: hostClasses['vira-button-color-plain'].selector,
+                    emphasisSelector,
+                    colors: plainButtonColors[emphasis],
+                });
+                const neutralStyle = buildVariantCssRule({
+                    variantSelector: hostClasses['vira-button-color-neutral'].selector,
+                    emphasisSelector,
+                    colors: neutralButtonColors[emphasis],
                 });
-                const plainStyle = buildVariantCssRule(hostClasses['vira-button-color-plain'].selector, emphasisSelector, plainButtonColors[emphasis]);
-                const neutralStyle = buildVariantCssRule(hostClasses['vira-button-color-neutral'].selector, emphasisSelector, neutralButtonColors[emphasis]);
                 const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
                     const colors = buildThemedButtonColors(colorName)[emphasis];
                     const variantSelector = hostClasses[`vira-button-color-${colorName}`].selector;
-                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
                 });
                 return [
                     ...themedStyles,

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

@@ -25,6 +25,10 @@ export declare const ViraDateInput: import("element-vir").DeclarativeElementDefi
     isReadonly: boolean;
     /** Timezone used to interpret the selected date. Defaults to the user's timezone. */
     timezone: string;
+    /** Only show the date part of the selected date when in readonly mode. */
+    showDateOnly: boolean;
+    /** Only show the time part of the selected date when in readonly mode. */
+    showTimeOnly: boolean;
 }>, {
     /** Used to couple the label and input together. Not applied when no label is provided. */
     randomId: string;

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

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

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

@@ -211,7 +211,11 @@ export const ViraJsonForm = defineViraElement()({
             dispatch(new events.valueChange(newRoot));
         }
         function emitReplaceAt(path, newValue) {
-            emitRoot(setValueAtPath(inputs.value, path, newValue));
+            emitRoot(setValueAtPath({
+                root: inputs.value,
+                path,
+                newValue,
+            }));
         }
         function emitDeleteAt(path) {
             emitRoot(deleteValueAtPath(inputs.value, path));
@@ -231,7 +235,7 @@ export const ViraJsonForm = defineViraElement()({
                 },
             });
         }
-        function setPendingKey(pathKey, key) {
+        function setPendingKey({ pathKey, key }) {
             updateState({
                 pendingKeys: {
                     ...state.pendingKeys,
@@ -251,7 +255,7 @@ export const ViraJsonForm = defineViraElement()({
                 },
             });
         }
-        function getStringMode(pathKey, value, enumValues) {
+        function getStringMode({ pathKey, value, enumValues, }) {
             const stored = state.stringModes[pathKey];
             if (stored) {
                 return stored;
@@ -628,7 +632,10 @@ export const ViraJsonForm = defineViraElement()({
                     placeholder: 'new field name',
                 })}
                                           ${listen(ViraInput.events.valueChange, (event) => {
-                    setPendingKey(pathKey, event.detail);
+                    setPendingKey({
+                        pathKey,
+                        key: event.detail,
+                    });
                 })}
                                       ></${ViraInput}>
                                       ${renderObjectAddControl({
@@ -766,7 +773,11 @@ export const ViraJsonForm = defineViraElement()({
         }
         function renderStringEnumOrRaw(path, value, enumValues) {
             const pathKey = pathToKey(path);
-            const mode = getStringMode(pathKey, value, enumValues);
+            const mode = getStringMode({
+                pathKey,
+                value,
+                enumValues,
+            });
             const editor = mode === ViraJsonStringMode.Options
                 ? html `
                           <${ViraSelect.assign({

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

@@ -197,7 +197,7 @@ export const ViraTag = defineViraElement()({
         }),
     },
     styles: ({ cssVars, hostClasses }) => {
-        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+        function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
             return css `
                 ${variantSelector}${emphasisSelector} {
                     ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
@@ -226,14 +226,30 @@ export const ViraTag = defineViraElement()({
                     const colorKey = viraColorVariantToHostClassKey[colorVariant];
                     const colors = buildThemedTagColors(colorKey)[emphasis];
                     const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
-                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
+                });
+                const plainStyle = buildVariantCssRule({
+                    variantSelector: hostClasses['vira-tag-color-plain'].selector,
+                    emphasisSelector,
+                    colors: plainTagColors[emphasis],
+                });
+                const neutralStyle = buildVariantCssRule({
+                    variantSelector: hostClasses['vira-tag-color-neutral'].selector,
+                    emphasisSelector,
+                    colors: buildThemedTagColors(ViraThemeColorName.grey)[emphasis],
                 });
-                const plainStyle = buildVariantCssRule(hostClasses['vira-tag-color-plain'].selector, emphasisSelector, plainTagColors[emphasis]);
-                const neutralStyle = buildVariantCssRule(hostClasses['vira-tag-color-neutral'].selector, emphasisSelector, buildThemedTagColors(ViraThemeColorName.grey)[emphasis]);
                 const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
                     const colors = buildThemedTagColors(colorName)[emphasis];
                     const variantSelector = hostClasses[`vira-tag-color-${colorName}`].selector;
-                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
                 });
                 return [
                     ...themedStyles,

package/dist/icons/lucide-icons.js

@@ -6,7 +6,7 @@ const defaultLucideAttributes = {
     stroke: String(viraIconCssVars['vira-icon-stroke-color'].value),
     'stroke-width': String(viraIconCssVars['vira-icon-stroke-width'].value),
 };
-function setSvgAttribute(svgString, attributeName, value) {
+function setSvgAttribute({ svgString, attributeName, value, }) {
     const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
     const regex = new RegExp(String.raw `(\s)${escapedName}="[^"]*"`);
     return regex.test(svgString)
@@ -14,7 +14,11 @@ function setSvgAttribute(svgString, attributeName, value) {
         : svgString.replace(/<svg\b/, `<svg ${attributeName}="${value}"`);
 }
 function applySvgAttributes(svgString, attributes) {
-    return Object.entries(attributes).reduce((result, [key, value,]) => setSvgAttribute(result, key, value), svgString);
+    return Object.entries(attributes).reduce((result, [key, value,]) => setSvgAttribute({
+        svgString: result,
+        attributeName: key,
+        value,
+    }), svgString);
 }
 function isLucideIconKey(key) {
     return key in lucideStaticImport;

package/dist/util/define-table.d.ts

@@ -107,4 +107,9 @@ export type ViraTableOptions<Orientation extends ViraTableOrientation = ViraTabl
  */
 export declare function defineTable<const Headers extends ViraTableHeaders, OriginalData extends ReadonlyArray<any>, const Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical>(
 /** The order of these keys determines the order that they render in. */
-headers: Readonly<Headers>, originalData: OriginalData, dataMap: (entry: ArrayElement<OriginalData>, entryIndex: number) => ViraTableEntry<Headers> | undefined, options?: ViraTableOptions<Orientation>): ViraTable<Headers, Orientation, OriginalData>;
+{ headers, originalData, dataMap, options, }: Readonly<{
+    headers: Readonly<Headers>;
+    originalData: OriginalData;
+    dataMap: (entry: ArrayElement<OriginalData>, entryIndex: number) => ViraTableEntry<Headers> | undefined;
+    options?: ViraTableOptions<Orientation>;
+}>): ViraTable<Headers, Orientation, OriginalData>;

package/dist/util/define-table.js

@@ -29,7 +29,7 @@ export var ViraTableOrientation;
  */
 export function defineTable(
 /** The order of these keys determines the order that they render in. */
-headers, originalData, dataMap, options = {}) {
+{ headers, originalData, dataMap, options = {}, }) {
     const mappedData = originalData.map((dataRow, rowIndex) => {
         return {
             cells: dataMap(dataRow, rowIndex),

package/dist/util/pop-up-manager.d.ts

@@ -1,6 +1,6 @@
 import { type MaybePromise } from '@augment-vir/common';
 import { type Coords, type NavController } from 'device-navigation';
-import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, type RemoveListenerCallback } from 'typed-event-target';
+import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, ListenTarget, type RemoveListenerCallback } from 'typed-event-target';
 /**
  * Used to prevent pop-ups from closing when a text input is active.
  *
@@ -161,12 +161,17 @@ export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
  */
 export declare class PopUpManager {
     readonly navController: NavController;
-    private listenTarget;
+    protected listenTarget: ListenTarget<PopUpManagerEvents>;
     options: PopUpManagerOptions;
-    private cleanupCallbacks;
-    private lastRootElement;
+    /** Callbacks that remove the global listeners attached while a pop up is shown. */
+    protected cleanupCallbacks: (() => void)[];
+    protected lastRootElement: HTMLElement | undefined;
     constructor(navController: NavController, options?: Partial<PopUpManagerOptions> | undefined);
-    private attachGlobalListeners;
+    /**
+     * Attaches the global listeners (page activation, navigation, mousedown, and keydown) that
+     * control the currently shown pop up.
+     */
+    protected attachGlobalListeners(): void;
     /** Listen to events emitted from a {@link PopUpManager} instance. */
     listen<const EventDefinition extends Readonly<{
         type: ExtractEventTypes<PopUpManagerEvents>;

package/dist/util/pop-up-manager.js

@@ -62,6 +62,7 @@ export class PopUpManager {
         horizontalDiffThreshold: 100,
         supportNavigation: true,
     };
+    /** Callbacks that remove the global listeners attached while a pop up is shown. */
     cleanupCallbacks = [];
     lastRootElement;
     constructor(navController, options) {
@@ -71,6 +72,10 @@ export class PopUpManager {
             ...options,
         };
     }
+    /**
+     * Attaches the global listeners (page activation, navigation, mousedown, and keydown) that
+     * control the currently shown pop up.
+     */
     attachGlobalListeners() {
         this.cleanupCallbacks = [
             listenToPageActivation(false, (isPageActive) => {

package/dist/util/vira-json-schema.d.ts

@@ -192,7 +192,11 @@ export declare function pathToKey(path: ViraJsonPath): string;
  *
  * @category Internal
  */
-export declare function setValueAtPath(root: JsonValue, path: ViraJsonPath, newValue: JsonValue): JsonValue;
+export declare function setValueAtPath({ root, path, newValue, }: Readonly<{
+    root: JsonValue;
+    path: ViraJsonPath;
+    newValue: JsonValue;
+}>): JsonValue;
 /**
  * Returns a new JSON value where the value at `path` has been removed. If `path` targets an object
  * key, the key is deleted; if it targets an array index, the item is spliced out.

package/dist/util/vira-json-schema.js

@@ -476,10 +476,16 @@ export function validateAgainstSchema(value, schema) {
     }
     const context = createResolveContext(schema);
     const errors = [];
-    validateRecursive(value, schema, [], context, errors);
+    validateRecursive({
+        value,
+        schema,
+        path: [],
+        context,
+        errors,
+    });
     return errors;
 }
-function validateRecursive(value, schema, path, context, errors) {
+function validateRecursive({ value, schema, path, context, errors, }) {
     const branches = expandSchemaBranches(schema, context);
     if (branches.length === 0) {
         return;
@@ -487,7 +493,13 @@ function validateRecursive(value, schema, path, context, errors) {
     const branchErrorSets = [];
     for (const branch of branches) {
         const branchErrors = [];
-        validateBranch(value, branch, path, context, branchErrors);
+        validateBranch({
+            value,
+            branch,
+            path,
+            context,
+            errors: branchErrors,
+        });
         if (branchErrors.length === 0) {
             return;
         }
@@ -500,7 +512,7 @@ function validateRecursive(value, schema, path, context, errors) {
         errors.push(`${formatPathLabel(path)} did not match any allowed schema branch (anyOf/oneOf).`);
     }
 }
-function validateBranch(value, branch, path, context, errors) {
+function validateBranch({ value, branch, path, context, errors, }) {
     const allowedTypes = getAllowedJsonTypes(branch, context);
     const concreteType = getJsonType(value);
     if (allowedTypes.length > 0) {
@@ -513,12 +525,19 @@ function validateBranch(value, branch, path, context, errors) {
             return;
         }
     }
-    if ('const' in branch && !deepEqualsJson(value, branch.const)) {
+    if ('const' in branch &&
+        !deepEqualsJson({
+            a: value,
+            b: branch.const,
+        })) {
         errors.push(`${formatPathLabel(path)} must equal const value.`);
         return;
     }
     if ('enum' in branch && check.isArray(branch.enum)) {
-        const matched = branch.enum.some((entry) => deepEqualsJson(value, entry));
+        const matched = branch.enum.some((entry) => deepEqualsJson({
+            a: value,
+            b: entry,
+        }));
         if (!matched) {
             errors.push(`${formatPathLabel(path)} must be one of the enum values.`);
             return;
@@ -540,13 +559,25 @@ function validateBranch(value, branch, path, context, errors) {
             ];
             const propSchema = branch.properties?.[propKey];
             if (propSchema !== undefined) {
-                validateRecursive(propValue, propSchema, propPath, context, errors);
+                validateRecursive({
+                    value: propValue,
+                    schema: propSchema,
+                    path: propPath,
+                    context,
+                    errors,
+                });
             }
             else if (additional === false) {
                 errors.push(`${formatPathLabel(propPath)} is not allowed (additionalProperties is false).`);
             }
             else if (check.isObject(additional)) {
-                validateRecursive(propValue, additional, propPath, context, errors);
+                validateRecursive({
+                    value: propValue,
+                    schema: additional,
+                    path: propPath,
+                    context,
+                    errors,
+                });
             }
             else if (additional === undefined && definedKeys.size > 0) {
                 continue;
@@ -563,21 +594,37 @@ function validateBranch(value, branch, path, context, errors) {
             if (check.isArray(items)) {
                 const tupleSchema = items[index] ?? branch.additionalItems;
                 if (tupleSchema !== undefined) {
-                    validateRecursive(item, tupleSchema, itemPath, context, errors);
+                    validateRecursive({
+                        value: item,
+                        schema: tupleSchema,
+                        path: itemPath,
+                        context,
+                        errors,
+                    });
                 }
             }
             else if (items !== undefined) {
-                validateRecursive(item, items, itemPath, context, errors);
+                validateRecursive({
+                    value: item,
+                    schema: items,
+                    path: itemPath,
+                    context,
+                    errors,
+                });
             }
         });
     }
 }
-function deepEqualsJson(a, b) {
+function deepEqualsJson({ a, b }) {
     if (a === b) {
         return true;
     }
     else if (check.isArray(a) && check.isArray(b)) {
-        return a.length === b.length && a.every((entry, i) => deepEqualsJson(entry, b[i] ?? null));
+        return (a.length === b.length &&
+            a.every((entry, i) => deepEqualsJson({
+                a: entry,
+                b: b[i] ?? null,
+            })));
     }
     else if (check.isObject(a) && check.isObject(b)) {
         const aKeys = Object.keys(a);
@@ -585,7 +632,10 @@ function deepEqualsJson(a, b) {
         if (aKeys.length !== bKeys.length) {
             return false;
         }
-        return aKeys.every((key) => deepEqualsJson(a[key] ?? null, b[key] ?? null));
+        return aKeys.every((key) => deepEqualsJson({
+            a: a[key] ?? null,
+            b: b[key] ?? null,
+        }));
     }
     return false;
 }
@@ -598,7 +648,7 @@ export function pathToKey(path) {
  *
  * @category Internal
  */
-export function setValueAtPath(root, path, newValue) {
+export function setValueAtPath({ root, path, newValue, }) {
     if (path.length === 0) {
         return newValue;
     }
@@ -607,7 +657,11 @@ export function setValueAtPath(root, path, newValue) {
     if (typeof head === 'number') {
         const array = check.isArray(root) ? root : [];
         const existing = array[head] ?? null;
-        const replaced = setValueAtPath(existing, rest, newValue);
+        const replaced = setValueAtPath({
+            root: existing,
+            path: rest,
+            newValue,
+        });
         if (head >= array.length) {
             const extended = [...array];
             while (extended.length < head) {
@@ -623,7 +677,11 @@ export function setValueAtPath(root, path, newValue) {
         const existing = object[head] ?? null;
         return {
             ...object,
-            [head]: setValueAtPath(existing, rest, newValue),
+            [head]: setValueAtPath({
+                root: existing,
+                path: rest,
+                newValue,
+            }),
         };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.27.0",
+    "version": "31.28.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,12 +38,12 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.73.2",
-        "@augment-vir/common": "^31.73.2",
-        "@augment-vir/web": "^31.73.2",
+        "@augment-vir/assert": "^32.1.0",
+        "@augment-vir/common": "^32.1.0",
+        "@augment-vir/web": "^32.1.0",
         "@electrovir/color": "^1.7.10",
         "@electrovir/local-storage-client": "^0.1.0",
-        "date-vir": "^8.6.1",
+        "date-vir": "^8.6.2",
         "device-navigation": "^4.7.2",
         "json-schema-to-ts": "^3.1.1",
         "lit-css-vars": "^3.6.2",
@@ -51,24 +51,24 @@
         "observavir": "^2.3.2",
         "page-active": "^1.0.3",
         "spa-router-vir": "^6.6.0",
-        "type-fest": "^5.7.0",
-        "typed-event-target": "^4.3.1"
+        "type-fest": "^5.8.0",
+        "typed-event-target": "^4.3.2"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.73.2",
-        "@web/dev-server-esbuild": "^1.0.5",
-        "@web/test-runner": "^0.20.2",
-        "@web/test-runner-commands": "^0.9.0",
-        "@web/test-runner-playwright": "^0.11.1",
-        "@web/test-runner-visual-regression": "^0.10.0",
+        "@augment-vir/test": "^32.1.0",
+        "@web/dev-server-esbuild": "^2.0.0",
+        "@web/test-runner": "^1.0.0",
+        "@web/test-runner-commands": "^1.0.0",
+        "@web/test-runner-playwright": "^1.0.0",
+        "@web/test-runner-visual-regression": "^1.0.0",
         "esbuild": "^0.28.1",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.21.0",
-        "markdown-code-example-inserter": "^3.0.5",
+        "lucide-static": "^1.23.0",
+        "markdown-code-example-inserter": "^3.0.6",
         "theme-vir": "^28.25.0",
-        "typedoc": "^0.28.19",
-        "typescript": "6.0.3",
-        "vite": "^8.0.16",
+        "typedoc": "^0.28.20",
+        "typescript": "^6.0.3",
+        "vite": "^8.1.3",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {