@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/dot/dot.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import { Size, SupportStatus, TaskStatus } from '../internal';
+/**
+ * @element nve-dot
+ * @description A visual indicator that communicates a status or notification of an associated component.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/dot
+ * @slot - default text content no more than 2 characters in length
+ * @cssprop --gap
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --padding
+ * @cssprop --border
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Dot extends LitElement {
+    #private;
+    /** Defines visual treatment to represent a ongoing task or support status. */
+    status: SupportStatus | TaskStatus;
+    /** Determines size of dot relative to provided text. */
+    size: Size;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/dot/dot.examples.js

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

package/dist/dot/dot.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot.examples.js","names":[],"sources":["../../src/dot/dot.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/dot/define.js';\n\nexport default {\n  title: 'Elements/Dot',\n  component: 'nve-dot',\n};\n\n/**\n * @summary Basic dot component with status indicator, providing a simple visual cue for process states and system status.\n */\nexport const Default = {\n  render: () => html`\n<nve-dot status=\"starting\"></nve-dot>\n  `\n};\n\n/**\n * @summary Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br>\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.\n */\nexport const SupportStatus = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.\n */\nexport const Number = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/dot/dot.examples.json

@@ -0,0 +1,53 @@
+{
+  "element": "nve-dot",
+  "entrypoint": "@nvidia-elements/core/dot/dot.examples.json",
+  "items": [
+    {
+      "id": "core-dot_default",
+      "name": "Default",
+      "template": "<nve-dot status=\"starting\"></nve-dot>\n",
+      "summary": "Basic dot component with status indicator, providing a simple visual cue for process states and system status.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-dot_size",
+      "name": "Size",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br />\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n",
+      "summary": "Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-dot_support-status",
+      "name": "SupportStatus",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n",
+      "summary": "Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-dot_number",
+      "name": "Number",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n",
+      "summary": "Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-dot_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n",
+      "summary": "Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/dot/dot.js

@@ -0,0 +1,6 @@
+//#region src/dot/dot.css?inline
+var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-semibold);--background: var(--status-color);--color: var(--nve-sys-text-white-color);--border-radius: var(--nve-ref-border-radius-full);--height: var(--nve-ref-size-300);--width: var(--nve-ref-size-300);--padding: 0;--border: 0;width:auto;display:inline-flex}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);border-radius:var(--border-radius);height:var(--height);width:var(--width);padding:var(--padding);border:var(--border);display:flex;line-height:1em;place-items:center;place-content:center}:host([size=\"sm\"]){--height: var(--nve-ref-size-200);--width: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-50)}:host([size=\"lg\"]){--height: var(--nve-ref-size-400);--width: var(--nve-ref-size-400);--font-size: var(--nve-ref-font-size-200)}:host(:state(has-text)){--width: fit-content;--height: fit-content;--padding: calc(var(--font-size) * .1) calc(var(--font-size) * .5)}::slotted([nve-text]){color:inherit!important}:host([status=\"warning\"]){--color: var(--nve-sys-text-black-color)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=dot.js.map

package/dist/dot/dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot.js","names":[],"sources":["../../src/dot/dot.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  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --background: var(--status-color);\n  --color: var(--nve-sys-text-white-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-300);\n  --width: var(--nve-ref-size-300);\n  --padding: 0;\n  --border: 0;\n  width: auto;\n  display: inline-flex;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border: var(--border);\n  display: flex;\n  line-height: 1em;\n  place-items: center;\n  place-content: center;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-200);\n  --width: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-50);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-400);\n  --width: var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n}\n\n:host(:state(has-text)) {\n  --width: fit-content;\n  --height: fit-content;\n  --padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.5);\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-text-black-color);\n}\n"],"mappings":""}

package/dist/dot/dot2.js

@@ -0,0 +1,42 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { statusStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
+import a from "./dot.js";
+import { LitElement as o, html as s } from "lit";
+import { property as c } from "lit/decorators/property.js";
+//#region src/dot/dot.ts
+var l = class extends o {
+	static {
+		this.styles = i([
+			a,
+			n,
+			r
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-dot",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return s`<div internal-host><slot @slotchange="${() => this.#e()}"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "img";
+	}
+	#e() {
+		this.textContent.length ? this._internals.states.add("has-text") : this._internals.states.delete("has-text");
+	}
+};
+t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "status", void 0), t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0);
+//#endregion
+export { l as Dot };
+
+//# sourceMappingURL=dot2.js.map

package/dist/dot/dot2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot2.js","names":["#updateSlot"],"sources":["../../src/dot/dot.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size, SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './dot.css?inline';\n\n/**\n * @element nve-dot\n * @description A visual indicator that communicates a status or notification of an associated component.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/dot\n * @slot - default text content no more than 2 characters in length\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --border\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Dot extends LitElement {\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus | TaskStatus;\n\n  /** Determines size of dot relative to provided text. */\n  @property({ type: String, reflect: true }) size: Size;\n\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-dot',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateSlot()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  #updateSlot() {\n    this.textContent.length ? this._internals.states.add('has-text') : this._internals.states.delete('has-text');\n  }\n}\n"],"mappings":";;;;;;;AA2BA,IAAa,IAAb,cAAyB,EAAW;;gBAOlB,EAAU;GAAC;GAAQ;GAAmB;GAAmB,CAAC;;;kBAE/C;GACzB,KAAK;GACL,SAAS;GACV;;CAID,SAAS;AACP,SAAO,CAAI,+CAEmB,MAAA,GAAkB,CAAC;;CAKnD,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,KAAc;AACZ,OAAK,YAAY,SAAS,KAAK,WAAW,OAAO,IAAI,WAAW,GAAG,KAAK,WAAW,OAAO,OAAO,WAAW;;;GA7B7G,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA"}

package/dist/dot/index.d.ts

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

package/dist/dot/index.js

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

package/dist/drawer/define.d.ts

@@ -0,0 +1,9 @@
+import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-drawer': Drawer;
+        'nve-drawer-footer': DrawerFooter;
+        'nve-drawer-header': DrawerHeader;
+        'nve-drawer-content': DrawerContent;
+    }
+}

package/dist/drawer/define.js

@@ -0,0 +1,9 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Drawer as t } from "./drawer2.js";
+import { DrawerContent as n } from "./drawer-content2.js";
+import { DrawerFooter as r } from "./drawer-footer2.js";
+import { DrawerHeader as i } from "./drawer-header2.js";
+e(t), e(r), e(i), e(n);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/drawer/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/drawer/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 { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from '@nvidia-elements/core/drawer';\n\ndefine(Drawer);\ndefine(DrawerFooter);\ndefine(DrawerHeader);\ndefine(DrawerContent);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-drawer': Drawer;\n    'nve-drawer-footer': DrawerFooter;\n    'nve-drawer-header': DrawerHeader;\n    'nve-drawer-content': DrawerContent;\n  }\n}\n"],"mappings":";;;;;AAMA,EAAO,EAAO,EACd,EAAO,EAAa,EACpB,EAAO,EAAa,EACpB,EAAO,EAAc"}

package/dist/drawer/drawer-content.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-drawer-content
+ * @description Contains the scrollable main body content within a drawer panel.
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/drawer
+ * @slot - default slot for the drawer content
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --width
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ */
+export declare class DrawerContent extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/drawer/drawer-content.js

@@ -0,0 +1,6 @@
+//#region src/drawer/drawer-content.css?inline
+var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--gap: var(--nve-ref-space-sm);width:100%;height:100%;flex:1;justify-content:stretch;flex-direction:column;display:flex;overflow:auto;gap:var(--gap);contain:none}[internal-host]{background:var(--background);padding:var(--padding);height:100%;width:100%;flex:1}::slotted(nve-menu){--width: 100%}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=drawer-content.js.map

package/dist/drawer/drawer-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-content.js","names":[],"sources":["../../src/drawer/drawer-content.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-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  justify-content: stretch;\n  flex-direction: column;\n  display: flex;\n  overflow: auto;\n  gap: var(--gap);\n  contain: none;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  height: 100%;\n  width: 100%;\n  flex: 1;\n}\n\n::slotted(nve-menu),\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}

package/dist/drawer/drawer-content2.js

@@ -0,0 +1,26 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as t } from "../internal/controllers/audit.controller.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "./drawer-content.js";
+import { LitElement as i, html as a } from "lit";
+//#region src/drawer/drawer-content.ts
+var o = class extends i {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-drawer-content",
+			version: "0.0.3",
+			parents: ["nve-drawer"]
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+};
+o = e([t()], o);
+//#endregion
+export { o as DrawerContent };
+
+//# sourceMappingURL=drawer-content2.js.map

package/dist/drawer/drawer-content2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-content2.js","names":[],"sources":["../../src/drawer/drawer-content.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './drawer-content.css?inline';\n\n/**\n * @element nve-drawer-content\n * @description Contains the scrollable main body content within a drawer panel.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @slot - default slot for the drawer content\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit()\nexport class DrawerContent extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer-content',\n    version: '0.0.0',\n    parents: ['nve-drawer']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,aAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;;OAXd,GAAO,CAAA,EAAA,EAAA"}

package/dist/drawer/drawer-footer.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-drawer-footer
+ * @description Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/drawer
+ * @slot - default slot for the drawer footer
+ * @cssprop --border-top
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --min-height
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ */
+export declare class DrawerFooter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/drawer/drawer-footer.js

@@ -0,0 +1,6 @@
+//#region src/drawer/drawer-footer.css?inline
+var e = ":host{--border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--gap: var(--nve-ref-space-sm);--min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));display:block}[internal-host]{background:var(--background);border-top:var(--border-top);padding:var(--padding);gap:var(--gap);min-height:var(--min-height);display:flex;align-items:center}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=drawer-footer.js.map

package/dist/drawer/drawer-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-footer.js","names":[],"sources":["../../src/drawer/drawer-footer.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  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  --min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  display: block;\n}\n\n[internal-host] {\n  background: var(--background);\n  border-top: var(--border-top);\n  padding: var(--padding);\n  gap: var(--gap);\n  min-height: var(--min-height);\n  display: flex;\n  align-items: center;\n}\n"],"mappings":""}

package/dist/drawer/drawer-footer2.js

@@ -0,0 +1,29 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as t } from "../internal/controllers/audit.controller.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "./drawer-footer.js";
+import { LitElement as i, html as a } from "lit";
+//#region src/drawer/drawer-footer.ts
+var o = class extends i {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-drawer-footer",
+			version: "0.0.3",
+			parents: ["nve-drawer"]
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.slot = "footer";
+	}
+};
+o = e([t()], o);
+//#endregion
+export { o as DrawerFooter };
+
+//# sourceMappingURL=drawer-footer2.js.map

package/dist/drawer/drawer-footer2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-footer2.js","names":[],"sources":["../../src/drawer/drawer-footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './drawer-footer.css?inline';\n\n/**\n * @element nve-drawer-footer\n * @description Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @slot - default slot for the drawer footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --min-height\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit()\nexport class DrawerFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer-footer',\n    version: '0.0.0',\n    parents: ['nve-drawer']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'footer';\n  }\n}\n"],"mappings":";;;;;;AAoBO,IAAA,IAAA,cAA2B,EAAW;;gBAC3B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,aAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;;OApBf,GAAO,CAAA,EAAA,EAAA"}

package/dist/drawer/drawer-header.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-drawer-header
+ * @description Displays the title and optional close control at the top of a drawer to identify its purpose.
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/drawer
+ * @slot - default slot for the drawer header
+ * @cssprop --border-bottom
+ * @cssprop --min-height
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ */
+export declare class DrawerHeader extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/drawer/drawer-header.js

@@ -0,0 +1,6 @@
+//#region src/drawer/drawer-header.css?inline
+var e = ":host{--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);--min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));--padding: var(--nve-ref-size-300);display:block;width:100%}[internal-host]{background:var(--background);border-bottom:var(--border-bottom);padding:var(--padding);color:var(--color);min-height:var(--min-height);display:flex;align-items:center}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=drawer-header.js.map

package/dist/drawer/drawer-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-header.js","names":[],"sources":["../../src/drawer/drawer-header.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  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);\n  --min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  --padding: var(--nve-ref-size-300);\n  display: block;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  border-bottom: var(--border-bottom);\n  padding: var(--padding);\n  color: var(--color);\n  min-height: var(--min-height);\n  display: flex;\n  align-items: center;\n}\n"],"mappings":""}

package/dist/drawer/drawer-header2.js

@@ -0,0 +1,29 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as t } from "../internal/controllers/audit.controller.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "./drawer-header.js";
+import { LitElement as i, html as a } from "lit";
+//#region src/drawer/drawer-header.ts
+var o = class extends i {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-drawer-header",
+			version: "0.0.3",
+			parents: ["nve-drawer"]
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.slot = "header";
+	}
+};
+o = e([t()], o);
+//#endregion
+export { o as DrawerHeader };
+
+//# sourceMappingURL=drawer-header2.js.map

package/dist/drawer/drawer-header2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-header2.js","names":[],"sources":["../../src/drawer/drawer-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { audit, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './drawer-header.css?inline';\n\n/**\n * @element nve-drawer-header\n * @description Displays the title and optional close control at the top of a drawer to identify its purpose.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @slot - default slot for the drawer header\n * @cssprop --border-bottom\n * @cssprop --min-height\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit()\nexport class DrawerHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer-header',\n    version: '0.0.0',\n    parents: ['nve-drawer']\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.slot = 'header';\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAA,IAAA,cAA2B,EAAW;;gBAC3B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,aAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;;OApBf,GAAO,CAAA,EAAA,EAAA"}

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,89 @@
+import { LitElement } from 'lit';
+import { PopoverType, Size, TypeNativePopoverController } from '../internal';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-drawer
+ * @description 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)
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/drawer
+ * @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 drawer opens.
+ * @event close - Dispatched when the drawer closes.
+ * @slot - default content slot
+ * @cssprop --border
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --box-shadow
+ * @cssprop --gap
+ * @cssprop --top
+ * @cssprop --max-width
+ * @cssprop --width
+ * @cssprop --animation-duration - Duration of drawer open/close animations
+ * @csspart icon-button - The close icon button element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ */
+export declare class Drawer extends LitElement {
+    #private;
+    /**
+     * Sets the side position of the popover relative to the provided anchor element.
+     * For drawer the anchor defaults to the document body.
+     */
+    position: 'left' | 'right' | 'bottom' | 'top';
+    /**
+     * Sets the max size of the drawer.
+     */
+    size?: Size;
+    /**
+     * Determines if a close button should render within drawer. Non-closable
+     * drawers suit drawers that require user confirmation steps.
+     */
+    closable: boolean;
+    /**
+     * Determines if a drawer should have a modal backdrop that visually overlays the UI.
+     */
+    modal: boolean;
+    /**
+     * (optional) By default the popover will automatically anchor 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;
+    /**
+     * Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)
+     * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+     */
+    inline: boolean;
+    /**
+     * @deprecated Use the popover API instead.
+     * Determines if popover visibility behavior should be automatically controlled by the trigger.
+     */
+    behaviorTrigger: boolean;
+    /**
+     * Enables internal string values to update for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    /** @private */
+    get popoverType(): PopoverType;
+    /** @private */
+    get popoverDismissible(): boolean;
+    protected typeNativePopoverController: TypeNativePopoverController<Drawer>;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/drawer/drawer.examples.js

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

package/dist/drawer/drawer.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.examples.js","names":[],"sources":["../../src/drawer/drawer.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/drawer/define.js';\n\nexport default {\n  title: 'Elements/Drawer',\n  component: 'nve-drawer',\n  inline: false\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic modal drawer with header, content, and footer sections. Use for displaying detailed information, forms, or settings that need more space than a dialog, typically sliding in from the side of the screen.\n */\nexport const Default = {\n  render: () => html`\n<nve-drawer id=\"drawer\" closable modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">button</nve-button>\n  `,\n};\n\n/**\n * @summary Complete drawer layout pattern with header, scrollable content, and footer sections for consistent drawer structure.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `,\n};\n\n/**\n * @summary Drawer with scrollable content for overflow behavior. Use when drawer content exceeds viewport height, ensuring header and footer remain fixed while content scrolls independently.\n * @tags test-case\n */\nexport const Scroll = {\n  render: () => html`\n<nve-drawer closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 2500px\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `,\n};\n\n/**\n * @summary Event handling for drawer open, close, and toggle events. Useful for adding custom behavior when drawer state changes.\n * @tags test-case\n */\nexport const Events = {\n  render: () => html`\n<nve-drawer id=\"drawer\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n</nve-drawer>\n<nve-button popovertarget=\"drawer\">open</nve-button>\n<script type=\"module\">\n  const drawer = document.querySelector('nve-drawer');\n  drawer.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  drawer.addEventListener('toggle', () => console.log('toggle'));\n  drawer.addEventListener('open', () => console.log('open'));\n  drawer.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Small drawer size for compact side panels and quick actions. Ideal for navigation menus, filters, or supplementary information that shouldn't dominate the screen.\n * @tags test-case\n */\nexport const Small = {\n  render: () => html`\n<nve-drawer size=\"sm\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `\n};\n\n/**\n * @summary Large drawer size for comprehensive content like detailed forms or settings panels. Use when users need significant screen space for complex tasks without leaving the current page context.\n * @tags test-case\n */\nexport const Large = {\n  render: () => html`\n<nve-drawer size=\"lg\" closable>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `\n};\n\n/**\n * @summary Non-closable drawer requiring explicit user action to close. Use for critical workflows or multi-step processes where users must complete or explicitly cancel actions, preventing accidental dismissal.\n * @tags test-case\n */\nexport const NonClosable = {\n  render: () => html`\n<nve-button id=\"open-btn\">open</nve-button>\n<nve-drawer hidden modal>\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const drawer = document.querySelector('nve-drawer');\n  const open = document.querySelector('#open-btn');\n  const cancel = document.querySelector('#cancel-btn');\n  open.addEventListener('click', () => drawer.hidden = false);\n  cancel.addEventListener('click', () => drawer.hidden = true);\n</script>\n  `\n};\n\n/**\n * @summary Drawer positioning from all four screen edges. Use position based on content type and user workflow: right for details/settings, left for navigation, top/bottom for notifications or quick actions that span the width.\n * @tags test-case\n */\nexport const Position = {\n  inline: false,\n  render: () => html`\n<div nve-layout=\"row align:center gap:md\">\n  <nve-button popovertarget=\"popover-top\">open top</nve-button>\n  <nve-button popovertarget=\"popover-left\">open left</nve-button>\n  <nve-button popovertarget=\"popover-right\">open right</nve-button>\n  <nve-button popovertarget=\"popover-bottom\">open bottom</nve-button>\n</div>\n\n<nve-drawer id=\"popover-top\" closable modal position=\"top\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Top</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a top closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-left\" closable modal position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-right\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-bottom\" closable modal position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `\n};\n\n/**\n * @summary Legacy drawer positioning with manual visibility management. Uses an older pattern with programmatic position control and event handling for backward compatibility.\n * @tags test-case\n */\nexport const LegacyPosition = {\n  inline: false,\n  render: () => html`\n<div nve-layout=\"row align:center gap:md\" style=\"height: 95vh\">\n  <nve-button class=\"drawer-btn-left\">open left</nve-button>\n  <nve-button class=\"drawer-btn-right\">open right</nve-button>\n  <nve-button class=\"drawer-btn-bottom\">open bottom</nve-button>\n</div>\n\n<nve-drawer closable modal hidden position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer closable modal hidden position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const leftDrawer = document.querySelector('nve-drawer[position=\"left\"]');\n  document.querySelector('.drawer-btn-left').addEventListener('click', () => {\n    leftDrawer.position = 'left';\n    leftDrawer.hidden = false;\n  });\n\n  const rightDrawer = document.querySelector('nve-drawer[position=\"right\"]');\n  document.querySelector('.drawer-btn-right').addEventListener('click', () => {\n    rightDrawer.position = 'right';\n    rightDrawer.hidden = false;\n  });\n\n  const bottomDrawer = document.querySelector('nve-drawer[position=\"bottom\"]');\n  document.querySelector('.drawer-btn-bottom').addEventListener('click', () => {\n    bottomDrawer.position = 'bottom';\n    bottomDrawer.hidden = false;\n  });\n\n  leftDrawer.addEventListener('close', () => leftDrawer.hidden = true);\n  rightDrawer.addEventListener('close', () => rightDrawer.hidden = true);\n  bottomDrawer.addEventListener('close', () => bottomDrawer.hidden = true);\n</script>\n  `\n};\n\n\n/**\n * @summary Inline drawer constrained within a parent container rather than full viewport. Perfect for detail panels within cards or sections, maintaining context without overlaying the entire application.\n * @tags test-case\n */\nexport const Inline = {\n  render: () => html`\n<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button popovertarget=\"drawer\">inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer id=\"drawer\" closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n  `\n};\n\n/**\n * @summary Inline drawer in persistent open state for always-visible side panels. Use for navigation, filters, or contextual information that should remain accessible while users interact with main content.\n * @tags test-case\n */\nexport const InlineVisible = {\n  render: () => html`\n<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        open inline drawer\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer id=\"drawer\" inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n  `\n};\n\n/**\n * @summary Legacy inline drawer pattern with manual visibility control. Uses an older implementation for inline drawer management; prefer the modern popovertarget API for new implementations.\n * @tags test-case\n */\nexport const LegacyInline = {\n  render: () => html`\n<div nve-layout=\"row align:stretch\">\n  <div nve-layout=\"column gap:md align:horizontal-stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button>open inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer hidden closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n<script type=\"module\">\n  const drawer = document.querySelector('nve-drawer');\n  const open = document.querySelector('nve-button');\n  open.addEventListener('click', () => drawer.hidden = false);\n  drawer.addEventListener('close', () => drawer.hidden = true);\n</script>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @summary Legacy behavior-trigger pattern for automatic drawer lifecycle management. Deprecated approach that auto-manages visibility and state, prefer modern popovertarget API for new implementations.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-button id=\"drawer-btn\">open</nve-button>\n<nve-drawer behavior-trigger trigger=\"drawer-btn\" closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}