vira 31.31.0 → 31.31.2

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

@@ -53,122 +53,122 @@ export const ViraDrawer = defineViraElement()({
         'vira-drawer-backdrop-filter': 'blur(3px)',
         'vira-drawer-max-height': '80dvh',
     },
-    styles: ({ cssVars, hostClasses }) => css `
-        :host {
-            display: contents;
-        }
-
-        ${hostClasses['vira-drawer-dragging'].selector} {
-            ${noUserSelect};
-        }
-
-        h1 {
-            ${noNativeSpacing};
-        }
-
-        dialog {
-            ${colorCss(viraTheme.colors[themeDefaultKey])}
-            border: none;
-            padding: 0;
-            overflow: hidden;
-            position: fixed;
-            inset: auto 0 0 0;
-            margin: 0;
-            width: 100%;
-            max-width: 100%;
-            max-height: ${cssVars['vira-drawer-max-height'].value};
-            border-radius: 16px 16px 0 0;
-            ${viraShadows.modal}
-            transition: transform ${viraAnimationDurations['vira-pretty-animation-duration']
-        .value} ease;
+    styles: ({ cssVars, hostClasses }) => {
+        return css `
+            :host {
+                display: contents;
+            }
 
-            &[open] {
-                display: flex;
-                flex-direction: column;
+            ${hostClasses['vira-drawer-dragging'].selector} {
+                ${noUserSelect};
             }
 
-            &::backdrop {
-                background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
-                backdrop-filter: ${cssVars['vira-drawer-backdrop-filter'].value};
+            h1 {
+                ${noNativeSpacing};
             }
 
-            & .drawer-content-wrapper {
+            dialog {
+                ${colorCss(viraTheme.colors[themeDefaultKey])}
+                border: none;
+                padding: 0;
                 overflow: hidden;
-                display: flex;
-                flex-direction: column;
+                position: fixed;
+                inset: auto 0 0 0;
+                margin: 0;
+                width: 100%;
+                max-width: 100%;
+                max-height: ${cssVars['vira-drawer-max-height'].value};
+                border-radius: 16px 16px 0 0;
+                ${viraShadows.modal}
+                transition: transform ${viraAnimationDurations['vira-pretty-animation-duration']
+            .value} ease;
 
-                & .drag-handle-wrapper {
+                &[open] {
                     display: flex;
-                    justify-content: center;
-                    padding: 8px 0 0;
-                    cursor: grab;
-                    touch-action: none;
-
-                    &:active {
-                        cursor: grabbing;
-                    }
+                    flex-direction: column;
+                }
 
-                    & .drag-handle {
-                        width: 36px;
-                        height: 4px;
-                        border-radius: 2px;
-                        background-color: ${viraFormCssVars['vira-form-secondary-body-foreground']
-        .value};
-                        opacity: 0.5;
-                    }
+                &::backdrop {
+                    background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
+                    backdrop-filter: ${cssVars['vira-drawer-backdrop-filter'].value};
                 }
 
-                & .header {
-                    padding: 8px 24px 16px;
+                & .drawer-content-wrapper {
+                    overflow: hidden;
                     display: flex;
-                    gap: 16px;
-                    align-items: flex-start;
+                    flex-direction: column;
 
-                    & .header-text-wrapper {
+                    & .drag-handle-wrapper {
                         display: flex;
-                        flex-direction: column;
-                        gap: 4px;
-                        align-self: center;
-                        flex-grow: 1;
-                        overflow: hidden;
+                        justify-content: center;
+                        padding: 8px 0 0;
+                        cursor: grab;
+                        touch-action: none;
 
-                        & h1 {
-                            font-size: 20px;
+                        &:active {
+                            cursor: grabbing;
+                        }
+
+                        & .drag-handle {
+                            width: 36px;
+                            height: 4px;
+                            border-radius: 2px;
+                            background-color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
+                            opacity: 0.5;
                         }
                     }
 
-                    & button.close {
-                        ${noNativeFormStyles};
-                        flex-shrink: 0;
-                        cursor: pointer;
-                        padding: 4px;
-                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
+                    & .header {
+                        padding: 8px 24px 16px;
+                        display: flex;
+                        gap: 16px;
+                        align-items: flex-start;
 
-                        &:hover {
-                            background-color: ${viraFormCssVars['vira-form-selection-hover-color']
-        .value};
+                        & .header-text-wrapper {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 4px;
+                            align-self: center;
+                            flex-grow: 1;
+                            overflow: hidden;
+
+                            & h1 {
+                                font-size: 20px;
+                            }
                         }
 
-                        & ${ViraIcon} {
-                            display: flex;
+                        & button.close {
+                            ${noNativeFormStyles};
+                            flex-shrink: 0;
+                            cursor: pointer;
+                            padding: 4px;
+                            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+
+                            &:hover {
+                                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
+                            }
+
+                            & ${ViraIcon} {
+                                display: flex;
+                            }
                         }
                     }
-                }
 
-                & .body {
-                    padding: 0 24px 24px;
-                    overflow: auto;
-                    overscroll-behavior: contain;
+                    & .body {
+                        padding: 0 24px 24px;
+                        overflow: auto;
+                        overscroll-behavior: contain;
+                    }
                 }
             }
-        }
 
-        ${hostClasses['vira-drawer-no-content-padding'].selector} {
-            & dialog .drawer-content-wrapper .body {
-                padding: 0;
+            ${hostClasses['vira-drawer-no-content-padding'].selector} {
+                & dialog .drawer-content-wrapper .body {
+                    padding: 0;
+                }
             }
-        }
-    `,
+        `;
+    },
     render({ inputs, state, updateState, events, dispatch, slotNames }) {
         if (state.dialogElement && inputs.open !== state.dialogElement.open) {
             if (inputs.open) {
@@ -184,9 +184,11 @@ export const ViraDrawer = defineViraElement()({
                 previousOpenValue: inputs.open,
             });
             if (inputs.open) {
-                const removers = globalEventsToCloseDrawerOn.map((eventName) => listenToGlobal(eventName, () => {
-                    dispatch(new events.drawerClose());
-                }));
+                const removers = globalEventsToCloseDrawerOn.map((eventName) => {
+                    return listenToGlobal(eventName, () => {
+                        dispatch(new events.drawerClose());
+                    });
+                });
                 updateState({
                     cleanupListeners: () => {
                         removers.forEach((remover) => remover());

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

@@ -13,12 +13,14 @@ export const ViraError = defineViraElement()({
     cssVars: {
         'vira-error-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
     },
-    styles: ({ cssVars }) => css `
-        :host {
-            color: ${viraFormCssVars['vira-form-error-color'].value};
-            font-weight: ${cssVars['vira-error-font-weight'].value};
-        }
-    `,
+    styles: ({ cssVars }) => {
+        return css `
+            :host {
+                color: ${viraFormCssVars['vira-form-error-color'].value};
+                font-weight: ${cssVars['vira-error-font-weight'].value};
+            }
+        `;
+    },
     render() {
         return html `
             <slot></slot>

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

@@ -14,34 +14,36 @@ export const ViraIcon = defineViraElement()({
         /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
         'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer || !!inputs.icon?.size,
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            flex-shrink: 0;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                flex-shrink: 0;
+            }
 
-        svg {
-            /*
+            svg {
+                /*
                 svg is set to inline by default which causes weird padding under the image.
                 See: https://stackoverflow.com/a/34952703
             */
-            display: block;
-        }
+                display: block;
+            }
 
-        svg * {
-            vector-effect: non-scaling-stroke;
-        }
+            svg * {
+                vector-effect: non-scaling-stroke;
+            }
 
-        ${hostClasses['vira-icon-fit-container'].selector} {
-            > *,
-            svg {
-                height: 100%;
-                width: 100%;
+            ${hostClasses['vira-icon-fit-container'].selector} {
+                > *,
+                svg {
+                    height: 100%;
+                    width: 100%;
+                }
             }
-        }
-    `,
+        `;
+    },
     render({ inputs, host }) {
         if (!inputs.icon) {
             return '';

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

@@ -41,53 +41,55 @@ export const ViraImage = defineViraElement()({
         imageLoad: defineElementEvent(),
         imageError: defineElementEvent(),
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline-flex;
-            overflow: hidden;
-            flex-direction: column;
-            justify-content: center;
-            position: relative;
-            border-radius: inherit;
-            min-height: 100px;
-            min-width: 100px;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: inline-flex;
+                overflow: hidden;
+                flex-direction: column;
+                justify-content: center;
+                position: relative;
+                border-radius: inherit;
+                min-height: 100px;
+                min-width: 100px;
+            }
 
-        img {
-            width: 100%;
-            height: auto;
-            flex-shrink: 0;
-        }
-        ${hostClasses['vira-image-height-constrained'].selector} {
-            flex-direction: row;
-        }
+            img {
+                width: 100%;
+                height: auto;
+                flex-shrink: 0;
+            }
+            ${hostClasses['vira-image-height-constrained'].selector} {
+                flex-direction: row;
+            }
 
-        ${hostClasses['vira-image-height-constrained'].selector} img {
-            width: auto;
-            height: 100%;
-        }
+            ${hostClasses['vira-image-height-constrained'].selector} img {
+                width: auto;
+                height: 100%;
+            }
 
-        .status-wrapper {
-            overflow: hidden;
-            border-radius: inherit;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
+            .status-wrapper {
+                overflow: hidden;
+                border-radius: inherit;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
 
-        .error {
-            color: red;
-        }
+            .error {
+                color: red;
+            }
 
-        .hidden {
-            display: none;
-        }
-    `,
+            .hidden {
+                display: none;
+            }
+        `;
+    },
     render({ inputs, state, updateState, dispatch, events, slotNames }) {
         /**
          * Saved off for use in the image listeners. This is used to eliminate race conditions

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

@@ -495,7 +495,9 @@ export const ViraJsonForm = defineViraElement()({
                 }
                 const fallback = createDefaultForJsonType(onlyType);
                 const pendingValue = getPendingArrayValue(pathKey, fallback);
-                const inlineEditor = renderInlineValueEditor(onlyType, pendingValue, (value) => setPendingArrayValue(pathKey, value));
+                const inlineEditor = renderInlineValueEditor(onlyType, pendingValue, (value) => {
+                    return setPendingArrayValue(pathKey, value);
+                });
                 return html `
                     ${inlineEditor}
                     ${renderPlusButton({
@@ -960,9 +962,11 @@ export const ViraJsonForm = defineViraElement()({
                     <div class="json-validation-errors">
                         <div>Value does not match schema:</div>
                         <ul>
-                            ${validationErrors.map((errorMessage) => html `
+                            ${validationErrors.map((errorMessage) => {
+                return html `
                                     <li>${errorMessage}</li>
-                                `)}
+                                `;
+            })}
                         </ul>
                     </div>
                 </${ViraError}>

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

@@ -22,34 +22,36 @@ export const ViraLink = defineViraElement()({
     hostClasses: {
         'vira-link-link-styles': ({ inputs }) => !inputs.disableLinkStyles,
     },
-    styles: ({ hostClasses }) => css `
-        :host {
-            display: inline;
-            text-decoration: underline;
-        }
-
-        a,
-        a:visited,
-        a:active,
-        a:link,
-        a:hover {
-            color: inherit;
-            text-decoration: inherit;
-            white-space: inherit;
-        }
+    styles: ({ hostClasses }) => {
+        return css `
+            :host {
+                display: inline;
+                text-decoration: underline;
+            }
 
-        ${hostClasses['vira-link-link-styles'].selector} {
-            &:hover a,
-            & a:hover {
-                color: ${viraTheme.colors['vira-blue-foreground-non-body'].foreground.value};
+            a,
+            a:visited,
+            a:active,
+            a:link,
+            a:hover {
+                color: inherit;
+                text-decoration: inherit;
+                white-space: inherit;
             }
 
-            &:active a,
-            & a:active {
-                color: ${viraTheme.colors['vira-blue-foreground-body'].foreground.value};
+            ${hostClasses['vira-link-link-styles'].selector} {
+                &:hover a,
+                & a:hover {
+                    color: ${viraTheme.colors['vira-blue-foreground-non-body'].foreground.value};
+                }
+
+                &:active a,
+                & a:active {
+                    color: ${viraTheme.colors['vira-blue-foreground-body'].foreground.value};
+                }
             }
-        }
-    `,
+        `;
+    },
     init({ state, updateState, host }) {
         state.cleanupListeners?.();
         let propagating = false;