@nova-design-system/nova-webcomponents 3.0.0-beta.38 → 3.0.0-beta.40

package/dist/native/{p-d67b7502.entry.js → p-fde56f9c.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as t,a as n,g as r}from"./p-5439afb8.js";import{c as i}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const c='nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-toggle .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-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .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-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .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-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=c;const s=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"fd7d393f428febc115781037af278a63e885b050",class:i(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"438c1274a3b4232bbfc4bb85949ce8f47c53f427",class:"input-container"},t("input",{key:"21e8bcb0ab978e4121865d19347200a3bb764f80",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})),t("div",{key:"087fa18da2cf5e0c6a3820315849789fe78773e6",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"b675e8019b0f01d42c36c8a9531ddfc4f1d228c0",htmlFor:this.inputId,class:i(this.hideLabel&&"visually-hidden")},t("slot",{key:"060b5ad24ba0425d0f528d06e268c83631b1c4b8",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"c6ff377866f8811173ff06b8aad0fc86d2f4baa8",class:"description"},t("slot",{key:"3fc242b00e50b5d504226cf3352859fa9e1571fa",name:"description"},this.description))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=l;export{s as nv_toggle};
-//# sourceMappingURL=p-d67b7502.entry.js.map
+import{r as e,c as o,h as t,a as n,g as r}from"./p-5439afb8.js";import{c as a}from"./p-8a1a6e56.js";import{v as i}from"./p-f5ff676c.js";const c='nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle 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-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-toggle .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-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .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-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .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-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .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-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=c;const s=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=i();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"0ea7a73c5b656d0d7f9342a9526dc00a66a94f83",class:a(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"eb294c704b9f3568e03af1817a302d2edfe24486",class:"input-container"},t("input",{key:"777b6e7172691aba435751364c5908f381390f23",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})),t("div",{key:"92dbdb51e8c9fc231572009d37e274e070334292",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac",htmlFor:this.inputId,class:a(this.hideLabel&&"visually-hidden")},t("slot",{key:"bf6cb8ff071c11d7809580a5dee61a1dfd89c112",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"db77b501162725dcf3b05b3d7c4b26d0f933ac8b",class:"description"},t("slot",{key:"a201c736b5237e88ee0d8caa3999874caa7f85f3",name:"description"},this.description))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=l;export{s as nv_toggle};
+//# sourceMappingURL=p-fde56f9c.entry.js.map

package/dist/types/components/nv-alert/nv-alert.d.ts

@@ -44,6 +44,10 @@ export declare class NvAlert {
      * Controls the visibility of the alert. Will animate with fade and collapse.
      */
     hidden: boolean;
+    /**
+     * When true, the alert will not animate when it is hidden or shown.
+     */
+    readonly hasNoAnimations: boolean;
     /****************************************************************************/
     /**
      * Emits when the 'hidden' prop changes, reflecting a change in visibility.
@@ -78,6 +82,16 @@ export declare class NvAlert {
      * @returns {string} - The default icon name.
      */
     private getDefaultIcon;
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    private updateVisibility;
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    private toggleHiddenClass;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/

package/dist/types/components/nv-base/nv-base.docs.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    component: string;
+    component: "nv-base";
     skip: true;
 };
 export default _default;

package/dist/types/components/nv-button/nv-button.d.ts

@@ -47,17 +47,28 @@ export declare class NvButton {
     /**
      * Sets the button type to control its function in forms. Use 'submit' to send
      * form data, 'reset' to clear the form, or 'button' for a standard button
-     * that doesn’t interact with form submission by default.
+     * that doesn't interact with form submission by default.
      */
     readonly type: `${ButtonType}`;
+    /**
+     * Sets the form associated with the button in case the (submit) button is not a child of a form.
+     * Matches the native HTML button 'form' attribute behavior.
+     */
+    readonly form: string;
     /****************************************************************************/
     /**
-     * Handles form-related actions when the button is clicked.
-     * - Submits the form if the button type is 'submit'.
-     * - Resets the form if the button type is 'reset'.
+     * Handles button click events, managing form actions and disabled states.
+     * Prevents default behavior when button is disabled or loading, and
+     * processes form submissions/resets when appropriate.
      * @param {Event} event - The click event.
      */
-    private handleClick;
+    private handleButtonClick;
+    /**
+     * Processes form-related actions by finding the associated form element
+     * and triggering the appropriate action (submit/reset) based on button type.
+     * Falls back to ElementInternals form if no explicit form ID is provided.
+     */
+    private processFormAction;
     /****************************************************************************/
     handleKeyDown(event: KeyboardEvent): void;
     handleTouchStart(event: TouchEvent): void;

package/dist/types/components/nv-calendar/nv-calendar.d.ts

@@ -0,0 +1,383 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DateRange } from '../../interfaces/dateRange';
+/**
+ * @slot default - Child content of the component.
+ * @slot actions - Child content of the component.
+ */
+export declare class NvCalendar {
+    el: HTMLNvCalendarElement;
+    /****************************************************************************/
+    /**
+     * First day of the week (0 = Sunday, 1 = Monday, etc.)
+     * @default 0
+     */
+    readonly firstDayOfWeek: number;
+    /**
+     * Number of calendars to display
+     * @default 1
+     */
+    numberOfCalendars: number;
+    /**
+     * Selected date (ISO string format)
+     * ex: "2025-03-15"
+     */
+    singleValue: string;
+    /**
+     * Selected date range
+     * format: { start: ISO string, end: ISO string }
+     * ex: { start: "2025-03-15", end: "2025-03-20" }
+     */
+    rangeValue: string;
+    /**
+     * Minimum date for selection (ISO string format, ex: "2025-01-01")
+     */
+    readonly min?: string;
+    /**
+     * Maximum date for selection (ISO string format, ex: "2025-12-31")
+     */
+    readonly max?: string;
+    /** Disabled dates (ISO string array)
+     * @default '[]'
+     */
+    readonly disabledDates: string;
+    /** Locale for date formatting
+     * @default 'en-BE'
+     */
+    readonly locale: string;
+    /** Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
+     * @default 'YYYY-MM-DD'
+     * @note If the date format is in UTC mode, the date will be displayed in UTC time.
+     * @note If the date format is not in UTC mode, the date will be displayed in the local time.
+     */
+    readonly dateFormat: string;
+    /**
+     * Footer placement
+     * @default 'bottom'
+     */
+    readonly shortcutsPlacement: 'bottom' | 'left' | 'right';
+    /**
+     * Selection type (single date or date range)
+     * @default 'single'
+     */
+    readonly selectionType: 'single' | 'range';
+    /**
+     * Show action buttons
+     * @default false
+     */
+    readonly showActions: boolean;
+    /**
+     * Custom actions to display in the footer
+     * JSON array of objects with the following properties:
+     * - label: string
+     * - onClick: function
+     * @default '[]'
+     */
+    readonly shortcuts: string;
+    /**
+     * Show week numbers
+     * @default true
+     */
+    readonly showWeekNumbers: boolean;
+    /** Cache for parsed disabled dates */
+    private parsedDisabledDates;
+    /****************************************************************************/
+    /** Current date */
+    currentDate: Date;
+    /** Selected date */
+    selectedDate: Date | null;
+    /** Start date */
+    startDate: Date | null;
+    /** End date */
+    endDate: Date | null;
+    /** List of formatted months for the selector */
+    private months;
+    /****************************************************************************/
+    /**
+     * Emitted when a single date is selected
+     */
+    singleDateChange: EventEmitter<string>;
+    /**
+     * Emitted when a date range is selected
+     */
+    rangeDateChange: EventEmitter<DateRange>;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    /**
+     * Change the displayed month
+     * @param {number} offset - Month offset (-1 for previous, 1 for next)
+     * @param {number} calendarOffset - Month offset for the calendar (0 by default)
+     */
+    private changeMonth;
+    /**
+     * Handles date selection based on the mode
+     * @param {Date} date - Selected date
+     */
+    private handleDateSelection;
+    /**
+     * Handles single date selection
+     * @param {Date} date - Selected date
+     */
+    private handleSingleSelection;
+    /**
+     * Handles range date selection
+     * @param {Date} date - Selected date
+     */
+    private handleRangeSelection;
+    /**
+     * Calculates the ISO week number
+     * @param {Date} date - Date to calculate
+     * @returns {number} Week number
+     */
+    private getWeekNumber;
+    /**
+     * Checks if a date is disabled.
+     * Disabled if:
+     * - The date is before min (if defined)
+     * - The date is after max (if defined)
+     * - The date is in the disabledDates array
+     * @param {Date} date - Date to check
+     * @returns {boolean} true if the date is disabled
+     */
+    private isDateDisabled;
+    /**
+     * Checks if a date is in the selected range
+     * @param {Date} date - Date to check
+     * @returns {boolean} true if the date is in the range
+     */
+    private isDateInRange;
+    /**
+     * Retrieves the localized day names
+     * @returns {string[]} Array of short day names
+     */
+    private getDayNames;
+    /**
+     * Generates the days of the current month
+     * @param {number} offset - Month offset (0 by default)
+     * @param {number} totalCalendars - Number of calendars to display (1 by default)
+     * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
+     */
+    private getDaysInMonth;
+    /** Initializes the list of formatted months according to the locale */
+    private initializeMonths;
+    /**
+     * Retrieves the localized abbreviation for "week"
+     * @returns {string} Localized abbreviation for "week"
+     */
+    private getLocalizedWeekText;
+    /**
+     * Handles month change in the selector
+     * @param {Event} event - Month change event
+     * @param {number} calendarOffset - Calendar offset (0 by default)
+     */
+    private handleMonthChange;
+    /**
+     * Handles year change in the numeric entry
+     * @param {Event} event - Year change event
+     * @param {number} calendarOffset - Calendar offset (0 by default)
+     */
+    private handleYearChange;
+    /**
+     * Handles week selection
+     * @param {Date[]} weekDays - Selected week days
+     * @param {number} calendarIndex - Calendar index from which the selection is made
+     */
+    private handleWeekSelection;
+    /**
+     * Checks if a date corresponds to today
+     * @param {Date} date - Date to check
+     * @returns {boolean} true if the date is today
+     */
+    private isToday;
+    /**
+     * Watches the changes of the number of calendars
+     * @watch numberOfCalendars
+     * @param {number} newValue - New number of calendars
+     */
+    validateNumberOfCalendars(newValue: number): void;
+    /**
+     * Watches the changes of the selected date range
+     * @watch rangeValue
+     * @param {Object} newValue - New rangeValue value
+     * @param {string} newValue.start - Start date
+     * @param {string} newValue.end - End date
+     */
+    onRangeValueChange(newValue: string): void;
+    /**
+     * Watches the changes of the disabled dates
+     * @watch disabledDates
+     * @description Watches the changes of the disabled dates
+     */
+    handleDisabledDatesChange(): void;
+    /**
+     * Convert a date string/Date to a Date without timezone offset
+     * @param {string | Date} dateInput - Date under string or Date object form
+     * @returns {Date} Date in Date form without timezone offset
+     */
+    private parseDate;
+    /**
+     * Formats a date to a string according to the format
+     * @param {Date} date - Date to format
+     * @returns {string} Formatted date
+     */
+    private formatDate;
+    /**
+     * Parse and cache the disabled dates
+     * @description Parse and cache the disabled dates
+     */
+    private parseDisabledDates;
+    /**
+     * Checks if two dates are identical
+     * @param {Date | null} date1 - First date
+     * @param {Date | null} date2 - Second date
+     * @returns {boolean} true if the dates are identical
+     */
+    private isSameDate;
+    /**
+     * Checks if a date is identical or after another date
+     * @param {Date} date - Date to check
+     * @param {Date} compareDate - Reference date
+     * @returns {boolean} true if `date` >= `compareDate`
+     */
+    private isSameOrAfter;
+    /**
+     * Checks if a date is identical or before another date
+     * @param {Date} date - Date to check
+     * @param {Date} compareDate - Reference date
+     * @returns {boolean} true if `date` <= `compareDate`
+     */
+    private isSameOrBefore;
+    /**
+     * Applies a shortcut selection
+     * @param {Object} shortcut - Shortcut to apply
+     * @param {string | Date} shortcut.singleValue - Selected date value
+     * @param {Object} shortcut.rangeValue - Start and end date values
+     * @param {string | Date} shortcut.rangeValue.start - Start date value
+     * @param {string | Date} shortcut.rangeValue.end - End date value
+     * @param {string} shortcut.label - Label
+     */
+    private applyShortcut;
+    /**
+     * Method to force the complete calendar update (and fix the persistent hover problem)
+     * @param {Date} newDate - Date to force
+     */
+    private forceCalendarUpdate;
+    /**
+     * Function to reset the touch effect (Mobile fix)
+     */
+    private clearTouchState;
+    /**
+     * Handles month change with an offset
+     * @param {number} direction - Direction (-1 for previous, 1 for next)
+     * @param {number} offset - Month offset (0 by default)
+     * @returns {Function} Change month handler
+     */
+    private getChangeMonthHandler;
+    /**
+     * Handles month change from an event (ex: dropdown)
+     * @param {number} offset - Month offset (0 by default)
+     * @returns {Function} Change month handler
+     */
+    private getHandleMonthChange;
+    /**
+     * Handles year change from an event (ex: dropdown)
+     * @param {number} offset - Year offset (0 by default)
+     * @returns {Function} Change year handler
+     */
+    private getHandleYearChange;
+    /**
+     * Handles day click
+     * @param {Date} date - Date to handle
+     * @param {boolean} isDisabled - Whether the date is disabled
+     * @returns {Function} Day click handler
+     */
+    private getDayClickHandler;
+    /**
+     * Handles shortcut selection
+     * @param {Object} shortcut - Shortcut to handle
+     * @param {string | Date} shortcut.singleValue - Selected date value
+     * @param {Object} shortcut.rangeValue - Start and end date values
+     * @param {string | Date} shortcut.rangeValue.start - Start date value
+     * @param {string | Date} shortcut.rangeValue.end - End date value
+     * @param {string} shortcut.label - Label
+     * @returns {Function} Shortcut selection handler
+     */
+    private getShortcutHandler;
+    /**
+     * Handles week selection
+     * @param {Date[]} dates - Dates to handle
+     * @param {number} index - Calendar index
+     * @returns {Function} Week selection handler
+     */
+    private getWeekSelectionHandler;
+    private parsedShortcuts;
+    /**
+     * Checks if the date format is in UTC mode
+     * @returns {boolean} true if the date format is in UTC mode
+     */
+    private get isUTCMode();
+    /**
+     * Checks if shortcuts are visible
+     * @returns {boolean} true if shortcuts are visible
+     */
+    private get hasShortcuts();
+    /**
+     * Checks if actions are visible
+     * @returns {boolean} true if actions are visible
+     */
+    private get hasActions();
+    /**
+     * Resets the current selection
+     */
+    private resetSelection;
+    /**
+     * Confirms the current selection
+     */
+    private confirmSelection;
+    /****************************************************************************/
+    /**
+     * Renders the header
+     * @param {number} offset - Month offset
+     * @param {number} index - Calendar index
+     * @returns {JSX.Element} Header
+     * @description Renders the header of the calendar
+     */
+    private renderHeader;
+    /**
+     * Renders the week numbers
+     * @param {Array<{date: Date}>} weeks - Weeks to render
+     * @param {number} index - Calendar index
+     * @returns {JSX.Element} Week numbers
+     * @description Renders the week numbers of the calendar
+     */
+    private renderWeekNumbers;
+    private renderDaysGrid;
+    /**
+     * Renders the calendar
+     * @param {number} index - Calendar index
+     * @param {number} offset - Month offset
+     * @returns {JSX.Element} Calendar
+     * @description Renders the calendar of the calendar
+     */
+    private renderCalendar;
+    /**
+     * Renders the shortcuts
+     * @returns {JSX.Element} Shortcuts
+     * @description Renders the shortcuts of the calendar
+     */
+    private renderShortcuts;
+    /**
+     * Renders the actions
+     * @returns {JSX.Element} Actions
+     * @description Renders the actions of the calendar
+     * @slot actions - Child content of the component.
+     */
+    private renderActions;
+    /**
+     * Renders the datepicker
+     * @returns {JSX.Element} Datepicker
+     * @description Renders the datepicker of the calendar
+     * @slot default - Child content of the component.
+     */
+    render(): any;
+}

package/dist/types/components/{nv-tablerow/nv-tablerow.docs.d.ts → nv-calendar/nv-calendar.docs.d.ts}

@@ -1,4 +1,4 @@
 import type { NovaDocs } from '../../nova-docs';
 import { Components } from '../../components';
-declare const NvTablerowDocs: NovaDocs<Components.NvTablerow>;
-export default NvTablerowDocs;
+declare const NvCalendarDocs: NovaDocs<Components.NvCalendar>;
+export default NvCalendarDocs;

package/dist/types/components/nv-datagrid/nv-datagrid.d.ts

@@ -1,24 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { Column } from '../../interfaces/Column';
+import { ActionEvent } from '../../interfaces/actionEvent';
 /**
  * A flexible data grid component powered by `@tanstack/table-core`.
  * @slot default - Use this slot to insert HTML into the data grid content.
- * @slot head - Use this slot to insert HTML into the data grid header.
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
- * @slot body - Use this slot to insert HTML into the data grid body.
  *
  * @deprecated [EXPERIMENTAL]
  * @experimental - This component is still under development and is not ready for use.
  */
 export declare class NvDatagrid {
     el: HTMLNvDatagridElement;
+    private readonly templateCache;
+    private readonly headerTemplateCache;
     /****************************************************************************/
     private table;
     parsedColumns: Column[];
     parsedData: any[];
-    hasSlotHead: boolean;
-    hasSlotBody: boolean;
     /****************************************************************************/
+    /**
+     * The data to display in the data grid.
+     * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
+     * @default []
+     */
+    readonly data: any[];
     /**
      * The columns to display in the data grid.
      * @example
@@ -30,28 +36,25 @@ export declare class NvDatagrid {
      * @default []
      */
     readonly columns: Column[];
+    /**
+     * The data to display in the data grid.
+     * It can be passed directly as an array of objects or as a JSON string.
+     * If both `data` and `dataJson` are provided, `data` takes precedence.
+     * @example `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`
+     */
+    readonly dataJson?: string;
     /**
      * The columns to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string
-     * (e.g., `[{"header":"Name","accessor":"name"},{"header":"Age","accessor":"age"},{"header":"Email","accessor":"email"}]`).
+     * It can be passed directly as an array of objects or as a JSON string.
      * If both `columns` and `columnsJson` are provided, `columns` takes precedence.
      * @example `[{"header":"Name","accessor":"name"},{"header":"Age","accessor":"age"},{"header":"Email","accessor":"email"}]`
      */
     readonly columnsJson?: string;
     /**
-     * The data to display in the data grid.
-     * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-     * @default []
+     * Fallback value to be displayed when data is not available
+     * @default 'N/A'
      */
-    readonly data: any[];
-    /**
-     * The data to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string
-     * (e.g., `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`).
-     * If both `data` and `dataJson` are provided, `data` takes precedence.
-     * @example `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`
-     */
-    readonly dataJson?: string;
+    readonly fallbackValue: string;
     /**
      * The message to display when there is no data available.
      * @default 'No data available'
@@ -63,28 +66,42 @@ export declare class NvDatagrid {
      */
     readonly noColumnsNoDataMessage: string;
     /****************************************************************************/
-    parseColumns(newValue: Column[], oldValue: Column[]): void;
-    parseJsonColumns(newValue: string | undefined): void;
-    parseData(newValue: any[], oldValue: any[]): void;
-    parseJsonData(newValue: string | undefined): void;
-    handleParsedChange(): void;
-    /****************************************************************************/
-    private initializeTable;
     /**
-     * Parses the columns array.
-     * @param {Column[]} newValue - The new value of the columns array.
-     * @param {Column[]} oldValue - The old value of the columns array.
+     * Caches templates for cells and headers upfront to improve performance.
      */
-    private parseColumnsArray;
+    private cacheTemplates;
+    private parseDataAndColumns;
+    private deepEqual;
     /**
-     * Parses the data array.
+     * Parses the data array and sets the state accordingly
      * @param {any[]} newValue - The new value of the data array.
      * @param {any[]} oldValue - The old value of the data array.
      */
     private parseDataArray;
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {Column[]} newValue - The new value of the columns array.
+     * @param {Column[]} oldValue - The old value of the columns array.
+     */
+    private parseColumnsArray;
+    private initializeTable;
+    private generateColumns;
+    private getTableData;
+    private renderTemplate;
+    private replaceKeyWithValue;
+    private replacePlaceholdersTextContent;
+    private replacePlaceholdersAttributes;
+    private replacePlaceholdersProperties;
+    /****************************************************************************/
+    parseColumns(newValue: Column[], oldValue?: Column[]): void;
+    parseJsonColumns(newValue: string | undefined, oldValue: Column[]): void;
+    parseData(newValue: any[], oldValue?: any[]): void;
+    parseJsonData(newValue: string | undefined): void;
+    handleParsedChange(): void;
     /****************************************************************************/
     componentWillLoad(): void;
-    componentDidLoad(): void;
+    /****************************************************************************/
+    action: EventEmitter<ActionEvent>;
     /****************************************************************************/
     render(): any;
 }

package/dist/types/components/nv-datagridcolumn/nv-datagridcolumn.d.ts

@@ -1,12 +1,13 @@
 /**
- * @slot default - Use this slot to insert HTML into the data grid column.
+ * @slot header - Defines how to render the header of the column.
+ * @slot cell - Defines how to render every cell of the column.
  */
 export declare class NvDatagridcolumn {
     /****************************************************************************/
     /**
      * Defines the header of the column.
      */
-    readonly header: string;
+    readonly header?: string;
     /**
      * Defines the accessor of the column.
      */

package/dist/types/components/nv-dialog/nv-dialog.d.ts

@@ -9,6 +9,7 @@ export declare class NvDialog {
     el: HTMLNvDialogElement;
     private dialogElement;
     private eventsAttached;
+    private form;
     /****************************************************************************/
     /**
      * @internal
@@ -41,12 +42,6 @@ export declare class NvDialog {
      * If true, the dialog will be closed when the backdrop is clicked.
      */
     readonly clickOutside: boolean;
-    /**
-     * Controls the dialog's autofocus behavior. When false (default), the dialog will
-     * automatically focus the first focusable element. When true, automatic focus is
-     * disabled and you must manually set focus on an element for accessibility compliance.
-     */
-    readonly manualFocus: boolean;
     /**
      * If true, the dialog visibility is managed manually through methods or the open prop.
      */
@@ -99,7 +94,6 @@ export declare class NvDialog {
     private handleDialogClose;
     /**
      * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
-  
      * @param {KeyboardEvent} event - The keydown event.
      */
     handleKeyDown(event: KeyboardEvent): void;