@nvidia-elements/core 0.0.1 → 0.0.2

package/dist/textarea/textarea.examples.json

@@ -0,0 +1,55 @@
+{
+  "element": "nve-textarea",
+  "entrypoint": "@nvidia-elements/core/textarea/textarea.examples.json",
+  "items": [
+    {
+      "id": "core-textarea_default",
+      "name": "Default",
+      "template": "<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
+      "summary": "Basic multi-line text input for longer content entry like comments, descriptions, or messages.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-textarea_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "summary": "Textareas with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-textarea_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "summary": "Textareas with horizontal layout showing validation states for inline forms and compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-textarea_control-validation",
+      "name": "ControlValidation",
+      "template": "<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>\n",
+      "summary": "Textarea with built-in HTML validation showing required field error messages for form validation.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-textarea_columns-and-rows",
+      "name": "ColumnsAndRows",
+      "template": "<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
+      "summary": "Textarea with custom columns and rows attributes for controlling initial size and dimensions.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/textarea/textarea.js

@@ -0,0 +1,6 @@
+//#region src/textarea/textarea.css?inline
+var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:100%;contain:layout}::slotted(textarea){padding:var(--padding)!important;font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;cursor:var(--cursor)!important}::slotted(textarea:not([rows])){min-height:var(--min-height)!important;height:var(--min-height)!important}::slotted(textarea:not([cols])){width:var(--width)!important}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: 100%;\n  contain: layout;\n}\n\n::slotted(textarea) {\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: var(--border) !important;\n  color: var(--color) !important;\n  border-radius: var(--border-radius) !important;\n  cursor: var(--cursor) !important;\n}\n\n::slotted(textarea:not([rows])) {\n  min-height: var(--min-height) !important;\n  height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols])) {\n  width: var(--width) !important;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n"],"mappings":""}

package/dist/textarea/textarea2.js

@@ -0,0 +1,19 @@
+import { useStyles as e } from "../internal/styles/index.js";
+import { Control as t } from "../forms/control/control2.js";
+import n from "./textarea.js";
+//#region src/textarea/textarea.ts
+var r = class extends t {
+	static {
+		this.styles = e([...t.styles, n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-textarea",
+			version: "0.0.2"
+		};
+	}
+};
+//#endregion
+export { r as Textarea };
+
+//# sourceMappingURL=textarea2.js.map

package/dist/textarea/textarea2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;AAyBA,IAAa,IAAb,cAA8B,EAAQ;;gBACP,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV"}

package/dist/time/define.d.ts

@@ -0,0 +1,6 @@
+import { Time } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-time': Time;
+    }
+}

package/dist/time/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Time as t } from "./time2.js";
+//#region src/time/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/time/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/time/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Time } from '@nvidia-elements/core/time';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Time);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-time': Time;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAK"}

package/dist/time/index.d.ts

@@ -0,0 +1 @@
+export * from './time.js';

package/dist/time/index.js

@@ -0,0 +1,2 @@
+import { Time as e } from "./time2.js";
+export { e as Time };

package/dist/time/time.d.ts

@@ -0,0 +1,34 @@
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-time
+ * @description A time picker is a control that enables users to choose a time value.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/time
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @csspart icon-button - The clock icon button element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
+ */
+export declare class Time extends Control implements ContainerElement {
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+}

package/dist/time/time.examples.js

@@ -0,0 +1,6 @@
+//#region src/time/time.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=time.examples.js.map

package/dist/time/time.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.examples.js","names":[],"sources":["../../src/time/time.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/time/define.js';\n\nexport default {\n  title: 'Elements/Time',\n  component: 'nve-time',\n};\n\n/**\n * @summary Basic time input with label, min/max time constraints, and help message\n */\nexport const Default = {\n  render: () => html`\n<nve-time>\n  <label>label</label>\n  <input type=\"time\" min=\"09:00\" max=\"18:00\" value=\"12:00\" />\n  <nve-control-message>message</nve-control-message>\n</nve-time>`\n};\n\n/**\n * @summary Time input with datalist slot for predefined time options users can select from\n */\nexport const Datalist = {\n  render: () => html`\n<nve-time>\n  <label>label</label>\n  <input type=\"time\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"12:00\"></option>\n    <option value=\"13:00\"></option>\n    <option value=\"14:00\"></option>\n  </datalist>\n</nve-time>\n  `\n}\n\n/**\n * @summary Vertical field layout showcasing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-time>\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>`\n};\n\n/**\n * @summary Horizontal field layout with label beside input, showing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-time layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/time/time.examples.json

@@ -0,0 +1,46 @@
+{
+  "element": "nve-time",
+  "entrypoint": "@nvidia-elements/core/time/time.examples.json",
+  "items": [
+    {
+      "id": "core-time_default",
+      "name": "Default",
+      "template": "<nve-time>\n  <label>label</label>\n  <input type=\"time\" min=\"09:00\" max=\"18:00\" value=\"12:00\" />\n  <nve-control-message>message</nve-control-message>\n</nve-time>\n",
+      "summary": "Basic time input with label, min/max time constraints, and help message",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-time_datalist",
+      "name": "Datalist",
+      "template": "<nve-time>\n  <label>label</label>\n  <input type=\"time\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"12:00\"></option>\n    <option value=\"13:00\"></option>\n    <option value=\"14:00\"></option>\n  </datalist>\n</nve-time>\n",
+      "summary": "Time input with datalist slot for predefined time options users can select from",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-time_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time>\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
+      "summary": "Vertical field layout showcasing default, disabled, success, and error states",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-time_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
+      "summary": "Horizontal field layout with label beside input, showing default, disabled, success, and error states",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/time/time.js

@@ -0,0 +1,6 @@
+//#region src/time/time.css?inline
+var e = ":host{width:100%}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=time.js.map

package/dist/time/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","names":[],"sources":["../../src/time/time.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/time/time2.js

@@ -0,0 +1,39 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import { Control as r } from "../forms/control/control2.js";
+import { IconButton as i } from "../icon-button/icon-button2.js";
+import { inputStyles as a } from "../input/input2.js";
+import o from "./time.js";
+import { html as s } from "lit";
+import { property as c } from "lit/decorators/property.js";
+//#region src/time/time.ts
+var l = class extends r {
+	static {
+		this.styles = n([
+			...r.styles,
+			a,
+			o
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-time",
+			version: "0.0.2"
+		};
+	}
+	static {
+		this.elementDefinitions = { [i.metadata.tag]: i };
+	}
+	get suffixContent() {
+		return s`<nve-icon-button part="icon-button" .ariaLabel="${this.i18n.expand}" icon-name="clock" container="inline" @click="${this.showPicker}"></nve-icon-button>`;
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "container", void 0), l = e([t()], l);
+//#endregion
+export { l as Time };
+
+//# sourceMappingURL=time2.js.map

package/dist/time/time2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA4BO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;GAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,IAAc,gBAAgB;AAC5B,SAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;;;GAd9I,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAN3C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/toast/define.d.ts

@@ -0,0 +1,6 @@
+import { Toast } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-toast': Toast;
+    }
+}

package/dist/toast/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Toast as t } from "./toast2.js";
+//#region src/toast/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/toast/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/toast/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Toast } from '@nvidia-elements/core/toast';\n\ndefine(Toast);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-toast': Toast;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAM"}

package/dist/toast/index.d.ts

@@ -0,0 +1 @@
+export * from './toast.js';

package/dist/toast/index.js

@@ -0,0 +1,2 @@
+import { Toast as e } from "./toast2.js";
+export { e as Toast };

package/dist/toast/toast.d.ts

@@ -0,0 +1,96 @@
+import { LitElement } from 'lit';
+import { IconButton } from '../icon-button';
+import { PopoverAlign, PopoverPosition, PopoverType, SupportStatus, TypeNativePopoverController } from '../internal';
+import { Icon } from '../icon';
+/**
+ * @element nve-toast
+ * @description 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)
+ * @since 0.6.0
+ * @entrypoint \@nvidia-elements/core/toast
+ * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
+ * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+ * @event open - Dispatched when the toast opens.
+ * @event close - Dispatched when the toast closes.
+ * @slot - default content slot
+ * @slot prefix - custom status icon slot
+ * @cssprop --padding
+ * @cssprop --justify-content
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --color
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --box-shadow
+ * @cssprop --gap
+ * @csspart prefix-icon - The prefix icon slot
+ * @csspart icon-button - The close icon button element
+ * @cssprop --animation-duration - Duration of toast open/close animations
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ */
+export declare class Toast extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    /**
+     * (optional) By default the popover automatically anchors itself relative to the trigger element.
+     * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.
+     */
+    anchor: string | HTMLElement;
+    /**
+     * @deprecated Use the popover API instead.
+     * The trigger defines what element triggers an `open` interaction event.
+     * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.
+     */
+    trigger: string | HTMLElement;
+    /**
+     * Sets the side position of the popover relative to the provided anchor element.
+     */
+    position: PopoverPosition;
+    /**
+     * Sets the alignment of the popover relative to the provided anchor element.
+     */
+    alignment: PopoverAlign;
+    /**
+     * Sets the visual prominence of the toast.
+     */
+    prominence: 'muted';
+    /**
+     * @deprecated Use the popover API instead.
+     * Determines if popover visibility behavior should be automatically controlled by the trigger.
+     */
+    behaviorTrigger: boolean;
+    /**
+     * Determines if a close button should render within toast.
+     */
+    closable: boolean;
+    /**
+     * A delayed `close` event occurs after the provided millisecond value elapses.
+     */
+    closeTimeout: number;
+    /**
+     * visual treatment to represent a ongoing task or support status
+     * deprecated Use 'prominence="muted"' instead of status="muted"
+     */
+    status: SupportStatus | 'muted';
+    /**
+     * Updates internal string values for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    /** @private */
+    readonly popoverType: PopoverType;
+    protected typeNativePopoverController: TypeNativePopoverController<Toast>;
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/toast/toast.examples.js

@@ -0,0 +1,6 @@
+//#region src/toast/toast.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=toast.examples.js.map

package/dist/toast/toast.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.examples.js","names":[],"sources":["../../src/toast/toast.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/toast/define.js';\n\nexport default {\n  title: 'Elements/Toast',\n  component: 'nve-toast',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like \"Saved\", \"Copied\", or \"Action complete\" that inform users without requiring interaction or disrupting workflow.\n */\nexport const Default = {\n  render: () => html`\n<nve-toast id=\"toast\" close-timeout=\"1500\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n`\n};\n\n/**\n * @summary Visual example of toast structure with anchor positioning for consistent implementation patterns across your application.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-toast anchor=\"btn\">hello there</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\">default</nve-toast>\n  <nve-toast status=\"success\" position=\"right\">success</nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\">warning</nve-toast>\n  <nve-toast status=\"danger\" position=\"left\">danger</nve-toast>\n</div>\n  `\n};\n\n/**\n * @summary Muted toast variant for subtle, low-priority feedback. Use muted prominence when the message is informative but shouldn't draw significant attention, maintaining user focus on primary tasks.\n */\nexport const Prominence = {\n  render: () => html`<nve-toast position=\"top\" prominence=\"muted\">muted</nve-toast>`\n};\n\n/**\n * @summary Toast with inline action buttons for quick follow-up actions. Use sparingly for important actions like \"Undo\" or \"View\", but prefer simple toasts without actions for most feedback to maintain lightweight nature.\n */\nexport const Actions = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\">\n    default <nve-button container=\"inline\">action</nve-button>\n  </nve-toast>\n  <nve-toast status=\"success\" position=\"right\">\n    success <nve-button container=\"inline\">action</nve-button>\n  </nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\">\n    warning <nve-button container=\"inline\">action</nve-button>\n  </nve-toast>\n  <nve-toast status=\"danger\" position=\"left\">\n    danger <nve-button container=\"inline\">action</nve-button>\n  </nve-toast>\n</div>\n  `\n};\n\n/**\n * @summary Event handling for toast lifecycle events. Useful for adding custom behavior when toast state changes.\n */\nexport const Events = {\n  render: () => html`\n<nve-toast id=\"toast\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector('nve-toast');\n  toast.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  toast.addEventListener('toggle', () => console.log('toggle'));\n  toast.addEventListener('close', () => console.log('close'));\n  toast.addEventListener('open', () => console.log('open'));\n</script>\n  `\n};\n\n/**\n * @summary Toast positioning options relative to screen edges or anchor elements. Position toasts in consistent locations where they won't obscure important content, typically bottom-center or top-right for global feedback.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-toast anchor=\"btn\" position=\"top\">top</nve-toast>\n<nve-toast anchor=\"btn\" position=\"right\">right</nve-toast>\n<nve-toast anchor=\"btn\" position=\"bottom\">bottom</nve-toast>\n<nve-toast anchor=\"btn\" position=\"left\">left</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Fine-grained toast alignment for precise placement control. Use alignment to position toasts relative to anchor edges, useful for contextual feedback that should appear near specific UI elements.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-card id=\"card\" style=\"width: 450px; height: 300px;\"></nve-card>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\">top center</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\">right center</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\">bottom center</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\">left center</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toast>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @summary Legacy behavior-trigger pattern for automatic toast lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler toast implementation and better maintainability.\n * @tags test-case\n * @deprecated\n */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 90vh\">\n  <nve-button id=\"btn\">copy to clipboard</nve-button>\n  <nve-toast trigger=\"btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n</div>\n`\n};\n\n/**\n * @summary Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define('toast-test-shadow-root', class ToastTestShadowRoot extends HTMLElement {\n    constructor() {\n      super();\n      this._shadow = this.attachShadow({mode: 'open'});\n\n      const template = document.createElement('template');\n      template.innerHTML = \\`\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      \\`;\n      this._shadow.appendChild(template.content);\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Body anchor positioning for toast.\n * @tags test-case\n */\nexport const BodyAnchor = {\n  render: () => html`\n<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: gray;\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/toast/toast.examples.json

@@ -0,0 +1,118 @@
+{
+  "element": "nve-toast",
+  "entrypoint": "@nvidia-elements/core/toast/toast.examples.json",
+  "items": [
+    {
+      "id": "core-toast_default",
+      "name": "Default",
+      "template": "<nve-toast id=\"toast\" close-timeout=\"1500\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n",
+      "summary": "Basic toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like \"Saved\", \"Copied\", or \"Action complete\" that inform users without requiring interaction or disrupting workflow.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-toast_visual",
+      "name": "Visual",
+      "template": "<nve-toast anchor=\"btn\">hello there</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Visual example of toast structure with anchor positioning for consistent implementation patterns across your application.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-toast_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\">default</nve-toast>\n  <nve-toast status=\"success\" position=\"right\">success</nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\">warning</nve-toast>\n  <nve-toast status=\"danger\" position=\"left\">danger</nve-toast>\n</div>\n",
+      "summary": "Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-toast_prominence",
+      "name": "Prominence",
+      "template": "<nve-toast position=\"top\" prominence=\"muted\">muted</nve-toast>\n",
+      "summary": "Muted toast variant for subtle, low-priority feedback. Use muted prominence when the message is informative but shouldn't draw significant attention, maintaining user focus on primary tasks.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-toast_actions",
+      "name": "Actions",
+      "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\"> default <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"success\" position=\"right\"> success <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\"> warning <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"danger\" position=\"left\"> danger <nve-button container=\"inline\">action</nve-button> </nve-toast>\n</div>\n",
+      "summary": "Toast with inline action buttons for quick follow-up actions. Use sparingly for important actions like \"Undo\" or \"View\", but prefer simple toasts without actions for most feedback to maintain lightweight nature.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-toast_events",
+      "name": "Events",
+      "template": "<nve-toast id=\"toast\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  toast.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  toast.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  toast.addEventListener(\"close\", () => console.log(\"close\"));\n  toast.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
+      "summary": "Event handling for toast lifecycle events. Useful for adding custom behavior when toast state changes.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-toast_position",
+      "name": "Position",
+      "template": "<nve-toast anchor=\"btn\" position=\"top\">top</nve-toast>\n<nve-toast anchor=\"btn\" position=\"right\">right</nve-toast>\n<nve-toast anchor=\"btn\" position=\"bottom\">bottom</nve-toast>\n<nve-toast anchor=\"btn\" position=\"left\">left</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
+      "summary": "Toast positioning options relative to screen edges or anchor elements. Position toasts in consistent locations where they won't obscure important content, typically bottom-center or top-right for global feedback.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-toast_alignment",
+      "name": "Alignment",
+      "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\">top center</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\">right center</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\">bottom center</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\">left center</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toast>\n",
+      "summary": "Fine-grained toast alignment for precise placement control. Use alignment to position toasts relative to anchor edges, useful for contextual feedback that should appear near specific UI elements.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-toast_legacy-behavior-trigger",
+      "name": "LegacyBehaviorTrigger",
+      "template": "<div nve-layout=\"row align:center\" style=\"height: 90vh\">\n  <nve-button id=\"btn\">copy to clipboard</nve-button>\n  <nve-toast trigger=\"btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n</div>\n",
+      "summary": "Legacy behavior-trigger pattern for automatic toast lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler toast implementation and better maintainability.",
+      "description": "",
+      "deprecated": true,
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-toast_shadow-root",
+      "name": "ShadowRoot",
+      "template": "<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"toast-test-shadow-root\",\n    class ToastTestShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
+      "summary": "Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-toast_body-anchor",
+      "name": "BodyAnchor",
+      "template": "<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: gray\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n",
+      "summary": "Body anchor positioning for toast.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/toast/toast.js

@@ -0,0 +1,6 @@
+//#region src/toast/toast.css?inline
+var e = ":host{--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: var(--nve-ref-space-md);--nve-sys-interaction-color: var(--color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-400);--justify-content: initial;--background: var(--nve-sys-layer-popover-background);--border-radius: var(--nve-ref-border-radius-md);--border: none;--color: var(--nve-sys-layer-popover-color);--font-size: var(--nve-ref-font-size-200);--font-weight: var(--nve-ref-font-weight-medium);--box-shadow: var(--nve-ref-shadow-100);--gap: var(--nve-ref-space-xs);--_gap: var(--gap);height:fit-content}[internal-host]{background:var(--background);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap);color:var(--color);padding:var(--padding);border-radius:var(--border-radius);border:var(--border);display:flex;flex-direction:row;align-items:center;justify-content:var(--justify-content)}[internal-host]:has(nve-icon-button){padding-inline-end:var(--nve-ref-size-800)}:host([status=\"accent\"]){--background: var(--nve-sys-support-accent-color)}:host([status=\"success\"]){--background: var(--nve-sys-support-success-color);--color: var(--nve-sys-text-white-color)}:host([status=\"warning\"]){--background: var(--nve-sys-support-warning-color);--color: var(--nve-sys-text-black-color)}:host([status=\"danger\"]){--background: var(--nve-sys-support-danger-color);--color: var(--nve-sys-text-white-color)}:host([prominence=\"muted\"]:not([status])){--background: var(--nve-sys-support-muted-color);--color: var(--nve-sys-layer-popover-background)}nve-icon{--color: inherit}nve-icon-button{--color: inherit;position:absolute;inset-block-start:var(--nve-ref-size-50);inset-inline-end:var(--nve-ref-size-50)}::slotted(nve-button[interaction=\"flat\"]),::slotted(nve-button[container=\"flat\"]),::slotted(nve-button[container=\"inline\"]){--color: inherit;margin-inline:calc(var(--_gap) * 2) calc(var(--_gap) / -2)}::slotted([nve-text]){color:inherit!important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=toast.js.map

package/dist/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/toast/toast.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-md);\n  --nve-sys-interaction-color: var(--color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-400);\n  --justify-content: initial;\n  --background: var(--nve-sys-layer-popover-background);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --border: none;\n  --color: var(--nve-sys-layer-popover-color);\n  --font-size: var(--nve-ref-font-size-200);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --gap: var(--nve-ref-space-xs);\n  --_gap: var(--gap);\n  height: fit-content;\n}\n\n[internal-host] {\n  background: var(--background);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  gap: var(--gap);\n  color: var(--color);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: var(--justify-content);\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-800);\n}\n\n:host([status='accent']) {\n  --background: var(--nve-sys-support-accent-color);\n}\n\n:host([status='success']) {\n  --background: var(--nve-sys-support-success-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host([status='warning']) {\n  --background: var(--nve-sys-support-warning-color);\n  --color: var(--nve-sys-text-black-color);\n}\n\n:host([status='danger']) {\n  --background: var(--nve-sys-support-danger-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host([prominence='muted']:not([status])) {\n  --background: var(--nve-sys-support-muted-color);\n  --color: var(--nve-sys-layer-popover-background);\n}\n\nnve-icon {\n  --color: inherit;\n}\n\nnve-icon-button {\n  --color: inherit;\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-50);\n  inset-inline-end: var(--nve-ref-size-50);\n}\n\n::slotted(nve-button[interaction='flat']), /* deprecated */\n::slotted(nve-button[container='flat']), /* deprecated */\n::slotted(nve-button[container='inline']), /* deprecated */\n::slotted(nve-button[container='flat']),\n::slotted(nve-button[container='inline']) {\n  --color: inherit;\n  margin-inline: calc(var(--_gap) * 2) calc(var(--_gap) / -2);\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n"],"mappings":""}