vira 28.19.6 → 29.0.0

package/{src/elements/vira-input.element.ts → dist/elements/vira-input.element.js}

@@ -1,49 +1,28 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined, randomString} from '@augment-vir/common';
-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, type ViraIconSvg} from '../icons/index.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {
-    noUserSelect,
-    viraAnimationDurations,
-    viraBorders,
-    viraDisabledStyles,
-} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {
-    type SharedTextInputElementInputs,
-    filterTextInputValue,
-    textInputListener,
-} from './shared-text-input-logic.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { randomString } from '@augment-vir/common';
+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';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noUserSelect, viraAnimationDurations, viraDisabledStyles } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { filterTextInputValue, textInputListener, } from './shared-text-input-logic.js';
+import { ViraIcon } from './vira-icon.element.js';
 export * from './shared-text-input-logic.js';
-
 /**
  * Input types for {@link ViraInput}.
  *
  * @category Internal
  */
-export enum ViraInputType {
-    Default = 'text',
-    Password = 'password',
-    Email = 'email',
-}
-
+export var ViraInputType;
+(function (ViraInputType) {
+    ViraInputType["Default"] = "text";
+    ViraInputType["Password"] = "password";
+    ViraInputType["Email"] = "email";
+})(ViraInputType || (ViraInputType = {}));
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with
  * {@link ViraInputType}.
@@ -52,39 +31,14 @@ export enum ViraInputType {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-input
  */
-export const ViraInput = defineViraElement<
-    Readonly<
-        PartialWithUndefined<{
-            icon: Pick<ViraIconSvg, 'svgTemplate'>;
-            /** A suffix that, if provided, is shown following the input field. */
-            suffix: string;
-            /** A label that is shown above the input, if provided. */
-            label: string;
-            /** If true, applies error styling. */
-            hasError: boolean;
-            showClearButton: boolean;
-            type: ViraInputType;
-        }> &
-            SharedTextInputElementInputs
-    >
->()({
+export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
-        'vira-input-action-button-color': '#aaaaaa',
-
-        'vira-input-clear-button-hover-color': '#ff0000',
-        'vira-input-clear-button-active-color': '#b30000',
-
-        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
-        'vira-input-show-password-button-hover-color': '#0a89ff',
-        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
-        'vira-input-show-password-button-active-color': '#0261ba',
-
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles: ({ hostClasses, cssVars }) => {
+        return css `
             :host {
                 position: relative;
                 display: inline-flex;
@@ -166,7 +120,7 @@ export const ViraInput = defineViraElement<
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -186,7 +140,7 @@ export const ViraInput = defineViraElement<
                 align-items: center;
                 position: relative;
                 padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 background-color: ${viraFormCssVars['vira-form-background-color'].value};
                 /*
                     Border colors are actually applied via the .wrapper-border class. However, we must
@@ -217,19 +171,19 @@ export const ViraInput = defineViraElement<
 
                 &:focus:focus-visible:not([disabled]) ~ .focus-border {
                     ${createFocusStyles({
-                        elementBorderSize: 0,
-                        noNesting: true,
-                    })}
+            elementBorderSize: 0,
+            noNesting: true,
+        })}
                 }
             }
 
             ::selection {
                 background: ${viraFormCssVars['vira-form-text-selection-color']
-                    .value}; /* WebKit/Blink Browsers */
+            .value}; /* WebKit/Blink Browsers */
             }
             ::-moz-selection {
                 background: ${viraFormCssVars['vira-form-text-selection-color']
-                    .value}; /* Gecko Browsers */
+            .value}; /* Gecko Browsers */
             }
 
             input:placeholder-shown {
@@ -256,28 +210,28 @@ export const ViraInput = defineViraElement<
 
             .clear-x-button,
             .show-password-button {
-                color: ${cssVars['vira-input-action-button-color'].value};
+                color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             }
 
             .clear-x-button:hover {
-                color: ${cssVars['vira-input-clear-button-hover-color'].value};
+                color: ${viraFormCssVars['vira-form-error-color'].value};
             }
 
             .clear-x-button:active {
-                color: ${cssVars['vira-input-clear-button-active-color'].value};
+                color: ${viraFormCssVars['vira-form-error-active-color'].value};
             }
 
             .show-password-button:hover {
-                color: ${cssVars['vira-input-show-password-button-hover-color'].value};
+                color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
             }
 
             .show-password-button:active {
-                color: ${cssVars['vira-input-show-password-button-active-color'].value};
+                color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
             }
 
             ${hostClasses['vira-input-error'].selector} {
                 & .wrapper-border {
-                    border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                    border-color: ${viraFormCssVars['vira-form-error-color'].value};
                 }
             }
 
@@ -307,13 +261,13 @@ export const ViraInput = defineViraElement<
          * Fires whenever a user input created a new value. Does not fire if all input letters are
          * filtered out due to input restrictions.
          */
-        valueChange: defineElementEvent<string>(),
+        valueChange: defineElementEvent(),
         /**
          * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
          * the user why their input did not propagate if it was blocked. This does not fire for text
          * that was blocked out of programmatic "value" property assignments.
          */
-        inputBlocked: defineElementEvent<string>(),
+        inputBlocked: defineElementEvent(),
     },
     state() {
         return {
@@ -327,69 +281,56 @@ export const ViraInput = defineViraElement<
         };
     },
     hostClasses: {
-        'vira-input-disabled': ({inputs}) => !!inputs.disabled,
-        'vira-input-fit-text': ({inputs}) => !!inputs.fitText,
-        'vira-input-clear-button-shown': ({inputs}) => !!inputs.showClearButton,
-        'vira-input-error': ({inputs}) => !!inputs.hasError,
+        'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
+        'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
+        'vira-input-error': ({ inputs }) => !!inputs.hasError,
     },
-    render: ({inputs, dispatch, state, updateState, events, host}) => {
-        const {filtered: filteredValue} = filterTextInputValue({
+    render: ({ inputs, dispatch, state, updateState, events, host }) => {
+        const { filtered: filteredValue } = filterTextInputValue({
             value: inputs.value,
             allowed: inputs.allowedInputs,
             blocked: inputs.blockedInputs,
         });
-
         const iconTemplate = inputs.icon
-            ? html`
-                  <${ViraIcon.assign({icon: inputs.icon})} class="left-side-icon"></${ViraIcon}>
+            ? html `
+                  <${ViraIcon.assign({ icon: inputs.icon })} class="left-side-icon"></${ViraIcon}>
               `
             : nothing;
-
         const forcedInputWidthStyles = inputs.fitText
-            ? css`
+            ? css `
                   width: ${state.forcedInputWidth}px;
               `
             : nothing;
-
         const mousedownListener = listen('mousedown', (event) => {
             const eventTarget = extractEventTarget(event, HTMLElement, {
                 useOriginalTarget: true,
             });
-            const inputElement = assertWrap.instanceOf(
-                host.shadowRoot.querySelector('input'),
-                HTMLInputElement,
-            );
-
+            const inputElement = assertWrap.instanceOf(host.shadowRoot.querySelector('input'), HTMLInputElement);
             if (eventTarget !== inputElement) {
                 event.preventDefault();
                 inputElement.focus();
             }
         });
-
-        const shouldBlockBrowserHelps =
-            inputs.disableBrowserHelps ||
+        const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
             /**
              * Some browsers leaks passwords with their browser helps (like Chrome with
              * spellchecking).
              */
             inputs.type === ViraInputType.Password;
-
-        const inputTemplate = html`
+        const inputTemplate = html `
             <span class="input-wrapper" ${inputs.label ? nothing : mousedownListener}>
                 ${iconTemplate}
-                ${renderIf(
-                    !!inputs.fitText,
-                    html`
+                ${renderIf(!!inputs.fitText, html `
                         <span
                             class="size-span"
-                            ${onResize(({contentRect}) => {
-                                updateState({forcedInputWidth: contentRect.width});
-                            })}
+                            ${onResize(({ contentRect }) => {
+            updateState({ forcedInputWidth: contentRect.width });
+        })}
                         >
                             <pre>${filteredValue || inputs.placeholder || nothing}</pre>
                         </span>
-                    `,
-                )}
+                    `)}
 
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
@@ -404,70 +345,61 @@ export const ViraInput = defineViraElement<
                     ?disabled=${inputs.disabled}
                     .value=${filteredValue}
                     ${listen('input', (event) => {
-                        textInputListener({
-                            inputs,
-                            previousValue: filteredValue,
-                            event,
-                            inputBlockedCallback(blockedInput) {
-                                dispatch(new events.inputBlocked(blockedInput));
-                            },
-                            newValueCallback(newValue) {
-                                dispatch(new events.valueChange(newValue));
-                            },
-                        });
-                    })}
+            textInputListener({
+                inputs,
+                previousValue: filteredValue,
+                event,
+                inputBlockedCallback(blockedInput) {
+                    dispatch(new events.inputBlocked(blockedInput));
+                },
+                newValueCallback(newValue) {
+                    dispatch(new events.valueChange(newValue));
+                },
+            });
+        })}
                     placeholder=${ifDefined(inputs.placeholder || undefined)}
                     ${attributes(inputs.attributePassthrough)}
                 />
 
-                ${renderIf(
-                    !!(inputs.showClearButton && inputs.value),
-                    html`
+                ${renderIf(!!(inputs.showClearButton && inputs.value), html `
                         <button
                             class="clear-x-button"
                             title="clear"
                             ${listen('mousedown', (event) => {
-                                event.stopImmediatePropagation();
-                                event.preventDefault();
-                            })}
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        })}
                             ${listen('click', () => {
-                                if (inputs.disabled) {
-                                    return;
-                                }
-                                dispatch(new events.valueChange(''));
-                            })}
+            if (inputs.disabled) {
+                return;
+            }
+            dispatch(new events.valueChange(''));
+        })}
                         >
-                            <${ViraIcon.assign({icon: CloseX24Icon})}></${ViraIcon}>
+                            <${ViraIcon.assign({ icon: CloseX24Icon })}></${ViraIcon}>
                         </button>
-                    `,
-                )}
-                ${renderIf(
-                    inputs.type === ViraInputType.Password,
-                    html`
+                    `)}
+                ${renderIf(inputs.type === ViraInputType.Password, html `
                         <button
                             class="show-password-button"
                             title="show password"
                             ${listen('mousedown', (event) => {
-                                /** Prevent focus of the input. */
-                                event.stopImmediatePropagation();
-                                event.preventDefault();
-                            })}
+            /** Prevent focus of the input. */
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        })}
                             ${listen('click', () => {
-                                updateState({showPassword: !state.showPassword});
-                            })}
+            updateState({ showPassword: !state.showPassword });
+        })}
                         >
                             <${ViraIcon.assign({
-                                icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
-                            })}></${ViraIcon}>
+            icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
+        })}></${ViraIcon}>
                         </button>
-                    `,
-                )}
-                ${renderIf(
-                    !!inputs.suffix,
-                    html`
+                    `)}
+                ${renderIf(!!inputs.suffix, html `
                         <div class="suffix">${inputs.suffix}</div>
-                    `,
-                )}
+                    `)}
 
                 <!--
                     These separate style elements are necessary so that we can select them as
@@ -479,27 +411,22 @@ export const ViraInput = defineViraElement<
                 <div class="border-style wrapper-border"></div>
             </span>
         `;
-
         if (inputs.label) {
-            return html`
+            return html `
                 <label for=${state.randomId} ${mousedownListener}>
                     <span class="input-label">${inputs.label}</span>
                     ${inputTemplate}
                 </label>
             `;
-        } else {
+        }
+        else {
             return inputTemplate;
         }
     },
 });
-
-function calculateEffectiveInputType(
-    type: ViraInputType | undefined,
-    showPassword: boolean,
-): ViraInputType {
+function calculateEffectiveInputType(type, showPassword) {
     if (type === ViraInputType.Password && showPassword) {
         return ViraInputType.Default;
     }
-
     return type || ViraInputType.Default;
 }

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

@@ -0,0 +1,73 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { type SpaRoute, type SpaRouter } from 'spa-router-vir';
+/**
+ * The route properties required for using {@link ViraLink} with a route.
+ *
+ * @category Internal
+ */
+export type ViraLinkRoute = Readonly<{
+    route: SpaRoute<any, any, any>;
+    router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
+    scrollToTop?: boolean;
+}>;
+/**
+ * A hyperlink wrapper element that can be configured to emit route change events rather than just
+ * being a raw link.
+ *
+ * @category Link
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-link
+ */
+export declare const ViraLink: import("element-vir").DeclarativeElementDefinition<"vira-link", (((Required<Pick<{
+    /**
+     * A full raw URL link that will navigate the current window away or open a new tab. If this
+     * property is provided for the inputs, don't provide a route property.
+     */
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    /**
+     * A route that'll change that current page without navigating the window. If this property
+     * is provided for the inputs, don't provide a link property.
+     */
+    route: ViraLinkRoute;
+}, "link">> & Partial<Record<"route", never>>) | (Required<Pick<{
+    /**
+     * A full raw URL link that will navigate the current window away or open a new tab. If this
+     * property is provided for the inputs, don't provide a route property.
+     */
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    /**
+     * A route that'll change that current page without navigating the window. If this property
+     * is provided for the inputs, don't provide a link property.
+     */
+    route: ViraLinkRoute;
+}, "route">> & Partial<Record<"link", never>>)) & Omit<{
+    /**
+     * A full raw URL link that will navigate the current window away or open a new tab. If this
+     * property is provided for the inputs, don't provide a route property.
+     */
+    link: {
+        url: string;
+        newTab: boolean;
+    };
+    /**
+     * A route that'll change that current page without navigating the window. If this property
+     * is provided for the inputs, don't provide a link property.
+     */
+    route: ViraLinkRoute;
+}, "link" | "route">) & PartialWithUndefined<{
+    /** Styles that will be applied directly to the inner elements. */
+    stylePassthrough: Readonly<PartialWithUndefined<{
+        a: CSSResult;
+    }>>;
+    /** Attributes that will be applied directly to the inner elements. */
+    attributePassthrough: Readonly<PartialWithUndefined<{
+        a: AttributeValues;
+    }>>;
+}>, {}, {}, "vira-link-", "vira-link-", readonly [], readonly []>;

package/{src/elements/vira-link.element.ts → dist/elements/vira-link.element.js}

@@ -1,28 +1,6 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {
-    attributes,
-    css,
-    html,
-    ifDefined,
-    listen,
-    type AttributeValues,
-    type CSSResult,
-} from 'element-vir';
-import {type SpaRoute, type SpaRouter} from 'spa-router-vir';
-import {type RequireExactlyOne} from 'type-fest';
-import {defineViraElement} from './define-vira-element.js';
-
-/**
- * The route properties required for using {@link ViraLink} with a route.
- *
- * @category Internal
- */
-export type ViraLinkRoute = Readonly<{
-    route: SpaRoute<any, any, any>;
-    router: Pick<SpaRouter<any, any, any>, 'createRouteUrl' | 'setRouteOnDirectNavigation'>;
-    scrollToTop?: boolean;
-}>;
-
+import { attributes, css, html, ifDefined, listen, } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
  * being a raw link.
@@ -31,34 +9,9 @@ export type ViraLinkRoute = Readonly<{
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-link
  */
-export const ViraLink = defineViraElement<
-    RequireExactlyOne<{
-        /**
-         * A full raw URL link that will navigate the current window away or open a new tab. If this
-         * property is provided for the inputs, don't provide a route property.
-         */
-        link: {
-            url: string;
-            newTab: boolean;
-        };
-        /**
-         * A route that'll change that current page without navigating the window. If this property
-         * is provided for the inputs, don't provide a link property.
-         */
-        route: ViraLinkRoute;
-    }> &
-        PartialWithUndefined<{
-            /** Styles that will be applied directly to the inner elements. */
-            stylePassthrough: Readonly<PartialWithUndefined<{a: CSSResult}>>;
-            /** Attributes that will be applied directly to the inner elements. */
-            attributePassthrough: Readonly<PartialWithUndefined<{a: AttributeValues}>>;
-        }>
->()({
+export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
-    cssVars: {
-        'vira-link-hover-color': 'currentColor',
-    },
-    styles: ({cssVars}) => css`
+    styles: css `
         :host {
             display: inline;
             text-decoration: underline;
@@ -75,23 +28,21 @@ export const ViraLink = defineViraElement<
         }
 
         :host(:hover) a,
-        a:hover,
+        a:hover {
+            color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+        }
+
         :host(:active) a,
         a:active {
-            color: ${cssVars['vira-link-hover-color'].value};
+            color: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
         }
     `,
-    render({inputs}) {
-        function clickCallback(event: MouseEvent) {
+    render({ inputs }) {
+        function clickCallback(event) {
             if (!inputs.route) {
                 return;
             }
-
-            const routed = inputs.route.router.setRouteOnDirectNavigation(
-                inputs.route.route,
-                event,
-            );
-
+            const routed = inputs.route.router.setRouteOnDirectNavigation(inputs.route.route, event);
             if (routed && inputs.route.scrollToTop) {
                 window.scrollTo({
                     left: 0,
@@ -100,10 +51,9 @@ export const ViraLink = defineViraElement<
                 });
             }
         }
-
         if (inputs.link?.newTab) {
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
-            return html`
+            return html `
                 <a
                     href=${inputs.link.url}
                     target="_blank"
@@ -114,13 +64,13 @@ export const ViraLink = defineViraElement<
                     <slot></slot>
                 </a>
             `;
-        } else {
+        }
+        else {
             const linkUrl = inputs.link
                 ? inputs.link.url
                 : inputs.route.router.createRouteUrl(inputs.route.route);
-
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
-            return html`
+            return html `
                 <a
                     href=${linkUrl}
                     rel="noopener noreferrer"

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

@@ -0,0 +1,39 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A modal element that uses the built-in `dialog` element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-modal
+ */
+export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<"vira-modal", Readonly<{
+    open: boolean;
+} & PartialWithUndefined<{
+    /** If this isn't set, make sure to use the modal title slot to fill it in. */
+    modalTitle: string;
+    /**
+     * If `true`, the following conditions trigger the modal to close:
+     *
+     * - The user clicks the "x" close button
+     * - The `open` input is set to `false`
+     *
+     * If set to `false` (the default), the following conditions trigger the modal to close:
+     *
+     * - The user clicks outside of the modal
+     * - The user presses the "Escape" key
+     * - The user clicks the "x" close button
+     * - The `open` input is set to `false`
+     *
+     * @default false
+     */
+    blockLightDismissal: boolean;
+    modalSubtitle: string;
+    isMobileSize: boolean;
+}>>, {
+    dialogElement: HTMLDialogElement | undefined;
+    contentElement: HTMLDivElement | undefined;
+    previousOpenValue: undefined | boolean;
+    /** Remove listeners. */
+    cleanup: undefined | (() => void);
+}, {
+    modalClose: import("element-vir").DefineEvent<void>;
+}, "vira-modal-phone-size", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;