vira 32.0.0-beta.0 → 32.1.0

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

@@ -0,0 +1,78 @@
+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;
+    }>>;
+    /** If set to true, internal link styles are not applied. */
+    disableLinkStyles: boolean;
+}>, {
+    /** Removes event listeners registered during init. */
+    cleanupListeners: undefined | (() => void);
+}, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;

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

@@ -1,30 +1,8 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined, type RequireExactlyOne} 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 {listenTo} from 'typed-event-target';
-import {viraTheme} from '../styles/vira-color-theme.js';
-import {defineViraElement} from '../util/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 { assertWrap } from '@augment-vir/assert';
+import { attributes, css, html, ifDefined, listen, } from 'element-vir';
+import { listenTo } from 'typed-event-target';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
  * being a raw link.
@@ -33,43 +11,21 @@ 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}>>;
-            /** If set to true, internal link styles are not applied. */
-            disableLinkStyles: boolean;
-        }>
->()({
+export const ViraLink = defineViraElement()({
     tagName: 'vira-link',
     state() {
         return {
             /** Removes event listeners registered during init. */
-            cleanupListeners: undefined as undefined | (() => void),
+            cleanupListeners: undefined,
         };
     },
     hostClasses: {
-        'vira-link-link-styles': ({inputs}) => !inputs.disableLinkStyles,
+        'vira-link-link-styles'({ inputs }) {
+            return !inputs.disableLinkStyles;
+        },
     },
-    styles: ({hostClasses}) => {
-        return css`
+    styles({ hostClasses }) {
+        return css `
             :host {
                 display: inline;
                 text-decoration: underline;
@@ -98,26 +54,18 @@ export const ViraLink = defineViraElement<
             }
         `;
     },
-    init({state, updateState, host}) {
+    init({ state, updateState, host }) {
         state.cleanupListeners?.();
-
         let propagating = false;
-
         const listenerRemovers = [
             listenTo(host, 'click', (event) => {
                 if (propagating) {
                     return;
                 }
-
-                const anchorElement = assertWrap.instanceOf(
-                    host.shadowRoot.querySelector('a'),
-                    HTMLAnchorElement,
-                );
-
+                const anchorElement = assertWrap.instanceOf(host.shadowRoot.querySelector('a'), HTMLAnchorElement);
                 if (event.composedPath().includes(anchorElement)) {
                     return;
                 }
-
                 event.preventDefault();
                 event.stopPropagation();
                 propagating = true;
@@ -125,30 +73,24 @@ export const ViraLink = defineViraElement<
                 propagating = false;
             }),
         ];
-
         updateState({
-            cleanupListeners: () => {
+            cleanupListeners() {
                 listenerRemovers.forEach((remover) => remover());
             },
         });
     },
-    cleanup({state, updateState}) {
+    cleanup({ state, updateState }) {
         state.cleanupListeners?.();
         updateState({
             cleanupListeners: undefined,
         });
     },
-    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,
@@ -157,10 +99,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"
@@ -171,13 +112,13 @@ export const ViraLink = defineViraElement<
                     <slot></slot>
                 </a>
             `;
-        } else {
-            const linkUrl: string = inputs.link
+        }
+        else {
+            const linkUrl = inputs.link
                 ? inputs.link.url
                 : inputs.route.router.createRouteUrl(inputs.route.route).url;
-
             /** 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,40 @@
+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-${string}`, {
+    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;
+    noContentPadding: boolean;
+}>, {
+    dialogElement: HTMLDialogElement | undefined;
+    contentElement: HTMLDivElement | undefined;
+    previousOpenValue: undefined | boolean;
+    /** Remove listeners. */
+    cleanupListeners: undefined | (() => void);
+}, {
+    modalClose: import("element-vir").DefineElementEvent<void>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -1,84 +1,59 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {colorCss} from '@electrovir/color';
-import {css, defineElementEvent, html, listen, nothing, onDomCreated} from 'element-vir';
-import {themeDefaultKey} from 'theme-vir/dist/color-theme/color-theme.js';
-import {listenToGlobal} from 'typed-event-target';
-import {X24Icon} from '../icons/icon-svgs/24/x-24.icon.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {noNativeFormStyles, noNativeSpacing} from '../styles/native-styles.js';
-import {viraShadows} from '../styles/shadows.js';
-import {viraTheme} from '../styles/vira-color-theme.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {isMouseEventOnScrollbar} from '../util/pop-up-manager.js';
-import {ViraIcon} from './vira-icon.element.js';
-
+import { assertWrap } from '@augment-vir/assert';
+import { colorCss } from '@electrovir/color';
+import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { listenToGlobal } from 'typed-event-target';
+import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
+import { viraShadows } from '../styles/shadows.js';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { isMouseEventOnScrollbar } from '../util/pop-up-manager.js';
+import { ViraIcon } from './vira-icon.element.js';
 const globalEventsToCloseModalOn = [
     'pagehide',
     'pageshow',
     'popstate',
-] as const satisfies (keyof WindowEventMap)[];
-
+];
 /**
  * A modal element that uses the built-in `dialog` element.
  *
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-modal
  */
-export const ViraModal = defineViraElement<
-    {
-        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;
-        noContentPadding: boolean;
-    }>
->()({
+export const ViraModal = defineViraElement()({
     tagName: 'vira-modal',
     events: {
-        modalClose: defineElementEvent<void>(),
+        modalClose: defineElementEvent(),
     },
     state() {
         return {
-            dialogElement: undefined as HTMLDialogElement | undefined,
-            contentElement: undefined as HTMLDivElement | undefined,
-            previousOpenValue: undefined as undefined | boolean,
+            dialogElement: undefined,
+            contentElement: undefined,
+            previousOpenValue: undefined,
             /** Remove listeners. */
-            cleanupListeners: undefined as undefined | (() => void),
+            cleanupListeners: undefined,
         };
     },
-    cleanup({state}) {
+    cleanup({ state }) {
         state.cleanupListeners?.();
     },
     hostClasses: {
-        'vira-modal-phone-size': ({inputs}) => !!inputs.isMobileSize,
-        'vira-modal-no-content-padding': ({inputs}) => !!inputs.noContentPadding,
+        'vira-modal-phone-size'({ inputs }) {
+            return !!inputs.isMobileSize;
+        },
+        'vira-modal-no-content-padding'({ inputs }) {
+            return !!inputs.noContentPadding;
+        },
     },
     slotNames: ['vira-modal-modal-title'],
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
         'vira-modal-border-radius': '8px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 display: contents;
                 min-width: 280px;
@@ -136,7 +111,7 @@ export const ViraModal = defineViraElement<
                             & sub {
                                 font-size: 16px;
                                 color: ${viraFormCssVars['vira-form-secondary-body-foreground']
-                                    .value};
+            .value};
                             }
                         }
 
@@ -148,9 +123,7 @@ export const ViraModal = defineViraElement<
                             border-radius: ${viraFormCssVars['vira-form-radius'].value};
 
                             &:hover {
-                                background-color: ${viraFormCssVars[
-                                    'vira-form-selection-hover-color'
-                                ].value};
+                                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
                             }
 
                             & ${ViraIcon} {
@@ -191,15 +164,15 @@ export const ViraModal = defineViraElement<
             }
         `;
     },
-    render({inputs, state, updateState, events, dispatch, slotNames}) {
+    render({ inputs, state, updateState, events, dispatch, slotNames }) {
         if (state.dialogElement && inputs.open !== state.dialogElement.open) {
             if (inputs.open) {
                 state.dialogElement.showModal();
-            } else {
+            }
+            else {
                 state.dialogElement.close();
             }
         }
-
         if (state.previousOpenValue !== inputs.open) {
             state.cleanupListeners?.();
             updateState({
@@ -208,62 +181,53 @@ export const ViraModal = defineViraElement<
             if (inputs.open) {
                 const removers = globalEventsToCloseModalOn.map((eventName) => {
                     return listenToGlobal(eventName, () => {
-                        dispatch(
-                            new events.modalClose({
-                                detail: undefined,
-                            }),
-                        );
+                        dispatch(new events.modalClose({
+                            detail: undefined,
+                        }));
                     });
                 });
-
                 updateState({
-                    cleanupListeners: () => {
+                    cleanupListeners() {
                         removers.forEach((remover) => remover());
                     },
                 });
             }
         }
-
         function close() {
             if (inputs.open) {
                 state.cleanupListeners?.();
-                dispatch(
-                    new events.modalClose({
-                        detail: undefined,
-                    }),
-                );
+                dispatch(new events.modalClose({
+                    detail: undefined,
+                }));
             }
         }
-
-        return html`
+        return html `
             <dialog
                 ${onDomCreated((element) => {
-                    updateState({
-                        dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
-                    });
-                })}
+            updateState({
+                dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
+            });
+        })}
                 ${listen('close', () => {
-                    close();
-                })}
+            close();
+        })}
                 ${listen('mousedown', (event) => {
-                    if (
-                        state.contentElement &&
-                        !event.composedPath().includes(state.contentElement) &&
-                        !inputs.blockLightDismissal &&
-                        !isMouseEventOnScrollbar(event)
-                    ) {
-                        /** Background click. */
-                        close();
-                    }
-                })}
+            if (state.contentElement &&
+                !event.composedPath().includes(state.contentElement) &&
+                !inputs.blockLightDismissal &&
+                !isMouseEventOnScrollbar(event)) {
+                /** Background click. */
+                close();
+            }
+        })}
             >
                 <div
                     class="modal-content-wrapper"
                     ${onDomCreated((element) => {
-                        updateState({
-                            contentElement: assertWrap.instanceOf(element, HTMLDivElement),
-                        });
-                    })}
+            updateState({
+                contentElement: assertWrap.instanceOf(element, HTMLDivElement),
+            });
+        })}
                 >
                     <div class="header">
                         <div class="header-text-wrapper">
@@ -273,30 +237,30 @@ export const ViraModal = defineViraElement<
                                 </slot>
                             </h1>
                             ${inputs.modalSubtitle
-                                ? html`
+            ? html `
                                       <sub>${inputs.modalSubtitle}</sub>
                                   `
-                                : nothing}
+            : nothing}
                         </div>
                         <button
                             class="close"
                             aria-label="Close"
                             ${listen('click', () => {
-                                state.dialogElement?.close();
-                            })}
+            state.dialogElement?.close();
+        })}
                         >
                             <${ViraIcon.assign({
-                                icon: X24Icon,
-                            })}></${ViraIcon}>
+            icon: X24Icon,
+        })}></${ViraIcon}>
                         </button>
                     </div>
                     ${inputs.open
-                        ? html`
+            ? html `
                               <div class="body">
                                   <slot></slot>
                               </div>
                           `
-                        : nothing}
+            : nothing}
                 </div>
             </dialog>
         `;

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

@@ -0,0 +1,18 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A [`<progress>`](https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/progress)
+ * alternative that supports custom styling in _all_ browsers via CSS vars _and_ prevents background
+ * bleed.
+ *
+ * @category Progress
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-progress
+ */
+export declare const ViraProgress: import("element-vir").DeclarativeElementDefinition<"vira-progress", {
+    value: number;
+} & PartialWithUndefined<{
+    /** @default 0 */
+    min: number;
+    /** @default 100 */
+    max: number;
+}>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-height", readonly [], readonly []>;