vira 31.18.1 → 31.19.0

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -17,7 +17,7 @@ export declare const viraMenuTriggerTestIds: {
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<"vira-menu-trigger", PartialWithUndefined<{
+export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
     isDisabled: boolean;
     z_debug_forceOpenState: boolean;
     popUpOffset: PopUpOffset;
@@ -42,4 +42,4 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     showPopUpResult: ShowPopUpResult | undefined;
 }, {
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;
-}, "vira-menu-trigger-", "vira-menu-trigger-", readonly ["trigger"], readonly []>;
+}, `vira-${string}-`, `vira-${string}-`, readonly ["vira-menu-trigger-trigger"], readonly []>;

package/dist/elements/pop-up/vira-menu-trigger.element.js

@@ -19,7 +19,7 @@ export const viraMenuTriggerTestIds = {
 export const ViraMenuTrigger = defineViraElement()({
     tagName: 'vira-menu-trigger',
     slotNames: [
-        'trigger',
+        'vira-menu-trigger-trigger',
     ],
     styles: css `
         :host {
@@ -71,7 +71,10 @@ export const ViraMenuTrigger = defineViraElement()({
             });
         })}
             >
-                <slot name=${slotNames.trigger} slot=${ViraPopUpTrigger.slotNames.trigger}></slot>
+                <slot
+                    name=${slotNames['vira-menu-trigger-trigger']}
+                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                ></slot>
                 ${state.navController && state.showPopUpResult
             ? html `
                           <${ViraMenu.assign({
@@ -80,7 +83,7 @@ export const ViraMenuTrigger = defineViraElement()({
                     : ViraMenuPopUpDirection.Upwards,
                 cornerStyle: inputs.menuCornerStyle,
             })}
-                              slot=${ViraPopUpTrigger.slotNames.popUp}
+                              slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
                               class=${classMap({
                 'full-width-menu': inputs.horizontalAnchor === HorizontalAnchor.Both,
             })}

package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts

@@ -79,7 +79,7 @@ export type PopUpTriggerPosition = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-pop-up-trigger
  */
-export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<"vira-pop-up-trigger", PartialWithUndefined<PopUpTriggerPosition & {
+export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<PopUpTriggerPosition & {
     isDisabled: boolean;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
@@ -106,4 +106,4 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
         navController: NavController;
         popUpManager: PopUpManager;
     }>;
-}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;
+}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", `vira-${string}-`, readonly ["vira-pop-up-trigger-trigger", "vira-pop-up-trigger-pop-up"], readonly []>;

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -53,8 +53,8 @@ export const ViraPopUpTrigger = defineViraElement()({
         };
     },
     slotNames: [
-        'trigger',
-        'popUp',
+        'vira-pop-up-trigger-trigger',
+        'vira-pop-up-trigger-pop-up',
     ],
     hostClasses: {
         'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
@@ -362,7 +362,7 @@ export const ViraPopUpTrigger = defineViraElement()({
         })}
             >
                 <div class="dropdown-trigger">
-                    <slot name=${slotNames.trigger}></slot>
+                    <slot name=${slotNames['vira-pop-up-trigger-trigger']}></slot>
                 </div>
 
                 <div
@@ -372,7 +372,7 @@ export const ViraPopUpTrigger = defineViraElement()({
                     style=${positionerStyles}
                 >
                     ${renderIf(!!state.showPopUpResult, html `
-                            <slot name=${slotNames.popUp}></slot>
+                            <slot name=${slotNames['vira-pop-up-trigger-pop-up']}></slot>
                         `)}
                 </div>
             </button>

package/dist/elements/vira-collapsible-card.element.d.ts

@@ -5,7 +5,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-card", PartialWithUndefined<{
+export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, PartialWithUndefined<{
     /**
      * When set to `true`, the card styles are diminished so you can still use this element in
      * more flexible ways.
@@ -33,4 +33,4 @@ export declare const ViraCollapsibleCard: import("element-vir").DeclarativeEleme
     isExpanded: boolean;
 }, {
     expandToggle: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["header"], readonly ["openCaret"]>;
+}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-content-gap", readonly ["vira-collapsible-card-header"], readonly ["openCaret"]>;

package/dist/elements/vira-collapsible-card.element.js

@@ -110,7 +110,7 @@ export const ViraCollapsibleCard = defineViraElement()({
         }
     `,
     slotNames: [
-        'header',
+        'vira-collapsible-card-header',
     ],
     render({ inputs, slotNames, state, updateState, testIds, dispatch, events }) {
         if (inputs.blockExpansion) {
@@ -127,7 +127,9 @@ export const ViraCollapsibleCard = defineViraElement()({
             ? nothing
             : html `
                   <div class="card-header">
-                      <slot name=${slotNames.header}><div class="header-filler"></div></slot>
+                      <slot name=${slotNames['vira-collapsible-card-header']}>
+                          <div class="header-filler"></div>
+                      </slot>
 
                       ${inputs.blockExpansion
                 ? nothing
@@ -158,7 +160,10 @@ export const ViraCollapsibleCard = defineViraElement()({
             dispatch(new events.expandToggle(event.detail));
         })}
             >
-                <div class="header-wrapper" slot=${ViraCollapsibleWrapper.slotNames.header}>
+                <div
+                    class="header-wrapper"
+                    slot=${ViraCollapsibleWrapper.slotNames['vira-collapsible-wrapper-header']}
+                >
                     ${wrapperHeaderTemplate}
                 </div>
                 ${wrapperContentTemplate}

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -5,7 +5,7 @@
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
  */
-export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     expanded: boolean;
     /** When true, forces the content to expand when printing regardless of collapsed state. */
     expandOnPrint?: boolean;
@@ -13,4 +13,4 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-wrapper-expand-on-print", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;
+}, "vira-collapsible-wrapper-expand-on-print", `vira-${string}-`, readonly ["vira-collapsible-wrapper-header"], readonly []>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -18,7 +18,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     hostClasses: {
         'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
     },
-    slotNames: ['header'],
+    slotNames: ['vira-collapsible-wrapper-header'],
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
@@ -75,7 +75,7 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             dispatch(new events.expandChange(!inputs.expanded));
         })}
             >
-                <slot name=${slotNames.header}>Header</slot>
+                <slot name=${slotNames['vira-collapsible-wrapper-header']}>Header</slot>
             </button>
 
             <div

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

@@ -4,7 +4,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  *
  * @category Elements
  */
-export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<"vira-drawer", {
+export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     open: boolean;
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the drawer title slot to fill it in. */
@@ -21,4 +21,4 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
     dragCurrentY: number;
 }, {
     drawerClose: import("element-vir").DefineEvent<void>;
-}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;
+}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["vira-drawer-drawer-title"], readonly []>;

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

@@ -48,7 +48,7 @@ export const ViraDrawer = defineViraElement()({
         'vira-drawer-dragging': ({ state }) => state.isDragging,
         'vira-drawer-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
-    slotNames: ['drawerTitle'],
+    slotNames: ['vira-drawer-drawer-title'],
     cssVars: {
         'vira-drawer-backdrop-filter': 'blur(3px)',
         'vira-drawer-max-height': '80dvh',
@@ -275,7 +275,9 @@ export const ViraDrawer = defineViraElement()({
                     <div class="header">
                         <div class="header-text-wrapper">
                             <h1>
-                                <slot name=${slotNames.drawerTitle}>${inputs.drawerTitle}</slot>
+                                <slot name=${slotNames['vira-drawer-drawer-title']}>
+                                    ${inputs.drawerTitle}
+                                </slot>
                             </h1>
                         </div>
                         <button

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

@@ -25,11 +25,17 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     icon: ViraIconSvg;
     selectionPrefix: string;
     isDisabled: boolean;
+    label: string;
     /** For debugging purposes only. Very bad for actual production code use. */
     z_debug_forceOpenState: boolean;
 } & PopUpTriggerPosition>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
+    /**
+     * Used to couple the label and trigger together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
 }, {
     selectedChange: import("element-vir").DefineEvent<string[]>;
     openChange: import("element-vir").DefineEvent<ShowPopUpResult | undefined>;

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

@@ -1,5 +1,5 @@
 import { check } from '@augment-vir/assert';
-import { filterMap } from '@augment-vir/common';
+import { filterMap, randomString } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -92,6 +92,22 @@ export const ViraDropdown = defineViraElement()({
         .using-placeholder {
             opacity: 0.4;
         }
+
+        label {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2px;
+            width: 100%;
+            max-width: 100%;
+
+            & .dropdown-label {
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: left;
+                flex-shrink: 0;
+                flex-wrap: wrap;
+            }
+        }
     `,
     events: {
         selectedChange: defineElementEvent(),
@@ -101,6 +117,11 @@ export const ViraDropdown = defineViraElement()({
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
+            /**
+             * Used to couple the label and trigger together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
         };
     },
     render({ state, inputs, dispatch, events, updateState, testIds }) {
@@ -133,7 +154,7 @@ export const ViraDropdown = defineViraElement()({
                 ? ViraMenuPopUpDirection.Downwards
                 : ViraMenuPopUpDirection.Upwards,
         })}
-                slot=${ViraPopUpTrigger.slotNames.popUp}
+                slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
             >
                 ${renderMenuItemEntries(inputs.options.map((option) => {
             return {
@@ -147,7 +168,7 @@ export const ViraDropdown = defineViraElement()({
         }))}
             </${ViraMenu}>
         `;
-        return html `
+        const triggerTemplate = html `
             <${ViraPopUpTrigger.assign({
             ...inputs,
             focusOnClose: true,
@@ -171,7 +192,9 @@ export const ViraDropdown = defineViraElement()({
             open: !!state.showPopUpResult,
             'open-upwards': !state.showPopUpResult?.popDown,
         })}"
-                    slot=${ViraPopUpTrigger.slotNames.trigger}
+                    slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-trigger']}
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
                     ${testId(testIds.trigger)}
                 >
                     ${leadingIconTemplate}
@@ -195,5 +218,16 @@ export const ViraDropdown = defineViraElement()({
                 ${state.showPopUpResult ? menuTemplate : nothing}
             </${ViraPopUpTrigger}>
         `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId}>
+                    <span class="dropdown-label">${inputs.label}</span>
+                    ${triggerTemplate}
+                </label>
+            `;
+        }
+        else {
+            return triggerTemplate;
+        }
     },
 });

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

@@ -11,7 +11,7 @@ import { type Duration, type DurationUnit } from 'date-vir';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-image
  */
-export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
+export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     /** The URL of the image to load. This is passed directly to the `<img>` element. */
     imageUrl: string;
     /**
@@ -42,4 +42,4 @@ export declare const ViraImage: import("element-vir").DeclarativeElementDefiniti
 }, {
     imageLoad: import("element-vir").DefineEvent<void>;
     imageError: import("element-vir").DefineEvent<unknown>;
-}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"], readonly []>;
+}, "vira-image-height-constrained", `vira-${string}-`, readonly ["vira-image-loading", "vira-image-error"], readonly []>;

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

@@ -34,8 +34,8 @@ export const ViraImage = defineViraElement()({
         'vira-image-height-constrained': ({ inputs }) => inputs.dominantDimension === 'height',
     },
     slotNames: [
-        'loading',
-        'error',
+        'vira-image-loading',
+        'vira-image-error',
     ],
     events: {
         imageLoad: defineElementEvent(),
@@ -96,7 +96,7 @@ export const ViraImage = defineViraElement()({
         const imageUrl = inputs.imageUrl;
         const statusTemplate = state.erroredUrls[imageUrl]
             ? html `
-                  <slot class="status-wrapper" name=${slotNames.error}>
+                  <slot class="status-wrapper" name=${slotNames['vira-image-error']}>
                       <${ViraIcon.assign({
                 icon: StatusFailure24Icon,
             })}
@@ -107,7 +107,7 @@ export const ViraImage = defineViraElement()({
             : state.loadedUrls[imageUrl]
                 ? undefined
                 : html `
-                    <slot class="status-wrapper" name=${slotNames.loading}>
+                    <slot class="status-wrapper" name=${slotNames['vira-image-loading']}>
                         <${ViraIcon.assign({
                     icon: LoaderAnimated24Icon,
                 })}></${ViraIcon}>

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

@@ -1,8 +1,7 @@
 import { assertWrap, check } from '@augment-vir/assert';
 import { omitObjectKeys, wrapInTry } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
 import { css, defineElementEvent, html, listen, nothing } from 'element-vir';
-import { lucideIcons, X16Icon } from '../icons/index.js';
+import { Plus16Icon, X16Icon } from '../icons/index.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
@@ -13,6 +12,7 @@ import { ViraCheckbox } from './vira-checkbox.element.js';
 import { ViraError } from './vira-error.element.js';
 import { ViraInput, ViraInputType } from './vira-input.element.js';
 import { ViraSelect } from './vira-select.element.js';
+import { ViraTextArea } from './vira-text-area.element.js';
 /**
  * An editor for arbitrary JSON values, optionally constrained by a standard JSON Schema
  * ({@link ViraJsonSchema}).
@@ -48,24 +48,10 @@ export const ViraJsonForm = defineViraElement()({
             justify-content: flex-end;
         }
 
-        .json-raw-textarea {
-            margin: 0;
-            padding: 10px 12px;
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
-            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        ${ViraTextArea}.json-raw-textarea {
+            width: 100%;
             font-family: ${viraFontCssVars['vira-monospace'].value};
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
-            box-sizing: border-box;
-            width: 100%;
-            min-height: 240px;
-            resize: vertical;
-        }
-
-        .json-raw-textarea:focus {
-            outline: none;
-            border-color: ${viraFormCssVars['vira-form-focus-outline-color'].value};
         }
 
         .json-validation-errors {
@@ -80,68 +66,71 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            padding: 10px 12px;
-            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
-            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
             box-sizing: border-box;
         }
 
-        .json-group-header {
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        .json-group-nested {
+            margin-top: 4px;
+            padding-left: 12px;
+            padding-bottom: 8px;
+            border-left: 2px solid ${viraFormCssVars['vira-form-border-color'].value};
+            border-bottom: 2px solid ${viraFormCssVars['vira-form-border-color'].value};
         }
 
-        .json-group-header-title {
-            flex-grow: 1;
-            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
-            font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
+        .json-row-primitive > td {
+            padding: 4px 8px 4px 0;
+            vertical-align: middle;
         }
 
-        .json-row {
-            display: flex;
-            gap: 8px;
-        }
-
-        .json-row-primitive {
-            align-items: center;
-        }
-
-        .json-row-nested {
-            flex-direction: column;
-            align-items: stretch;
-            gap: 4px;
+        .json-row-primitive > td:last-child {
+            padding-right: 0;
         }
 
-        .json-row-label {
-            flex-shrink: 0;
+        td.json-row-label {
+            text-align: left;
             min-width: 80px;
+            white-space: nowrap;
             font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-            word-break: break-word;
         }
 
-        .json-row-editor {
-            flex-grow: 1;
-            min-width: 0;
-            display: flex;
-            flex-direction: column;
+        td.json-row-editor {
+            width: 100%;
         }
 
-        .json-row-editor > * {
+        td.json-row-editor > * {
             width: 100%;
             max-width: 100%;
+            box-sizing: border-box;
         }
 
-        .json-row-delete {
-            flex-shrink: 0;
+        td.json-row-delete {
             width: 24px;
+            text-align: center;
+        }
+
+        .json-row-nested > td {
+            padding: 4px 0;
+        }
+
+        .json-row-nested-header {
             display: flex;
-            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 4px;
+        }
+
+        .json-row-nested-header > .json-row-label {
+            flex-grow: 1;
+            font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+            word-break: break-word;
+        }
+
+        .json-type-tag {
+            font-weight: normal;
+            color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
         }
 
         .json-value-with-switcher {
@@ -169,8 +158,10 @@ export const ViraJsonForm = defineViraElement()({
         .json-add-row {
             display: flex;
             align-items: center;
+            justify-content: flex-end;
             gap: 6px;
             flex-wrap: wrap;
+            padding: 8px 0;
         }
 
         .json-add-row ${ViraInput}, .json-add-row ${ViraSelect} {
@@ -190,6 +181,8 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-empty-note {
+            display: block;
+            padding: 4px 0;
             color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             font-style: italic;
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
@@ -392,8 +385,9 @@ export const ViraJsonForm = defineViraElement()({
         function renderPlusButton({ isAddDisabled, tooltip, onClick, }) {
             return html `
                 <${ViraButton.assign({
-                icon: lucideIcons.Plus,
-                color: ViraColorVariant.Plain,
+                icon: Plus16Icon,
+                color: ViraColorVariant.Positive,
+                buttonSize: ViraSize.Small,
                 isDisabled: isAddDisabled,
             })}
                     title=${tooltip}
@@ -406,7 +400,7 @@ export const ViraJsonForm = defineViraElement()({
                 ></${ViraButton}>
             `;
         }
-        function renderObjectAddControl({ pathKey, allowedTypes, canAdd, onAdd, }) {
+        function renderObjectAddControl({ pathKey, allowedTypes, canAdd, disabledReason, onAdd, }) {
             if (allowedTypes.length === 0) {
                 return nothing;
             }
@@ -415,7 +409,7 @@ export const ViraJsonForm = defineViraElement()({
                 const onlyType = assertWrap.isDefined(allowedTypes[0]);
                 return renderPlusButton({
                     isAddDisabled,
-                    tooltip: `Add ${viraJsonTypeLabels[onlyType]}`,
+                    tooltip: isAddDisabled ? disabledReason : `Add ${viraJsonTypeLabels[onlyType]}`,
                     onClick: () => onAdd(onlyType),
                 });
             }
@@ -437,7 +431,9 @@ export const ViraJsonForm = defineViraElement()({
                 ></${ViraSelect}>
                 ${renderPlusButton({
                 isAddDisabled,
-                tooltip: `Add ${viraJsonTypeLabels[selectedType]}`,
+                tooltip: isAddDisabled
+                    ? disabledReason
+                    : `Add ${viraJsonTypeLabels[selectedType]}`,
                 onClick: () => onAdd(selectedType),
             })}
             `;
@@ -497,8 +493,14 @@ export const ViraJsonForm = defineViraElement()({
             })}
             `;
         }
-        function renderObjectGroup(path, value, schema, onDelete) {
+        function getNestedTypeLabel(schema, value) {
+            const concreteType = getJsonType(value);
+            const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
+            return (getSchemaTitle(narrowedSchema, resolveContext) || viraJsonTypeLabels[concreteType]);
+        }
+        function renderObjectGroup(path, value, schema) {
             const pathKey = pathToKey(path);
+            const isRoot = path.length === 0;
             const requiredKeys = new Set(getRequiredProperties(schema, resolveContext));
             const definedProperties = getDefinedProperties(schema, resolveContext);
             const definedKeys = new Set(Object.keys(definedProperties));
@@ -524,20 +526,34 @@ export const ViraJsonForm = defineViraElement()({
                         }
                     }
                     : undefined;
+                if (isChildNested) {
+                    return html `
+                        <tr class="json-row-nested">
+                            <td colspan="3">
+                                <div class="json-row-nested-header">
+                                    <span class="json-row-label">
+                                        ${key}${isRequired ? '*' : ''}
+                                        <span class="json-type-tag">
+                                            : ${getNestedTypeLabel(childSchema, childValue)}
+                                        </span>
+                                    </span>
+                                    ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                                </div>
+                                ${renderValue(childPath, childValue, childSchema)}
+                            </td>
+                        </tr>
+                    `;
+                }
                 return html `
-                    <div
-                        class="json-row ${isChildNested ? 'json-row-nested' : 'json-row-primitive'}"
-                    >
-                        <span class="json-row-label">${key}${isRequired ? '*' : ''}</span>
-                        <span class="json-row-editor">
-                            ${renderValue(childPath, childValue, childSchema, isChildNested ? childOnDelete : undefined)}
-                        </span>
-                        <span class="json-row-delete">
-                            ${!isChildNested && childOnDelete
-                    ? renderDeleteButton(childOnDelete)
-                    : nothing}
-                        </span>
-                    </div>
+                    <tr class="json-row-primitive">
+                        <td class="json-row-label">${key}${isRequired ? '*' : ''}</td>
+                        <td class="json-row-editor">
+                            ${renderValue(childPath, childValue, childSchema)}
+                        </td>
+                        <td class="json-row-delete">
+                            ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                        </td>
+                    </tr>
                 `;
             });
             const missingDefinedKeys = [...definedKeys].filter((key) => !(key in value));
@@ -550,8 +566,9 @@ export const ViraJsonForm = defineViraElement()({
                     return html `
                           <${ViraButton.assign({
                         text: `"${key}"`,
-                        icon: lucideIcons.Plus,
-                        color: ViraColorVariant.Plain,
+                        icon: Plus16Icon,
+                        color: ViraColorVariant.Positive,
+                        buttonSize: ViraSize.Small,
                     })}
                               ${listen('click', () => {
                         emitReplaceAt([
@@ -568,21 +585,27 @@ export const ViraJsonForm = defineViraElement()({
             const additionalAllowedTypes = additional.allowed
                 ? getAllowedJsonTypes(additional.schema, resolveContext)
                 : [];
+            const arbitraryAddDisabledReason = trimmedPendingKey
+                ? `Field "${trimmedPendingKey}" already exists.`
+                : 'Enter a field name to add.';
             const arbitraryAddRow = additional.allowed && !isDisabled
                 ? html `
-                          <div class="json-add-row">
-                              <${ViraInput.assign({
+                          <tr>
+                              <td colspan="3">
+                                  <div class="json-add-row">
+                                      <${ViraInput.assign({
                     value: pendingKey,
                     placeholder: 'new field name',
                 })}
-                                  ${listen(ViraInput.events.valueChange, (event) => {
+                                          ${listen(ViraInput.events.valueChange, (event) => {
                     setPendingKey(pathKey, event.detail);
                 })}
-                              ></${ViraInput}>
-                              ${renderObjectAddControl({
+                                      ></${ViraInput}>
+                                      ${renderObjectAddControl({
                     pathKey,
                     allowedTypes: additionalAllowedTypes,
                     canAdd: canAddArbitraryField,
+                    disabledReason: arbitraryAddDisabledReason,
                     onAdd: (type) => {
                         if (!canAddArbitraryField) {
                             return;
@@ -594,33 +617,41 @@ export const ViraJsonForm = defineViraElement()({
                         clearPending(pathKey);
                     },
                 })}
-                          </div>
+                                  </div>
+                              </td>
+                          </tr>
                       `
                 : nothing;
-            const title = getSchemaTitle(schema, resolveContext) || 'object';
             return html `
-                <div class="json-group">
-                    <div class="json-group-header">
-                        <span class="json-group-header-title">${title}</span>
-                        ${onDelete ? renderDeleteButton(onDelete) : nothing}
-                    </div>
-                    ${rowTemplates.length === 0 && suggestedKeyButtons.length === 0
+                <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
+                    <tbody>
+                        ${rowTemplates.length === 0 && suggestedKeyButtons.length === 0
                 ? html `
-                              <span class="json-empty-note">(empty object)</span>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <span class="json-empty-note">(empty object)</span>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${rowTemplates}
-                    ${suggestedKeyButtons.length > 0
+                        ${rowTemplates}
+                        ${suggestedKeyButtons.length > 0
                 ? html `
-                              <div class="json-add-row">${suggestedKeyButtons}</div>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <div class="json-add-row">${suggestedKeyButtons}</div>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${arbitraryAddRow}
-                </div>
+                        ${arbitraryAddRow}
+                    </tbody>
+                </table>
             `;
         }
-        function renderArrayGroup(path, value, schema, onDelete) {
+        function renderArrayGroup(path, value, schema) {
             const pathKey = pathToKey(path);
+            const isRoot = path.length === 0;
             const newItemSchema = getNewItemSchema(schema, value.length, resolveContext);
             const allowedItemTypes = getAllowedJsonTypes(newItemSchema, resolveContext);
             const rowTemplates = value.map((item, index) => {
@@ -636,28 +667,43 @@ export const ViraJsonForm = defineViraElement()({
                     : () => {
                         emitDeleteAt(childPath);
                     };
+                if (isChildNested) {
+                    return html `
+                        <tr class="json-row-nested">
+                            <td colspan="3">
+                                <div class="json-row-nested-header">
+                                    <span class="json-row-label">
+                                        [${index}]
+                                        <span class="json-type-tag">
+                                            : ${getNestedTypeLabel(childSchema, item)}
+                                        </span>
+                                    </span>
+                                    ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                                </div>
+                                ${renderValue(childPath, item, childSchema)}
+                            </td>
+                        </tr>
+                    `;
+                }
                 return html `
-                    <div
-                        class="json-row ${isChildNested ? 'json-row-nested' : 'json-row-primitive'}"
-                    >
-                        <span class="json-row-label">[${index}]</span>
-                        <span class="json-row-editor">
-                            ${renderValue(childPath, item, childSchema, isChildNested ? childOnDelete : undefined)}
-                        </span>
-                        <span class="json-row-delete">
-                            ${!isChildNested && childOnDelete
-                    ? renderDeleteButton(childOnDelete)
-                    : nothing}
-                        </span>
-                    </div>
+                    <tr class="json-row-primitive">
+                        <td class="json-row-label">[${index}]</td>
+                        <td class="json-row-editor">
+                            ${renderValue(childPath, item, childSchema)}
+                        </td>
+                        <td class="json-row-delete">
+                            ${childOnDelete ? renderDeleteButton(childOnDelete) : nothing}
+                        </td>
+                    </tr>
                 `;
             });
-            const title = getSchemaTitle(schema, resolveContext) || 'array';
             const addRow = isDisabled
                 ? nothing
                 : html `
-                      <div class="json-add-row">
-                          ${renderArrayAddControl({
+                      <tr>
+                          <td colspan="3">
+                              <div class="json-add-row">
+                                  ${renderArrayAddControl({
                     pathKey,
                     allowedTypes: allowedItemTypes,
                     onAdd: (newValue) => {
@@ -667,32 +713,36 @@ export const ViraJsonForm = defineViraElement()({
                         ], newValue);
                     },
                 })}
-                      </div>
+                              </div>
+                          </td>
+                      </tr>
                   `;
             return html `
-                <div class="json-group">
-                    <div class="json-group-header">
-                        <span class="json-group-header-title">${title}</span>
-                        ${onDelete ? renderDeleteButton(onDelete) : nothing}
-                    </div>
-                    ${rowTemplates.length === 0
+                <table class="json-group ${isRoot ? '' : 'json-group-nested'}">
+                    <tbody>
+                        ${rowTemplates.length === 0
                 ? html `
-                              <span class="json-empty-note">(empty array)</span>
-                          `
+                                  <tr>
+                                      <td colspan="3">
+                                          <span class="json-empty-note">(empty array)</span>
+                                      </td>
+                                  </tr>
+                              `
                 : nothing}
-                    ${rowTemplates} ${addRow}
-                </div>
+                        ${rowTemplates} ${addRow}
+                    </tbody>
+                </table>
             `;
         }
-        function renderValue(path, value, schema, onDelete) {
+        function renderValue(path, value, schema) {
             const concreteType = getJsonType(value);
             const allowedTypes = getAllowedJsonTypes(schema, resolveContext);
             const narrowedSchema = pickBranchForType(schema, concreteType, resolveContext);
             if (check.isArray(value)) {
-                return renderArrayGroup(path, value, narrowedSchema, onDelete);
+                return renderArrayGroup(path, value, narrowedSchema);
             }
             else if (check.isObject(value)) {
-                return renderObjectGroup(path, value, narrowedSchema, onDelete);
+                return renderObjectGroup(path, value, narrowedSchema);
             }
             const editor = renderPrimitive(path, value, narrowedSchema);
             const showSwitcher = !isDisabled &&
@@ -752,14 +802,15 @@ export const ViraJsonForm = defineViraElement()({
             const rawText = state.rawDraft ?? JSON.stringify(inputs.value, undefined, 4);
             return html `
                 ${toolbarTemplate}
-                <textarea
+                <${ViraTextArea.assign({
+                value: rawText,
+                disabled: isDisabled,
+                disableBrowserHelps: true,
+                rows: 12,
+            })}
                     class="json-raw-textarea"
-                    spellcheck="false"
-                    ?disabled=${isDisabled}
-                    .value=${rawText}
-                    ${listen('input', (event) => {
-                const textarea = extractEventTarget(event, HTMLTextAreaElement);
-                const text = textarea.value;
+                    ${listen(ViraTextArea.events.valueChange, (event) => {
+                const text = event.detail;
                 const parsed = wrapInTry(() => JSON.parse(text));
                 if (parsed instanceof Error) {
                     updateState({
@@ -775,7 +826,7 @@ export const ViraJsonForm = defineViraElement()({
                     emitRoot(parsed);
                 }
             })}
-                ></textarea>
+                ></${ViraTextArea}>
                 ${state.rawError
                 ? html `
                           <${ViraError}>${state.rawError}</${ViraError}>
@@ -800,7 +851,7 @@ export const ViraJsonForm = defineViraElement()({
             `;
         }
         return html `
-            ${toolbarTemplate} ${renderValue([], inputs.value, inputs.schema, undefined)}
+            ${toolbarTemplate} ${renderValue([], inputs.value, inputs.schema)}
         `;
     },
 });

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

@@ -5,7 +5,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-modal
  */
-export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<"vira-modal", {
+export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, {
     open: boolean;
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the modal title slot to fill it in. */
@@ -37,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanupListeners: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineEvent<void>;
-}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -42,7 +42,7 @@ export const ViraModal = defineViraElement()({
         'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
         'vira-modal-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
-    slotNames: ['modalTitle'],
+    slotNames: ['vira-modal-modal-title'],
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
     },
@@ -205,7 +205,11 @@ export const ViraModal = defineViraElement()({
                 >
                     <div class="header">
                         <div class="header-text-wrapper">
-                            <h1><slot name=${slotNames.modalTitle}>${inputs.modalTitle}</slot></h1>
+                            <h1>
+                                <slot name=${slotNames['vira-modal-modal-title']}>
+                                    ${inputs.modalTitle}
+                                </slot>
+                            </h1>
                             ${inputs.modalSubtitle
             ? html `
                                       <sub>${inputs.modalSubtitle}</sub>

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

@@ -13,6 +13,7 @@ import { createOverflowObserver } from '../util/overflow-observer.js';
 import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
 import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
 import { ViraMenuCornerStyle } from './pop-up/vira-menu.element.js';
+import { ViraBoldText } from './vira-bold-text.element.js';
 import { ViraButton } from './vira-button.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 import { ViraLink } from './vira-link.element.js';
@@ -387,7 +388,12 @@ export const ViraTabs = defineViraElement()({
             })}>
                             <span class="tab-content">
                                 ${iconTemplate}
-                                <span class="tab-label">${tab.label}</span>
+                                <${ViraBoldText.assign({
+                text: tab.label,
+                bold: isSelected,
+            })}
+                                    class="tab-label"
+                                ></${ViraBoldText}>
                             </span>
                         </${ViraLink}>
                     </li>
@@ -441,7 +447,7 @@ export const ViraTabs = defineViraElement()({
             showMenuCaret: true,
             color: ViraColorVariant.Neutral,
         })}
-                    slot=${ViraMenuTrigger.slotNames.trigger}
+                    slot=${ViraMenuTrigger.slotNames['vira-menu-trigger-trigger']}
                 ></${ViraButton}>
                 ${menuItems}
             </${ViraMenuTrigger}>
@@ -454,6 +460,7 @@ export const ViraTabs = defineViraElement()({
                 cleanupObserver: createOverflowObserver({
                     element: tabsElement,
                     widthElement: host,
+                    hysteresisPx: 16,
                     onChange(isOverflowing) {
                         updateState({
                             isOverflowing,

package/dist/elements/vira-text-area.element.js

@@ -56,6 +56,7 @@ export const ViraTextArea = defineViraElement()({
 
         textarea {
             ${noNativeFormStyles};
+            overscroll-behavior: contain;
             font: inherit;
             cursor: text;
             width: 100%;

package/dist/icons/icon-svgs/16/plus-16.icon.d.ts

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

package/dist/icons/icon-svgs/{plus-24.icon.js → 16/plus-16.icon.js}

@@ -1,19 +1,19 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars.js';
-import { defineIcon } from '../icon-svg.js';
+import { viraIconCssVars } from '../../icon-css-vars.js';
+import { defineIcon } from '../../icon-svg.js';
 /**
  * A plus icon.
  *
  * @category Icon
  * @category SVG
- * @see https://electrovir.github.io/vira/book/icons/plus24icon
+ * @see https://electrovir.github.io/vira/book/icons/plus16icon
  */
-export const Plus24Icon = defineIcon({
-    name: 'Plus24Icon',
+export const Plus16Icon = defineIcon({
+    name: 'Plus16Icon',
     svgTemplate: html `
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path
-                d="M12 5v14M5 12h14"
+                d="M8 3v10M3 8h10"
                 fill="none"
                 stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}

package/dist/icons/index.d.ts

@@ -8,6 +8,7 @@ export * from './icon-svgs/16/chevron-down-16.icon.js';
 export * from './icon-svgs/16/chevron-up-16.icon.js';
 export * from './icon-svgs/16/dash-16.icon.js';
 export * from './icon-svgs/16/element-16.icon.js';
+export * from './icon-svgs/16/plus-16.icon.js';
 export * from './icon-svgs/16/upload-16.icon.js';
 export * from './icon-svgs/16/x-16.icon.js';
 export * from './icon-svgs/24/arrow-down-24.icon.js';
@@ -100,6 +101,7 @@ export declare const allIconsByName: {
     readonly Moon24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Plus16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Plus24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Printer24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
@@ -189,6 +191,7 @@ export declare const all16IconsByName: {
     readonly ChevronUp16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Dash16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Plus16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Upload16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly X16Icon: import("./icon-svg.js").ViraIconSvg;
 };

package/dist/icons/index.js

@@ -3,6 +3,7 @@ import { ChevronDown16Icon } from './icon-svgs/16/chevron-down-16.icon.js';
 import { ChevronUp16Icon } from './icon-svgs/16/chevron-up-16.icon.js';
 import { Dash16Icon } from './icon-svgs/16/dash-16.icon.js';
 import { Element16Icon } from './icon-svgs/16/element-16.icon.js';
+import { Plus16Icon } from './icon-svgs/16/plus-16.icon.js';
 import { Upload16Icon } from './icon-svgs/16/upload-16.icon.js';
 import { X16Icon } from './icon-svgs/16/x-16.icon.js';
 import { ArrowDown24Icon } from './icon-svgs/24/arrow-down-24.icon.js';
@@ -64,6 +65,7 @@ export * from './icon-svgs/16/chevron-down-16.icon.js';
 export * from './icon-svgs/16/chevron-up-16.icon.js';
 export * from './icon-svgs/16/dash-16.icon.js';
 export * from './icon-svgs/16/element-16.icon.js';
+export * from './icon-svgs/16/plus-16.icon.js';
 export * from './icon-svgs/16/upload-16.icon.js';
 export * from './icon-svgs/16/x-16.icon.js';
 export * from './icon-svgs/24/arrow-down-24.icon.js';
@@ -156,6 +158,7 @@ export const allIconsByName = {
     Moon24Icon,
     Options24Icon,
     Pencil24Icon,
+    Plus16Icon,
     Plus24Icon,
     Printer24Icon,
     Shield24Icon,
@@ -245,6 +248,7 @@ export const all16IconsByName = {
     ChevronUp16Icon,
     Dash16Icon,
     Element16Icon,
+    Plus16Icon,
     Upload16Icon,
     X16Icon,
 };

package/dist/util/define-vira-element.js

@@ -4,7 +4,7 @@ import { wrapDefineElement } from 'element-vir';
  *
  * @category Internal
  */
-export const ViraTagNamePrefix = `vira-`;
+export const ViraTagNamePrefix = 'vira-';
 /**
  * Define a vira element with custom requirements (like the `vira-` element tag prefix).
  *

package/dist/util/overflow-observer.d.ts

@@ -4,7 +4,7 @@
  *
  * @returns A cleanup function that disconnects all observers.
  */
-export declare function createOverflowObserver({ element, widthElement, onChange, }: Readonly<{
+export declare function createOverflowObserver({ element, widthElement, onChange, hysteresisPx, }: Readonly<{
     /** The element whose `scrollWidth` is measured for content size. */
     element: Element;
     /**
@@ -14,4 +14,11 @@ export declare function createOverflowObserver({ element, widthElement, onChange
      */
     widthElement?: Element | undefined;
     onChange: (isOverflowing: boolean) => void;
+    /**
+     * Pixel margin required to flip the overflow state. Once overflowing, the content must fit
+     * within `availableWidth - hysteresisPx` to flip back; once not overflowing, the content must
+     * exceed `availableWidth + hysteresisPx` to flip on. Prevents rapid toggling from minute size
+     * changes.
+     */
+    hysteresisPx?: number | undefined;
 }>): () => void;

package/dist/util/overflow-observer.js

@@ -4,10 +4,18 @@
  *
  * @returns A cleanup function that disconnects all observers.
  */
-export function createOverflowObserver({ element, widthElement, onChange, }) {
+export function createOverflowObserver({ element, widthElement, onChange, hysteresisPx = 0, }) {
     const availableWidthElement = widthElement || element;
+    let isOverflowing = false;
     function checkOverflow() {
-        onChange(element.scrollWidth > availableWidthElement.clientWidth);
+        const contentWidth = element.scrollWidth;
+        const availableWidth = availableWidthElement.clientWidth;
+        const threshold = isOverflowing ? -hysteresisPx : hysteresisPx;
+        const nextOverflowing = contentWidth > availableWidth + threshold;
+        if (nextOverflowing !== isOverflowing) {
+            isOverflowing = nextOverflowing;
+            onChange(isOverflowing);
+        }
     }
     const resizeObserver = new ResizeObserver(checkOverflow);
     resizeObserver.observe(element);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.18.1",
+    "version": "31.19.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.69.0",
-        "@augment-vir/common": "^31.69.0",
-        "@augment-vir/web": "^31.69.0",
+        "@augment-vir/assert": "^31.70.1",
+        "@augment-vir/common": "^31.70.1",
+        "@augment-vir/web": "^31.70.1",
         "@electrovir/color": "^1.7.9",
         "date-vir": "^8.3.2",
         "device-navigation": "^4.5.5",
@@ -48,12 +48,12 @@
         "lit-css-vars": "^3.6.2",
         "observavir": "^2.3.2",
         "page-active": "^1.0.3",
-        "spa-router-vir": "^6.5.0",
+        "spa-router-vir": "^6.6.0",
         "type-fest": "^5.6.0",
         "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.69.0",
+        "@augment-vir/test": "^31.70.1",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
@@ -61,12 +61,12 @@
         "@web/test-runner-visual-regression": "^0.10.0",
         "esbuild": "^0.28.0",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.14.0",
+        "lucide-static": "^1.16.0",
         "markdown-code-example-inserter": "^3.0.5",
         "theme-vir": "^28.25.0",
         "typedoc": "^0.28.19",
         "typescript": "5.9.3",
-        "vite": "^8.0.10",
+        "vite": "^8.0.14",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {

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

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