@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/components/nv-fieldtextarea.js

@@ -0,0 +1,188 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+import { v as v4 } from './p-f5ff676c.js';
+
+const nvFieldtextareaCss = "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}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)}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{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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{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:500;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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtextarea .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 NvFieldtextareaStyle0 = nvFieldtextareaCss;
+
+const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleTextarea = (event) => {
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.valueChanged.emit(textarea.value);
+            if (this.autosize) {
+                this.adjustTextareaHeight();
+            }
+        };
+        this.handleTextareaContainerClick = () => {
+            this.textareaElement.focus();
+        };
+        this.message = undefined;
+        this.validation = undefined;
+        this.textareaId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.success = false;
+        this.maxlength = undefined;
+        this.minlength = undefined;
+        this.rows = 3;
+        this.resize = 'vertical';
+        this.autosize = false;
+    }
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#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() {
+        var _a;
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+        else {
+            (_a = this.textareaElement) === null || _a === void 0 ? void 0 : _a.style.removeProperty('height');
+        }
+    }
+    adjustTextareaHeight() {
+        if (this.textareaElement && this.autosize) {
+            this.textareaElement.style.height = 'auto';
+            // Get computed styles
+            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';
+        }
+    }
+    /**
+     * Class        Properties
+     * resize-none	resize: none;
+     * resize-y	    resize: vertical;
+     * resize-x	    resize: horizontal;
+     * resize	      resize: both;
+     * @returns {string} The resize class.
+     */
+    getResize() {
+        if (this.resize === 'none')
+            return 'resize-none';
+        if (this.resize === 'vertical')
+            return 'resize-y';
+        if (this.resize === 'horizontal')
+            return 'resize-x';
+        if (this.resize === 'both')
+            return 'resize';
+        return 'resize-none';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '05e5be100e389a0d604ef6c6a126a3992c4400d8' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f0e8d865770ad7249748d76eafc520733a73df61', htmlFor: this.textareaId }, h("slot", { key: '88dc412644dd9ba26c1c4fd6495257071ea9355f', name: "label" }, this.label))), h("div", { key: 'ed27e42a150bacb526fad21c33167e5daa88fbdb', class: "textarea-wrapper" }, h("div", { key: '12afa52b296240e0b8cb7ee3dd68100619a0aaef', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9269535072a3df3aff0f4d6093618ef3d0b9aed3', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f4cbe287f58bcffa17f9175b5507ffd260652805', class: "description" }, h("slot", { key: 'b3df2bfd379089e489173b0c961ce9bc04080892', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cb194709b15cbe0e4f243161bb34f5e487b2e073', hidden: !this.error, class: "error-description" }, h("slot", { key: 'de80cb7d6b1ad8e9f33bd17a407604df66b8eda1', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "rows": ["rowsChanged"],
+        "autosize": ["autosizeChanged"]
+    }; }
+    static get style() { return NvFieldtextareaStyle0; }
+}, [68, "nv-fieldtextarea", {
+        "message": [1],
+        "validation": [1],
+        "textareaId": [513, "textarea-id"],
+        "label": [513],
+        "description": [1537],
+        "placeholder": [513],
+        "name": [513],
+        "value": [1537],
+        "disabled": [516],
+        "readonly": [516],
+        "required": [516],
+        "error": [1540],
+        "errorDescription": [1537, "error-description"],
+        "success": [516],
+        "maxlength": [514],
+        "minlength": [514],
+        "rows": [514],
+        "resize": [513],
+        "autosize": [516]
+    }, undefined, {
+        "rows": ["rowsChanged"],
+        "autosize": ["autosizeChanged"]
+    }]);
+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

package/dist/components/nv-fieldtextarea.js.map

@@ -0,0 +1 @@
+{"file":"nv-fieldtextarea.js","mappings":"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","names":["NvFieldtextarea","uuidv4"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-fieldtoggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvFieldtoggle extends Components.NvFieldtoggle, HTMLElement {}
+export const NvFieldtoggle: {
+    prototype: NvFieldtoggle;
+    new (): NvFieldtoggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-fieldtoggle.js

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-632bedb8.js';
+import { c as clsx } from './p-8a1a6e56.js';
+import { v as v4 } from './p-f5ff676c.js';
+
+const nvFieldtoggleCss = "nv-fieldtoggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldtoggle:not([disabled],[readonly]) input,nv-fieldtoggle:not([disabled],[readonly]) label{cursor:pointer}nv-fieldtoggle.label-placement-before{flex-direction:row-reverse}nv-fieldtoggle[disabled]{opacity:0.5}nv-fieldtoggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldtoggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-fieldtoggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-fieldtoggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:focus,nv-fieldtoggle .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldtoggle .input-container input[type=checkbox]:focus-visible,nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldtoggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-fieldtoggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-fieldtoggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-fieldtoggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-fieldtoggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvFieldtoggleStyle0 = nvFieldtoggleCss;
+
+const NvFieldtoggle$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtoggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.checkedChanged = createEvent(this, "checkedChanged", 7);
+        this.inputId = v4();
+        this.name = undefined;
+        this.value = undefined;
+        this.label = undefined;
+        this.labelPlacement = undefined;
+        this.hideLabel = false;
+        this.description = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    /****************************** WATCHERS ************************************/
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.checked = target.checked;
+        }
+    }
+    /********************************* RENDER ***********************************/
+    render() {
+        return (h(Host, { key: '32394c2068002d65652918e998a837ed413db2e8', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'd2a037dbf554e6885853e10d1c5097e2900f7594', class: "input-container" }, h("input", { key: 'c9f150ee7742ed49066f2af75e9aa2fbe03750ba', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '6b6d95647dcd2eb850c6e78420581d7205707e62', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '00393d9a26ea57a6ecacc0a248d450d5ef8f543c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '8e2f5085aea5337d59e753ecd856a3fc6e057269', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c44a88b35cab4b2c034a2f29a9bf0ec168b86a50', class: "description" }, h("slot", { key: '5d80f64e1ac6d61025aa54b77f5e7b0860e6cc11', name: "description" }, this.description))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+    static get style() { return NvFieldtoggleStyle0; }
+}, [4, "nv-fieldtoggle", {
+        "inputId": [1, "input-id"],
+        "name": [1],
+        "value": [1],
+        "label": [1],
+        "labelPlacement": [513, "label-placement"],
+        "hideLabel": [4, "hide-label"],
+        "description": [513],
+        "checked": [1540],
+        "disabled": [4],
+        "readonly": [4]
+    }, [[0, "change", "handleChange"]], {
+        "checked": ["onCheckedChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-fieldtoggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-fieldtoggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvFieldtoggle$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvFieldtoggle = NvFieldtoggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvFieldtoggle, defineCustomElement };
+
+//# sourceMappingURL=nv-fieldtoggle.js.map

package/dist/components/nv-fieldtoggle.js.map

@@ -0,0 +1 @@
+{"file":"nv-fieldtoggle.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,ilHAAilH,CAAC;AAC3mH,4BAAe,gBAAgB;;MCwBlBA,eAAa;;;;;uBAWGC,EAAM,EAAE;;;;;yBAgCL,KAAK;;uBAWhB,KAAK;wBAIK,KAAK;wBAOL,KAAK;;;;;;;IAgBlC,gBAAgB,CAAC,OAAgB;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,CAC7D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,IAEhD,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvFieldtoggle","uuidv4"],"sources":["src/components/nv-fieldtoggle/nv-fieldtoggle.scss?tag=nv-fieldtoggle","src/components/nv-fieldtoggle/nv-fieldtoggle.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n  position: relative;\n\n  &:not([disabled], [readonly]) {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: 450;\n  line-height: var(--form-description-line-height);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-container-styles() {\n  position: relative;\n  color: var(--components-form-shape-foreground-default);\n\n  &:has(input[type=\"checkbox\"]:disabled:not([readonly])) {\n    color: var(--components-form-shape-foreground-disabled);\n  }\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-toggle-width);\n  height: var(--form-toggle-height);\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: var(--form-toggle-radius);\n  border-width: var(--form-toggle-border-width);\n  border-style: solid;\n  border-color: var(--components-form-field-border-default);\n  background: var(--components-form-field-background-default);\n\n  &::after {\n    content: '';\n    display: block;\n    width: var(--form-toggle-switch-dot-default);\n    height: var(--form-toggle-switch-dot-default);\n    background-color: var(--components-form-shape-foreground-switch-dot);\n    border-radius: var(--radius-rounded-full);\n    position: absolute;\n    top: 50%;\n    left: 25%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:hover {\n    border-color: var(--components-form-field-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--components-form-field-border-default);\n  }\n\n  @include focus-ring();\n\n  &:checked {\n    background: var(--components-form-field-background-checked);\n    border-color: var(--components-form-field-background-checked);\n\n    &::after {\n      content: '';\n      display: block;\n      width: var(--form-toggle-switch-dot-default);\n      height: var(--form-toggle-switch-dot-default);\n      background-color: var(--components-form-shape-foreground-default);\n      border-radius: var(--radius-rounded-full);\n      position: absolute;\n      top: 50%;\n      left: 75%;\n      transform: translate(-50%, -50%);\n    }\n\n    &:focus {\n      background: var(--components-form-field-background-checked);\n      border-color: var(--components-form-field-border-focus);\n    }\n  }\n\n  &:disabled:not([readonly]) {\n    box-shadow: unset;\n    background: var(--components-form-field-background-disabled);\n    border-color: var(--components-form-field-border-default);\n\n    &:checked {\n      &::after {\n        background-color: var(--components-form-shape-foreground-disabled);\n      }\n    }\n  }\n}\n\nnv-fieldtoggle {\n  @include root-styles();\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n\n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n  label {\n    @include label-styles();\n  }\n\n  .input-container {\n    @include input-container-styles();\n\n    input[type=\"checkbox\"] {\n      @include input-styles();\n    }\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type FieldLabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fieldtoggle',\n  styleUrl: 'nv-fieldtoggle.scss',\n  shadow: false,\n})\nexport class NvFieldtoggle {\n  @Element() el!: HTMLNvFieldtoggleElement;\n\n  /******************************** PROPERTIES ********************************/\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop()\n  readonly inputId: string = uuidv4();\n\n  /**\n   * The name attribute for the toggle input, used to reference the form data\n   * after submission.\n   */\n  @Prop()\n  readonly name?: string;\n\n  /**\n   * The value attribute of the toggle input, representing the value sent on\n   * form submission when the toggle is checked.\n   */\n  @Prop()\n  readonly value?: string;\n\n  /** The label displayed next to the toggle.*/\n  @Prop()\n  readonly label?: string;\n\n  /**\n   * Determines the position of the label relative to the toggle, either\n   * 'start' (before) or 'end' (after).\n   */\n  @Prop({ reflect: true })\n  readonly labelPlacement: `${FieldLabelPlacement}`;\n\n  /**\n   * Hides the label visually while still keeping it available for screen\n   * readers.\n   */\n  @Prop()\n  readonly hideLabel: boolean = false;\n\n  /**\n   * A description providing additional context or information about the\n   * toggle.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /** Indicates whether the toggle is checked or not. */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Disables the toggle, preventing user interaction. */\n  @Prop()\n  readonly disabled: boolean = false;\n\n  /**\n   * Sets the toggle to read-only, preventing user changes but still allowing\n   * focus and selection of text.\n   */\n  @Prop()\n  readonly readonly: boolean = false;\n\n  /******************************** EVENTS ************************************/\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  /****************************** WATCHERS ************************************/\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  onCheckedChanged(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the toggle input element and updates the checked state.\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target.type === 'checkbox' && target.id === this.inputId) {\n      if (this.readonly || this.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      this.checked = target.checked;\n    }\n  }\n\n  /********************************* RENDER ***********************************/\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n        )}\n      >\n        <div class=\"input-container\">\n          <input\n            type=\"checkbox\"\n            id={this.inputId}\n            name={this.name}\n            autocomplete=\"off\"\n            value={this.value}\n            checked={Boolean(this.checked)}\n            disabled={this.disabled || this.readonly}\n            readonly={this.readonly}\n          />\n        </div>\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label\n              htmlFor={this.inputId}\n              class={clsx(this.hideLabel && 'visually-hidden')}\n            >\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nv-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvIcon extends Components.NvIcon, HTMLElement {}
+export const NvIcon: {
+    prototype: NvIcon;
+    new (): NvIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-icon.js

@@ -0,0 +1,8 @@
+import { N as NvIcon$1, d as defineCustomElement$1 } from './p-6146d4b0.js';
+
+const NvIcon = NvIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvIcon, defineCustomElement };
+
+//# sourceMappingURL=nv-icon.js.map

package/dist/components/nv-icon.js.map

@@ -0,0 +1 @@
+{"file":"nv-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nv-iconbutton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvIconbutton extends Components.NvIconbutton, HTMLElement {}
+export const NvIconbutton: {
+    prototype: NvIconbutton;
+    new (): NvIconbutton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-iconbutton.js

@@ -0,0 +1,8 @@
+import { N as NvIconbutton$1, d as defineCustomElement$1 } from './p-be79e7bc.js';
+
+const NvIconbutton = NvIconbutton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvIconbutton, defineCustomElement };
+
+//# sourceMappingURL=nv-iconbutton.js.map

package/dist/components/nv-iconbutton.js.map

@@ -0,0 +1 @@
+{"file":"nv-iconbutton.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nv-loader.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvLoader extends Components.NvLoader, HTMLElement {}
+export const NvLoader: {
+    prototype: NvLoader;
+    new (): NvLoader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-loader.js

@@ -0,0 +1,8 @@
+import { N as NvLoader$1, d as defineCustomElement$1 } from './p-8da6d9a3.js';
+
+const NvLoader = NvLoader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvLoader, defineCustomElement };
+
+//# sourceMappingURL=nv-loader.js.map

package/dist/components/nv-loader.js.map

@@ -0,0 +1 @@
+{"file":"nv-loader.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nv-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvMenu extends Components.NvMenu, HTMLElement {}
+export const NvMenu: {
+    prototype: NvMenu;
+    new (): NvMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;