vira 33.3.0 → 33.4.1

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

@@ -63,6 +63,10 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
     validChange: import("element-vir").DefineElementEvent<{
         allFieldsAreValid: boolean;
     }>;
+    /** 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

@@ -30,6 +30,8 @@ export const ViraForm = defineViraElement()({
     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(),
     },
@@ -128,6 +130,10 @@ export const ViraForm = defineViraElement()({
                 text-align: right;
             }
 
+            &.reorderable th {
+                text-align: left;
+            }
+
             & td {
                 width: 100%;
                 vertical-align: top;
@@ -175,6 +181,20 @@ export const ViraForm = defineViraElement()({
                 }),
             }));
         }
+        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({
@@ -239,6 +259,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: {
@@ -286,6 +307,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: {
@@ -316,6 +338,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: {
@@ -365,6 +388,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({
@@ -397,6 +421,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: {
@@ -455,6 +480,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: {
@@ -469,9 +495,13 @@ export const ViraForm = defineViraElement()({
                 });
             }
         });
+        const horizontalTableClasses = classMap({
+            'horizontal-fields': true,
+            reorderable: !!inputs.isReorderable,
+        });
         const formFieldsWrapper = inputs.useHorizontalLabels
             ? html `
-                  <table class="horizontal-fields">
+                  <table class=${horizontalTableClasses}>
                       <tbody ${dragReorderRows(state.dragReorder, dropField)}>
                           ${formFieldTemplates}
                       </tbody>
@@ -495,7 +525,7 @@ export const ViraForm = defineViraElement()({
                   <div class="drag-ghost" ${dragReorderGhost(state.dragReorder)}>
                       ${inputs.useHorizontalLabels
                 ? html `
-                                <table class="horizontal-fields">
+                                <table class=${horizontalTableClasses}>
                                     <colgroup>
                                         ${state.dragReorder.value.draggedCellWidths.map((cellWidth) => {
                     return html `

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/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/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-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.3.0",
+    "version": "33.4.1",
     "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": {