vira 23.4.1 → 24.0.0

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

@@ -15,10 +15,10 @@ export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
  *
  * @category Internal
  */
-export declare const defineViraElement: <Inputs extends {}>() => <const TagName extends `vira-${string}`, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").VerifiedElementInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineViraElement: <Inputs extends {}>(...errorParams: import("element-vir").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vira-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
 /**
  * Define a vira element with custom requirements (like the `vira-` element tag prefix).
  *
  * @category Internal
  */
-export declare const defineViraElementNoInputs: <const TagName extends `vira-${string}`, Inputs extends {}, StateInit extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").VerifiedElementNoInputsInit<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, StateInit, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
+export declare const defineViraElementNoInputs: <const TagName extends `vira-${string}`, Inputs extends {}, State extends {}, EventsInit extends {}, const HostClassKeys extends `${TagName}-${string}` = `${TagName}-`, const CssVarKeys extends `${TagName}-${string}` = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

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

@@ -1,6 +1,6 @@
 import { assert } from '@augment-vir/assert';
 import { NavController } from 'device-navigation';
-import { classMap, css, defineElementEvent, html, ifDefined, listen, perInstance, renderIf, testId, } from 'element-vir';
+import { classMap, css, defineElementEvent, html, ifDefined, listen, renderIf, testId, } from 'element-vir';
 import { ChevronUp24Icon } from '../../icons/index.js';
 import { viraBorders } from '../../styles/border.js';
 import { createFocusStyles, viraFocusCssVars } from '../../styles/focus.js';
@@ -32,6 +32,14 @@ export const viraDropdownTestIds = {
  */
 export const ViraDropdown = defineViraElement()({
     tagName: 'vira-dropdown',
+    state() {
+        return {
+            /** `undefined` means the pop up is not currently showing. */
+            showPopUpResult: undefined,
+            popUpManager: new PopUpManager(),
+            navController: undefined,
+        };
+    },
     hostClasses: {
         'vira-dropdown-disabled': ({ inputs }) => !!inputs.isDisabled,
     },
@@ -155,12 +163,6 @@ export const ViraDropdown = defineViraElement()({
         selectedChange: defineElementEvent(),
         openChange: defineElementEvent(),
     },
-    stateInitStatic: {
-        /** `undefined` means the pop up is not currently showing. */
-        showPopUpResult: undefined,
-        popUpManager: perInstance(() => new PopUpManager()),
-        navController: undefined,
-    },
     cleanup({ state, updateState }) {
         updateState({ showPopUpResult: undefined });
         state.popUpManager.destroy();

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

@@ -9,10 +9,19 @@ export const ViraBoldText = defineElement()({
         'vira-bold-bold': ({ inputs }) => inputs.bold,
     },
     styles: ({ hostClasses, cssVars }) => css `
+        span {
+            text-decoration: inherit;
+            white-space: inherit;
+        }
+
         .bold-wrapper {
             position: relative;
         }
 
+        .everything-wrapper {
+            width: 100%;
+        }
+
         .bold {
             font-weight: ${cssVars['vira-bold-bold-weight'].value};
             visibility: hidden;
@@ -39,10 +48,12 @@ export const ViraBoldText = defineElement()({
     `,
     render({ inputs }) {
         return html `
-            <span class="bold-wrapper">
-                <span class="bold">${inputs.text}</span>
+            <span class="everything-wrapper">
+                <span class="bold-wrapper">
+                    <span class="bold">${inputs.text}</span>
 
-                <span class="normal">${inputs.text}</span>
+                    <span class="normal">${inputs.text}</span>
+                </span>
             </span>
         `;
     },

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

@@ -10,6 +10,11 @@ import { defineViraElement } from './define-vira-element.js';
  */
 export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
+    state() {
+        return {
+            contentHeight: 0,
+        };
+    },
     hostClasses: {
         'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
     },
@@ -43,9 +48,6 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     events: {
         expandChange: defineElementEvent(),
     },
-    stateInitStatic: {
-        contentHeight: 0,
-    },
     render({ state, slotNames, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
             ? css `

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

@@ -16,6 +16,20 @@ import { ViraIcon } from './vira-icon.element.js';
  */
 export const ViraImage = defineViraElement()({
     tagName: 'vira-image',
+    state() {
+        return {
+            /**
+             * To avoid race conditions between `<img>` element events and potential input changing,
+             * save the loaded state of an URL's image by the image's URL.
+             */
+            loadedUrls: {},
+            /**
+             * To avoid race conditions between `<img>` element events and potential input changing,
+             * save the errored state of an URL's image by the image's URL.
+             */
+            erroredUrls: {},
+        };
+    },
     hostClasses: {
         'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
     },
@@ -74,18 +88,6 @@ export const ViraImage = defineViraElement()({
             display: none;
         }
     `,
-    stateInitStatic: {
-        /**
-         * To avoid race conditions between `<img>` element events and potential input changing,
-         * save the loaded state of an URL's image by the image's URL.
-         */
-        loadedUrls: {},
-        /**
-         * To avoid race conditions between `<img>` element events and potential input changing,
-         * save the errored state of an URL's image by the image's URL.
-         */
-        erroredUrls: {},
-    },
     render({ inputs, state, updateState, dispatch, events, slotNames }) {
         /**
          * Saved off for use in the image listeners. This is used to eliminate race conditions

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

@@ -29,6 +29,12 @@ export var ViraInputType;
  */
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
+    state() {
+        return {
+            forcedInputWidth: 0,
+            showPassword: false,
+        };
+    },
     hostClasses: {
         'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
         'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
@@ -247,10 +253,6 @@ export const ViraInput = defineViraElement()({
             }
         `;
     },
-    stateInitStatic: {
-        forcedInputWidth: 0,
-        showPassword: false,
-    },
     render: ({ inputs, dispatch, state, updateState, events }) => {
         const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value,

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

@@ -1,4 +1,4 @@
-import { FullRoute, SpaRouter } from 'spa-router-vir';
+import { SpaRoute, SpaRouter } from 'spa-router-vir';
 import { RequireExactlyOne } from 'type-fest';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
@@ -22,7 +22,7 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
      * is provided for the inputs, don't provide a link property.
      */
     route: {
-        route: FullRoute<any, any, any>;
+        route: SpaRoute<any, any, any>;
         router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
         scrollToTop?: boolean;
     };

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

@@ -41,9 +41,13 @@ export const ViraLink = defineViraElement()({
             if (!inputs.route) {
                 return;
             }
-            if (inputs.route.router.setRouteOnDirectNavigation(inputs.route.route, event) &&
-                inputs.route.scrollToTop) {
-                window.scrollTo(0, 0);
+            const routed = inputs.route.router.setRouteOnDirectNavigation(inputs.route.route, event);
+            if (inputs.route.scrollToTop) {
+                window.scrollTo({
+                    left: 0,
+                    top: 0,
+                    behavior: routed ? 'instant' : 'smooth',
+                });
             }
         }
         if (inputs.link?.newTab) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "23.4.1",
+    "version": "24.0.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -37,36 +37,36 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.9.2",
-        "@augment-vir/common": "^31.9.2",
-        "@augment-vir/web": "^31.9.2",
+        "@augment-vir/assert": "^31.10.0",
+        "@augment-vir/common": "^31.10.0",
+        "@augment-vir/web": "^31.10.0",
         "colorjs.io": "^0.5.2",
-        "date-vir": "^7.2.1",
-        "device-navigation": "^3.0.3",
+        "date-vir": "^7.3.1",
+        "device-navigation": "^3.1.0",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.0.5",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^4.0.8",
-        "type-fest": "^4.35.0",
-        "typed-event-target": "^4.0.2"
+        "spa-router-vir": "^5.3.1",
+        "type-fest": "^4.37.0",
+        "typed-event-target": "^4.0.3"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.9.2",
+        "@augment-vir/test": "^31.10.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.25.0",
+        "esbuild": "^0.25.1",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.27.9",
-        "typescript": "5.7.3",
-        "vite": "^6.2.0",
+        "typescript": "5.8.2",
+        "vite": "^6.2.1",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^23.4.1"
+        "element-vir": "^24.0.0"
     },
     "engines": {
         "node": ">=22"