vira 33.2.0 → 33.4.0

package/dist/directives/drag-reorder.directive.d.ts

@@ -0,0 +1,68 @@
+import { Directive, type PartInfo } from 'element-vir';
+import { type DragReorderManager, type DragReorderMove } from '../util/drag-reorder-manager.js';
+/**
+ * The directive class behind {@link dragReorderHandle}.
+ *
+ * @category Internal
+ */
+export declare class DragReorderHandleDirective extends Directive {
+    protected manager: DragReorderManager | undefined;
+    protected element: HTMLElement | undefined;
+    constructor(partInfo: PartInfo);
+    /** Applies the latest directive arguments. */
+    update(partInfo: PartInfo, [manager]: [DragReorderManager]): undefined;
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(manager: DragReorderManager): undefined;
+}
+/**
+ * Makes the element it is attached to start dragging the row that contains it. That row must be a
+ * direct child of the element that `dragReorderRows` with the same manager is attached to.
+ *
+ * @category Reorder
+ */
+export declare const dragReorderHandle: (manager: DragReorderManager) => import("element-vir").DirectiveResult<typeof DragReorderHandleDirective>;
+/**
+ * The directive class behind {@link dragReorderRows}.
+ *
+ * @category Internal
+ */
+export declare class DragReorderRowsDirective extends Directive {
+    protected manager: DragReorderManager | undefined;
+    protected element: HTMLElement | undefined;
+    constructor(partInfo: PartInfo);
+    /** Applies the latest directive arguments. */
+    update(partInfo: PartInfo, [manager, onReorder,]: [
+        DragReorderManager,
+        (move: Readonly<DragReorderMove>) => void
+    ]): undefined;
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(manager: DragReorderManager, onReorder: (move: Readonly<DragReorderMove>) => void): undefined;
+}
+/**
+ * Marks the element whose direct children are the reorderable rows, and receives every finished
+ * {@link DragReorderMove}. Indexes count those children, so render nothing (not an empty wrapper)
+ * for rows that should not take part.
+ *
+ * @category Reorder
+ */
+export declare const dragReorderRows: (manager: DragReorderManager, onReorder: (move: Readonly<DragReorderMove>) => void) => import("element-vir").DirectiveResult<typeof DragReorderRowsDirective>;
+/**
+ * The directive class behind {@link dragReorderGhost}.
+ *
+ * @category Internal
+ */
+export declare class DragReorderGhostDirective extends Directive {
+    constructor(partInfo: PartInfo);
+    /** Applies the latest directive arguments. */
+    update(partInfo: PartInfo, [manager]: [DragReorderManager]): undefined;
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(manager: DragReorderManager): undefined;
+}
+/**
+ * Turns the element it is attached to into the translucent copy of the dragged row: it is
+ * absolutely positioned over the dragged row and then follows the pointer. Render it only while the
+ * manager's `value.draggedIndex` is set, with a copy of that row inside it.
+ *
+ * @category Reorder
+ */
+export declare const dragReorderGhost: (manager: DragReorderManager) => import("element-vir").DirectiveResult<typeof DragReorderGhostDirective>;

package/dist/directives/drag-reorder.directive.js

@@ -0,0 +1,114 @@
+import { assertWrap } from '@augment-vir/assert';
+import { assertIsElementPartInfo, directive, Directive } from 'element-vir';
+/**
+ * The directive class behind {@link dragReorderHandle}.
+ *
+ * @category Internal
+ */
+export class DragReorderHandleDirective extends Directive {
+    manager;
+    element;
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, 'dragReorderHandle');
+    }
+    /** Applies the latest directive arguments. */
+    update(partInfo, [manager]) {
+        assertIsElementPartInfo(partInfo, 'dragReorderHandle');
+        this.manager = manager;
+        const element = assertWrap.instanceOf(partInfo.element, HTMLElement);
+        if (element !== this.element) {
+            this.element = element;
+            element.draggable = true;
+            element.addEventListener('dragstart', (event) => {
+                this.manager?.startDrag(event, element);
+            });
+            element.addEventListener('dragend', () => this.manager?.endDrag());
+        }
+        return this.render(manager);
+    }
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(manager) {
+        return undefined;
+    }
+}
+/**
+ * Makes the element it is attached to start dragging the row that contains it. That row must be a
+ * direct child of the element that `dragReorderRows` with the same manager is attached to.
+ *
+ * @category Reorder
+ */
+export const dragReorderHandle = directive(DragReorderHandleDirective);
+/**
+ * The directive class behind {@link dragReorderRows}.
+ *
+ * @category Internal
+ */
+export class DragReorderRowsDirective extends Directive {
+    manager;
+    element;
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, 'dragReorderRows');
+    }
+    /** Applies the latest directive arguments. */
+    update(partInfo, [manager, onReorder,]) {
+        assertIsElementPartInfo(partInfo, 'dragReorderRows');
+        this.manager = manager;
+        const element = assertWrap.instanceOf(partInfo.element, HTMLElement);
+        manager.attachRows(element, onReorder);
+        if (element !== this.element) {
+            this.element = element;
+            element.addEventListener('dragover', (event) => this.manager?.dragOver(event));
+            element.addEventListener('drop', (event) => this.manager?.drop(event));
+        }
+        return this.render(manager, onReorder);
+    }
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    render(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    manager, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onReorder) {
+        return undefined;
+    }
+}
+/**
+ * Marks the element whose direct children are the reorderable rows, and receives every finished
+ * {@link DragReorderMove}. Indexes count those children, so render nothing (not an empty wrapper)
+ * for rows that should not take part.
+ *
+ * @category Reorder
+ */
+export const dragReorderRows = directive(DragReorderRowsDirective);
+/**
+ * The directive class behind {@link dragReorderGhost}.
+ *
+ * @category Internal
+ */
+export class DragReorderGhostDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        assertIsElementPartInfo(partInfo, 'dragReorderGhost');
+    }
+    /** Applies the latest directive arguments. */
+    update(partInfo, [manager]) {
+        assertIsElementPartInfo(partInfo, 'dragReorderGhost');
+        manager.attachGhost(assertWrap.instanceOf(partInfo.element, HTMLElement));
+        return this.render(manager);
+    }
+    /** Renders nothing, this directive only attaches behavior to its element. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(manager) {
+        return undefined;
+    }
+}
+/**
+ * Turns the element it is attached to into the translucent copy of the dragged row: it is
+ * absolutely positioned over the dragged row and then follows the pointer. Render it only while the
+ * manager's `value.draggedIndex` is set, with a copy of that row inside it.
+ *
+ * @category Reorder
+ */
+export const dragReorderGhost = directive(DragReorderGhostDirective);

package/dist/directives/index.d.ts

@@ -1,2 +1,3 @@
+export * from './drag-reorder.directive.js';
 export * from './popover.directive.js';
 export * from './tooltip.directive.js';

package/dist/directives/index.js

@@ -1,2 +1,3 @@
+export * from './drag-reorder.directive.js';
 export * from './popover.directive.js';
 export * from './tooltip.directive.js';

package/dist/elements/popover/vira-menu-item.element.d.ts

@@ -19,6 +19,8 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * _always_ be shown, even if `selected` is set to `false`.
      */
     iconOverride: ViraIconSvg;
+    /** Removes the icon entirely, including the space it reserves when not shown. */
+    hideIcon: boolean;
     /**
      * When `true`, activating this item will _not_ close the containing popover.
      *

package/dist/elements/popover/vira-menu-item.element.js

@@ -1,5 +1,5 @@
 import { assertWrap } from '@augment-vir/assert';
-import { css, defineElementEvent, html } from 'element-vir';
+import { css, defineElementEvent, html, nothing } from 'element-vir';
 import { listenTo } from 'typed-event-target';
 import { lucideIcons } from '../../icons/lucide-icons.js';
 import { createSizedIcon } from '../../icons/sized-icon.js';
@@ -241,9 +241,13 @@ export const ViraMenuItem = defineViraElement()({
     },
     render({ inputs }) {
         return html `
-            <${ViraIcon.assign({
-            icon: inputs.iconOverride || selectedCheckIcon,
-        })}></${ViraIcon}>
+            ${inputs.hideIcon
+            ? nothing
+            : html `
+                      <${ViraIcon.assign({
+                icon: inputs.iconOverride || selectedCheckIcon,
+            })}></${ViraIcon}>
+                  `}
             <div class="slot-wrapper">
                 <slot>&nbsp;</slot>
             </div>

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

@@ -7,7 +7,7 @@ import { ChevronUp16Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
-import { noNativeFormStyles, noUserSelect, viraAnimationDurations } from '../styles/index.js';
+import { noNativeFormStyles, noUserSelect, viraAnimationDurations, viraTheme, } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { fuzzyMatch } from '../util/fuzzy-match.js';
 import { renderMenuItemEntries } from '../util/menu-helpers.js';
@@ -149,20 +149,21 @@ export const ViraDropdown = defineViraElement()({
         .option-group-label,
         .no-options {
             ${noUserSelect};
-            /* Aligns with the label text of each ViraMenuItem, past its check icon. */
-            padding: 8px 12px 4px
-                calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 3 + 16px);
-            opacity: 0.6;
             text-align: left;
         }
 
         .option-group-label {
+            color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
+            padding: 8px 12px 4px calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 2);
             font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
         }
 
         .no-options {
             cursor: default;
-            padding-bottom: 8px;
+            opacity: 0.6;
+            /* Aligns with the label text of each ViraMenuItem, past its check icon. */
+            padding: 8px 12px 8px
+                calc(${ViraMenuItem.cssVars['vira-menu-item-icon-gap'].value} * 3 + 16px);
         }
 
         ${ViraMenuItem}.option-group-label {
@@ -335,6 +336,7 @@ export const ViraDropdown = defineViraElement()({
                 ? html `
                       <${ViraMenuItem.assign({
                     disablePointerStyles: true,
+                    hideIcon: true,
                 })}
                           class="option-group-label"
                           ${state.navController ? nav(state.navController) : nothing}

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

@@ -1,4 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
+import { DragReorderManager } from '../util/drag-reorder-manager.js';
 import { type ViraFormField, type ViraFormFields } from '../util/vira-form-fields.js';
 /**
  * A form element.
@@ -44,8 +45,17 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
      * @default false
      */
     isReadonly: boolean;
+    /**
+     * When `true`, each visible field gets a drag handle. Dropping a field emits
+     * `fieldOrderChange` with every field key in its new order. The form does not reorder
+     * `fields` itself: pass them back in the emitted order.
+     *
+     * @default false
+     */
+    isReorderable: boolean;
 }>, {
     lastIsValid: boolean;
+    dragReorder: DragReorderManager;
 }, {
     valueChange: import("element-vir").DefineElementEvent<{
         key: string;
@@ -53,4 +63,10 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
     validChange: import("element-vir").DefineElementEvent<{
         allFieldsAreValid: boolean;
     }>;
-}, "vira-form-", "vira-form-", readonly [], readonly []>;
+    /** Emitted when focus leaves a field entirely, not when it moves within the field. */
+    fieldBlur: import("element-vir").DefineElementEvent<{
+        key: string;
+    } & ViraFormField>;
+    /** Every field key, hidden ones included, in the order the user dropped them. */
+    fieldOrderChange: import("element-vir").DefineElementEvent<string[]>;
+}, "vira-form-", "vira-form-", readonly [], readonly ["dragHandle"]>;

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

@@ -1,12 +1,16 @@
 import { check } from '@augment-vir/assert';
 import { getObjectTypedEntries } from '@augment-vir/common';
-import { css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
+import { classMap, css, defineElementEvent, html, listen, nothing, testId, } from 'element-vir';
+import { dragReorderGhost, dragReorderHandle, dragReorderRows, } from '../directives/drag-reorder.directive.js';
+import { lucideIcons } from '../icons/lucide-icons.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
-import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../util/vira-form-fields.js';
+import { DragReorderManager } from '../util/drag-reorder-manager.js';
+import { applyRequiredLabel, areFormFieldsValid, moveFormFieldKey, ViraFormFieldType, } from '../util/vira-form-fields.js';
 import { ViraCheckbox } from './vira-checkbox.element.js';
 import { ViraDateInput } from './vira-date-input.element.js';
 import { ViraDropdown } from './vira-dropdown.element.js';
+import { ViraIcon } from './vira-icon.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
 import { ViraTextArea } from './vira-text-area.element.js';
 /**
@@ -20,12 +24,20 @@ export const ViraForm = defineViraElement()({
     state() {
         return {
             lastIsValid: false,
+            dragReorder: new DragReorderManager(),
         };
     },
     events: {
         valueChange: defineElementEvent(),
         validChange: defineElementEvent(),
+        /** Emitted when focus leaves a field entirely, not when it moves within the field. */
+        fieldBlur: defineElementEvent(),
+        /** Every field key, hidden ones included, in the order the user dropped them. */
+        fieldOrderChange: defineElementEvent(),
     },
+    testIds: [
+        'dragHandle',
+    ],
     styles: css `
         :host {
             display: flex;
@@ -43,6 +55,58 @@ export const ViraForm = defineViraElement()({
             }
         }
 
+        .drag-ghost {
+            opacity: 0.6;
+
+            & .drop-above,
+            & .drop-above > *,
+            & .drop-below,
+            & .drop-below > * {
+                box-shadow: none;
+            }
+
+            & .horizontal-fields {
+                border-spacing: 0;
+                table-layout: fixed;
+            }
+        }
+
+        .reorder-rows {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .reorder-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            & > :last-child {
+                flex-grow: 1;
+            }
+        }
+
+        .drag-handle {
+            display: flex;
+            cursor: grab;
+            color: ${viraFormCssVars['vira-form-placeholder-color'].value};
+
+            &:active {
+                cursor: grabbing;
+            }
+        }
+
+        div.drop-above,
+        tr.drop-above > * {
+            box-shadow: 0 -5px 0 0 ${viraFormCssVars['vira-form-focus-outline-color'].value};
+        }
+
+        div.drop-below,
+        tr.drop-below > * {
+            box-shadow: 0 5px 0 0 ${viraFormCssVars['vira-form-focus-outline-color'].value};
+        }
+
         .horizontal-fields {
             width: 100%;
             border-collapse: separate;
@@ -53,6 +117,11 @@ export const ViraForm = defineViraElement()({
                 padding: 0;
             }
 
+            & .handle-cell {
+                width: 0;
+                vertical-align: middle;
+            }
+
             & th {
                 padding: 0 8px;
                 vertical-align: middle;
@@ -80,7 +149,7 @@ export const ViraForm = defineViraElement()({
             }
         }
     `,
-    render({ inputs, dispatch, events, state, updateState }) {
+    render({ inputs, dispatch, events, state, updateState, testIds }) {
         const currentIsValid = areFormFieldsValid(inputs.fields);
         if (currentIsValid !== state.lastIsValid) {
             updateState({
@@ -92,15 +161,75 @@ export const ViraForm = defineViraElement()({
                 },
             }));
         }
-        function wrapFormField({ fieldTemplate, label, }) {
+        const visibleKeys = getObjectTypedEntries(inputs.fields)
+            .filter(([, field,]) => !field.isHidden)
+            .map(([key]) => key);
+        function dropField({ fromIndex, toIndex }) {
+            const movedKey = visibleKeys[fromIndex];
+            if (movedKey == undefined) {
+                return;
+            }
+            dispatch(new events.fieldOrderChange({
+                detail: moveFormFieldKey({
+                    keys: Object.keys(inputs.fields),
+                    movedKey,
+                    beforeKey: visibleKeys[toIndex],
+                }),
+            }));
+        }
+        function listenToFieldBlur(key, field) {
+            /**
+             * `blur` doesn't bubble out of the field's shadow root, but `focusout` does, and the
+             * browser skips it on the field's host when focus moves between elements inside it.
+             */
+            return listen('focusout', () => {
+                dispatch(new events.fieldBlur({
+                    detail: {
+                        key,
+                        ...field,
+                    },
+                }));
+            });
+        }
+        function wrapFormField({ fieldTemplate, label, key, }) {
+            const dropLine = state.dragReorder.readDropLine(visibleKeys.indexOf(key));
+            const rowClasses = classMap({
+                'reorder-row': !inputs.useHorizontalLabels,
+                'drop-above': dropLine.isAbove,
+                'drop-below': dropLine.isBelow,
+            });
+            const dragHandle = inputs.isReorderable
+                ? html `
+                      <div
+                          class="drag-handle"
+                          title="drag to reorder"
+                          ${testId(testIds.dragHandle)}
+                          ${dragReorderHandle(state.dragReorder)}
+                      >
+                          <${ViraIcon.assign({
+                    icon: lucideIcons.GripVertical,
+                })}></${ViraIcon}>
+                      </div>
+                  `
+                : nothing;
             if (inputs.useHorizontalLabels) {
                 return html `
-                    <tr>
+                    <tr class=${rowClasses}>
+                        ${inputs.isReorderable
+                    ? html `
+                                  <td class="handle-cell">${dragHandle}</td>
+                              `
+                    : nothing}
                         <th scope="row">${label}</th>
                         <td>${fieldTemplate}</td>
                     </tr>
                 `;
             }
+            else if (inputs.isReorderable) {
+                return html `
+                    <div class=${rowClasses}>${dragHandle} ${fieldTemplate}</div>
+                `;
+            }
             else {
                 return fieldTemplate;
             }
@@ -114,6 +243,7 @@ export const ViraForm = defineViraElement()({
             else if (field.type === ViraFormFieldType.Checkbox) {
                 const checkboxLabel = applyRequiredLabel(field.label, showRequiredMarker);
                 return wrapFormField({
+                    key,
                     label: checkboxLabel,
                     fieldTemplate: html `
                             <${ViraCheckbox.assign({
@@ -125,6 +255,7 @@ export const ViraForm = defineViraElement()({
                         fillWhenUnchecked: field.fillWhenUnchecked,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraCheckbox.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
@@ -157,6 +288,7 @@ export const ViraForm = defineViraElement()({
                 : {};
             if (field.type === ViraFormFieldType.Select) {
                 return wrapFormField({
+                    key,
                     label,
                     fieldTemplate: html `
                             <${ViraDropdown.assign({
@@ -171,6 +303,7 @@ export const ViraForm = defineViraElement()({
                         attributePassthrough: horizontalLabelAttributes,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
@@ -186,6 +319,7 @@ export const ViraForm = defineViraElement()({
             }
             else if (field.type === ViraFormFieldType.TextArea) {
                 return wrapFormField({
+                    key,
                     label,
                     fieldTemplate: html `
                             <${ViraTextArea.assign({
@@ -200,6 +334,7 @@ export const ViraForm = defineViraElement()({
                         attributePassthrough: horizontalLabelAttributes,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraTextArea.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
@@ -215,6 +350,7 @@ export const ViraForm = defineViraElement()({
             }
             else if (field.type === ViraFormFieldType.Number) {
                 return wrapFormField({
+                    key,
                     label,
                     fieldTemplate: html `
                             <${ViraInput.assign({
@@ -248,6 +384,7 @@ export const ViraForm = defineViraElement()({
                         },
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraInput.events.valueChange, (event) => {
                         const numericValue = event.detail === '' ? undefined : Number(event.detail);
                         dispatch(new events.valueChange({
@@ -264,6 +401,7 @@ export const ViraForm = defineViraElement()({
             }
             else if (field.type === ViraFormFieldType.Date) {
                 return wrapFormField({
+                    key,
                     label,
                     fieldTemplate: html `
                             <${ViraDateInput.assign({
@@ -279,6 +417,7 @@ export const ViraForm = defineViraElement()({
                         label: childLabel,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraDateInput.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
@@ -294,6 +433,7 @@ export const ViraForm = defineViraElement()({
             }
             else {
                 return wrapFormField({
+                    key,
                     label,
                     fieldTemplate: html `
                             <${ViraInput.assign({
@@ -336,6 +476,7 @@ export const ViraForm = defineViraElement()({
                                 : ViraInputType.Default,
                     })}
                                 ${field.testId ? testId(field.testId) : nothing}
+                                ${listenToFieldBlur(key, field)}
                                 ${listen(ViraInput.events.valueChange, (event) => {
                         dispatch(new events.valueChange({
                             detail: {
@@ -353,14 +494,53 @@ export const ViraForm = defineViraElement()({
         const formFieldsWrapper = inputs.useHorizontalLabels
             ? html `
                   <table class="horizontal-fields">
-                      <tbody>${formFieldTemplates}</tbody>
+                      <tbody ${dragReorderRows(state.dragReorder, dropField)}>
+                          ${formFieldTemplates}
+                      </tbody>
                   </table>
               `
-            : formFieldTemplates;
+            : inputs.isReorderable
+                ? html `
+                    <div class="reorder-rows" ${dragReorderRows(state.dragReorder, dropField)}>
+                        ${formFieldTemplates}
+                    </div>
+                `
+                : formFieldTemplates;
+        const draggedKey = state.dragReorder.value.draggedIndex == undefined
+            ? undefined
+            : visibleKeys[state.dragReorder.value.draggedIndex];
+        const draggedRow = draggedKey == undefined
+            ? undefined
+            : formFieldTemplates[Object.keys(inputs.fields).indexOf(draggedKey)];
+        const dragGhost = draggedRow
+            ? html `
+                  <div class="drag-ghost" ${dragReorderGhost(state.dragReorder)}>
+                      ${inputs.useHorizontalLabels
+                ? html `
+                                <table class="horizontal-fields">
+                                    <colgroup>
+                                        ${state.dragReorder.value.draggedCellWidths.map((cellWidth) => {
+                    return html `
+                                                    <col
+                                                        style=${css `
+                                                            width: ${cellWidth}px;
+                                                        `}
+                                                    />
+                                                `;
+                })}
+                                    </colgroup>
+                                    <tbody>${draggedRow}</tbody>
+                                </table>
+                            `
+                : draggedRow}
+                  </div>
+              `
+            : nothing;
         return html `
             <form ${listen('submit', (event) => event.preventDefault())}>
                 ${formFieldsWrapper}
                 <slot></slot>
+                ${dragGhost}
             </form>
         `;
     },

package/dist/elements/vira-json-form.element.js

@@ -472,7 +472,7 @@ export const ViraJsonForm = defineViraElement()({
                 selected: toSelectedValues(selectedType),
             })}
                     ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
-                setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
+                setPendingType(pathKey, assertWrap.isEnumValue(event.detail[0], ViraJsonType));
             })}
                 ></${ViraDropdown}>
                 ${renderPlusButton({
@@ -536,7 +536,7 @@ export const ViraJsonForm = defineViraElement()({
                     selected: toSelectedValues(selectedType),
                 })}
                         ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
-                    setPendingType(pathKey, assertWrap.isDefined(event.detail[0]));
+                    setPendingType(pathKey, assertWrap.isEnumValue(event.detail[0], ViraJsonType));
                 })}
                     ></${ViraDropdown}>
                     ${renderPlusButton({
@@ -849,7 +849,7 @@ export const ViraJsonForm = defineViraElement()({
             })}
                         title="Choose from options or enter a custom value"
                         ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
-                setStringMode(pathKey, assertWrap.isDefined(event.detail[0]));
+                setStringMode(pathKey, assertWrap.isEnumValue(event.detail[0], ViraJsonStringMode));
             })}
                     ></${ViraDropdown}>
                 </div>
@@ -904,7 +904,7 @@ export const ViraJsonForm = defineViraElement()({
             })}
                         title="Change type"
                         ${listen(ViraDropdown.events.selectedValuesChange, (event) => {
-                const newType = assertWrap.isDefined(event.detail[0]);
+                const newType = assertWrap.isEnumValue(event.detail[0], ViraJsonType);
                 emitReplaceAt(path, createDefaultForJsonType(newType));
             })}
                     ></${ViraDropdown}>

package/dist/icons/icon-css-vars.d.ts

@@ -10,5 +10,5 @@ export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-icon-stroke-color': "currentColor";
     /** To be used for coloring an icon's fill. */
     readonly 'vira-icon-fill-color': "none";
-    readonly 'vira-icon-stroke-width': "1.5px";
+    readonly 'vira-icon-stroke-width': "1px";
 }>;

package/dist/icons/icon-css-vars.js

@@ -11,5 +11,5 @@ export const viraIconCssVars = defineCssVars({
     'vira-icon-stroke-color': 'currentColor',
     /** To be used for coloring an icon's fill. */
     'vira-icon-fill-color': 'none',
-    'vira-icon-stroke-width': '1.5px',
+    'vira-icon-stroke-width': '1px',
 });

package/dist/icons/lucide-icons.d.ts

@@ -8,7 +8,8 @@ import { type ViraIconSvg } from './icon-svg.js';
 export type LucideIconKey = keyof typeof lucideStaticImport;
 /**
  * All [Lucide icons](https://lucide.dev) in a format compatible with `ViraIcon`. Each icon entry
- * can be accessed directly as a {@link ViraIconSvg}.
+ * can be accessed directly as a {@link ViraIconSvg}. Icons render at 16px instead of Lucide's
+ * default 24px; use `createSizedIcon` for other sizes.
  *
  * @category Icon
  */

package/dist/icons/lucide-icons.js

@@ -5,6 +5,8 @@ const defaultLucideAttributes = {
     fill: String(viraIconCssVars['vira-icon-fill-color'].value),
     stroke: String(viraIconCssVars['vira-icon-stroke-color'].value),
     'stroke-width': String(viraIconCssVars['vira-icon-stroke-width'].value),
+    width: '16',
+    height: '16',
 };
 function setSvgAttribute({ svgString, attributeName, value, }) {
     const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
@@ -43,7 +45,8 @@ function createLucideIconEntry(iconKey) {
 const lucideIconCache = new Map();
 /**
  * All [Lucide icons](https://lucide.dev) in a format compatible with `ViraIcon`. Each icon entry
- * can be accessed directly as a {@link ViraIconSvg}.
+ * can be accessed directly as a {@link ViraIconSvg}. Icons render at 16px instead of Lucide's
+ * default 24px; use `createSizedIcon` for other sizes.
  *
  * @category Icon
  */

package/dist/styles/shadows.d.ts

@@ -5,8 +5,8 @@ import { type CSSResult } from 'element-vir';
  * @category Styles
  */
 export declare const shadowCssVars: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'menu-shadow-color': "#e2e2e2";
-    readonly 'modal-shadow-color': "#4f4f4f";
+    readonly 'menu-shadow-color': "rgba(0, 0, 0, 0.11)";
+    readonly 'modal-shadow-color': "rgba(0, 0, 0, 0.69)";
 }>;
 /**
  * CSS chunks for default Vira shadow styles.

package/dist/styles/shadows.js

@@ -6,8 +6,8 @@ import { defineCssVars } from 'lit-css-vars';
  * @category Styles
  */
 export const shadowCssVars = defineCssVars({
-    'menu-shadow-color': '#e2e2e2',
-    'modal-shadow-color': '#4f4f4f',
+    'menu-shadow-color': 'rgba(0, 0, 0, 0.11)',
+    'modal-shadow-color': 'rgba(0, 0, 0, 0.69)',
 });
 /**
  * CSS chunks for default Vira shadow styles.

package/dist/util/drag-reorder-manager.d.ts

@@ -0,0 +1,84 @@
+import { Observable } from 'observavir';
+/**
+ * A finished drag from {@link DragReorderManager}.
+ *
+ * @category Reorder
+ */
+export type DragReorderMove = {
+    fromIndex: number;
+    /**
+     * Index, in the order before the move, of the row that the dragged row was dropped in front of.
+     * Equals the row count when it was dropped after the last row.
+     */
+    toIndex: number;
+};
+/**
+ * The current value of a {@link DragReorderManager}.
+ *
+ * @category Reorder
+ */
+export type DragReorderState = {
+    draggedIndex: number | undefined;
+    /**
+     * Same meaning as {@link DragReorderMove.toIndex}. `undefined` while the pointer is where a drop
+     * would not move the row.
+     */
+    dropIndex: number | undefined;
+    rowCount: number;
+    /**
+     * Widths of the dragged row's direct children, so a ghost of a table row can keep the real
+     * column widths. Empty while nothing is dragged.
+     */
+    draggedCellWidths: number[];
+};
+/**
+ * Drag-to-reorder for rows that the host element renders itself, so the host keeps its own markup
+ * and styles (including table rows). Store one in an element's `state` so the element re-renders as
+ * the drag progresses, then attach `dragReorderRows` to the element whose direct children are the
+ * rows, `dragReorderHandle` to each row's handle, and `dragReorderGhost` to a copy of the dragged
+ * row rendered while `value.draggedIndex` is set. The ghost is positioned over the dragged row and
+ * follows the pointer; style its opacity yourself.
+ *
+ * Nothing is reordered for you: apply each {@link DragReorderMove} to your own data.
+ *
+ * @category Reorder
+ */
+export declare class DragReorderManager extends Observable<DragReorderState> {
+    protected rowsElement: HTMLElement | undefined;
+    /** The callback given to `attachRows`. */
+    protected onReorder: ((move: Readonly<DragReorderMove>) => void) | undefined;
+    protected draggedRow: Element | undefined;
+    protected ghostElement: HTMLElement | undefined;
+    protected pointerStart: {
+        x: number;
+        y: number;
+    };
+    /** Removes the global listeners that move the ghost. Set only while a drag is in progress. */
+    protected stopTrackingPointer: (() => void) | undefined;
+    constructor();
+    /** Whether to draw the drop line above or below the row at `rowIndex`. */
+    readDropLine(rowIndex: number): {
+        isAbove: boolean;
+        isBelow: boolean;
+    };
+    /** Used by `dragReorderRows`. */
+    attachRows(rowsElement: HTMLElement, onReorder: (move: Readonly<DragReorderMove>) => void): void;
+    /** Used by `dragReorderGhost`. */
+    attachGhost(ghostElement: HTMLElement): void;
+    /** Used by `dragReorderHandle`. */
+    startDrag(event: DragEvent, handle: Element): void;
+    /** Used by `dragReorderRows`. */
+    dragOver(event: DragEvent): void;
+    /** Used by `dragReorderRows`. */
+    drop(event: DragEvent): void;
+    /**
+     * Used by `dragReorderHandle`. A release outside the rows still lands where the drop line was
+     * last drawn.
+     */
+    endDrag(): void;
+    destroy(): void;
+    /** Counts the rows whose vertical midpoint is above the pointer. */
+    protected readDropIndex(clientY: number): number | undefined;
+    /** Resets to the idle state and only calls `onReorder` when `dropIndex` is defined. */
+    protected finishDrag(dropIndex: number | undefined): void;
+}

package/dist/util/drag-reorder-manager.js

@@ -0,0 +1,213 @@
+import { Observable } from 'observavir';
+import { listenToGlobal } from 'typed-event-target';
+const idleState = {
+    draggedIndex: undefined,
+    dropIndex: undefined,
+    rowCount: 0,
+    draggedCellWidths: [],
+};
+/**
+ * The ghost row replaces the browser's own drag preview, which only shows the handle that the drag
+ * started on.
+ */
+function setEmptyDragImage(dataTransfer) {
+    const emptyImage = document.createElement('div');
+    emptyImage.style.position = 'fixed';
+    emptyImage.style.top = '0';
+    emptyImage.style.left = '0';
+    emptyImage.style.width = '1px';
+    emptyImage.style.height = '1px';
+    emptyImage.style.pointerEvents = 'none';
+    document.body.append(emptyImage);
+    dataTransfer.setDragImage(emptyImage, 0, 0);
+    globalThis.requestAnimationFrame(() => emptyImage.remove());
+}
+/**
+ * Drag-to-reorder for rows that the host element renders itself, so the host keeps its own markup
+ * and styles (including table rows). Store one in an element's `state` so the element re-renders as
+ * the drag progresses, then attach `dragReorderRows` to the element whose direct children are the
+ * rows, `dragReorderHandle` to each row's handle, and `dragReorderGhost` to a copy of the dragged
+ * row rendered while `value.draggedIndex` is set. The ghost is positioned over the dragged row and
+ * follows the pointer; style its opacity yourself.
+ *
+ * Nothing is reordered for you: apply each {@link DragReorderMove} to your own data.
+ *
+ * @category Reorder
+ */
+export class DragReorderManager extends Observable {
+    rowsElement;
+    /** The callback given to `attachRows`. */
+    onReorder;
+    draggedRow;
+    ghostElement;
+    pointerStart = {
+        x: 0,
+        y: 0,
+    };
+    /** Removes the global listeners that move the ghost. Set only while a drag is in progress. */
+    stopTrackingPointer;
+    constructor() {
+        super({
+            defaultValue: idleState,
+        });
+    }
+    /** Whether to draw the drop line above or below the row at `rowIndex`. */
+    readDropLine(rowIndex) {
+        return {
+            isAbove: this.value.dropIndex === rowIndex,
+            isBelow: rowIndex === this.value.rowCount - 1 &&
+                this.value.dropIndex === this.value.rowCount,
+        };
+    }
+    /** Used by `dragReorderRows`. */
+    attachRows(rowsElement, onReorder) {
+        this.rowsElement = rowsElement;
+        this.onReorder = onReorder;
+    }
+    /** Used by `dragReorderGhost`. */
+    attachGhost(ghostElement) {
+        if (ghostElement === this.ghostElement) {
+            return;
+        }
+        this.ghostElement = ghostElement;
+        ghostElement.style.position = 'absolute';
+        ghostElement.style.boxSizing = 'border-box';
+        ghostElement.style.margin = '0';
+        ghostElement.style.pointerEvents = 'none';
+        ghostElement.style.visibility = 'hidden';
+        /** The ghost is not laid out until after the current render. */
+        globalThis.requestAnimationFrame(() => {
+            if (ghostElement !== this.ghostElement || !this.draggedRow) {
+                return;
+            }
+            const rowRect = this.draggedRow.getBoundingClientRect();
+            const translate = ghostElement.style.translate;
+            ghostElement.style.translate = '';
+            ghostElement.style.left = '0';
+            ghostElement.style.top = '0';
+            ghostElement.style.width = `${rowRect.width}px`;
+            /**
+             * Measuring from a zero offset works whatever the ghost's containing block is, so the
+             * host does not have to position anything.
+             */
+            const ghostRect = ghostElement.getBoundingClientRect();
+            ghostElement.style.left = `${rowRect.left - ghostRect.left}px`;
+            ghostElement.style.top = `${rowRect.top - ghostRect.top}px`;
+            ghostElement.style.translate = translate;
+            ghostElement.style.visibility = '';
+        });
+    }
+    /** Used by `dragReorderHandle`. */
+    startDrag(event, handle) {
+        const rows = [...(this.rowsElement?.children || [])];
+        const draggedIndex = rows.findIndex((row) => row.contains(handle));
+        const draggedRow = rows[draggedIndex];
+        if (!draggedRow) {
+            return;
+        }
+        this.stopTrackingPointer?.();
+        this.draggedRow = draggedRow;
+        this.pointerStart = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+        if (event.dataTransfer) {
+            event.dataTransfer.setData('text/plain', '');
+            event.dataTransfer.effectAllowed = 'move';
+            setEmptyDragImage(event.dataTransfer);
+        }
+        const stopListeners = [
+            listenToGlobal('dragover', (dragEvent) => {
+                /**
+                 * Accepting the drop everywhere stops the browser from animating its drag preview
+                 * back to the start when the pointer is released.
+                 */
+                dragEvent.preventDefault();
+                if (this.ghostElement) {
+                    this.ghostElement.style.translate = [
+                        `${dragEvent.clientX - this.pointerStart.x}px`,
+                        `${dragEvent.clientY - this.pointerStart.y}px`,
+                    ].join(' ');
+                }
+            }),
+            listenToGlobal('drop', (dropEvent) => dropEvent.preventDefault()),
+        ];
+        this.stopTrackingPointer = () => {
+            stopListeners.forEach((stopListener) => stopListener());
+        };
+        this.setValue({
+            draggedIndex,
+            dropIndex: undefined,
+            rowCount: rows.length,
+            draggedCellWidths: [...draggedRow.children].map((cell) => cell.getBoundingClientRect().width),
+        });
+    }
+    /** Used by `dragReorderRows`. */
+    dragOver(event) {
+        if (this.value.draggedIndex == undefined) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        const dropIndex = this.readDropIndex(event.clientY);
+        if (dropIndex !== this.value.dropIndex) {
+            this.setValue({
+                ...this.value,
+                dropIndex,
+            });
+        }
+    }
+    /** Used by `dragReorderRows`. */
+    drop(event) {
+        if (this.value.draggedIndex == undefined) {
+            return;
+        }
+        event.preventDefault();
+        this.finishDrag(this.readDropIndex(event.clientY));
+    }
+    /**
+     * Used by `dragReorderHandle`. A release outside the rows still lands where the drop line was
+     * last drawn.
+     */
+    endDrag() {
+        this.finishDrag(this.value.dropIndex);
+    }
+    destroy() {
+        this.stopTrackingPointer?.();
+        super.destroy();
+    }
+    /** Counts the rows whose vertical midpoint is above the pointer. */
+    readDropIndex(clientY) {
+        const draggedIndex = this.value.draggedIndex;
+        const dropIndex = [...(this.rowsElement?.children || [])].filter((row) => {
+            const rect = row.getBoundingClientRect();
+            return clientY >= rect.top + rect.height / 2;
+        }).length;
+        /** Dropping a row directly above or below itself would not move it. */
+        return dropIndex === draggedIndex ||
+            draggedIndex == undefined ||
+            dropIndex === draggedIndex + 1
+            ? undefined
+            : dropIndex;
+    }
+    /** Resets to the idle state and only calls `onReorder` when `dropIndex` is defined. */
+    finishDrag(dropIndex) {
+        const fromIndex = this.value.draggedIndex;
+        this.stopTrackingPointer?.();
+        this.stopTrackingPointer = undefined;
+        this.draggedRow = undefined;
+        this.ghostElement = undefined;
+        if (fromIndex == undefined) {
+            return;
+        }
+        this.setValue(idleState);
+        if (dropIndex != undefined) {
+            this.onReorder?.({
+                fromIndex,
+                toIndex: dropIndex,
+            });
+        }
+    }
+}

package/dist/util/index.d.ts

@@ -1,6 +1,7 @@
 export * from './anchored-popover.js';
 export * from './define-table.js';
 export * from './define-vira-element.js';
+export * from './drag-reorder-manager.js';
 export * from './dynamic-element.js';
 export * from './fuzzy-match.js';
 export * from './menu-helpers.js';

package/dist/util/index.js

@@ -1,6 +1,7 @@
 export * from './anchored-popover.js';
 export * from './define-table.js';
 export * from './define-vira-element.js';
+export * from './drag-reorder-manager.js';
 export * from './dynamic-element.js';
 export * from './fuzzy-match.js';
 export * from './menu-helpers.js';

package/dist/util/shared-text-input-logic.js

@@ -21,12 +21,11 @@ function doesMatch({ input, matcher }) {
 }
 function isAllowed({ value: rawValue, allowed, blocked }) {
     const value = String(rawValue);
-    const isAllowedCharacter = allowed
-        ? doesMatch({
+    const isAllowedCharacter = !allowed ||
+        doesMatch({
             input: value,
             matcher: allowed,
-        })
-        : true;
+        });
     const isBlockedCharacter = blocked
         ? doesMatch({
             input: value,

package/dist/util/vira-form-fields.d.ts

@@ -138,3 +138,15 @@ export declare function applyRequiredLabel(label: string | HtmlInterpolation | u
  * @category Internal
  */
 export declare function areFormFieldsValid(formFields: Readonly<ViraFormFields>): boolean;
+/**
+ * Moves one field key in front of another, keeping every other key (including hidden fields) in
+ * place. Used by `ViraForm` when its fields are reordered.
+ *
+ * @category Internal
+ */
+export declare function moveFormFieldKey({ keys, movedKey, beforeKey, }: Readonly<{
+    keys: ReadonlyArray<string>;
+    movedKey: string;
+    /** The key that `movedKey` lands in front of. `undefined` moves it to the end. */
+    beforeKey: string | undefined;
+}>): string[];

package/dist/util/vira-form-fields.js

@@ -68,3 +68,19 @@ export function areFormFieldsValid(formFields) {
         }
     });
 }
+/**
+ * Moves one field key in front of another, keeping every other key (including hidden fields) in
+ * place. Used by `ViraForm` when its fields are reordered.
+ *
+ * @category Internal
+ */
+export function moveFormFieldKey({ keys, movedKey, beforeKey, }) {
+    const remainingKeys = keys.filter((key) => key !== movedKey);
+    const insertIndex = beforeKey == undefined ? -1 : remainingKeys.indexOf(beforeKey);
+    return insertIndex === -1
+        ? [
+            ...remainingKeys,
+            movedKey,
+        ]
+        : remainingKeys.toSpliced(insertIndex, 0, movedKey);
+}

package/dist/util/vira-json-schema.js

@@ -83,10 +83,7 @@ export function normalizeSchema(schema) {
     }
 }
 function jsonTypeFromSchemaType(type) {
-    if (allJsonTypes.includes(type)) {
-        return type;
-    }
-    return undefined;
+    return check.isEnumValue(type, ViraJsonType) ? type : undefined;
 }
 /** @category Internal */
 export function createResolveContext(schema) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "33.2.0",
+    "version": "33.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,24 +38,24 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.3.1",
-        "@augment-vir/common": "^32.3.1",
-        "@augment-vir/web": "^32.3.1",
+        "@augment-vir/assert": "^32.5.0",
+        "@augment-vir/common": "^32.5.0",
+        "@augment-vir/web": "^32.5.0",
         "@electrovir/color": "^2.0.0",
         "@electrovir/local-storage-client": "^0.1.1",
-        "date-vir": "^9.1.1",
+        "date-vir": "^9.4.0",
         "device-navigation": "^5.0.0",
         "json-schema-to-ts": "^3.1.1",
         "lit": "^3.3.3",
         "lit-css-vars": "^3.6.3",
-        "object-shape-tester": "^6.15.0",
-        "observavir": "^2.3.3",
+        "object-shape-tester": "^6.15.1",
+        "observavir": "^2.4.2",
         "page-active": "^1.0.4",
         "spa-router-vir": "^6.8.0",
         "typed-event-target": "^4.3.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.3.1",
+        "@augment-vir/test": "^32.5.0",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
@@ -63,12 +63,12 @@
         "@web/test-runner-visual-regression": "^1.0.1",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.46.0",
-        "markdown-code-example-inserter": "^3.0.6",
-        "theme-vir": "^29.0.0",
+        "lucide-static": "^1.54.0",
+        "markdown-code-example-inserter": "^3.1.1",
+        "theme-vir": "^29.0.1",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "vite": "^8.3.0",
+        "vite": "^8.3.4",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {