vira 31.9.5 → 31.10.0

package/dist/elements/index.d.ts

@@ -8,6 +8,7 @@ export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
+export * from './vira-drawer.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
 export * from './vira-form.element.js';

package/dist/elements/index.js

@@ -8,6 +8,7 @@ export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
+export * from './vira-drawer.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
 export * from './vira-form.element.js';

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

@@ -0,0 +1,23 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A drawer element that slides up from the bottom of the page using the built-in `dialog` element.
+ *
+ * @category Elements
+ */
+export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<"vira-drawer", {
+    open: boolean;
+} & PartialWithUndefined<{
+    /** If this isn't set, make sure to use the drawer title slot to fill it in. */
+    drawerTitle: string;
+}>, {
+    dialogElement: HTMLDialogElement | undefined;
+    contentElement: HTMLDivElement | undefined;
+    previousOpenValue: undefined | boolean;
+    /** Cleans up all listeners that have been attached. */
+    cleanupListeners: undefined | (() => void);
+    isDragging: boolean;
+    dragStartY: number;
+    dragCurrentY: number;
+}, {
+    drawerClose: import("element-vir").DefineEvent<void>;
+}, "vira-drawer-dragging", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;

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

@@ -0,0 +1,295 @@
+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';
+import { listenToGlobal } from 'typed-event-target';
+import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
+import { viraAnimationDurations } from '../styles/durations.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
+import { viraShadows } from '../styles/shadows.js';
+import { noUserSelect } from '../styles/user-select.js';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+const globalEventsToCloseDrawerOn = [
+    'pagehide',
+    'pageshow',
+    'popstate',
+];
+/** Minimum downward drag distance (in pixels) required to close the drawer. */
+const dragCloseThreshold = 30;
+/**
+ * A drawer element that slides up from the bottom of the page using the built-in `dialog` element.
+ *
+ * @category Elements
+ */
+export const ViraDrawer = defineViraElement()({
+    tagName: 'vira-drawer',
+    events: {
+        drawerClose: defineElementEvent(),
+    },
+    state() {
+        return {
+            dialogElement: undefined,
+            contentElement: undefined,
+            previousOpenValue: undefined,
+            /** Cleans up all listeners that have been attached. */
+            cleanupListeners: undefined,
+            isDragging: false,
+            dragStartY: 0,
+            dragCurrentY: 0,
+        };
+    },
+    cleanup({ state }) {
+        state.cleanupListeners?.();
+    },
+    hostClasses: {
+        'vira-drawer-dragging': ({ state }) => state.isDragging,
+    },
+    slotNames: ['drawerTitle'],
+    cssVars: {
+        'vira-drawer-backdrop-filter': 'blur(3px)',
+        'vira-drawer-max-height': '80dvh',
+    },
+    styles: ({ cssVars, hostClasses }) => css `
+        :host {
+            display: contents;
+        }
+
+        ${hostClasses['vira-drawer-dragging'].selector} {
+            ${noUserSelect};
+        }
+
+        h1 {
+            ${noNativeSpacing};
+        }
+
+        dialog {
+            ${colorCss(viraTheme.colors[themeDefaultKey])}
+            border: none;
+            padding: 0;
+            overflow: hidden;
+            position: fixed;
+            inset: auto 0 0 0;
+            margin: 0;
+            width: 100%;
+            max-width: 100%;
+            max-height: ${cssVars['vira-drawer-max-height'].value};
+            border-radius: 16px 16px 0 0;
+            ${viraShadows.modal}
+            transition: transform ${viraAnimationDurations['vira-pretty-animation-duration']
+        .value} ease;
+
+            &[open] {
+                display: flex;
+                flex-direction: column;
+            }
+
+            &::backdrop {
+                background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
+                backdrop-filter: ${cssVars['vira-drawer-backdrop-filter'].value};
+            }
+
+            & .drawer-content-wrapper {
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+
+                & .drag-handle-wrapper {
+                    display: flex;
+                    justify-content: center;
+                    padding: 8px 0 0;
+                    cursor: grab;
+                    touch-action: none;
+
+                    &:active {
+                        cursor: grabbing;
+                    }
+
+                    & .drag-handle {
+                        width: 36px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: ${viraFormCssVars['vira-form-secondary-body-foreground']
+        .value};
+                        opacity: 0.5;
+                    }
+                }
+
+                & .header {
+                    padding: 8px 24px 16px;
+                    display: flex;
+                    gap: 16px;
+                    align-items: flex-start;
+
+                    & .header-text-wrapper {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 4px;
+                        align-self: center;
+                        flex-grow: 1;
+
+                        & h1 {
+                            font-size: 20px;
+                        }
+                    }
+
+                    & button.close {
+                        ${noNativeFormStyles};
+                        cursor: pointer;
+                        padding: 4px;
+                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
+
+                        &:hover {
+                            background-color: ${viraFormCssVars['vira-form-selection-hover-color']
+        .value};
+                        }
+
+                        & ${ViraIcon} {
+                            display: flex;
+                        }
+                    }
+                }
+
+                & .body {
+                    padding: 0 24px 24px;
+                    overflow: auto;
+                    overscroll-behavior: contain;
+                }
+            }
+        }
+    `,
+    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.cleanupListeners?.();
+            updateState({
+                previousOpenValue: inputs.open,
+            });
+            if (inputs.open) {
+                const removers = globalEventsToCloseDrawerOn.map((eventName) => listenToGlobal(eventName, () => {
+                    dispatch(new events.drawerClose());
+                }));
+                updateState({
+                    cleanupListeners: () => {
+                        removers.forEach((remover) => remover());
+                    },
+                });
+            }
+        }
+        function close() {
+            if (inputs.open) {
+                state.cleanupListeners?.();
+                dispatch(new events.drawerClose());
+            }
+        }
+        if (state.dialogElement) {
+            if (state.isDragging) {
+                const dragOffset = Math.max(0, state.dragCurrentY - state.dragStartY);
+                state.dialogElement.style.transform = `translateY(${String(dragOffset)}px)`;
+                state.dialogElement.style.transition = 'none';
+            }
+            else {
+                state.dialogElement.style.transform = '';
+                state.dialogElement.style.transition = '';
+            }
+        }
+        return html `
+            <dialog
+                ${onDomCreated((element) => {
+            updateState({
+                dialogElement: assertWrap.instanceOf(element, HTMLDialogElement),
+            });
+        })}
+                ${listen('close', () => {
+            close();
+        })}
+                ${listen('mousedown', (event) => {
+            if (state.contentElement &&
+                !event.composedPath().includes(state.contentElement)) {
+                close();
+            }
+        })}
+            >
+                <div
+                    class="drawer-content-wrapper"
+                    ${onDomCreated((element) => {
+            updateState({
+                contentElement: assertWrap.instanceOf(element, HTMLDivElement),
+            });
+        })}
+                >
+                    <div
+                        class="drag-handle-wrapper"
+                        ${listen('dblclick', () => {
+            close();
+        })}
+                        ${listen('pointerdown', (event) => {
+            updateState({
+                isDragging: true,
+                dragStartY: event.clientY,
+                dragCurrentY: event.clientY,
+            });
+            function handlePointerMove(moveEvent) {
+                updateState({
+                    dragCurrentY: moveEvent.clientY,
+                });
+            }
+            function handlePointerUp(upEvent) {
+                const dragDistance = upEvent.clientY - state.dragStartY;
+                updateState({
+                    isDragging: false,
+                    dragStartY: 0,
+                    dragCurrentY: 0,
+                });
+                if (dragDistance > dragCloseThreshold) {
+                    close();
+                }
+                listenerRemovers.forEach((remover) => remover());
+            }
+            const listenerRemovers = [
+                listenToGlobal('pointermove', handlePointerMove),
+                listenToGlobal('pointerup', handlePointerUp),
+            ];
+        })}
+                    >
+                        <div class="drag-handle"></div>
+                    </div>
+                    <div class="header">
+                        <div class="header-text-wrapper">
+                            <h1>
+                                <slot name=${slotNames.drawerTitle}>${inputs.drawerTitle}</slot>
+                            </h1>
+                        </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/elements/vira-select.element.d.ts

@@ -1,7 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type AttributeValues } from 'element-vir';
 import { type ViraIconSvg } from '../icons/index.js';
-import { type ViraSelectOption } from '../util/vira-select-option.js';
+import { type ViraSelectOption, type ViraSelectOptionGroup } from '../util/vira-select-option.js';
 /**
  * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
  *
@@ -10,7 +10,7 @@ import { type ViraSelectOption } from '../util/vira-select-option.js';
  * @see https://electrovir.github.io/vira/book/elements/vira-select
  */
 export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", {
-    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    options: ReadonlyArray<Readonly<ViraSelectOption> | Readonly<ViraSelectOptionGroup>>;
     /** The currently selected option value. */
     value: undefined | string;
 } & PartialWithUndefined<{

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

@@ -10,7 +10,20 @@ import { viraFormCssVars } from '../styles/form-styles.js';
 import { viraAnimationDurations } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
+import { isViraSelectOptionGroup, } from '../util/vira-select-option.js';
 import { ViraIcon } from './vira-icon.element.js';
+function renderSelectOption(option, value) {
+    return html `
+        <option
+            ?selected=${option.value === value}
+            aria-label=${option.label}
+            ?disabled=${option.disabled}
+            value=${option.value}
+        >
+            ${option.label}
+        </option>
+    `;
+}
 /**
  * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
  *
@@ -262,24 +275,30 @@ export const ViraSelect = defineViraElement()({
             const selectElement = extractEventTarget(event, HTMLSelectElement);
             const newValue = selectElement.value;
             if (selectElement.value !== value) {
-                selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
+                selectElement.selectedIndex = inputs.options
+                    .flatMap((entry) => {
+                    return isViraSelectOptionGroup(entry)
+                        ? [...entry.options]
+                        : [entry];
+                })
+                    .findIndex((option) => option.value === value);
             }
             dispatch(new events.valueChange(newValue));
         })}
                     ${attributes(inputs.attributePassthrough?.select)}
                 >
                     ${placeholderOptionTemplate}
-                    ${inputs.options.map((option) => {
-            return html `
-                            <option
-                                ?selected=${option.value === value}
-                                aria-label=${option.label}
-                                ?disabled=${option.disabled}
-                                value=${option.value}
-                            >
-                                ${option.label}
-                            </option>
-                        `;
+                    ${inputs.options.map((entry) => {
+            if (isViraSelectOptionGroup(entry)) {
+                return html `
+                                <optgroup label=${entry.groupName}>
+                                    ${entry.options.map((option) => {
+                    return renderSelectOption(option, value);
+                })}
+                                </optgroup>
+                            `;
+            }
+            return renderSelectOption(entry, value);
         })}
                 </select>
                 <!--

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

@@ -79,19 +79,19 @@ const tagColorVariantColors = {
     [ViraColorVariant.Plain]: {
         [ViraEmphasis.Standard]: {
             idle: {
-                backgroundColor: viraTheme.inverse[themeDefaultKey].background,
-                textColor: viraTheme.inverse[themeDefaultKey].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
+                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+                textColor: viraTheme.colors[themeDefaultKey].background,
+                borderColor: viraTheme.colors[themeDefaultKey].foreground,
             },
             hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
+                backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
             },
             active: {
-                backgroundColor: viraTheme.inverse[themeDefaultKey].background,
-                textColor: viraTheme.inverse[themeDefaultKey].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
+                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+                textColor: viraTheme.colors[themeDefaultKey].background,
+                borderColor: viraTheme.colors[themeDefaultKey].foreground,
             },
         },
         [ViraEmphasis.Subtle]: {

package/dist/util/vira-select-option.d.ts

@@ -13,3 +13,19 @@ export type ViraSelectOption = {
 } & PartialWithUndefined<{
     disabled: boolean;
 }>;
+/**
+ * A group of options for `ViraSelect`, rendered as an `<optgroup>`.
+ *
+ * @category Dropdown
+ * @category Elements
+ */
+export type ViraSelectOptionGroup = {
+    groupName: string;
+    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+};
+/**
+ * Type guard to determine if a `ViraSelect` options entry is a group.
+ *
+ * @category Internal
+ */
+export declare function isViraSelectOptionGroup(entry: Readonly<ViraSelectOption> | Readonly<ViraSelectOptionGroup>): entry is Readonly<ViraSelectOptionGroup>;

package/dist/util/vira-select-option.js

@@ -1 +1,8 @@
-export {};
+/**
+ * Type guard to determine if a `ViraSelect` options entry is a group.
+ *
+ * @category Internal
+ */
+export function isViraSelectOptionGroup(entry) {
+    return 'groupName' in entry;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.9.5",
+    "version": "31.10.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",