vira 28.19.6 → 29.0.0

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

@@ -1,81 +1,48 @@
-import {assertWrap} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-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';
-
+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 { viraFormCssVars } from '../styles/form-styles.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',
-] 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<
-    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;
-        }>
-    >
->()({
+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. */
-            cleanup: undefined as undefined | (() => void),
+            cleanup: undefined,
         };
     },
-    cleanup({state}) {
+    cleanup({ state }) {
         state.cleanup?.();
     },
     hostClasses: {
-        'vira-modal-phone-size': ({inputs}) => !!inputs.isMobileSize,
+        '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`
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             display: contents;
             min-width: 280px;
@@ -102,7 +69,7 @@ export const ViraModal = defineViraElement<
                 display: flex;
             }
             &::backdrop {
-                background: ${cssVars['vira-modal-backdrop-color'].value};
+                background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
                 backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
             }
 
@@ -130,7 +97,7 @@ export const ViraModal = defineViraElement<
 
                         & sub {
                             font-size: 16px;
-                            color: ${cssVars['vira-modal-subtitle-color'].value};
+                            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
                         }
                     }
 
@@ -138,12 +105,11 @@ export const ViraModal = defineViraElement<
                         ${noNativeFormStyles};
                         cursor: pointer;
                         padding: 4px;
-                        border-radius: ${cssVars['vira-modal-close-button-hover-radius'].value};
+                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
 
                         &:hover {
-                            background-color: ${cssVars[
-                                'vira-modal-close-button-hover-background-color'
-                            ].value};
+                            background-color: ${viraFormCssVars['vira-form-selection-hover-color']
+        .value};
                         }
 
                         & ${ViraIcon} {
@@ -166,25 +132,22 @@ 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.cleanup?.();
-            updateState({previousOpenValue: inputs.open});
+            updateState({ previousOpenValue: inputs.open });
             if (inputs.open) {
-                const removers = globalEventsToCloseModalOn.map((eventName) =>
-                    listenToGlobal(eventName, () => {
-                        dispatch(new events.modalClose());
-                    }),
-                );
-
+                const removers = globalEventsToCloseModalOn.map((eventName) => listenToGlobal(eventName, () => {
+                    dispatch(new events.modalClose());
+                }));
                 updateState({
                     cleanup: () => {
                         removers.forEach((remover) => remover());
@@ -192,69 +155,65 @@ export const ViraModal = defineViraElement<
                 });
             }
         }
-
         function close() {
             if (inputs.open) {
                 state.cleanup?.();
                 dispatch(new events.modalClose());
             }
         }
-
-        return html`
+        return html `
             <dialog
                 ${onDomCreated((element) => {
-                    updateState({dialogElement: assertWrap.instanceOf(element, HTMLDialogElement)});
-                })}
+            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();
-                    }
-                })}
+            close();
+        })}
+                ${listen('mousedown', (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),
-                        });
-                    })}
+            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`
+            ? 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-overflow-switch.element.d.ts

@@ -0,0 +1,21 @@
+/**
+ * An element switches between two slots based on their overflow.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
+ */
+export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", Readonly<((Required<Pick<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "automaticallySwitch">> & Partial<Record<"useSmall", never>>) | (Required<Pick<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "useSmall">> & Partial<Record<"automaticallySwitch", never>>)) & Omit<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "automaticallySwitch" | "useSmall">>, {
+    isOverflowing: boolean;
+    resizeObserver: undefined | ResizeObserver;
+    /** Called on cleanup to clear all listeners. */
+    cleanup: undefined | (() => void);
+}, {}, "vira-overflow-switch-show-small", "vira-overflow-switch-", readonly ["large", "small"], readonly []>;

package/dist/elements/vira-overflow-switch.element.js

@@ -0,0 +1,110 @@
+import { css, html, onDomCreated } from 'element-vir';
+import { listenTo } from 'typed-event-target';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * An element switches between two slots based on their overflow.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
+ */
+export const ViraOverflowSwitch = defineViraElement()({
+    tagName: 'vira-overflow-switch',
+    slotNames: [
+        /** The child to render, if it fits. */
+        'large',
+        /** The child to render if the large one does not fit. */
+        'small',
+    ],
+    state() {
+        return {
+            isOverflowing: false,
+            resizeObserver: undefined,
+            /** Called on cleanup to clear all listeners. */
+            cleanup: undefined,
+        };
+    },
+    hostClasses: {
+        'vira-overflow-switch-show-small': ({ state, inputs }) => state.isOverflowing || !!inputs.useSmall,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-block;
+            max-width: 100%;
+        }
+
+        .large,
+        .small {
+            display: inline-block;
+        }
+
+        .small {
+            display: none;
+        }
+
+        /**
+         * When the large content overflows, hide it but keep it in layout so we can measure it.
+         * The small content is then shown instead.
+         */
+        ${hostClasses['vira-overflow-switch-show-small'].selector} .large {
+            visibility: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        ${hostClasses['vira-overflow-switch-show-small'].selector} .small {
+            display: inline-block;
+        }
+    `,
+    cleanup({ state, updateState }) {
+        state.cleanup?.();
+        updateState({
+            cleanup: undefined,
+        });
+    },
+    render({ slotNames, updateState, inputs, host, state }) {
+        return html `
+            <div
+                class="large"
+                ${onDomCreated((largeElement) => {
+            if (!inputs.automaticallySwitch) {
+                return;
+            }
+            const overflowParams = {
+                elementToTest: largeElement,
+                host,
+                updateState,
+            };
+            const resizeObserver = new ResizeObserver(() => {
+                updateOverflowing(overflowParams);
+            });
+            resizeObserver.observe(host);
+            /**
+             * Also observe the large slot wrapper itself in case its own layout changes
+             * without host resizing.
+             */
+            resizeObserver.observe(largeElement);
+            const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
+                updateOverflowing(overflowParams);
+            });
+            /** Initial measurement: defer until after first layout. */
+            updateOverflowing(overflowParams);
+            state.cleanup?.();
+            updateState({
+                cleanup() {
+                    resizeObserver.disconnect();
+                    removeSlotChangeListener();
+                },
+            });
+        })}
+            >
+                <slot name=${slotNames.large}></slot>
+            </div>
+            <div class="small"><slot name=${slotNames.small}></slot></div>
+        `;
+    },
+});
+function updateOverflowing({ elementToTest, host, updateState, }) {
+    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
+    updateState({ isOverflowing });
+}

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", Readonly<{
+    value: number;
+} & PartialWithUndefined<{
+    /** @default 0 */
+    min: number;
+    /** @default 100 */
+    max: number;
+}>>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;

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

@@ -1,8 +1,8 @@
-import {clamp, type PartialWithUndefined} from '@augment-vir/common';
-import {applyAttributes} from 'device-navigation';
-import {css, html} from 'element-vir';
-import {defineViraElement} from './define-vira-element.js';
-
+import { clamp } from '@augment-vir/common';
+import { applyAttributes } from 'device-navigation';
+import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
 /**
  * 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
@@ -12,18 +12,7 @@ import {defineViraElement} from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-progress
  */
-export const ViraProgress = defineViraElement<
-    Readonly<
-        {
-            value: number;
-        } & PartialWithUndefined<{
-            /** @default 0 */
-            min: number;
-            /** @default 100 */
-            max: number;
-        }>
-    >
->()({
+export const ViraProgress = defineViraElement()({
     tagName: 'vira-progress',
     cssVars: {
         /**
@@ -31,10 +20,8 @@ export const ViraProgress = defineViraElement<
          * dimension which creates a perfect pill border radius.
          */
         'vira-progress-border-radius': '99999999px',
-        'vira-progress-background-color': '#eee',
-        'vira-progress-foreground-color': 'dodgerblue',
     },
-    styles: ({cssVars}) => css`
+    styles: ({ cssVars }) => css `
         :host {
             /* Default width that can easily be overridden because it's applied on the host. */
             width: 100px;
@@ -43,7 +30,7 @@ export const ViraProgress = defineViraElement<
             display: inline-flex;
             align-items: center;
             border-radius: ${cssVars['vira-progress-border-radius'].value};
-            color: ${cssVars['vira-progress-foreground-color'].value};
+            color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
             overflow: hidden;
         }
 
@@ -53,34 +40,31 @@ export const ViraProgress = defineViraElement<
         }
 
         .background-bar {
-            background-color: ${cssVars['vira-progress-background-color'].value};
+            background-color: ${viraFormCssVars['vira-form-filled-background-color'].value};
             height: 100%;
             flex-grow: 1;
         }
     `,
-    render({inputs, host}) {
+    render({ inputs, host }) {
         const min = inputs.min || 0;
         const max = inputs.max || 100;
         const totalRange = max - min;
         const value = inputs.value - min;
-
-        const percentFull = clamp(Math.round((value / totalRange) * 100), {min: 0, max: 100});
-
+        const percentFull = clamp(Math.round((value / totalRange) * 100), { min: 0, max: 100 });
         applyAttributes(host, {
             'aria-valuemin': inputs.min,
             'aria-valuemax': inputs.max,
             'aria-valuenow': inputs.value,
             'aria-role': 'progressbar',
         });
-
-        return html`
+        return html `
             <div
                 class="progress-bar"
                 style=${percentFull
-                    ? css`
+            ? css `
                           width: ${percentFull}%;
                       `
-                    : css`
+            : css `
                           display: none;
                       `}
             ></div>

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

@@ -0,0 +1,48 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues } from 'element-vir';
+import { type ViraIconSvg } from '../icons/index.js';
+/**
+ * Options for {@link ViraSelect}.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export type ViraSelectOption = {
+    /** A value or id, used to keep track of which option is selected. */
+    value: string;
+    label: string;
+} & PartialWithUndefined<{
+    disabled: boolean;
+}>;
+/**
+ * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", Readonly<{
+    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    /** The currently selected option value. */
+    value: undefined | string;
+} & PartialWithUndefined<{
+    icon: Readonly<ViraIconSvg>;
+    placeholder: string;
+    label: string;
+    disabled: boolean;
+    attributePassthrough: Readonly<PartialWithUndefined<{
+        label: AttributeValues;
+        select: AttributeValues;
+        option: AttributeValues;
+    }>>;
+    hasError: boolean;
+}>>, {
+    /**
+     * Used to couple the label and select together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    valueChange: import("element-vir").DefineEvent<string>;
+}, "vira-select-disabled" | "vira-select-error", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;