vira 31.17.1 → 31.18.1

package/dist/elements/index.d.ts

@@ -22,3 +22,4 @@ export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
 export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';
+export * from './vira-text-area.element.js';

package/dist/elements/index.js

@@ -22,3 +22,4 @@ export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
 export * from './vira-tabs.element.js';
 export * from './vira-tag.element.js';
+export * from './vira-text-area.element.js';

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

@@ -5,6 +5,7 @@ import { applyRequiredLabel, areFormFieldsValid, ViraFormFieldType, } from '../u
 import { ViraCheckbox } from './vira-checkbox.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';
 /**
  * A form element.
  *
@@ -95,6 +96,28 @@ export const ViraForm = defineViraElement()({
                         ></${ViraSelect}>
                     `;
             }
+            else if (field.type === ViraFormFieldType.TextArea) {
+                return html `
+                        <${ViraTextArea.assign({
+                    value: field.value || '',
+                    disabled: inputs.isDisabled || field.isDisabled,
+                    hasError: field.hasError,
+                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
+                    placeholder: field.placeholder,
+                    rows: field.rows,
+                    preventResize: field.preventResize,
+                })}
+                            ${field.testId ? testId(field.testId) : nothing}
+                            ${listen(ViraTextArea.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraTextArea}>
+                    `;
+            }
             else if (field.type === ViraFormFieldType.Number) {
                 return html `
                         <${ViraInput.assign({

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

@@ -17,6 +17,8 @@ export declare const ViraJsonForm: import("element-vir").DeclarativeElementDefin
     pendingTypes: Readonly<Record<string, ViraJsonType>>;
     pendingArrayValues: Readonly<Record<string, JsonValue>>;
     showRaw: boolean;
+    rawDraft: string | undefined;
+    rawError: string | undefined;
 }, {
     valueChange: import("element-vir").DefineEvent<JsonValue>;
 }, "vira-json-form-", "vira-json-form-", readonly [], readonly []>;

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

@@ -1,5 +1,6 @@
 import { assertWrap, check } from '@augment-vir/assert';
-import { omitObjectKeys } from '@augment-vir/common';
+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 { viraFontCssVars } from '../styles/font.js';
@@ -29,6 +30,8 @@ export const ViraJsonForm = defineViraElement()({
             pendingTypes: {},
             pendingArrayValues: {},
             showRaw: false,
+            rawDraft: undefined,
+            rawError: undefined,
         };
     },
     styles: css `
@@ -45,18 +48,24 @@ export const ViraJsonForm = defineViraElement()({
             justify-content: flex-end;
         }
 
-        .json-raw-pre {
+        .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};
             font-family: ${viraFontCssVars['vira-monospace'].value};
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
-            white-space: pre-wrap;
-            word-break: break-word;
-            overflow-x: auto;
             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 {
@@ -78,6 +87,7 @@ export const ViraJsonForm = defineViraElement()({
             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};
+            box-sizing: border-box;
         }
 
         .json-group-header {
@@ -103,7 +113,9 @@ export const ViraJsonForm = defineViraElement()({
         }
 
         .json-row-nested {
-            align-items: flex-start;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 4px;
         }
 
         .json-row-label {
@@ -113,10 +125,6 @@ export const ViraJsonForm = defineViraElement()({
             word-break: break-word;
         }
 
-        .json-row-nested .json-row-label {
-            padding-top: 10px;
-        }
-
         .json-row-editor {
             flex-grow: 1;
             min-width: 0;
@@ -136,10 +144,6 @@ export const ViraJsonForm = defineViraElement()({
             justify-content: center;
         }
 
-        .json-row-nested .json-row-delete {
-            padding-top: 4px;
-        }
-
         .json-value-with-switcher {
             display: flex;
             align-items: center;
@@ -191,7 +195,7 @@ export const ViraJsonForm = defineViraElement()({
             font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
         }
     `,
-    render({ inputs, state, dispatch, events, updateState }) {
+    render({ inputs, state, dispatch, events, updateState, host }) {
         const isDisabled = !!inputs.isDisabled;
         const resolveContext = createResolveContext(inputs.schema);
         function jsonPrimitiveToString(entry) {
@@ -733,17 +737,50 @@ export const ViraJsonForm = defineViraElement()({
         })}
                     title=${state.showRaw ? 'Show rich editor' : 'Show raw JSON'}
                     ${listen('click', () => {
+            const goingToRaw = !state.showRaw;
+            host.style.minWidth = goingToRaw ? `${host.offsetWidth}px` : '';
             updateState({
-                showRaw: !state.showRaw,
+                showRaw: goingToRaw,
+                rawDraft: undefined,
+                rawError: undefined,
             });
         })}
                 ></${ViraButton}>
             </div>
         `;
         if (state.showRaw) {
+            const rawText = state.rawDraft ?? JSON.stringify(inputs.value, undefined, 4);
             return html `
                 ${toolbarTemplate}
-                <pre class="json-raw-pre">${JSON.stringify(inputs.value, undefined, 4)}</pre>
+                <textarea
+                    class="json-raw-textarea"
+                    spellcheck="false"
+                    ?disabled=${isDisabled}
+                    .value=${rawText}
+                    ${listen('input', (event) => {
+                const textarea = extractEventTarget(event, HTMLTextAreaElement);
+                const text = textarea.value;
+                const parsed = wrapInTry(() => JSON.parse(text));
+                if (parsed instanceof Error) {
+                    updateState({
+                        rawDraft: text,
+                        rawError: parsed.message,
+                    });
+                }
+                else {
+                    updateState({
+                        rawDraft: text,
+                        rawError: undefined,
+                    });
+                    emitRoot(parsed);
+                }
+            })}
+                ></textarea>
+                ${state.rawError
+                ? html `
+                          <${ViraError}>${state.rawError}</${ViraError}>
+                      `
+                : nothing}
             `;
         }
         const validationErrors = validateAgainstSchema(inputs.value, inputs.schema);

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

@@ -112,7 +112,7 @@ export const ViraLink = defineViraElement()({
         else {
             const linkUrl = inputs.link
                 ? inputs.link.url
-                : inputs.route.router.createRouteUrl(inputs.route.route);
+                : inputs.route.router.createRouteUrl(inputs.route.route).url;
             /** Noopener and noreferrer are needed for security reasons, do not remove! */
             return html `
                 <a

package/dist/elements/vira-text-area.element.d.ts

@@ -0,0 +1,47 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A multi-line text area element with all listeners properly attached. Mirrors the look and feel of
+ * {@link ViraInput} but for multi-line text input.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-text-area
+ */
+export declare const ViraTextArea: import("element-vir").DeclarativeElementDefinition<"vira-text-area", PartialWithUndefined<{
+    /** A label that is shown above the text area, if provided. */
+    label: string;
+    /** If true, applies error styling. */
+    hasError: boolean;
+    /** Number of visible text rows. Defaults to 4. */
+    rows: number;
+    /** If true, blocks the user's ability to resize the text area. */
+    preventResize: boolean;
+}> & {
+    value: string;
+} & PartialWithUndefined<{
+    placeholder: string;
+    disabled: boolean;
+    allowedInputs: string | RegExp;
+    blockedInputs: string | RegExp;
+    disableBrowserHelps: boolean;
+    fitText: boolean;
+    attributePassthrough: import("element-vir").AttributeValues;
+}>, {
+    /**
+     * Used to couple the label and text area together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    /**
+     * Fires whenever a user input created a new value. Does not fire if all input letters are
+     * filtered out due to input restrictions.
+     */
+    valueChange: import("element-vir").DefineEvent<string>;
+    /**
+     * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
+     * the user why their input did not propagate if it was blocked. This does not fire for text
+     * that was blocked out of programmatic "value" property assignments.
+     */
+    inputBlocked: import("element-vir").DefineEvent<string>;
+}, "vira-text-area-disabled" | "vira-text-area-error" | "vira-text-area-prevent-resize", "vira-text-area-padding-horizontal" | "vira-text-area-padding-vertical", readonly [], readonly []>;

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

@@ -0,0 +1,201 @@
+import { randomString } from '@augment-vir/common';
+import { attributes, css, defineElementEvent, html, ifDefined, listen } from 'element-vir';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { viraDisabledStyles } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { filterTextInputValue, textInputListener, } from '../util/shared-text-input-logic.js';
+/**
+ * A multi-line text area element with all listeners properly attached. Mirrors the look and feel of
+ * {@link ViraInput} but for multi-line text input.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-text-area
+ */
+export const ViraTextArea = defineViraElement()({
+    tagName: 'vira-text-area',
+    cssVars: {
+        'vira-text-area-padding-horizontal': '10px',
+        'vira-text-area-padding-vertical': '6px',
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            position: relative;
+            display: inline-flex;
+            width: 320px;
+            box-sizing: border-box;
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        label {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2px;
+            width: 100%;
+            max-width: 100%;
+            cursor: text;
+
+            & .text-area-label {
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: left;
+                flex-shrink: 0;
+                flex-wrap: wrap;
+            }
+        }
+
+        .text-area-wrapper {
+            position: relative;
+            display: inline-flex;
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        textarea {
+            ${noNativeFormStyles};
+            font: inherit;
+            cursor: text;
+            width: 100%;
+            box-sizing: border-box;
+            padding: ${cssVars['vira-text-area-padding-vertical'].value}
+                ${cssVars['vira-text-area-padding-horizontal'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            color: inherit;
+            resize: vertical;
+            outline: none;
+
+            &::placeholder {
+                color: ${viraFormCssVars['vira-form-placeholder-color'].value};
+            }
+
+            &::selection {
+                background: ${viraFormCssVars['vira-form-text-selection-color'].value};
+            }
+
+            &:focus:focus-visible:not([disabled]) ~ .focus-border {
+                ${createFocusStyles({
+        elementBorderSize: '1px',
+        noNesting: true,
+    })}
+            }
+        }
+
+        .border-style {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            z-index: 0;
+            pointer-events: none;
+        }
+
+        ${hostClasses['vira-text-area-prevent-resize'].selector} textarea {
+            resize: none;
+        }
+
+        ${hostClasses['vira-text-area-error'].selector} textarea {
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
+        }
+
+        ${hostClasses['vira-text-area-disabled'].selector} {
+            cursor: not-allowed;
+
+            & * {
+                cursor: not-allowed;
+            }
+
+            & > * {
+                ${viraDisabledStyles};
+            }
+
+            & .focus-border {
+                display: none;
+            }
+        }
+    `,
+    events: {
+        /**
+         * Fires whenever a user input created a new value. Does not fire if all input letters are
+         * filtered out due to input restrictions.
+         */
+        valueChange: defineElementEvent(),
+        /**
+         * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
+         * the user why their input did not propagate if it was blocked. This does not fire for text
+         * that was blocked out of programmatic "value" property assignments.
+         */
+        inputBlocked: defineElementEvent(),
+    },
+    state() {
+        return {
+            /**
+             * Used to couple the label and text area together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
+        };
+    },
+    hostClasses: {
+        'vira-text-area-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-text-area-error': ({ inputs }) => !!inputs.hasError,
+        'vira-text-area-prevent-resize': ({ inputs }) => !!inputs.preventResize || !!inputs.disabled,
+    },
+    render({ inputs, dispatch, state, events }) {
+        const { filtered: filteredValue } = filterTextInputValue({
+            value: inputs.value,
+            allowed: inputs.allowedInputs,
+            blocked: inputs.blockedInputs,
+        });
+        const textAreaTemplate = html `
+            <span class="text-area-wrapper">
+                <textarea
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
+                    rows=${inputs.rows ?? 4}
+                    ?disabled=${inputs.disabled}
+                    autocomplete=${ifDefined(inputs.disableBrowserHelps ? 'off' : undefined)}
+                    autocorrect=${ifDefined(inputs.disableBrowserHelps ? 'off' : undefined)}
+                    autocapitalize=${ifDefined(inputs.disableBrowserHelps ? 'off' : undefined)}
+                    spellcheck=${ifDefined(inputs.disableBrowserHelps ? 'false' : undefined)}
+                    placeholder=${ifDefined(inputs.placeholder || undefined)}
+                    .value=${filteredValue}
+                    ${listen('input', (event) => {
+            textInputListener({
+                inputs,
+                previousValue: filteredValue,
+                event,
+                elementConstructor: HTMLTextAreaElement,
+                inputBlockedCallback(blockedInput) {
+                    dispatch(new events.inputBlocked(blockedInput));
+                },
+                newValueCallback(newValue) {
+                    dispatch(new events.valueChange(newValue));
+                },
+            });
+        })}
+                    ${attributes(inputs.attributePassthrough)}
+                ></textarea>
+
+                <div class="border-style focus-border"></div>
+            </span>
+        `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId}>
+                    <span class="text-area-label">${inputs.label}</span>
+                    ${textAreaTemplate}
+                </label>
+            `;
+        }
+        else {
+            return textAreaTemplate;
+        }
+    },
+});

package/dist/util/shared-text-input-logic.d.ts

@@ -53,11 +53,16 @@ export declare function filterTextInputValue(inputs: IsAllowedInputs): {
  *
  * @category Internal
  */
-export declare function textInputListener({ inputs, previousValue, event, inputBlockedCallback, newValueCallback, }: {
+export declare function textInputListener({ inputs, previousValue, event, elementConstructor, inputBlockedCallback, newValueCallback, }: {
     inputs: SharedTextInputElementInputs;
     /** The value of the input element before this listener fired. */
     previousValue: string;
     event: Event;
+    /**
+     * The constructor for the underlying native element. Defaults to `HTMLInputElement`, but can be
+     * set to `HTMLTextAreaElement` for textarea-based elements.
+     */
+    elementConstructor?: typeof HTMLInputElement | typeof HTMLTextAreaElement | undefined;
     inputBlockedCallback: (blockedInput: string) => void;
     newValueCallback: (newValue: string) => void;
 }): void;

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

@@ -72,8 +72,8 @@ export function filterTextInputValue(inputs) {
  *
  * @category Internal
  */
-export function textInputListener({ inputs, previousValue, event, inputBlockedCallback, newValueCallback, }) {
-    const inputElement = extractEventTarget(event, HTMLInputElement);
+export function textInputListener({ inputs, previousValue, event, elementConstructor, inputBlockedCallback, newValueCallback, }) {
+    const inputElement = extractEventTarget(event, elementConstructor || HTMLInputElement);
     /**
      * This is usually a single character, but can be a bunch of characters in some circumstances.
      * For example, when a bunch of characters are pasted, this will be the entire pasted contents.

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

@@ -17,7 +17,8 @@ export declare enum ViraFormFieldType {
     Email = "email",
     Number = "number",
     Select = "select",
-    Checkbox = "checkbox"
+    Checkbox = "checkbox",
+    TextArea = "text-area"
 }
 /**
  * {@link ViraFormField} properties that are shared between all field types.
@@ -85,6 +86,13 @@ export type ViraFormField = ({
     min: number;
     max: number;
     step: number;
+}> & CommonViraFormFields) | ({
+    type: ViraFormFieldType.TextArea;
+    value: string | undefined;
+} & PartialWithUndefined<{
+    placeholder: string;
+    rows: number;
+    preventResize: boolean;
 }> & CommonViraFormFields);
 /**
  * A collection of form fields for `ViraForm`.

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

@@ -18,6 +18,7 @@ export var ViraFormFieldType;
     ViraFormFieldType["Number"] = "number";
     ViraFormFieldType["Select"] = "select";
     ViraFormFieldType["Checkbox"] = "checkbox";
+    ViraFormFieldType["TextArea"] = "text-area";
 })(ViraFormFieldType || (ViraFormFieldType = {}));
 /**
  * Appends a `'*'` to a label if it exist sand if it is required.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.17.1",
+    "version": "31.18.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,35 +38,35 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.68.2",
-        "@augment-vir/common": "^31.68.2",
-        "@augment-vir/web": "^31.68.2",
+        "@augment-vir/assert": "^31.69.0",
+        "@augment-vir/common": "^31.69.0",
+        "@augment-vir/web": "^31.69.0",
         "@electrovir/color": "^1.7.9",
-        "date-vir": "^8.2.1",
+        "date-vir": "^8.3.2",
         "device-navigation": "^4.5.5",
         "json-schema-to-ts": "^3.1.1",
         "lit-css-vars": "^3.6.2",
         "observavir": "^2.3.2",
         "page-active": "^1.0.3",
-        "spa-router-vir": "^6.4.1",
-        "type-fest": "^5.5.0",
+        "spa-router-vir": "^6.5.0",
+        "type-fest": "^5.6.0",
         "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.68.2",
+        "@augment-vir/test": "^31.69.0",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.27.4",
+        "esbuild": "^0.28.0",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.7.0",
-        "markdown-code-example-inserter": "^3.0.3",
+        "lucide-static": "^1.14.0",
+        "markdown-code-example-inserter": "^3.0.5",
         "theme-vir": "^28.25.0",
-        "typedoc": "^0.28.18",
+        "typedoc": "^0.28.19",
         "typescript": "5.9.3",
-        "vite": "^8.0.3",
+        "vite": "^8.0.10",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {