vira 26.13.1 → 28.0.0

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

@@ -15,4 +15,4 @@ export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
  *
  * @category Internal
  */
-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>;
+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 [], const TestIds extends ReadonlyArray<string> = readonly []>(inputs: import("element-vir").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("element-vir").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

@@ -16,4 +16,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
     label: MenuItem["label"];
     /** If `true`, does not render the selected check icon. */
     hideCheckIcon: boolean;
-}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly []>;
+}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;

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

@@ -52,4 +52,4 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
 }, {
     itemActivate: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly []>;
+}, "vira-menu-trigger-", "vira-menu-trigger-", readonly [], readonly []>;

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

@@ -35,4 +35,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
     hideCheckIcons: boolean;
 }>>, {
     internalNavController: NavController;
-}, {}, "vira-menu-multiselect", "vira-menu-", readonly []>;
+}, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;

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

@@ -32,4 +32,4 @@ export declare const ViraPopUpMenu: import("element-vir").DeclarativeElementDefi
     direction: PopUpMenuDirection;
     /** @default PopUpMenuCornerStyle.Directional */
     cornerStyle: PopUpMenuCornerStyle;
-}>, {}, {}, "vira-pop-up-menu-open-upwards" | "vira-pop-up-menu-rounded" | "vira-pop-up-menu-square", "vira-pop-up-menu-", readonly []>;
+}>, {}, {}, "vira-pop-up-menu-open-upwards" | "vira-pop-up-menu-rounded" | "vira-pop-up-menu-square", "vira-pop-up-menu-", readonly [], readonly []>;

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

@@ -78,4 +78,4 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
         navController: NavController;
         popUpManager: PopUpManager;
     }>;
-}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"]>;
+}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;

package/dist/elements/vira-bold-text.element.d.ts

@@ -6,4 +6,4 @@
 export declare const ViraBoldText: import("element-vir").DeclarativeElementDefinition<"vira-bold", {
     bold: boolean;
     text: string;
-}, {}, {}, "vira-bold-bold", "vira-bold-bold-weight", readonly []>;
+}, {}, {}, "vira-bold-bold", "vira-bold-bold-weight", readonly [], readonly []>;

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

@@ -28,4 +28,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default false
      */
     expandToFitIcon: boolean;
-}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly []>;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly [], readonly []>;

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

@@ -29,4 +29,4 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  */
 export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
     valueChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-checkbox-", "vira-checkbox-", readonly []>;
+}, "vira-checkbox-", "vira-checkbox-", readonly [], readonly []>;

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

@@ -11,4 +11,4 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"]>;
+}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;

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

@@ -54,4 +54,4 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 }, {
     selectedChange: import("element-vir").DefineEvent<PropertyKey[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-dropdown-", "vira-dropdown-", readonly []>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly []>;

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

@@ -10,4 +10,4 @@ export declare const ViraIcon: import("element-vir").DeclarativeElementDefinitio
     icon: Pick<ViraIconSvg, "svgTemplate"> | undefined;
     /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
     fitContainer?: boolean | undefined;
-}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly []>;
+}, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly [], readonly []>;

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

@@ -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"]>;
+}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"], readonly []>;

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

@@ -40,4 +40,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefineEvent<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly []>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { assertWrap } from '@augment-vir/assert';
+import { extractEventTarget } from '@augment-vir/web';
 import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
 import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
 import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
@@ -166,7 +167,7 @@ export const ViraInput = defineViraElement()({
                 overflow: hidden;
                 outline: none;
 
-                &:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border {
+                &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
             elementBorderSize: 0,
             noNesting: true,
@@ -280,10 +281,15 @@ export const ViraInput = defineViraElement()({
         return html `
             <span
                 class="input-wrapper"
-                ${listen('mouseup', () => {
-            assertWrap
-                .instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement)
-                .focus();
+                ${listen('mousedown', (event) => {
+            const eventTarget = extractEventTarget(event, HTMLElement, {
+                useOriginalTarget: true,
+            });
+            const inputElement = assertWrap.instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement);
+            if (eventTarget !== inputElement) {
+                event.preventDefault();
+                inputElement.focus();
+            }
         })}
             >
                 ${iconTemplate}
@@ -328,10 +334,11 @@ export const ViraInput = defineViraElement()({
                         <button
                             class="clear-x-button"
                             title="clear"
-                            ${listen('click', (event) => {
-            /** Prevent focus of the input. */
+                            ${listen('mousedown', (event) => {
             event.stopImmediatePropagation();
             event.preventDefault();
+        })}
+                            ${listen('click', () => {
             dispatch(new events.valueChange(''));
         })}
                         >
@@ -342,10 +349,12 @@ export const ViraInput = defineViraElement()({
                         <button
                             class="show-password-button"
                             title="show password"
-                            ${listen('click', (event) => {
+                            ${listen('mousedown', (event) => {
             /** Prevent focus of the input. */
             event.stopImmediatePropagation();
             event.preventDefault();
+        })}
+                            ${listen('click', () => {
             updateState({ showPassword: !state.showPassword });
         })}
                         >

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

@@ -70,4 +70,4 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
     attributePassthrough: Readonly<PartialWithUndefined<{
         a: AttributeValues;
     }>>;
-}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly []>;
+}>, {}, {}, "vira-link-", "vira-link-hover-color", readonly [], readonly []>;

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

@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
     min: number;
     /** @default 100 */
     max: number;
-}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly []>;
+}>>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-background-color" | "vira-progress-foreground-color", readonly [], readonly []>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.13.1",
+    "version": "28.0.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.40.0",
-        "@augment-vir/common": "^31.40.0",
-        "@augment-vir/web": "^31.40.0",
+        "@augment-vir/assert": "^31.41.0",
+        "@augment-vir/common": "^31.41.0",
+        "@augment-vir/web": "^31.41.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^8.0.0",
         "device-navigation": "^4.5.5",
@@ -52,7 +52,7 @@
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.40.0",
+        "@augment-vir/test": "^31.41.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -63,7 +63,7 @@
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.14",
         "typescript": "5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {