vira 31.18.2 → 31.19.0

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

@@ -17,7 +17,7 @@ export declare const viraMenuTriggerTestIds: {
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", PartialWithUndefined<{
+export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
     isDisabled: boolean;
     z_debug_forceOpenState: boolean;
     popUpOffset: PopUpOffset;
@@ -42,4 +42,4 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     showPopUpResult: ShowPopUpResult | undefined;
 }, {
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"], readonly []>;
+}, `vira-${string}-`, `vira-${string}-`, readonly ["vira-menu-trigger-trigger"], readonly []>;

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

@@ -19,7 +19,7 @@ export const viraMenuTriggerTestIds = {
 export const ViraMenuTrigger = defineViraElement()({
     tagName: 'vira-menu-trigger',
     slotNames: [
-        'trigger',
+        'vira-menu-trigger-trigger',
     ],
     styles: css `
         :host {
@@ -71,7 +71,10 @@ export const ViraMenuTrigger = defineViraElement()({
             });
         })}
             >
-                <slot name=${slotNames.trigger} slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                <slot
+                    name=${slotNames['vira-menu-trigger-trigger']}
+                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                ></slot>
                 ${state.navController && state.showPopUpResult
             ? html `
                           <${ViraMenu.assign({
@@ -80,7 +83,7 @@ export const ViraMenuTrigger = defineViraElement()({
                     : ViraMenuPopUpDirection.Upwards,
                 cornerStyle: inputs.menuCornerStyle,
             })}
-                              slot=${ViraPopUpTrigger.slotNames.popUp}
+                              slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
                               class=${classMap({
                 'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
             })}

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

@@ -79,7 +79,7 @@ export type PopUpTriggerPosition = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
  */
-export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-trigger", PartialWithUndefined<PopUpTriggerPosition & {
+export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<PopUpTriggerPosition & {
     isDisabled: boolean;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
@@ -106,4 +106,4 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
         navController: NavController;
         popUpManager: PopUpManager;
     }>;
-}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;
+}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", `vira-${string}-`, readonly ["vira-pop-up-trigger-trigger", "vira-pop-up-trigger-pop-up"], readonly []>;

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

@@ -53,8 +53,8 @@ export const ViraPopUpTrigger = defineViraElement()({
         };
     },
     slotNames: [
-        'trigger',
-        'popUp',
+        'vira-pop-up-trigger-trigger',
+        'vira-pop-up-trigger-pop-up',
     ],
     hostClasses: {
         'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
@@ -362,7 +362,7 @@ export const ViraPopUpTrigger = defineViraElement()({
         })}
             >
                 <div class="dropdown-trigger">
-                    <slot name=${slotNames.trigger}></slot>
+                    <slot name=${slotNames['vira-pop-up-trigger-trigger']}></slot>
                 </div>
 
                 <div
@@ -372,7 +372,7 @@ export const ViraPopUpTrigger = defineViraElement()({
                     style=${positionerStyles}
                 >
                     ${renderIf(!!state.showPopUpResult, html `
-                            <slot name=${slotNames.popUp}></slot>
+                            <slot name=${slotNames['vira-pop-up-trigger-pop-up']}></slot>
                         `)}
                 </div>
             </button>

package/dist/elements/vira-collapsible-card.element.d.ts

@@ -5,7 +5,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-card", PartialWithUndefined<{
+export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
     /**
      * When set to `true`, the card styles are diminished so you can still use this element in
      * more flexible ways.
@@ -33,4 +33,4 @@ export declare const ViraCollapsibleCard: import("element-vir").DeclarativeEleme
     isExpanded: boolean;
 }, {
     expandToggle: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["header"], readonly ["openCaret"]>;
+}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["vira-collapsible-card-header"], readonly ["openCaret"]>;

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

@@ -110,7 +110,7 @@ export const ViraCollapsibleCard = defineViraElement()({
         }
     `,
     slotNames: [
-        'header',
+        'vira-collapsible-card-header',
     ],
     render({ inputs, slotNames, state, updateState, testIds, dispatch, events }) {
         if (inputs.blockExpansion) {
@@ -127,7 +127,9 @@ export const ViraCollapsibleCard = defineViraElement()({
             ? nothing
             : html `
                   <div class="card-header">
-                      <slot name=${slotNames.header}><div class="header-filler"></div></slot>
+                      <slot name=${slotNames['vira-collapsible-card-header']}>
+                          <div class="header-filler"></div>
+                      </slot>
 
                       ${inputs.blockExpansion
                 ? nothing
@@ -158,7 +160,10 @@ export const ViraCollapsibleCard = defineViraElement()({
             dispatch(new events.expandToggle(event.detail));
         })}
             >
-                <div class="header-wrapper" slot=${ViraCollapsibleWrapper.slotNames.header}>
+                <div
+                    class="header-wrapper"
+                    slot=${ViraCollapsibleWrapper.slotNames['vira-collapsible-wrapper-header']}
+                >
                     ${wrapperHeaderTemplate}
                 </div>
                 ${wrapperContentTemplate}

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -5,7 +5,7 @@
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
  */
-export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     expanded: boolean;
     /** When true, forces the content to expand when printing regardless of collapsed state. */
     expandOnPrint?: boolean;
@@ -13,4 +13,4 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-wrapper-expand-on-print", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;
+}, "vira-collapsible-wrapper-expand-on-print", `vira-${string}-`, readonly ["vira-collapsible-wrapper-header"], readonly []>;

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

@@ -18,7 +18,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     hostClasses: {
         'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
     },
-    slotNames: ['header'],
+    slotNames: ['vira-collapsible-wrapper-header'],
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
@@ -75,7 +75,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             dispatch(new events.expandChange(!inputs.expanded));
         })}
             >
-                <slot name=${slotNames.header}>Header</slot>
+                <slot name=${slotNames['vira-collapsible-wrapper-header']}>Header</slot>
             </button>
 
             <div

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

@@ -4,7 +4,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  *
  * @category Elements
  */
-export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<"vira-drawer", {
+export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     open: boolean;
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the drawer title slot to fill it in. */
@@ -21,4 +21,4 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
     dragCurrentY: number;
 }, {
     drawerClose: import("element-vir").DefineEvent<void>;
-}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;
+}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["vira-drawer-drawer-title"], readonly []>;

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

@@ -48,7 +48,7 @@ export const ViraDrawer = defineViraElement()({
         'vira-drawer-dragging': ({ state }) => state.isDragging,
         'vira-drawer-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
-    slotNames: ['drawerTitle'],
+    slotNames: ['vira-drawer-drawer-title'],
     cssVars: {
         'vira-drawer-backdrop-filter': 'blur(3px)',
         'vira-drawer-max-height': '80dvh',
@@ -275,7 +275,9 @@ export const ViraDrawer = defineViraElement()({
                     <div class="header">
                         <div class="header-text-wrapper">
                             <h1>
-                                <slot name=${slotNames.drawerTitle}>${inputs.drawerTitle}</slot>
+                                <slot name=${slotNames['vira-drawer-drawer-title']}>
+                                    ${inputs.drawerTitle}
+                                </slot>
                             </h1>
                         </div>
                         <button

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

@@ -25,11 +25,17 @@ 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;
+    /**
+     * Used to couple the label and trigger together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
 }, {
     selectedChange: import("element-vir").DefineEvent<string[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;

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

@@ -1,5 +1,5 @@
 import { check } from '@augment-vir/assert';
-import { filterMap } from '@augment-vir/common';
+import { filterMap, randomString } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -92,6 +92,22 @@ export const ViraDropdown = defineViraElement()({
         .using-placeholder {
             opacity: 0.4;
         }
+
+        label {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2px;
+            width: 100%;
+            max-width: 100%;
+
+            & .dropdown-label {
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: left;
+                flex-shrink: 0;
+                flex-wrap: wrap;
+            }
+        }
     `,
     events: {
         selectedChange: defineElementEvent(),
@@ -101,6 +117,11 @@ export const ViraDropdown = defineViraElement()({
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
+            /**
+             * Used to couple the label and trigger together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
         };
     },
     render({ state, inputs, dispatch, events, updateState, testIds }) {
@@ -133,7 +154,7 @@ export const ViraDropdown = defineViraElement()({
                 ? ViraMenuPopUpDirection.Downwards
                 : ViraMenuPopUpDirection.Upwards,
         })}
-                slot=${ViraPopUpTrigger.slotNames.popUp}
+                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
             >
                 ${renderMenuItemEntries(inputs.options.map((option) => {
             return {
@@ -147,7 +168,7 @@ export const ViraDropdown = defineViraElement()({
         }))}
             </${ViraMenu}>
         `;
-        return html `
+        const triggerTemplate = html `
             <${ViraPopUpTrigger.assign({
             ...inputs,
             focusOnClose: true,
@@ -171,7 +192,9 @@ export const ViraDropdown = defineViraElement()({
             open: !!state.showPopUpResult,
             'open-upwards': !state.showPopUpResult?.popDown,
         })}"
-                    slot=${ViraPopUpTrigger.slotNames.trigger}
+                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
                     ${testId(testIds.trigger)}
                 >
                     ${leadingIconTemplate}
@@ -195,5 +218,16 @@ export const ViraDropdown = defineViraElement()({
                 ${state.showPopUpResult ? menuTemplate : nothing}
             </${ViraPopUpTrigger}>
         `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId}>
+                    <span class="dropdown-label">${inputs.label}</span>
+                    ${triggerTemplate}
+                </label>
+            `;
+        }
+        else {
+            return triggerTemplate;
+        }
     },
 });

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

@@ -11,7 +11,7 @@ import { type Duration, type DurationUnit } from 'date-vir';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-image
  */
-export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
+export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     /** The URL of the image to load. This is passed directly to the `<img>` element. */
     imageUrl: string;
     /**
@@ -42,4 +42,4 @@ export declare const ViraImage: import("element-vir").DeclarativeElementDefiniti
 }, {
     imageLoad: import("element-vir").DefineEvent<void>;
     imageError: import("element-vir").DefineEvent<unknown>;
-}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"], readonly []>;
+}, "vira-image-height-constrained", `vira-${string}-`, readonly ["vira-image-loading", "vira-image-error"], readonly []>;

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

@@ -34,8 +34,8 @@ export const ViraImage = defineViraElement()({
         'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
     },
     slotNames: [
-        'loading',
-        'error',
+        'vira-image-loading',
+        'vira-image-error',
     ],
     events: {
         imageLoad: defineElementEvent(),
@@ -96,7 +96,7 @@ export const ViraImage = defineViraElement()({
         const imageUrl = inputs.imageUrl;
         const statusTemplate = state.erroredUrls[imageUrl]
             ? html `
-                  <slot class="status-wrapper" name=${slotNames.error}>
+                  <slot class="status-wrapper" name=${slotNames['vira-image-error']}>
                       <${ViraIcon.assign({
                 icon: StatusFailure24Icon,
             })}
@@ -107,7 +107,7 @@ export const ViraImage = defineViraElement()({
             : state.loadedUrls[imageUrl]
                 ? undefined
                 : html `
-                    <slot class="status-wrapper" name=${slotNames.loading}>
+                    <slot class="status-wrapper" name=${slotNames['vira-image-loading']}>
                         <${ViraIcon.assign({
                     icon: LoaderAnimated24Icon,
                 })}></${ViraIcon}>

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

@@ -5,7 +5,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-modal
  */
-export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<"vira-modal", {
+export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     open: boolean;
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the modal title slot to fill it in. */
@@ -37,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanupListeners: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineEvent<void>;
-}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -42,7 +42,7 @@ export const ViraModal = defineViraElement()({
         'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
         'vira-modal-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
-    slotNames: ['modalTitle'],
+    slotNames: ['vira-modal-modal-title'],
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
     },
@@ -205,7 +205,11 @@ export const ViraModal = defineViraElement()({
                 >
                     <div class="header">
                         <div class="header-text-wrapper">
-                            <h1><slot name=${slotNames.modalTitle}>${inputs.modalTitle}</slot></h1>
+                            <h1>
+                                <slot name=${slotNames['vira-modal-modal-title']}>
+                                    ${inputs.modalTitle}
+                                </slot>
+                            </h1>
                             ${inputs.modalSubtitle
             ? html `
                                       <sub>${inputs.modalSubtitle}</sub>

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

@@ -13,6 +13,7 @@ import { createOverflowObserver } from '../util/overflow-observer.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 { ViraBoldText } from './vira-bold-text.element.js';
 import { ViraButton } from './vira-button.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 import { ViraLink } from './vira-link.element.js';
@@ -387,7 +388,12 @@ export const ViraTabs = defineViraElement()({
             })}>
                             <span class="tab-content">
                                 ${iconTemplate}
-                                <span class="tab-label">${tab.label}</span>
+                                <${ViraBoldText.assign({
+                text: tab.label,
+                bold: isSelected,
+            })}
+                                    class="tab-label"
+                                ></${ViraBoldText}>
                             </span>
                         </${ViraLink}>
                     </li>
@@ -441,7 +447,7 @@ export const ViraTabs = defineViraElement()({
             showMenuCaret: true,
             color: ViraColorVariant.Neutral,
         })}
-                    slot=${ViraMenuTrigger.slotNames.trigger}
+                    slot=${ViraMenuTrigger.slotNames['vira-menu-trigger-trigger']}
                 ></${ViraButton}>
                 ${menuItems}
             </${ViraMenuTrigger}>
@@ -454,6 +460,7 @@ export const ViraTabs = defineViraElement()({
                 cleanupObserver: createOverflowObserver({
                     element: tabsElement,
                     widthElement: host,
+                    hysteresisPx: 16,
                     onChange(isOverflowing) {
                         updateState({
                             isOverflowing,

package/dist/util/define-vira-element.js

@@ -4,7 +4,7 @@ import { wrapDefineElement } from 'element-vir';
  *
  * @category Internal
  */
-export const ViraTagNamePrefix = `vira-`;
+export const ViraTagNamePrefix = 'vira-';
 /**
  * Define a vira element with custom requirements (like the `vira-` element tag prefix).
  *

package/dist/util/overflow-observer.d.ts

@@ -4,7 +4,7 @@
  *
  * @returns A cleanup function that disconnects all observers.
  */
-export declare function createOverflowObserver({ element, widthElement, onChange, }: Readonly<{
+export declare function createOverflowObserver({ element, widthElement, onChange, hysteresisPx, }: Readonly<{
     /** The element whose `scrollWidth` is measured for content size. */
     element: Element;
     /**
@@ -14,4 +14,11 @@ export declare function createOverflowObserver({ element, widthElement, onChange
      */
     widthElement?: Element | undefined;
     onChange: (isOverflowing: boolean) => void;
+    /**
+     * Pixel margin required to flip the overflow state. Once overflowing, the content must fit
+     * within `availableWidth - hysteresisPx` to flip back; once not overflowing, the content must
+     * exceed `availableWidth + hysteresisPx` to flip on. Prevents rapid toggling from minute size
+     * changes.
+     */
+    hysteresisPx?: number | undefined;
 }>): () => void;

package/dist/util/overflow-observer.js

@@ -4,10 +4,18 @@
  *
  * @returns A cleanup function that disconnects all observers.
  */
-export function createOverflowObserver({ element, widthElement, onChange, }) {
+export function createOverflowObserver({ element, widthElement, onChange, hysteresisPx = 0, }) {
     const availableWidthElement = widthElement || element;
+    let isOverflowing = false;
     function checkOverflow() {
-        onChange(element.scrollWidth > availableWidthElement.clientWidth);
+        const contentWidth = element.scrollWidth;
+        const availableWidth = availableWidthElement.clientWidth;
+        const threshold = isOverflowing ? -hysteresisPx : hysteresisPx;
+        const nextOverflowing = contentWidth > availableWidth + threshold;
+        if (nextOverflowing !== isOverflowing) {
+            isOverflowing = nextOverflowing;
+            onChange(isOverflowing);
+        }
     }
     const resizeObserver = new ResizeObserver(checkOverflow);
     resizeObserver.observe(element);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.18.2",
+    "version": "31.19.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.69.0",
-        "@augment-vir/common": "^31.69.0",
-        "@augment-vir/web": "^31.69.0",
+        "@augment-vir/assert": "^31.70.1",
+        "@augment-vir/common": "^31.70.1",
+        "@augment-vir/web": "^31.70.1",
         "@electrovir/color": "^1.7.9",
         "date-vir": "^8.3.2",
         "device-navigation": "^4.5.5",
@@ -48,12 +48,12 @@
         "lit-css-vars": "^3.6.2",
         "observavir": "^2.3.2",
         "page-active": "^1.0.3",
-        "spa-router-vir": "^6.5.0",
+        "spa-router-vir": "^6.6.0",
         "type-fest": "^5.6.0",
         "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.69.0",
+        "@augment-vir/test": "^31.70.1",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -61,12 +61,12 @@
         "@web/test-runner-visual-regression": "^0.10.0",
         "esbuild": "^0.28.0",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.14.0",
+        "lucide-static": "^1.16.0",
         "markdown-code-example-inserter": "^3.0.5",
         "theme-vir": "^28.25.0",
         "typedoc": "^0.28.19",
         "typescript": "5.9.3",
-        "vite": "^8.0.10",
+        "vite": "^8.0.14",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {