## APIs

Available APIs: `nve-*` custom elements and `nve-*` global style utility attributes.

- [accordion](https://nvidia.github.io/elements/context/api/accordion.md): An accordion is a vertical stack of interactive headings used to toggle the display of further information.
- [accordion-content](https://nvidia.github.io/elements/context/api/accordion-content.md): Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.
- [accordion-group](https://nvidia.github.io/elements/context/api/accordion-group.md): Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.
- [accordion-header](https://nvidia.github.io/elements/context/api/accordion-header.md): Provides the clickable heading region of an accordion that toggles the visibility of associated content.
- [alert](https://nvidia.github.io/elements/context/api/alert.md): Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
- [alert-group](https://nvidia.github.io/elements/context/api/alert-group.md): An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.
- [avatar](https://nvidia.github.io/elements/context/api/avatar.md): Avatar represents a user/bot within a UI. Typically with text or image content.
- [avatar-group](https://nvidia.github.io/elements/context/api/avatar-group.md): An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.
- [badge](https://nvidia.github.io/elements/context/api/badge.md): A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.
- [breadcrumb](https://nvidia.github.io/elements/context/api/breadcrumb.md): Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.
- [button](https://nvidia.github.io/elements/context/api/button.md): A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- [button-group](https://nvidia.github.io/elements/context/api/button-group.md): A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
- [card](https://nvidia.github.io/elements/context/api/card.md): A container for content representing a single entity.
- [card-content](https://nvidia.github.io/elements/context/api/card-content.md): Contains the primary body content of a card, providing a structured region for the main information or media.
- [card-footer](https://nvidia.github.io/elements/context/api/card-footer.md): Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.
- [card-header](https://nvidia.github.io/elements/context/api/card-header.md): Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.
- [chat-message](https://nvidia.github.io/elements/context/api/chat-message.md): A chat message component displays a text message within a conversation, sent between users or bots
- [checkbox](https://nvidia.github.io/elements/context/api/checkbox.md): A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.
- [checkbox-group](https://nvidia.github.io/elements/context/api/checkbox-group.md): Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.
- [color](https://nvidia.github.io/elements/context/api/color.md): A color picker is a control that enables users to choose a color value.
- [combobox](https://nvidia.github.io/elements/context/api/combobox.md): An editable combobox with autocomplete behavior and selection support.
- [control](https://nvidia.github.io/elements/context/api/control.md): Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
- [control-group](https://nvidia.github.io/elements/context/api/control-group.md): Groups many related form controls under a shared label and validation context for semantically linked inputs.
- [control-message](https://nvidia.github.io/elements/context/api/control-message.md): Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.
- [copy-button](https://nvidia.github.io/elements/context/api/copy-button.md): A copy button is a button that easily enables the copy to clipboard pattern.
- [date](https://nvidia.github.io/elements/context/api/date.md): A date picker is a control that enables users to choose a date value.
- [datetime](https://nvidia.github.io/elements/context/api/datetime.md): A datetime picker is a control that enables users to choose a datetime value.
- [dialog](https://nvidia.github.io/elements/context/api/dialog.md): Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [dialog-footer](https://nvidia.github.io/elements/context/api/dialog-footer.md): Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.
- [dialog-header](https://nvidia.github.io/elements/context/api/dialog-header.md): Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.
- [divider](https://nvidia.github.io/elements/context/api/divider.md): Divider is a component that separates and distinguishes sections of content or groups of menuitems.
- [dot](https://nvidia.github.io/elements/context/api/dot.md): A visual indicator that communicates a status or notification of an associated component.
- [drawer](https://nvidia.github.io/elements/context/api/drawer.md): Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [drawer-content](https://nvidia.github.io/elements/context/api/drawer-content.md): Contains the scrollable main body content within a drawer panel.
- [drawer-footer](https://nvidia.github.io/elements/context/api/drawer-footer.md): Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.
- [drawer-header](https://nvidia.github.io/elements/context/api/drawer-header.md): Displays the title and optional close control at the top of a drawer to identify its purpose.
- [dropdown](https://nvidia.github.io/elements/context/api/dropdown.md): Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [dropdown-footer](https://nvidia.github.io/elements/context/api/dropdown-footer.md): Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.
- [dropdown-group](https://nvidia.github.io/elements/context/api/dropdown-group.md): A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience
- [dropdown-header](https://nvidia.github.io/elements/context/api/dropdown-header.md): Displays a title or contextual label at the top of a dropdown menu to categorize its contents.
- [dropzone](https://nvidia.github.io/elements/context/api/dropzone.md): A dropzone form control that enables users to drag and drop files onto it.
- [file](https://nvidia.github.io/elements/context/api/file.md): A file picker is a control that enables users to choose a file value.
- [format-datetime](https://nvidia.github.io/elements/context/api/format-datetime.md): Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
- [format-number](https://nvidia.github.io/elements/context/api/format-number.md): A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.
- [format-relative-time](https://nvidia.github.io/elements/context/api/format-relative-time.md): Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
- [grid](https://nvidia.github.io/elements/context/api/grid.md): A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.
- [grid-cell](https://nvidia.github.io/elements/context/api/grid-cell.md): Represents an individual data cell within a grid row, displaying content aligned to its parent column.
- [grid-column](https://nvidia.github.io/elements/context/api/grid-column.md): Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
- [grid-footer](https://nvidia.github.io/elements/context/api/grid-footer.md): Grid footer displays contextual information or user actions such as pagination.
- [grid-header](https://nvidia.github.io/elements/context/api/grid-header.md): Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.
- [grid-placeholder](https://nvidia.github.io/elements/context/api/grid-placeholder.md): Placeholder displays a message while data loads for the grid or shows empty states for datasets.
- [grid-row](https://nvidia.github.io/elements/context/api/grid-row.md): Represents a horizontal row of data cells within a grid, supporting selection and interactive states.
- [icon](https://nvidia.github.io/elements/context/api/icon.md): An icon is a graphic symbol designed to visually show the purpose of an interface element.
- [icon-button](https://nvidia.github.io/elements/context/api/icon-button.md): An icon button is a button that displays only an icon without a visual label.
- [input](https://nvidia.github.io/elements/context/api/input.md): An input is a control that enables users to enter text.
- [input-group](https://nvidia.github.io/elements/context/api/input-group.md): Visually combines many related input controls into a unified composite field with shared styling.
- [logo](https://nvidia.github.io/elements/context/api/logo.md): A visual indicator for a brand or application.
- [menu](https://nvidia.github.io/elements/context/api/menu.md): A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.
- [menu-item](https://nvidia.github.io/elements/context/api/menu-item.md): Represents a selectable option within a menu, providing an interactive button for navigation or actions.
- [month](https://nvidia.github.io/elements/context/api/month.md): A month picker is a control that enables users to choose a month value.
- [notification](https://nvidia.github.io/elements/context/api/notification.md): Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [notification-group](https://nvidia.github.io/elements/context/api/notification-group.md): Displays real time updates without interrupting the user's workflow to communicate an important message or status.
- [page](https://nvidia.github.io/elements/context/api/page.md): Provide a consistent page structure across the applications, ensuring a seamless user experience.
- [page-header](https://nvidia.github.io/elements/context/api/page-header.md): An element that appears across the top of all pages containing the application name and primary navigation.
- [page-loader](https://nvidia.github.io/elements/context/api/page-loader.md): Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.
- [page-panel](https://nvidia.github.io/elements/context/api/page-panel.md): Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.
- [page-panel-content](https://nvidia.github.io/elements/context/api/page-panel-content.md): Contains the scrollable main body content within a page panel region.
- [page-panel-footer](https://nvidia.github.io/elements/context/api/page-panel-footer.md): Provides a fixed action area at the bottom of a page panel for persistent controls or status information.
- [page-panel-header](https://nvidia.github.io/elements/context/api/page-panel-header.md): Displays the title and contextual controls at the top of a page panel to identify its purpose.
- [pagination](https://nvidia.github.io/elements/context/api/pagination.md): Pagination is a control that enables users to navigate through pages of content.
- [panel](https://nvidia.github.io/elements/context/api/panel.md): Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).
- [panel-content](https://nvidia.github.io/elements/context/api/panel-content.md): Contains the main body content within a panel, providing a structured region for detailed information.
- [panel-footer](https://nvidia.github.io/elements/context/api/panel-footer.md): Provides a designated area at the bottom of a panel for actions or supplementary controls.
- [password](https://nvidia.github.io/elements/context/api/password.md): A password is a control that enables users to enter password text.
- [preferences-input](https://nvidia.github.io/elements/context/api/preferences-input.md): A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.
- [progress-bar](https://nvidia.github.io/elements/context/api/progress-bar.md): A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.
- [progress-ring](https://nvidia.github.io/elements/context/api/progress-ring.md): The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.
- [progressive-filter-chip](https://nvidia.github.io/elements/context/api/progressive-filter-chip.md): A filter chip is a control that enables users to select many options from a set of choices.
- [pulse](https://nvidia.github.io/elements/context/api/pulse.md): Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.
- [radio](https://nvidia.github.io/elements/context/api/radio.md): A radio button is a control that enables users to choose one option from a list of mutually exclusive options.
- [radio-group](https://nvidia.github.io/elements/context/api/radio-group.md): Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.
- [range](https://nvidia.github.io/elements/context/api/range.md): A range slider is a control that enables users to choose a value from a continuous range of values.
- [resize-handle](https://nvidia.github.io/elements/context/api/resize-handle.md): A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.
- [search](https://nvidia.github.io/elements/context/api/search.md): A search is a control that enables users to enter text to search.
- [select](https://nvidia.github.io/elements/context/api/select.md): A select is a control that enables users to select an option from a list of options.
- [skeleton](https://nvidia.github.io/elements/context/api/skeleton.md): A loading placeholder component that displays animated placeholder shapes while content loads.
- [sort-button](https://nvidia.github.io/elements/context/api/sort-button.md): A sort button is a control that enables users to sort a list of items in ascending or descending order.
- [sparkline](https://nvidia.github.io/elements/context/api/sparkline.md): A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
- [star-rating](https://nvidia.github.io/elements/context/api/star-rating.md): A star rating component lets users rate something using stars, providing a quick visual representation of feedback
- [steps](https://nvidia.github.io/elements/context/api/steps.md): Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.
- [steps-item](https://nvidia.github.io/elements/context/api/steps-item.md): Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.
- [switch](https://nvidia.github.io/elements/context/api/switch.md): A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.
- [switch-group](https://nvidia.github.io/elements/context/api/switch-group.md): A switch group is a container for a group of switches.
- [tabs](https://nvidia.github.io/elements/context/api/tabs.md): Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.
- [tabs-group](https://nvidia.github.io/elements/context/api/tabs-group.md): Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
- [tabs-item](https://nvidia.github.io/elements/context/api/tabs-item.md): Represents an individual tab within a tablist, providing a selectable button for switching between content views.
- [tag](https://nvidia.github.io/elements/context/api/tag.md): A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
- [textarea](https://nvidia.github.io/elements/context/api/textarea.md): A textarea is a control that enables users to enter and edit text.
- [time](https://nvidia.github.io/elements/context/api/time.md): A time picker is a control that enables users to choose a time value.
- [toast](https://nvidia.github.io/elements/context/api/toast.md): A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [toggletip](https://nvidia.github.io/elements/context/api/toggletip.md): Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [toggletip-footer](https://nvidia.github.io/elements/context/api/toggletip-footer.md): Provides a designated area at the bottom of a toggletip for actions or supplementary information.
- [toggletip-header](https://nvidia.github.io/elements/context/api/toggletip-header.md): Displays a title or contextual label at the top of a toggletip to categorize its contents.
- [toolbar](https://nvidia.github.io/elements/context/api/toolbar.md): A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.
- [tooltip](https://nvidia.github.io/elements/context/api/tooltip.md): A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [tree](https://nvidia.github.io/elements/context/api/tree.md): A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.
- [tree-node](https://nvidia.github.io/elements/context/api/tree-node.md): A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.
- [week](https://nvidia.github.io/elements/context/api/week.md): A week picker is a control that enables users to choose a week value.
- [codeblock](https://nvidia.github.io/elements/context/api/codeblock.md): A container for content representing programming languages.
- [markdown](https://nvidia.github.io/elements/context/api/markdown.md): A Web Component that inputs markdown content and renders it as HTML formatted with Elements styles.
- [monaco-diff-editor](https://nvidia.github.io/elements/context/api/monaco-diff-editor.md): A low-level Monaco Editor wrapper that provides direct access to a diff editor instance and API.
- [monaco-diff-input](https://nvidia.github.io/elements/context/api/monaco-diff-input.md): An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.
- [monaco-editor](https://nvidia.github.io/elements/context/api/monaco-editor.md): A low-level Monaco Editor wrapper that provides direct access to an editor instance and API.
- [monaco-input](https://nvidia.github.io/elements/context/api/monaco-input.md): An input control for editing JSON, YAML and code with syntax highlighting and validation.
- [monaco-problems](https://nvidia.github.io/elements/context/api/monaco-problems.md): A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).
- [layout (attribute utility)](https://nvidia.github.io/elements/context/api/layout.md): Layout utility for native HTML elements
- [text (attribute utility)](https://nvidia.github.io/elements/context/api/text.md): Typography style utility for native HTML elements