vira 28.1.0 → 28.2.0

package/dist/elements/index.d.ts

@@ -15,4 +15,5 @@ export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';
 export * from './vira-link.element.js';
+export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';

package/dist/elements/index.js

@@ -15,4 +15,5 @@ export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 export * from './vira-input.element.js';
 export * from './vira-link.element.js';
+export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';

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-color" | "vira-modal-backdrop-filter" | "vira-modal-subtitle-color" | "vira-modal-close-button-hover-radius" | "vira-modal-close-button-hover-background-color", readonly ["modalTitle"], readonly []>;

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

@@ -0,0 +1,223 @@
+import { assertWrap } from '@augment-vir/assert';
+import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
+import { listenToGlobal } from 'typed-event-target';
+import { X24Icon } from '../icons/icon-svgs/x-24.icon.js';
+import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
+import { viraShadows } from '../styles/shadows.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+const globalEventsToCloseModalOn = [
+    'pagehide',
+    'pageshow',
+    'popstate',
+];
+/**
+ * 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()({
+    tagName: 'vira-modal',
+    events: {
+        modalClose: defineElementEvent(),
+    },
+    state() {
+        return {
+            dialogElement: undefined,
+            contentElement: undefined,
+            previousOpenValue: undefined,
+            /** Remove listeners. */
+            cleanup: undefined,
+        };
+    },
+    cleanup({ state }) {
+        state.cleanup?.();
+    },
+    hostClasses: {
+        'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
+    },
+    slotNames: ['modalTitle'],
+    cssVars: {
+        'vira-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
+        'vira-modal-backdrop-filter': 'blur(3px)',
+        'vira-modal-subtitle-color': '#7E7E7E',
+        'vira-modal-close-button-hover-radius': '8px',
+        'vira-modal-close-button-hover-background-color': '#E4E4E4',
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            display: contents;
+            min-width: 280px;
+            border-radius: 16px;
+        }
+
+        h1 {
+            ${noNativeSpacing};
+        }
+
+        dialog {
+            border: none;
+            flex-direction: column;
+            border-radius: inherit;
+            padding: 0;
+            overflow: hidden;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: calc(100dvw - 100px);
+            max-height: calc(100dvh - 100px);
+            ${viraShadows.modal}
+
+            &[open] {
+                display: flex;
+            }
+            &::backdrop {
+                background: ${cssVars['vira-modal-backdrop-color'].value};
+                backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
+            }
+
+            & .modal-content-wrapper {
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+
+                & .header {
+                    padding: 16px 24px;
+                    display: flex;
+                    gap: 16px;
+                    align-items: flex-start;
+
+                    & .header-text-wrapper {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 4px;
+                        align-self: center;
+                        margin-right: auto;
+
+                        & h1 {
+                            font-size: 24px;
+                        }
+
+                        & sub {
+                            font-size: 16px;
+                            color: ${cssVars['vira-modal-subtitle-color'].value};
+                        }
+                    }
+
+                    & button.close {
+                        ${noNativeFormStyles};
+                        cursor: pointer;
+                        padding: 4px;
+                        border-radius: ${cssVars['vira-modal-close-button-hover-radius'].value};
+
+                        &:hover {
+                            background-color: ${cssVars['vira-modal-close-button-hover-background-color'].value};
+                        }
+
+                        & ${ViraIcon} {
+                            display: flex;
+                        }
+                    }
+                }
+                & .body {
+                    padding: 16px 24px;
+                    overflow: auto;
+                    overscroll-behavior: contain;
+                }
+            }
+        }
+
+        ${hostClasses['vira-modal-phone-size'].selector} {
+            & dialog {
+                width: 100dvw;
+                max-width: 100dvw;
+            }
+        }
+    `,
+    render({ inputs, state, updateState, events, dispatch, slotNames }) {
+        if (state.dialogElement && inputs.open !== state.dialogElement.open) {
+            if (inputs.open) {
+                state.dialogElement.showModal();
+            }
+            else {
+                state.dialogElement.close();
+            }
+        }
+        if (state.previousOpenValue !== inputs.open) {
+            state.cleanup?.();
+            updateState({ previousOpenValue: inputs.open });
+            if (inputs.open) {
+                const removers = globalEventsToCloseModalOn.map((eventName) => listenToGlobal(eventName, () => {
+                    dispatch(new events.modalClose());
+                }));
+                updateState({
+                    cleanup: () => {
+                        removers.forEach((remover) => remover());
+                    },
+                });
+            }
+        }
+        function close() {
+            if (inputs.open) {
+                state.cleanup?.();
+                dispatch(new events.modalClose());
+            }
+        }
+        return html `
+            <dialog
+                ${onDomCreated((element) => {
+            updateState({ dialogElement: assertWrap.instanceOf(element, HTMLDialogElement) });
+        })}
+                ${listen('close', () => {
+            close();
+        })}
+                ${listen('click', (event) => {
+            if (state.contentElement &&
+                !event.composedPath().includes(state.contentElement) &&
+                !inputs.blockLightDismissal) {
+                /** Background click. */
+                close();
+            }
+        })}
+            >
+                <div
+                    class="modal-content-wrapper"
+                    ${onDomCreated((element) => {
+            updateState({
+                contentElement: assertWrap.instanceOf(element, HTMLDivElement),
+            });
+        })}
+                >
+                    <div class="header">
+                        <div class="header-text-wrapper">
+                            <h1><slot name=${slotNames.modalTitle}>${inputs.modalTitle}</slot></h1>
+                            ${inputs.modalSubtitle
+            ? html `
+                                      <sub>${inputs.modalSubtitle}</sub>
+                                  `
+            : nothing}
+                        </div>
+                        <button
+                            class="close"
+                            aria-label="Close"
+                            ${listen('click', () => {
+            state.dialogElement?.close();
+        })}
+                        >
+                            <${ViraIcon.assign({
+            icon: X24Icon,
+        })}></${ViraIcon}>
+                        </button>
+                    </div>
+                    ${inputs.open
+            ? html `
+                              <div class="body">
+                                  <slot></slot>
+                              </div>
+                          `
+            : nothing}
+                </div>
+            </dialog>
+        `;
+    },
+});

package/dist/icons/icon-svgs/x-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A plain X icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/x24icon
+ */
+export declare const X24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/x-24.icon.js

@@ -0,0 +1,29 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A plain X icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/x24icon
+ */
+export const X24Icon = defineIcon({
+    name: 'X24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+        >
+            <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -31,6 +31,7 @@ export * from './icon-svgs/status-success-24.icon.js';
 export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
+export * from './icon-svgs/x-24.icon.js';
 /**
  * All icons within vira by name.
  *
@@ -67,4 +68,5 @@ export declare const allIconsByName: {
     readonly StatusUnknown24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusWarning24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Upload24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly X24Icon: import("./icon-svg.js").ViraIconSvg;
 };

package/dist/icons/index.js

@@ -29,6 +29,7 @@ import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon.js';
 import { StatusUnknown24Icon } from './icon-svgs/status-unknown-24.icon.js';
 import { StatusWarning24Icon } from './icon-svgs/status-warning-24.icon.js';
 import { Upload24Icon } from './icon-svgs/upload-24.icon.js';
+import { X24Icon } from './icon-svgs/x-24.icon.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './icon-svgs/bell-24.icon.js';
@@ -61,6 +62,7 @@ export * from './icon-svgs/status-success-24.icon.js';
 export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
+export * from './icon-svgs/x-24.icon.js';
 /**
  * All icons within vira by name.
  *
@@ -97,4 +99,5 @@ export const allIconsByName = {
     StatusUnknown24Icon,
     StatusWarning24Icon,
     Upload24Icon,
+    X24Icon,
 };

package/dist/styles/shadows.d.ts

@@ -1,4 +1,13 @@
 import { type CSSResult } from 'element-vir';
+/**
+ * CSS Vars for shadows.
+ *
+ * @category Styles
+ */
+export declare const shadowCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'menu-shadow-color': "#e2e2e2";
+    readonly 'modal-shadow-color': "#bfbfbf";
+}>;
 /**
  * CSS chunks for default Vira shadow styles.
  *
@@ -7,4 +16,5 @@ import { type CSSResult } from 'element-vir';
 export declare const viraShadows: {
     readonly menuShadow: CSSResult;
     readonly menuShadowReversed: CSSResult;
+    readonly modal: CSSResult;
 };

package/dist/styles/shadows.js

@@ -1,5 +1,14 @@
 import { css } from 'element-vir';
-const shadowColor = css `#e2e2e2`;
+import { defineCssVars } from 'lit-css-vars';
+/**
+ * CSS Vars for shadows.
+ *
+ * @category Styles
+ */
+export const shadowCssVars = defineCssVars({
+    'menu-shadow-color': '#e2e2e2',
+    'modal-shadow-color': '#bfbfbf',
+});
 /**
  * CSS chunks for default Vira shadow styles.
  *
@@ -7,17 +16,20 @@ const shadowColor = css `#e2e2e2`;
  */
 export const viraShadows = {
     menuShadow: css `
-        filter: drop-shadow(0px 5px 5px ${shadowColor});
+        filter: drop-shadow(0px 5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
     menuShadowReversed: css `
-        filter: drop-shadow(0px -5px 5px ${shadowColor});
+        filter: drop-shadow(0px -5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
+    modal: css `
+        box-shadow: 0 20px 60px ${shadowCssVars['modal-shadow-color'].value};
+    `,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.1.0",
+    "version": "28.2.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,21 +38,21 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.45.0",
-        "@augment-vir/common": "^31.45.0",
-        "@augment-vir/web": "^31.45.0",
+        "@augment-vir/assert": "^31.47.0",
+        "@augment-vir/common": "^31.47.0",
+        "@augment-vir/web": "^31.47.0",
         "colorjs.io": "^0.5.2",
         "date-vir": "^8.0.0",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.1.2",
-        "page-active": "^1.0.2",
+        "page-active": "^1.0.3",
         "spa-router-vir": "^6.3.1",
         "type-fest": "^5.1.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.45.0",
+        "@augment-vir/test": "^31.47.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",