vira 31.30.0 → 31.31.1

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

@@ -35,4 +35,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * gated by `keepOpenAfterInteraction`.
      */
     activate: import("element-vir").DefineEvent<undefined>;
-}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap", readonly [], readonly []>;
+}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;

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

@@ -37,76 +37,80 @@ export const ViraMenuItem = defineViraElement()({
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
-        'vira-menu-item-icon-gap': '3px',
+        'vira-menu-item-icon-gap': '8px',
+        'vira-menu-item-padding': '6px 8px',
+        'vira-menu-item-border-radius': '4px',
     },
-    styles: ({ hostClasses, cssVars }) => css `
-        :host {
-            display: flex;
-            flex-shrink: 0;
-            ${noUserSelect};
-            box-sizing: border-box;
-            max-width: 100%;
-            gap: ${cssVars['vira-menu-item-icon-gap'].value};
-            overflow: hidden;
-            padding: 8px 3px;
-            padding-right: 16px;
-            align-items: center;
-            text-align: left;
-        }
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            :host {
+                display: flex;
+                flex-shrink: 0;
+                ${noUserSelect};
+                box-sizing: border-box;
+                max-width: 100%;
+                gap: ${cssVars['vira-menu-item-icon-gap'].value};
+                overflow: hidden;
+                padding: ${cssVars['vira-menu-item-padding'].value};
+                border-radius: ${cssVars['vira-menu-item-border-radius'].value};
+                align-items: center;
+                text-align: left;
+            }
 
-        ${hostClasses['vira-menu-item-disabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
-            cursor: not-allowed;
+            ${hostClasses['vira-menu-item-disabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
+                cursor: not-allowed;
 
-            & .slot-wrapper,
-            & ${ViraIcon} {
-                opacity: 0.3;
-                pointer-events: none;
+                & .slot-wrapper,
+                & ${ViraIcon} {
+                    opacity: 0.3;
+                    pointer-events: none;
+                }
             }
-        }
 
-        :host(:focus),
-        :host(:active) {
-            outline: none;
-        }
+            :host(:focus),
+            :host(:active) {
+                outline: none;
+            }
 
-        ${hostClasses['vira-menu-item-enabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
-            cursor: pointer;
+            ${hostClasses['vira-menu-item-enabled'].selector}${hostClasses['vira-menu-item-default-styles'].selector} {
+                cursor: pointer;
 
-            &:host(:focus) {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
-            }
+                &:host(:focus) {
+                    background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
+                }
 
-            &:host(:active) {
-                background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
+                &:host(:active) {
+                    background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
+                }
             }
-        }
-
-        ${ViraIcon} {
-            width: 24px;
-            aspect-ratio: 1;
-            align-items: center;
-            justify-content: center;
-        }
 
-        ${hostClasses['vira-menu-item-default-icon'].selector} {
             ${ViraIcon} {
-                visibility: hidden;
+                width: 24px;
+                aspect-ratio: 1;
+                align-items: center;
+                justify-content: center;
             }
-        }
 
-        ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
-            visibility: visible;
-        }
+            ${hostClasses['vira-menu-item-default-icon'].selector} {
+                ${ViraIcon} {
+                    visibility: hidden;
+                }
+            }
 
-        .slot-wrapper {
-            display: flex;
-            flex-grow: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            min-width: 0;
-        }
-    `,
+            ${hostClasses['vira-menu-item-selected'].selector} ${ViraIcon} {
+                visibility: visible;
+            }
+
+            .slot-wrapper {
+                display: flex;
+                flex-grow: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                min-width: 0;
+            }
+        `;
+    },
     init({ state, updateState, host, inputs, dispatch, events }) {
         host.setAttribute('role', 'menuitem');
         host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');

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

@@ -33,4 +33,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
     direction: ViraMenuPopUpDirection;
     /** @default PopUpMenuCornerStyle.Directional */
     cornerStyle: ViraMenuCornerStyle;
-}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-", readonly [], readonly []>;
+}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;

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

@@ -40,39 +40,45 @@ export const ViraMenu = defineViraElement()({
         'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
         'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            max-width: 100%;
-            max-height: 100%;
-            overflow-y: auto;
-            z-index: 99;
-            box-sizing: border-box;
-            overscroll-behavior: contain;
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            ${viraShadows.menuShadow}
-        }
+    cssVars: {
+        'vira-menu-padding': '4px',
+    },
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            :host {
+                display: flex;
+                flex-direction: column;
+                padding: ${cssVars['vira-menu-padding'].value};
+                max-width: 100%;
+                max-height: 100%;
+                overflow-y: auto;
+                z-index: 99;
+                box-sizing: border-box;
+                overscroll-behavior: contain;
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                background-color: ${viraFormCssVars['vira-form-background-color'].value};
+                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+                color: ${viraFormCssVars['vira-form-foreground-color'].value};
+                ${viraShadows.menuShadow}
+            }
 
-        ${hostClasses['vira-menu-open-upwards'].selector} {
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+            ${hostClasses['vira-menu-open-upwards'].selector} {
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
 
-        ${hostClasses['vira-menu-square'].selector} {
-            border-radius: 0;
-        }
+            ${hostClasses['vira-menu-square'].selector} {
+                border-radius: 0;
+            }
 
-        ${hostClasses['vira-menu-rounded'].selector} {
-            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-        }
-    `,
+            ${hostClasses['vira-menu-rounded'].selector} {
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            }
+        `;
+    },
     render() {
         return html `
             <slot>&nbsp;</slot>

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -62,72 +62,74 @@ export const ViraPopUpTrigger = defineViraElement()({
         'vira-pop-up-trigger-inside-focus': ({ inputs }) => !!inputs.useInsideFocus,
         'vira-pop-up-trigger-outside-focus': ({ inputs }) => !inputs.useInsideFocus,
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-flex;
-            box-sizing: border-box;
-            vertical-align: middle;
-            position: relative;
-            max-width: 100%;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: inline-flex;
+                box-sizing: border-box;
+                vertical-align: middle;
+                position: relative;
+                max-width: 100%;
+            }
 
-        .dropdown-wrapper {
-            ${noNativeFormStyles};
-            cursor: pointer;
-            max-width: 100%;
-            position: relative;
-            flex-grow: 1;
-            box-sizing: border-box;
-        }
+            .dropdown-wrapper {
+                ${noNativeFormStyles};
+                cursor: pointer;
+                max-width: 100%;
+                position: relative;
+                flex-grow: 1;
+                box-sizing: border-box;
+            }
 
-        ${hostClasses['vira-pop-up-trigger-inside-focus'].selector} .dropdown-wrapper {
-            ${createFocusStyles({
-        renderInside: true,
-    })}
-        }
-        ${hostClasses['vira-pop-up-trigger-outside-focus'].selector} .dropdown-wrapper {
-            ${createFocusStyles()}
-        }
+            ${hostClasses['vira-pop-up-trigger-inside-focus'].selector} .dropdown-wrapper {
+                ${createFocusStyles({
+            renderInside: true,
+        })}
+            }
+            ${hostClasses['vira-pop-up-trigger-outside-focus'].selector} .dropdown-wrapper {
+                ${createFocusStyles()}
+            }
 
-        .dropdown-trigger {
-            box-sizing: border-box;
-            ${noUserSelect};
-        }
+            .dropdown-trigger {
+                box-sizing: border-box;
+                ${noUserSelect};
+            }
 
-        ${hostClasses['vira-pop-up-trigger-disabled'].selector} {
-            ${viraDisabledStyles}
-            pointer-events: auto;
-        }
+            ${hostClasses['vira-pop-up-trigger-disabled'].selector} {
+                ${viraDisabledStyles}
+                pointer-events: auto;
+            }
 
-        ${hostClasses['vira-pop-up-trigger-disabled'].selector} .dropdown-wrapper {
-            pointer-events: none;
-        }
+            ${hostClasses['vira-pop-up-trigger-disabled'].selector} .dropdown-wrapper {
+                pointer-events: none;
+            }
 
-        .pop-up-positioner {
-            position: absolute;
-            pointer-events: none;
-            display: flex;
-            box-sizing: border-box;
-            flex-direction: column;
-            align-items: flex-start;
+            .pop-up-positioner {
+                position: absolute;
+                pointer-events: none;
+                display: flex;
+                box-sizing: border-box;
+                flex-direction: column;
+                align-items: flex-start;
 
-            /* highest possible z-index */
-            z-index: 2147483647;
+                /* highest possible z-index */
+                z-index: 2147483647;
 
-            & > * {
-                pointer-events: auto;
-                max-width: 100%;
-            }
+                & > * {
+                    pointer-events: auto;
+                    max-width: 100%;
+                }
 
-            &.right-aligned {
-                align-items: flex-end;
+                &.right-aligned {
+                    align-items: flex-end;
+                }
             }
-        }
 
-        .open-upwards .pop-up-positioner {
-            flex-direction: column-reverse;
-        }
-    `,
+            .open-upwards .pop-up-positioner {
+                flex-direction: column-reverse;
+            }
+        `;
+    },
     events: {
         navSelect: defineElementEvent(),
         /**

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

@@ -1,5 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-import { type FullDate } from 'date-vir';
+import { type FullDate, type Timezone } from 'date-vir';
 /**
  * Displays a `FullDate` as an absolute, human readable timestamp in the user's timezone (for
  * example `Jun 3, 2026 14:30 PDT`).
@@ -21,7 +21,7 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
      * midnight UTC), where converting to the user's timezone would shift the displayed
      * date/time.
      */
-    timezone: string;
+    timezone: Timezone;
 }>, {}, {}, "vira-absolute-time-", "vira-absolute-time-", readonly [], readonly []>;
 /**
  * Formats a `FullDate` into the same absolute string rendered by {@link ViraAbsoluteTime}.
@@ -31,5 +31,5 @@ export declare const ViraAbsoluteTime: import("element-vir").DeclarativeElementD
 export declare function formatAbsoluteTime(time: Readonly<FullDate>, options?: Readonly<PartialWithUndefined<{
     showDateOnly: boolean;
     showTimeOnly: boolean;
-    timezone: string;
+    timezone: Timezone;
 }>>): string;

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

@@ -14,44 +14,46 @@ export const ViraBoldText = defineViraElement()({
     hostClasses: {
         'vira-bold-bold': ({ inputs }) => inputs.bold,
     },
-    styles: ({ hostClasses, cssVars }) => css `
-        span {
-            text-decoration: inherit;
-            white-space: inherit;
-        }
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            span {
+                text-decoration: inherit;
+                white-space: inherit;
+            }
 
-        .bold-wrapper {
-            position: relative;
-        }
+            .bold-wrapper {
+                position: relative;
+            }
 
-        .everything-wrapper {
-            width: 100%;
-        }
+            .everything-wrapper {
+                width: 100%;
+            }
 
-        .bold {
-            font-weight: ${cssVars['vira-bold-bold-weight'].value};
-            visibility: hidden;
-            pointer-events: none;
-            z-index: -1;
-        }
+            .bold {
+                font-weight: ${cssVars['vira-bold-bold-weight'].value};
+                visibility: hidden;
+                pointer-events: none;
+                z-index: -1;
+            }
 
-        .normal {
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
+            .normal {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
 
-        ${hostClasses['vira-bold-bold'].selector} .normal {
-            visibility: hidden;
-            pointer-events: none;
-            z-index: -1;
-        }
-        ${hostClasses['vira-bold-bold'].selector} .bold {
-            visibility: visible;
-            pointer-events: unset;
-            z-index: unset;
-        }
-    `,
+            ${hostClasses['vira-bold-bold'].selector} .normal {
+                visibility: hidden;
+                pointer-events: none;
+                z-index: -1;
+            }
+            ${hostClasses['vira-bold-bold'].selector} .bold {
+                visibility: visible;
+                pointer-events: unset;
+                z-index: unset;
+            }
+        `;
+    },
     render({ inputs }) {
         return html `
             <span class="everything-wrapper">

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

@@ -124,9 +124,13 @@ export const ViraButton = defineViraElement()({
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         'vira-button-with-menu-caret': ({ inputs }) => !!inputs.showMenuCaret,
         'vira-button-size-large': ({ inputs }) => inputs.buttonSize === ViraSize.Large,
-        'vira-button-size-medium': ({ inputs }) => !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium,
+        'vira-button-size-medium': ({ inputs }) => {
+            return !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium;
+        },
         'vira-button-size-small': ({ inputs }) => inputs.buttonSize === ViraSize.Small,
-        'vira-button-emphasis-standard': ({ inputs }) => !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard,
+        'vira-button-emphasis-standard': ({ inputs }) => {
+            return !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard;
+        },
         'vira-button-emphasis-subtle': ({ inputs }) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
         ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
             const colorKey = viraColorVariantToHostClassKey[colorVariant];

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

@@ -25,23 +25,25 @@ export const ViraCard = defineViraElement()({
     },
     cssVars: {
         'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
-        'vira-card-padding': viraFormCssVars['vira-form-wrapper-radius'].value,
+        'vira-card-padding': '24px',
     },
-    styles: ({ hostClasses, cssVars }) => css `
-        :host {
-            display: block;
-            border: ${cssVars['vira-card-border'].value};
-            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
-            padding: ${cssVars['vira-card-padding'].value};
-        }
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
+            :host {
+                display: block;
+                border: ${cssVars['vira-card-border'].value};
+                border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
+                padding: ${cssVars['vira-card-padding'].value};
+            }
 
-        ${hostClasses['vira-card-error'].selector} {
-            border-color: ${viraFormCssVars['vira-form-error-color'].value};
-        }
-        ${hostClasses['vira-card-success'].selector} {
-            border-color: ${viraFormCssVars['vira-form-success-color'].value};
-        }
-    `,
+            ${hostClasses['vira-card-error'].selector} {
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
+            }
+            ${hostClasses['vira-card-success'].selector} {
+                border-color: ${viraFormCssVars['vira-form-success-color'].value};
+            }
+        `;
+    },
     render() {
         return html `
             <slot></slot>