@nova-design-system/nova-webcomponents 3.24.0 → 3.26.0

package/dist/components/nv-fieldtext.js

@@ -1,9 +1 @@
-import { N as NvFieldtext$1, d as defineCustomElement$1 } from './p-BILd3Ta-.js';
-
-const NvFieldtext = NvFieldtext$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFieldtext, defineCustomElement };
-//# sourceMappingURL=nv-fieldtext.js.map
-
-//# sourceMappingURL=nv-fieldtext.js.map
+import{N as o,d as p}from"./p-C9p4yTS2.js";const s=o,r=p;export{s as NvFieldtext,r as defineCustomElement}

package/dist/components/nv-fieldtextarea.js

@@ -1,282 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { c as clsx } from './p-ChV9xqsO.js';
-import { v as v4 } from './p-BdYh22OP.js';
-
-const nvFieldtextareaCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after,nv-fieldtextarea[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
-
-const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Sets the ID for the input element and the for attribute of the associated
-         * label. If no ID is provided, a random one will be automatically generated
-         * to ensure unique identification, facilitating proper label association and
-         * accessibility.
-         */
-        this.inputId = v4();
-        /**
-         * The disabled prop lets you turn off the textarea field so that users can’t
-         * type in it. When disabled, the field is grayed out and won’t respond to#
-         * clicks or touches.
-         */
-        this.disabled = false;
-        /**
-         * Display the textarea field’s content without allowing users to change it.
-         * Users can still click on it, select, and copy the text, but they won’t be
-         * able to type or delete anything.
-         */
-        this.readonly = false;
-        /**
-         * Marks the textarea field as required, ensuring that the user must fill it out
-         * before submitting the form.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks the textarea field as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = false;
-        /**
-         * Alters the textarea field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Changes the textarea field’s appearance to indicate successful textarea or
-         * validation.
-         */
-        this.success = false;
-        /**
-         * The number of visible text lines for the control. The default is 3. This
-         * can be useful when you want to limit the size of the textarea field or when
-         * you want to make the textarea field smaller to fit a specific layout. The
-         * textarea field will expand vertically to fit the text as the user types.
-         */
-        this.rows = 3;
-        /**
-         * Controls the resize property of a textarea. It can be set to none, both,
-         * horizontal, or vertical. The default is vertical.
-         */
-        this.resize = 'vertical';
-        /**
-         * Enable this to make the textarea automatically resize as the user types,
-         * adjusting the height to fit the content. For the best experience, avoid
-         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
-         * can still be allowed if desired.
-         */
-        this.autosize = false;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on a <textarea>
-         * element.
-         */
-        this.autofocus = false;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
-        //#endregion WATCHERS
-        /****************************************************************************/
-        //#region METHODS
-        this.handleTextarea = (event) => {
-            const textarea = event.target;
-            this.value = textarea.value;
-            this.valueChanged.emit(textarea.value);
-        };
-        this.handleTextareaContainerClick = () => {
-            this.textareaElement.focus();
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * If autosize is true, we need to make sure to update the min-height when
-     * the rows change.
-     */
-    rowsChanged() {
-        if (this.autosize) {
-            this.adjustTextareaHeight();
-        }
-    }
-    /**
-     * If autosize is true, we need to make sure to update the height and
-     * min-height, if false, we need to remove the height property.
-     */
-    autosizeChanged() {
-        if (this.autosize) {
-            this.adjustTextareaHeight();
-        }
-        else {
-            this.textareaElement?.style.removeProperty('height');
-        }
-    }
-    /**
-     * Make sure to adjust the height of the textarea when the value changes
-     * programmatically or by typing when autosize is on.
-     */
-    handleValueChange() {
-        if (this.autosize) {
-            this.adjustTextareaHeight();
-        }
-    }
-    adjustTextareaHeight() {
-        if (this.textareaElement && this.autosize) {
-            /**
-             * The first requestAnimationFrame ensures that the DOM has applied any
-             * pending changes (e.g., value updates or attribute changes) before
-             * proceeding to the next frame.
-             */
-            requestAnimationFrame(() => {
-                /**
-                 * The second requestAnimationFrame ensures that the browser has fully
-                 * recalculated layout and styles based on the updated DOM, such as
-                 * recalculating scrollHeight for the textarea after the new value is
-                 * rendered.
-                 */
-                requestAnimationFrame(() => {
-                    this.textareaElement.style.height = 'auto';
-                    const computedStyle = window.getComputedStyle(this.textareaElement);
-                    const lineHeight = parseFloat(computedStyle.lineHeight);
-                    const paddingTop = parseFloat(computedStyle.paddingTop);
-                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
-                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-                    // Calculate min-height based on rows
-                    const minHeight = lineHeight * this.rows +
-                        paddingTop +
-                        paddingBottom +
-                        borderTopWidth +
-                        borderBottomWidth;
-                    this.textareaElement.style.minHeight = `${minHeight}px`;
-                    this.textareaElement.style.height =
-                        this.textareaElement.scrollHeight + 'px';
-                });
-            });
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillRender() {
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.validation) {
-            this.errorDescription = this.validation;
-            this.error = true;
-        }
-    }
-    componentDidLoad() {
-        if (this.autosize) {
-            this.adjustTextareaHeight();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '0800e702f2212313aba04685710981ea5c9f1e13' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e5978fdc5f8588aba9e04571e0beb772d6c1843e', htmlFor: this.inputId }, h("slot", { key: 'f846862e07c1196e8f7d2c007846f40f90dea6c1', name: "label" }, this.label))), h("div", { key: 'a61a7551075e23adf63bb62c8a44b22fc78af72d', class: "textarea-wrapper" }, h("div", { key: '0e57bca81abbad3752875f3acfad7e94b1aa8f8e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9348dedab4d701980656c180d197db720061964a', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
-                'aria-required': String(ariaRequiredValue),
-            }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '75e01c35855b9275c45546bbe8f1b9129365e208', class: "description" }, h("slot", { key: 'a0ecbbcef8a51b4d0dfaf14f3781a2e6d3d7cac3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8fc8170fa84865844cb544bfbd202b459707247a', hidden: !this.error, class: "error-description" }, h("slot", { key: '58d1774d57bf08c42e7c953b9606c5d9b0954ffc', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "rows": ["rowsChanged"],
-        "autosize": ["autosizeChanged"],
-        "value": ["handleValueChange"]
-    }; }
-    static get style() { return nvFieldtextareaCss; }
-}, [324, "nv-fieldtextarea", {
-        "message": [513],
-        "validation": [513],
-        "inputId": [513, "input-id"],
-        "label": [513],
-        "description": [1537],
-        "placeholder": [513],
-        "name": [513],
-        "value": [1537],
-        "disabled": [516],
-        "readonly": [516],
-        "required": [516],
-        "ariaRequiredAttr": [516, "aria-required"],
-        "error": [1540],
-        "errorDescription": [1537, "error-description"],
-        "success": [516],
-        "maxlength": [514],
-        "minlength": [514],
-        "rows": [514],
-        "resize": [513],
-        "autosize": [516],
-        "autofocus": [516],
-        "fluid": [516]
-    }, undefined, {
-        "rows": ["rowsChanged"],
-        "autosize": ["autosizeChanged"],
-        "value": ["handleValueChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fieldtextarea"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fieldtextarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFieldtextarea$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvFieldtextarea = NvFieldtextarea$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFieldtextarea, defineCustomElement };
-//# sourceMappingURL=nv-fieldtextarea.js.map
-
-//# sourceMappingURL=nv-fieldtextarea.js.map
+import{t as e,p as r,H as a,c as t,h as o,d as i}from"./p-iXsbKJzR.js";import{c as n}from"./p-ChV9xqsO.js";import{v as l}from"./p-BdYh22OP.js";const d=r(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChanged=t(this,"valueChanged",3),this.inputId=l(),this.disabled=!1,this.readonly=!1,this.required=!1,this.ariaRequiredAttr=!1,this.error=!1,this.success=!1,this.rows=3,this.resize="vertical",this.autosize=!1,this.autofocus=!1,this.fluid=!1,this.handleTextarea=e=>{const r=e.target;this.value=r.value,this.valueChanged.emit(r.value)},this.handleTextareaContainerClick=()=>{this.textareaElement.focus()}}rowsChanged(){this.autosize&&this.adjustTextareaHeight()}autosizeChanged(){this.autosize?this.adjustTextareaHeight():this.textareaElement?.style.removeProperty("height")}handleValueChange(){this.autosize&&this.adjustTextareaHeight()}adjustTextareaHeight(){this.textareaElement&&this.autosize&&requestAnimationFrame((()=>{this.textareaElement.style.height="auto";const e=window.getComputedStyle(this.textareaElement);this.textareaElement.style.minHeight=parseFloat(e.lineHeight)*this.rows+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px",this.maxAutoHeight&&this.textareaElement.scrollHeight>this.maxAutoHeight?(this.textareaElement.style.height=this.maxAutoHeight+"px",this.textareaElement.style.overflowY="auto"):(this.textareaElement.style.height=this.textareaElement.scrollHeight+"px",this.textareaElement.style.overflowY="hidden")}))}componentWillRender(){this.message&&(this.description=this.message),this.validation&&(this.errorDescription=this.validation,this.error=!0)}componentDidLoad(){this.autosize&&this.adjustTextareaHeight()}render(){const e=this.el.hasAttribute("aria-required")||this.el.hasAttribute("aria-required-attr"),r=e?this.el.getAttribute("aria-required")||this.el.getAttribute("aria-required-attr"):null,a=e?r:null,t=e?"true"===a||""===a:void 0,l=this.required&&(!e||!0===t);return o(i,{key:"9d7aed8625b1cfa103e275495d40116b8f1314c3"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"6609cc39f3809b833a4c9755c487ba3eef05a5c4",htmlFor:this.inputId},o("slot",{key:"277484af20e4054be5491576ffdfb95ca0f23a79",name:"label"},this.label)),o("div",{key:"6224c47beaee1e15ea9277a1f69f4ac5ea496cb6",class:"textarea-wrapper"},o("div",{key:"6dd7868aa65091dd79c34497dec020945d56f925",class:"textarea-container",onClick:this.handleTextareaContainerClick},o("textarea",{key:"2548dab5d8b387d37036a07c4a76b567c84a8b59",id:this.inputId,ref:e=>this.textareaElement=e,placeholder:this.placeholder,autofocus:this.autofocus,name:this.name,disabled:this.disabled,readOnly:this.readonly,required:l?this.required:void 0,...void 0!==t&&{"aria-required":t+""},maxlength:this.maxlength,minlength:this.minlength,autocomplete:"off",value:this.value,onInput:this.handleTextarea,rows:this.rows,class:n("none"===this.resize&&"resize-none","vertical"===this.resize&&"resize-y","horizontal"===this.resize&&"resize-x","both"===this.resize&&"resize")}))),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"10ba44a9c4b83db00d00c2a4e791c68836413aac",class:"description"},o("slot",{key:"5015686b48e185707376008306c204432199cde1",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"312502a84e08fdacbe77cc55f4e91e0b4122c82b",hidden:!this.error,class:"error-description"},o("slot",{key:"b837f0784d75b8d0df04e025ee8f9a309c6f46d3",name:"error-description"},this.errorDescription)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{rows:[{rowsChanged:0}],autosize:[{autosizeChanged:0}],value:[{handleValueChange:0}]}}static get style(){return'nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtextarea{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtextarea[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtextarea[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtextarea[required]:not([required=false]) label::after,nv-fieldtextarea[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtextarea label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}'}},[324,"nv-fieldtextarea",{message:[513],validation:[513],inputId:[513,"input-id"],label:[513],description:[1537],placeholder:[513],name:[513],value:[1537],disabled:[516],readonly:[516],required:[516],ariaRequiredAttr:[516,"aria-required"],error:[1540],errorDescription:[1537,"error-description"],success:[516],maxlength:[514],minlength:[514],rows:[514],resize:[513],autosize:[516],maxAutoHeight:[514,"max-auto-height"],autofocus:[516],fluid:[516]},void 0,{rows:[{rowsChanged:0}],autosize:[{autosizeChanged:0}],value:[{handleValueChange:0}]}]);function s(){"undefined"!=typeof customElements&&["nv-fieldtextarea"].forEach((r=>{"nv-fieldtextarea"===r&&(customElements.get(e(r))||customElements.define(e(r),d))}))}s();const f=d,c=s;export{f as NvFieldtextarea,c as defineCustomElement}