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

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

@@ -0,0 +1,161 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export declare class NvFieldtextarea {
+    el: HTMLNvFieldtextareaElement;
+    private textareaElement;
+    /****************************************************************************/
+    /**
+     * Message defines a 'hint ' message for the Text Field.
+     * @deprecated use description instead.
+     */
+    readonly message: string;
+    /**
+     * Add the message to the validation state.
+     * @deprecated use errorDescription and set the error prop instead.
+     */
+    readonly validation: string;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * Sets the ID for the textarea 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.
+     */
+    readonly textareaId: string;
+    /**
+     * Lets you define the text that explains what users should enter in the text
+     * textarea field. It’s a crucial element for making forms clear and
+     * user-friendly.
+     */
+    readonly label: string;
+    /**
+     * Add helpful hints or extra information under the text textarea field. This is
+     * where you can clarify what users should enter or provide additional
+     * instructions, making the form easier to fill out correctly.
+     */
+    description: string;
+    /**
+     * Display temporary text inside the textarea field to give users a hint about
+     * what to type. It’s a great way to provide examples or suggestions directly
+     * in the field before they start typing.
+     */
+    readonly placeholder: string;
+    /**
+     * Defines the name attribute of the textarea field, which is crucial for form
+     * submission. This value is used as the key in the key-value pair sent to
+     * the server, representing the textarea’s data in form submissions. It should be
+     * unique within the form to avoid conflicts
+     */
+    readonly name: string;
+    /**
+     * Specifies the value of the textarea field, which determines the text displayed
+     * within the field. This prop is typically used in controlled components
+     * where the textarea’s value is managed by the component’s state.
+     */
+    value: string;
+    /**
+     * 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.
+     */
+    readonly disabled: boolean;
+    /**
+     * 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.
+     */
+    readonly readonly: boolean;
+    /**
+     * Marks the textarea field as required, ensuring that the user must fill it out
+     * before submitting the form.
+     */
+    readonly required: boolean;
+    /**
+     * Alters the textarea field’s appearance to indicate an error, helping users
+     * identify fields that need correction.
+     * @validator error
+     */
+    error: boolean;
+    /**
+     * Show a helpful message under the textarea field when there’s a problem. It
+     * explains what’s wrong and how users can fix it, making the error easier to
+     * understand and resolve.
+     * @validator message
+     */
+    errorDescription: string;
+    /**
+     * Changes the textarea field’s appearance to indicate successful textarea or
+     * validation.
+     */
+    readonly success: boolean;
+    /**
+     * Limits how many characters users can type into the textarea field. It’s
+     * helpful for making sure users don’t enter too much information, keeping
+     * their textarea within the allowed limit.
+     */
+    readonly maxlength: number;
+    /**
+     * Ensures that users type at least a certain number of characters into the
+     * textarea field. It’s a way to make sure users provide enough information
+     * before moving on.
+     */
+    readonly minlength: number;
+    /**
+     * 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.
+     */
+    readonly rows: number;
+    /**
+     * Controls the resize property of a textarea. It can be set to none, both,
+     * horizontal, or vertical. The default is vertical.
+     */
+    readonly resize: 'none' | 'both' | 'horizontal' | '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.
+     */
+    readonly autosize: boolean;
+    /****************************************************************************/
+    /**
+     * Emitted when the textarea value changes.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string>;
+    /****************************************************************************/
+    /**
+     * If autosize is true, we need to make sure to update the min-height when
+     * the rows change.
+     */
+    rowsChanged(): void;
+    /**
+     * 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(): void;
+    /****************************************************************************/
+    private handleTextarea;
+    private handleTextareaContainerClick;
+    private adjustTextareaHeight;
+    /**
+     * Class        Properties
+     * resize-none	resize: none;
+     * resize-y	    resize: vertical;
+     * resize-x	    resize: horizontal;
+     * resize	      resize: both;
+     * @returns {string} The resize class.
+     */
+    private getResize;
+    /****************************************************************************/
+    componentDidLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea>;
+export default NvFieldtextareaDocs;

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type FieldLabelPlacement } from '../../utils/constants';
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ */
+export declare class NvFieldtoggle {
+    el: HTMLNvFieldtoggleElement;
+    /******************************** PROPERTIES ********************************/
+    /**
+     * Sets the ID for the radio button’s 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.
+     */
+    readonly inputId: string;
+    /**
+     * The name attribute for the toggle input, used to reference the form data
+     * after submission.
+     */
+    readonly name?: string;
+    /**
+     * The value attribute of the toggle input, representing the value sent on
+     * form submission when the toggle is checked.
+     */
+    readonly value?: string;
+    /** The label displayed next to the toggle.*/
+    readonly label?: string;
+    /**
+     * Determines the position of the label relative to the toggle, either
+     * 'start' (before) or 'end' (after).
+     */
+    readonly labelPlacement: `${FieldLabelPlacement}`;
+    /**
+     * Hides the label visually while still keeping it available for screen
+     * readers.
+     */
+    readonly hideLabel: boolean;
+    /**
+     * A description providing additional context or information about the
+     * toggle.
+     */
+    readonly description?: string;
+    /** Indicates whether the toggle is checked or not. */
+    checked: boolean;
+    /** Disables the toggle, preventing user interaction. */
+    readonly disabled: boolean;
+    /**
+     * Sets the toggle to read-only, preventing user changes but still allowing
+     * focus and selection of text.
+     */
+    readonly readonly: boolean;
+    /******************************** EVENTS ************************************/
+    /**
+     * Emits when the checked state changes.
+     * @bind checked
+     */
+    checkedChanged: EventEmitter<boolean>;
+    /****************************** 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: boolean): void;
+    /**
+     * 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: Event): void;
+    /********************************* RENDER ***********************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvFieldtoggleDocs: NovaDocs<Components.NvFieldtoggle>;
+export default NvFieldtoggleDocs;

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

@@ -0,0 +1,51 @@
+import { SemanticSizes, DeprecatedSemanticColors } from '../../utils/constants';
+import { IconName } from './nv-icons';
+export declare class NvIcon {
+    /****************************************************************************/
+    /**
+     * Set size to ExtraSmall.
+     * @deprecated use size instead.
+     */
+    readonly xsmall: boolean;
+    /**
+     * Set size to Small.
+     * @deprecated use size instead.
+     */
+    readonly small: boolean;
+    /**
+     * Set size to Medium.
+     * @deprecated use size instead.
+     */
+    readonly medium: boolean;
+    /**
+     * Set size to Large.
+     * @deprecated use size instead.
+     */
+    readonly large: boolean;
+    /**
+     * Set size to ExtraLarge.
+     * @deprecated use size instead.
+     */
+    readonly xlarge: boolean;
+    /**
+     * Set color of the icon.
+     * @deprecated use class names instead.
+     */
+    readonly color: `${DeprecatedSemanticColors}`;
+    componentWillRender(): void;
+    /****************************************************************************/
+    /**
+     * Choose the icon you want to display. This also sets the aria-label for
+     * improved accessibility, helping users who rely on screen readers.
+     */
+    readonly name: `${IconName}` | string;
+    /**
+     * Adjust the size of the icon to fit your design needs.
+     */
+    size: `${SemanticSizes}`;
+    spriteUrl: string;
+    componentWillLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvIconDocs: NovaDocs<Components.NvIcon>;
+export default NvIconDocs;

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

@@ -0,0 +1,3 @@
+/** Available icons */
+export declare const iconNames: readonly ["access-point-off", "access-point", "accessible", "activity", "address-book", "adjustments-horizontal", "adjustments-up", "adjustments", "affiliate", "air-conditioning", "alert-circle", "align-center", "align-left", "align-right", "app-window", "apps", "archive", "areas", "arrow-back-up", "arrow-back", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-forward-up", "arrow-forward", "arrow-left", "arrow-right", "arrow-up-left", "arrow-up-right", "arrow-up", "arrows-move", "aspect-ratio", "atom", "basket", "battery-1", "battery-2", "battery-3", "battery-4", "battery-automotive", "battery-charging", "battery-eco", "battery-off", "battery", "bell-off", "bell-ringing", "bell", "bike", "bluetooth-connected", "bluetooth-off", "bluetooth", "bolt", "book", "bookmark-off", "bookmark", "bookmarks", "box-align-top", "box-multiple", "briefcase", "brightness-down", "brightness-up", "browser-check", "browser-plus", "browser-x", "browser", "brush", "building-bank", "building-factory", "building-lighthouse", "building-store", "building", "bulb-off", "bulb", "cake", "calendar-time", "calendar", "camera-off", "camera", "car-crane", "car", "caravan", "cash-banknote", "cash", "cast", "cell", "charging-pile", "chart-arcs", "chart-area-line", "chart-area", "chart-arrows-vertical", "chart-arrows", "chart-bar", "chart-bubble", "chart-circles", "chart-donut", "chart-dots", "chart-line", "chart-pie", "chart-radar", "check", "checkbox", "checklist", "checks", "chevron-down", "chevron-left", "chevron-right", "chevron-top", "circle-caret-right", "circle-check", "circle-x", "clipboard-check", "clipboard-list", "clipboard-plus", "clipboard-text", "clipboard-x", "clipboard", "clock-edit", "clock", "cloud-data-connection", "cloud-download", "cloud-rain", "cloud-snow", "cloud-upload", "cloud", "color-picker", "color-swatch", "compass", "contract", "copy", "cpu", "crane", "credit-card", "crop", "cross", "crown", "currency-bitcoin", "currency-dollar", "currency-ethereum", "currency-euro", "cut", "dashboard", "database", "device-desktop", "device-floppy", "device-gamepad", "device-laptop", "device-mobile-rotated", "device-mobile", "device-tablet", "device-watch", "devices", "dialpad", "direction-horizontal", "direction-sign", "direction", "discount", "door-enter", "dots-vertical", "dots", "download", "drone", "droplet-filled", "droplet-half", "droplet", "droplets", "edit", "engine", "external-link", "eye-off", "eye", "face-id", "feather", "file-alert", "file-analytics", "file-check", "file-code", "file-download", "file-export", "file-horizontal", "file-import", "file-plus", "file-search", "file-text-bookmark", "file-text", "file-type-bmp", "file-type-css", "file-type-csv", "file-type-doc", "file-type-html", "file-type-jpg", "file-type-js", "file-type-pdf", "file-type-png", "file-type-ppt", "file-type-xls", "file-type-xml", "file-type-zip", "file-upload", "file-x", "file-zip", "file", "files-off", "files", "filter-off", "filter", "fingerprint", "fire-extinguisher", "flag", "flame", "flip-horizontal", "flip-vertical", "folder-minus", "folder-off", "folder-plus", "folder-x", "folder", "folders", "frame", "gas-station", "gauge", "gift", "gps", "grid-dots", "grip-horizontal", "grip-vertical", "hand-stop", "hand-waving", "hash", "haze", "headphones-off", "headphones", "headset", "helicopter", "help", "history", "home", "hourglass-empty", "hourglass-high", "hourglass-low", "hourglass-off", "hourglass", "inbox", "info-circle", "keyboard-hide", "keyboard-show", "keyboard", "layout-board-split", "layout-dashboard", "layout-grid", "layout-sidebar-left-collapse", "layout-sidebar-left-expand", "layout-sidebar-right-collapse", "layout-sidebar-right-expand", "layout", "leaf", "lifebuoy", "link", "list-search", "list", "loader", "location", "lock-off", "lock-open", "lock", "login", "logout", "mail-forward", "mail-opened", "mail", "map-pin-off", "map-pin", "map", "menu", "message-dots", "message-off", "message", "messages", "microphone-off", "microphone", "minus", "mist", "moon", "motorbike", "mouse", "movie", "network", "news", "note", "notebook", "notes", "offshore-station", "package", "palette", "paperclip", "pencil", "phone-call", "phone-calling", "phone-check", "phone-incoming", "phone-off", "phone-outgoing", "phone", "photo-off", "photo", "pig", "pin", "pinned-off", "pinned", "plane-off", "plane", "plant", "player-pause", "player-play", "player-skip-back", "player-skip-forward", "player-track-next", "player-track-prev", "plug-connected", "plug", "plus", "power-ac", "power-dc", "power", "presentation-analytics", "presentation", "printer", "propeller", "puzzle-2", "puzzle", "pylon", "qrcode", "radar", "radio", "radioactive", "receipt-dollar", "receipt-euro", "receipt", "recharging", "recycle", "refresh-alert", "refresh", "repeat-once", "repeat", "replace", "report-analytics", "report-medical", "report-search", "report", "ripple", "rocket", "rotate-2", "rotate-clockwise-2", "rotate-clockwise", "rotate-dot", "rotate", "router", "ruler-measure", "satellite", "scale", "school", "scissors", "scooter-electric", "screenshot", "search", "seeding", "select", "selector", "send", "server", "settings", "shape", "share-2", "share", "shield-check", "shield-lock", "shield-off", "shield-x", "shield", "ship", "shopping-cart", "slash", "smart-home", "snowflake", "solar-panel", "sort-ascending-letters", "sort-ascending-numbers", "sort-descending-letters", "sort-descending-numbers", "spacing-horizontal", "spacing-vertical", "speakerphone", "stack", "star", "sun", "sunrise", "sunset", "switch-horizontal", "switch-vertical", "table", "tag", "temperature", "template", "terminal", "text-size", "text", "thumb-down", "thumb-up", "ticket", "timeline", "tir", "tool", "tools", "train", "trash-off", "trash", "tree", "trees", "truck-delivery", "truck", "umbrella", "unlink", "upload", "user-circle", "user-minus", "user-plus", "user", "users", "versions", "video-minus", "video-off", "video-plus", "video", "volume-2", "volume-3", "volume", "wallet", "wand", "waves", "wifi-off", "wifi", "wind-direction", "wind", "windmill", "wood", "world", "writing", "x"];
+export type IconName = (typeof iconNames)[number];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,70 @@
+import { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';
+import { IconName } from '../nv-icon/nv-icons';
+/**
+ * @slot default - Content of the button.
+ */
+export declare class NvIconbutton {
+    internals: ElementInternals;
+    el: HTMLNvIconbuttonElement;
+    /****************************************************************************/
+    /**
+     * Determines how large or small the button appears, allowing for
+     * customization of the button's dimensions to fit different design
+     * specifications and user needs.
+     */
+    readonly size: `${ButtonSize}`;
+    /**
+     * Adjusts the button’s emphasis to make it more or less visually prominent
+     * to users. Use this to draw attention to important actions or reduce focus
+     * on less critical ones.
+     */
+    readonly emphasis: `${ButtonEmphasis}`;
+    /**
+     * Set this to true to show a spinner on the button, letting users know that
+     * their action is being processed. It helps improve user experience by
+     * indicating ongoing activities. The icon is not displayed when the button
+     * is loading. Also, the button is disabled. If you want to disable the
+     * button, it is not possible. It is automatically disabled when loading.
+     */
+    loading: boolean;
+    /**
+     * Disables the button, preventing user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Makes the button look active when it’s within a compatible component
+     * like a button group.
+     */
+    readonly active: boolean;
+    /**
+     * Choose the icon you want to display. This also sets the aria-label for
+     * improved accessibility, helping users who rely on screen readers.
+     * The icon is not displayed when the button is loading.
+     */
+    readonly name: `${IconName}` | string;
+    /**
+     * 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.
+     */
+    readonly type: `${ButtonType}`;
+    /**
+     * Sets the shape of the button. Choose between square and rounded.
+     */
+    readonly shape: 'square' | 'rounded';
+    /****************************************************************************/
+    /**
+     * 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'.
+     * @param {Event} event - The click event.
+     */
+    private handleClick;
+    /****************************************************************************/
+    handleLoadingChange(loading: boolean): void;
+    handleDisabledChange(disabled: boolean): void;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvIconbuttonDocs: NovaDocs<Components.NvIconbutton>;
+export default NvIconbuttonDocs;

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

@@ -0,0 +1,18 @@
+import { SemanticSizes, LoaderColors } from '../../utils/constants';
+export declare class NvLoader {
+    /****************************************************************************/
+    /**
+     * Choose the size of the loader to best fit your application’s needs, whether
+     * it’s a small spinner for subtle loading indicators or a large one for more
+     * prominent displays.
+     */
+    readonly size: `${SemanticSizes}`;
+    /**
+     * Choose the color of the loader. Options are primary and white to keep the
+     * design consistent and ensure the loader stands out or blends in
+     * appropriately with your application’s interface.
+     */
+    readonly color: `${LoaderColors}`;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvLoaderDocs: NovaDocs<Components.NvLoader>;
+export default NvLoaderDocs;

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

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Placement } from '@floating-ui/dom';
+import type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';
+/**
+ * @slot trigger - Button to toggle the menu popover.
+ * @slot content - Use an <ul></ul> tag for the slot, and place <nv-menuitem> elements inside.
+ */
+export declare class NvMenu {
+    el: HTMLNvMenuElement;
+    private triggerElement;
+    private popoverElement;
+    private isHandlingKeyDown;
+    private isHandlingClick;
+    /****************************************************************************/
+    /**
+     * Use this to toggle the initial visibility of the menu, by default the menu
+     * is hidden.
+     */
+    open: boolean;
+    /**
+     * Use this if the menu is nested inside another menu. This will prevent the
+     * parent menu from closing when the child menu is opened.
+     */
+    readonly nested: boolean;
+    /**
+     * Use this to disable the menu from closing automatically when a menu item is
+     * selected.
+     */
+    readonly disableCloseOnSelect: boolean;
+    /**
+     * Decides where the menu shows up next to the button it’s linked to (above,
+     * below, to the sides). If there isn’t enough room, it will adjust its
+     * position on the axis to fit on the screen, so users can always see it.
+     */
+    readonly placement: Placement;
+    /****************************************************************************/
+    /**
+     * Opens the menu.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the menu.
+     */
+    close(): Promise<void>;
+    /****************************************************************************/
+    /**
+     * Emitted from nv-menuitem elements with the corresponding id when the menu
+     * item is selected.
+     */
+    menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;
+    private handleMenuItemSelect;
+    handleMenuClick(event: MouseEvent): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleOpenChanged(event: CustomEvent<boolean>): void;
+    private focusFirstItem;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvMenuDocs: NovaDocs<Components.NvMenu>;
+export default NvMenuDocs;

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

@@ -0,0 +1,31 @@
+import { IconName } from '../nv-icon/nv-icons';
+export type MenuitemSelectedEventDetail = {
+    itemId?: HTMLElement['id'];
+};
+/**
+ * @slot default - The content to render, usually just text
+ */
+export declare class NvMenuitem {
+    el: HTMLNvMenuitemElement;
+    /****************************************************************************/
+    /**
+     * Choose the icon you want to display. This also sets the aria-label for
+     * improved accessibility, helping users who rely on screen readers.
+     * The icon is not displayed when the button is loading.
+     */
+    readonly icon: `${IconName}`;
+    /**
+     * Disables the item, preventing user interaction.
+     */
+    readonly disabled: boolean;
+    /**
+     * Show a shortcut key for the action represented in the menu item.
+     */
+    readonly shortcut: string;
+    /**
+     * If the menu item has a submenu, the a caret icon will be displayed.
+     */
+    readonly hasSubmenu: boolean;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvMenuitemDocs: NovaDocs<Components.NvMenuitem>;
+export default NvMenuitemDocs;

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

@@ -0,0 +1,114 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type Placement } from '@floating-ui/dom';
+/**
+ * @slot trigger - Content to be placed as the trigger.
+ * @slot content - Content to be placed within the popover.
+ */
+export declare class NvPopover {
+    el: HTMLNvPopoverElement;
+    private popoverElement;
+    private arrowElement;
+    /****************************************************************************/
+    /**
+     * @internal
+     * Accepts a reference to the DOM element acting as the popover trigger. This
+     * should be used when the slot for the trigger is not defined.
+     */
+    triggerElement: Element;
+    /**
+     * Use this prop to toggle the visibility of the popover. Set to true to show
+     * the popover and false to hide it.
+     */
+    open: boolean;
+    /**
+     * Sets the interaction mode for triggering the popover. Options include:
+     * - `hover`: The popover is shown on trigger hover.
+     * - `click`: The popover toggles on trigger click.
+     * - `controlled`: The visibility is managed manually through methods or the
+     *   open prop.
+     */
+    readonly triggerMode: 'hover' | 'click' | 'controlled';
+    /**
+     * Defines where the popover appears relative to the trigger.
+     */
+    readonly placement: Placement;
+    /**
+     * Use this to group popovers together so that opening one will not animate
+     * the closing of another. This is helpful when popovers are placed close
+     * together, preventing animation overlap.
+     */
+    readonly groupName: string;
+    /**
+     * Adjust the gap between the popover and its trigger element by setting how
+     * many pixels they should be apart.
+     */
+    readonly offset: number;
+    /**
+     * Use this to decide if the popover should include a small arrow pointing to
+     * the trigger element, making the connection between them more clear.
+     */
+    readonly hasArrow: boolean;
+    /**
+     * Disables the automatic flipping of the popover when the trigger element is
+     * out of the viewport. The popover will flip automatically by default.
+     */
+    readonly disableFlip: boolean;
+    /**
+     * Sets how many pixels the popover should stay from the edge of the viewport.
+     */
+    readonly shiftPadding: number;
+    /**
+     * Use this to set a delay before the popover appears on hover. If the mouse
+     * leaves before this time, the popover won’t show. This only works when the
+     * trigger mode is set to `hover`.
+     */
+    readonly enterDelay: number;
+    /**
+     * Use this to set the popover to be nested inside another popover. This will
+     * prevent the parent popover from closing when the child popover is opened.
+     */
+    readonly nested: boolean;
+    /****************************************************************************/
+    /**
+     * Call this method to show the popover, making it visible on the screen.
+     */
+    show(): Promise<void>;
+    /**
+     * Use this method to hide the popover, making it disappear from view.
+     */
+    hide(): Promise<void>;
+    /**
+     * Call this method to toggle between showing and hiding the popover, based on
+     * its current state.
+     */
+    toggle(): Promise<void>;
+    /**
+     * Calculates the position of the popover relative to the trigger.
+     * @docs https://floating-ui.com/docs/computePosition
+     */
+    private positionPopover;
+    /****************************************************************************/
+    /**
+     * Emitted when the popover is toggled.
+     * @bind open
+     */
+    openChanged: EventEmitter<boolean>;
+    handleOpenChanged(event: CustomEvent<boolean>): void;
+    handleDocumentClick(event: MouseEvent): void;
+    handleDocumentTouch(event: TouchEvent): void;
+    private handleClickOutside;
+    private clickEvents;
+    private hideTimeout;
+    private showTimeout;
+    private hoverEvents;
+    private closeEvents;
+    /****************************************************************************/
+    private isAnimating;
+    handleOpenChange(open: boolean): Promise<void>;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvPopoverDocs: NovaDocs<Components.NvPopover>;
+export default NvPopoverDocs;

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

@@ -0,0 +1,7 @@
+/**
+ * @slot default - The row content.
+ */
+export declare class NvRow {
+    /****************************************************************************/
+    render(): any;
+}