@nvidia-elements/core 0.0.2 → 0.0.4

package/dist/bundles/index.d.ts

@@ -218,6 +218,7 @@ export interface I18nStrings {
 	dragAndDrop: string;
 	browseFiles: string;
 	maxFileSize: string;
+	create: string;
 }
 export interface IconSVG {
 	svg: () => Promise<string> | string;
@@ -751,40 +752,6 @@ export declare class IconButton extends Button {
 	};
 	render(): TemplateResult<1>;
 }
-/**
- * @element nve-logo
- * @description A visual indicator for a brand or application.
- * @since 0.10.0
- * @entrypoint \@nvidia-elements/core/logo
- * @slot - default slot for content
- * @cssprop --background
- * @cssprop --gap
- * @cssprop --color
- * @cssprop --height
- * @cssprop --width
- * @cssprop --font-size
- * @cssprop --border-radius
- * @cssprop --font-weight
- * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- */
-export declare class Logo extends LitElement {
-	/**
-	 * Visual treatment to represent unique color of an application
-	 */
-	color: Color;
-	/**
-	 * Determines size of logo
-	 */
-	size?: Size;
-	static styles: CSSResult[];
-	static readonly metadata: {
-		tag: string;
-		version: string;
-	};
-	_internals: ElementInternals;
-	render(): TemplateResult<1>;
-	connectedCallback(): void;
-}
 /**
  * @element nve-control
  * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
@@ -974,9 +941,11 @@ export declare class MenuItem extends BaseButton {
  * @cssprop --max-width
  * @cssprop --min-width
  * @cssprop --max-height
+ * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
 export declare class Menu extends LitElement {
+	#private;
 	static styles: CSSResult[];
 	static readonly metadata: {
 		tag: string;
@@ -990,6 +959,7 @@ export declare class Menu extends LitElement {
 	_internals: ElementInternals;
 	items: MenuItem[];
 	render(): TemplateResult<1>;
+	firstUpdated(): Promise<void>;
 	connectedCallback(): void;
 }
 /**
@@ -2303,6 +2273,125 @@ declare class File$1 extends Control {
 	};
 	connectedCallback(): void;
 }
+/**
+ * @element nve-format-datetime
+ * @description 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.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-datetime
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatDatetime extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/**
+	 * Optional date string for values supplied by JavaScript or bound data.
+	 * By default, the component formats the element's text content, which also serves as the SSR fallback.
+	 * When both are present, this property takes precedence.
+	 */
+	date?: string;
+	/**
+	 * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+	 */
+	locale?: string;
+	/**
+	 * Weekday representation: 'long' | 'short' | 'narrow'.
+	 */
+	weekday?: "long" | "short" | "narrow";
+	/**
+	 * Year representation: 'numeric' | '2-digit'.
+	 */
+	year?: "numeric" | "2-digit";
+	/**
+	 * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.
+	 */
+	month?: "numeric" | "2-digit" | "long" | "short" | "narrow";
+	/**
+	 * Day representation: 'numeric' | '2-digit'.
+	 */
+	day?: "numeric" | "2-digit";
+	/**
+	 * Hour representation: 'numeric' | '2-digit'.
+	 */
+	hour?: "numeric" | "2-digit";
+	/**
+	 * Minute representation: 'numeric' | '2-digit'.
+	 */
+	minute?: "numeric" | "2-digit";
+	/**
+	 * Second representation: 'numeric' | '2-digit'.
+	 */
+	second?: "numeric" | "2-digit";
+	/**
+	 * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
+	 * Preset styles take precedence over granular date and time part options.
+	 */
+	dateStyle?: "full" | "long" | "medium" | "short";
+	/**
+	 * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
+	 * Preset styles take precedence over granular date and time part options.
+	 */
+	timeStyle?: "full" | "long" | "medium" | "short";
+	/**
+	 * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.
+	 */
+	timeZoneName?: "long" | "short";
+	/**
+	 * IANA time zone identifier (such as 'America/New_York', 'UTC').
+	 */
+	timeZone?: string;
+	render(): TemplateResult<1>;
+}
+/**
+ * @element nve-format-relative-time
+ * @description 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.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-relative-time
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatRelativeTime extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/**
+	 * Optional date string for values supplied by JavaScript or bound data.
+	 * By default, the component formats the element's text content, which also serves as the SSR fallback.
+	 * When both are present, this property takes precedence.
+	 */
+	date?: string;
+	/**
+	 * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+	 */
+	locale?: string;
+	/**
+	 * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.
+	 */
+	numeric: "always" | "auto";
+	/**
+	 * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.
+	 */
+	formatStyle: "long" | "short" | "narrow";
+	/**
+	 * Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.
+	 */
+	unit: "second" | "minute" | "hour" | "day" | "week" | "month" | "year" | "auto";
+	/**
+	 * When present, auto-updates the displayed relative time at appropriate intervals.
+	 */
+	sync: boolean;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	updated(changed: Map<string, unknown>): void;
+	render(): TemplateResult<1>;
+}
 /**
  * @element nve-grid-column
  * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
@@ -2352,6 +2441,7 @@ export declare class GridColumn extends LitElement {
 	_internals: ElementInternals;
 	render(): TemplateResult<1>;
 	connectedCallback(): void;
+	willUpdate(props: PropertyValues<this>): void;
 	updated(props: PropertyValues<this>): Promise<void>;
 }
 /**
@@ -2591,6 +2681,40 @@ export declare class InputGroup extends ControlGroup {
 	};
 	connectedCallback(): Promise<void>;
 }
+/**
+ * @element nve-logo
+ * @description A visual indicator for a brand or application.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/logo
+ * @slot - default slot for content
+ * @cssprop --background
+ * @cssprop --gap
+ * @cssprop --color
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --font-size
+ * @cssprop --border-radius
+ * @cssprop --font-weight
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Logo extends LitElement {
+	/**
+	 * Visual treatment to represent unique color of an application
+	 */
+	color: Color;
+	/**
+	 * Determines size of logo
+	 */
+	size?: Size;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	_internals: ElementInternals;
+	render(): TemplateResult<1>;
+	connectedCallback(): void;
+}
 /**
  * @element nve-month
  * @description A month picker is a control that enables users to choose a month value.
@@ -5230,6 +5354,61 @@ export declare class Tabs extends LitElement {
 	connectedCallback(): void;
 	updated(props: PropertyValues<this>): void;
 }
+/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */
+export type TabsGroupAlignment = "top" | "start" | "end";
+/**
+ * @element nve-tabs-group
+ * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
+ * @since 1.67.0
+ * @entrypoint \@nvidia-elements/core/tabs
+ * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.
+ * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection
+ * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.
+ * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * @responsive false
+ */
+export declare class TabsGroup extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+		children: string[];
+	};
+	/** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */
+	protected static readonly subtreeObserverInit: {
+		readonly childList: true;
+		readonly subtree: true;
+		readonly attributes: true;
+		readonly attributeFilter: [
+			"disabled",
+			"id",
+			"selected",
+			"value"
+		];
+	};
+	private defaultSlotElements;
+	/**
+	 * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at
+	 * inline-start (`start`) or inline-end (`end`) beside the panel region.
+	 */
+	alignment: TabsGroupAlignment;
+	private panelValues;
+	private selectedValue;
+	/** @private */
+	_internals: ElementInternals;
+	/**
+	 * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable
+	 * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.
+	 */
+	render(): TemplateResult<1>;
+	connectedCallback(): void;
+	firstUpdated(): void;
+	disconnectedCallback(): void;
+	updated(changedProperties: PropertyValues<this>): void;
+}
 /**
  * @element nve-textarea
  * @description A textarea is a control that enables users to enter and edit text.
@@ -5482,7 +5661,7 @@ export declare class Toolbar extends LitElement implements ContainerElement {
  * @command --close - use to close the node
  * @command --toggle - use to toggle open / closed state of the node
  * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.
- * @slot content - Use for extended long form content containing interactive elements or form inputs.
+ * @slot content - Use only for extended long form content containing interactive elements or form inputs.
  * @cssprop --color
  * @cssprop --border-radius
  * @cssprop --font-size