@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/drawer/drawer.examples.json

@@ -0,0 +1,147 @@
+{
+  "element": "nve-drawer",
+  "entrypoint": "@nvidia-elements/core/drawer/drawer.examples.json",
+  "items": [
+    {
+      "id": "core-drawer_default",
+      "name": "Default",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-drawer_visual",
+      "name": "Visual",
+      "template": "<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",
+      "summary": "Complete drawer layout pattern with header, scrollable content, and footer sections for consistent drawer structure.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_scroll",
+      "name": "Scroll",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_events",
+      "name": "Events",
+      "template": "<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",
+      "summary": "Event handling for drawer open, close, and toggle events. Useful for adding custom behavior when drawer state changes.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_small",
+      "name": "Small",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_large",
+      "name": "Large",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_non-closable",
+      "name": "NonClosable",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_position",
+      "name": "Position",
+      "template": "<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<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<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<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<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_legacy-position",
+      "name": "LegacyPosition",
+      "template": "<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<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<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<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  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  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  leftDrawer.addEventListener(\"close\", () => (leftDrawer.hidden = true));\n  rightDrawer.addEventListener(\"close\", () => (rightDrawer.hidden = true));\n  bottomDrawer.addEventListener(\"close\", () => (bottomDrawer.hidden = true));\n</script>\n",
+      "summary": "Legacy drawer positioning with manual visibility management. Uses an older pattern with programmatic position control and event handling for backward compatibility.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_inline",
+      "name": "Inline",
+      "template": "<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  <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",
+      "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.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_inline-visible",
+      "name": "InlineVisible",
+      "template": "<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> open inline drawer </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_legacy-inline",
+      "name": "LegacyInline",
+      "template": "<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  <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",
+      "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.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-drawer_legacy-behavior-trigger",
+      "name": "LegacyBehaviorTrigger",
+      "template": "<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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/drawer/drawer.js

@@ -0,0 +1,6 @@
+//#region src/drawer/drawer.css?inline
+var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-300);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: 0px;--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color);--padding: 0;--box-shadow: var(--nve-ref-shadow-500);--gap: var(--nve-ref-space-sm);--top: 0px;--max-width: 400px;--width: 100vw;width:var(--width);max-width:var(--max-width);height:calc(100vh - var(--top));margin:initial!important;margin-block-start:var(--top)!important;position-area:unset!important}:host([size=\"sm\"]){--max-width: 280px}:host([size=\"lg\"]){--max-width: 540px}:host([position=\"left\"]){transform:translate(calc(-1 * var(--width)))!important}:host([position=\"right\"]){transform:translate(var(--width))!important}:host(:popover-open){transform:translate(0)!important}:host([inline]){--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--box-shadow: none;--border: 0;transition:none!important}[internal-host]{border:var(--border);background:var(--background);color:var(--color);box-shadow:var(--box-shadow);bottom:0!important;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;width:100%}::backdrop{background:transparent}:host([modal])::backdrop{background:#00000012}.header{display:flex;gap:var(--gap)}.content{padding:var(--padding);display:flex;flex-direction:column;align-items:start;overflow:auto;flex:1}nve-icon-button{position:absolute;top:var(--nve-ref-size-200);right:var(--nve-ref-size-200);z-index:99}:host([position=\"bottom\"]),:host([position=\"top\"]){min-width:100%;height:max-content}:host([position=\"bottom\"]) [internal-host],:host([position=\"top\"]) [internal-host]{height:min-content}:host([position=\"left\"]){inset:auto auto auto 0}:host([position=\"right\"]){inset:auto 0 auto auto}:host([position=\"top\"]){inset:0 auto auto}:host([position=\"bottom\"]){inset:auto auto 0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=drawer.js.map

package/dist/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../../src/drawer/drawer.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-interaction-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: 0px;\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --padding: 0;\n  --box-shadow: var(--nve-ref-shadow-500);\n  --gap: var(--nve-ref-space-sm);\n  --top: 0px;\n  --max-width: 400px;\n  --width: 100vw;\n  width: var(--width);\n  max-width: var(--max-width);\n  height: calc(100vh - var(--top));\n  margin: initial !important;\n  margin-block-start: var(--top) !important;\n  position-area: unset !important; /* drawer uses its own fixed positioning with translation */\n}\n\n:host([size='sm']) {\n  --max-width: 280px;\n}\n\n:host([size='lg']) {\n  --max-width: 540px;\n}\n\n:host([position='left']) {\n  transform: translateX(calc(-1 * var(--width))) !important;\n}\n\n:host([position='right']) {\n  transform: translateX(var(--width)) !important;\n}\n\n:host(:popover-open) {\n  transform: translateX(0) !important;\n}\n\n:host([inline]) {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --box-shadow: none;\n  --border: 0;\n  transition: none !important;\n}\n\n[internal-host] {\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  bottom: 0 !important;\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  width: 100%;\n}\n\n::backdrop {\n  background: transparent;\n}\n\n:host([modal])::backdrop {\n  /* --nve-sys-layer-backdrop-background (not available on top layer) */\n  background: hsl(0 0% 0% / 0.07); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n\n.header {\n  display: flex;\n  gap: var(--gap);\n}\n\n.content {\n  padding: var(--padding);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  overflow: auto;\n  flex: 1;\n}\n\nnve-icon-button {\n  position: absolute;\n  top: var(--nve-ref-size-200);\n  right: var(--nve-ref-size-200);\n  z-index: 99;\n}\n\n:host([position='bottom']),\n:host([position='top']) {\n  min-width: 100%;\n  height: max-content;\n}\n\n:host([position='bottom']) [internal-host],\n:host([position='top']) [internal-host] {\n  height: min-content;\n}\n\n:host([position='left']) {\n  inset: auto auto auto 0;\n}\n\n:host([position='right']) {\n  inset: auto 0 auto auto;\n}\n\n:host([position='top']) {\n  inset: 0 auto auto;\n}\n\n:host([position='bottom']) {\n  inset: auto auto 0;\n}\n"],"mappings":""}

package/dist/drawer/drawer2.js

@@ -0,0 +1,67 @@
+import { createGhostElement as e } from "../internal/utils/dom.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as n } from "../internal/controllers/i18n.controller.js";
+import { TypeNativePopoverController as r } from "../internal/controllers/type-native-popover.controller.js";
+import { typeSSR as i } from "../internal/controllers/type-ssr.controller.js";
+import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
+import { useStyles as o } from "../internal/styles/index.js";
+import { popoverStyles as s } from "../internal/styles/popover2.js";
+import { IconButton as c } from "../icon-button/icon-button2.js";
+import l from "./drawer.js";
+import { LitElement as u, html as d } from "lit";
+import { property as f } from "lit/decorators/property.js";
+//#region src/drawer/drawer.ts
+var p = class extends u {
+	constructor(...e) {
+		super(...e), this.position = "left", this.anchor = globalThis.document?.body, this.i18n = this.#e.i18n, this.typeNativePopoverController = new r(this);
+	}
+	#e = new n(this);
+	get popoverType() {
+		return this.modal ? "auto" : "manual";
+	}
+	get popoverDismissible() {
+		return !!this.closable;
+	}
+	static {
+		this.styles = o([s, l]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-drawer",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [c.metadata.tag]: c };
+	}
+	render() {
+		return d`<div internal-host><div class="header"><nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" .hidden="${!this.closable}" @click="${this.hidePopover}" icon-name="cancel" .ariaLabel="${this.i18n.close}" container="flat"></nve-icon-button><slot name="header"></slot></div><div class="content"><slot></slot></div><div><slot name="footer"></slot></div></div>`;
+	}
+	#t;
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("toggle", (t) => {
+			this.inline && (this.#t && t.newState === "closed" ? this.#t.remove() : (this.#t = e(this), this.after(this.#t)));
+		});
+	}
+};
+t([f({
+	type: String,
+	reflect: !0
+})], p.prototype, "position", void 0), t([f({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), t([f({ type: Boolean })], p.prototype, "closable", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "modal", void 0), t([f({ type: String })], p.prototype, "anchor", void 0), t([f({ type: String })], p.prototype, "trigger", void 0), t([f({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "inline", void 0), t([f({
+	type: Boolean,
+	reflect: !0,
+	attribute: "behavior-trigger"
+})], p.prototype, "behaviorTrigger", void 0), t([f({ type: Object })], p.prototype, "i18n", void 0), p = t([i(), a()], p);
+//#endregion
+export { p as Drawer };
+
+//# sourceMappingURL=drawer2.js.map

package/dist/drawer/drawer2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer2.js","names":["#i18nController","#inlineElement"],"sources":["../../src/drawer/drawer.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 { PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n  createGhostElement,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  TypeNativePopoverController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './drawer.css?inline';\n\n/**\n * @element nve-drawer\n * @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)\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @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)\n * @event open - Dispatched when the drawer opens.\n * @event close - Dispatched when the drawer closes.\n * @slot - default content slot\n * @cssprop --border\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --top\n * @cssprop --max-width\n * @cssprop --width\n * @cssprop --animation-duration - Duration of drawer open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@typeSSR()\n@scopedRegistry()\nexport class Drawer extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For drawer the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' | 'bottom' | 'top' = 'left';\n\n  /**\n   * Sets the max size of the drawer.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within drawer. Non-closable\n   * drawers suit drawers that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a drawer should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)\n   * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n   */\n  @property({ type: Boolean, reflect: true }) inline: boolean;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return !!this.closable;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Drawer>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <div class=\"header\">\n        <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .hidden=${!this.closable} @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close} container=\"flat\"></nve-icon-button>\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n      <div>\n        <slot name=\"footer\"></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  #inlineElement: HTMLElement;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('toggle', (e: ToggleEvent) => {\n      if (this.inline) {\n        if (this.#inlineElement && e.newState === 'closed') {\n          this.#inlineElement.remove();\n        } else {\n          this.#inlineElement = createGhostElement(this);\n          this.after(this.#inlineElement);\n        }\n      }\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AA2CO,IAAA,IAAA,cAAqB,EAAW;;+BAKsD,sBAsBhC,WAAW,UAAU,kBA0B7C,MAAA,EAAqB,yCAYhB,IAAI,EAAoC,KAAK;;CAjBrF,KAAwC,IAAI,EAAqB,KAAK;CAQtE,IAAI,cAA2B;AAC7B,SAAO,KAAK,QAAQ,SAAS;;CAI/B,IAAI,qBAAqB;AACvB,SAAO,CAAC,CAAC,KAAK;;;gBAKA,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,SAAS;AACP,SAAO,CAAI,2HAG2E,CAAC,KAAK,SAAS,YAAU,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM;;CAanL;CAEA,oBAA0B;AAExB,EADA,MAAM,mBAAmB,EACzB,KAAK,iBAAiB,WAAW,MAAmB;AAClD,GAAI,KAAK,WACH,MAAA,KAAuB,EAAE,aAAa,WACxC,MAAA,EAAoB,QAAQ,IAE5B,MAAA,IAAsB,EAAmB,KAAK,EAC9C,KAAK,MAAM,MAAA,EAAoB;IAGnC;;;GAvGH,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAMzC,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK3B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAM1C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAO1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAM1B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAM1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,KAOzE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvD5B,GAAS,EACT,GAAgB,CAAA,EAAA,EAAA"}

package/dist/drawer/index.d.ts

@@ -0,0 +1,4 @@
+export * from './drawer.js';
+export * from './drawer-content.js';
+export * from './drawer-footer.js';
+export * from './drawer-header.js';

package/dist/drawer/index.js

@@ -0,0 +1,5 @@
+import { Drawer as e } from "./drawer2.js";
+import { DrawerContent as t } from "./drawer-content2.js";
+import { DrawerFooter as n } from "./drawer-footer2.js";
+import { DrawerHeader as r } from "./drawer-header2.js";
+export { e as Drawer, t as DrawerContent, n as DrawerFooter, r as DrawerHeader };

package/dist/dropdown/define.d.ts

@@ -0,0 +1,8 @@
+import { Dropdown, DropdownHeader, DropdownFooter } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-dropdown': Dropdown;
+        'nve-dropdown-footer': DropdownFooter;
+        'nve-dropdown-header': DropdownHeader;
+    }
+}

package/dist/dropdown/define.js

@@ -0,0 +1,8 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Dropdown as t } from "./dropdown2.js";
+import { DropdownFooter as n } from "./dropdown-footer2.js";
+import { DropdownHeader as r } from "./dropdown-header2.js";
+e(t), e(n), e(r);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/dropdown/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/dropdown/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 { Dropdown, DropdownHeader, DropdownFooter } from '@nvidia-elements/core/dropdown';\n\ndefine(Dropdown);\ndefine(DropdownFooter);\ndefine(DropdownHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-dropdown': Dropdown;\n    'nve-dropdown-footer': DropdownFooter;\n    'nve-dropdown-header': DropdownHeader;\n  }\n}\n"],"mappings":";;;;AAMA,EAAO,EAAS,EAChB,EAAO,EAAe,EACtB,EAAO,EAAe"}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-dropdown-footer
+ * @description Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.
+ * @since 0.36.0
+ * @entrypoint \@nvidia-elements/core/dropdown
+ * @slot - default slot for the dropdown footer
+ * @cssprop --border-top
+ * @cssprop --padding
+ * @cssprop --gap
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+export declare class DropdownFooter 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/dropdown/dropdown-footer.js

@@ -0,0 +1,6 @@
+//#region src/dropdown/dropdown-footer.css?inline
+var e = ":host{--border-top: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color);--padding: var(--nve-ref-size-400);--gap: var(--nve-ref-space-sm);display:block;width:calc(100% + calc(var(--padding) * 2));margin:var(--padding) calc(var(--padding) * -1) 0 calc(var(--padding) * -1)}[internal-host]{border-top:var(--border-top);padding:var(--padding) var(--padding) 0 var(--padding);display:flex;justify-content:start;gap:var(--gap)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=dropdown-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-footer.js","names":[],"sources":["../../src/dropdown/dropdown-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-md) solid var(--nve-ref-border-color);\n  --padding: var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  display: block;\n  width: calc(100% + calc(var(--padding) * 2));\n  margin: var(--padding) calc(var(--padding) * -1) 0 calc(var(--padding) * -1);\n}\n\n[internal-host] {\n  border-top: var(--border-top);\n  padding: var(--padding) var(--padding) 0 var(--padding);\n  display: flex;\n  justify-content: start;\n  gap: var(--gap);\n}\n"],"mappings":""}

package/dist/dropdown/dropdown-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 "./dropdown-footer.js";
+import { LitElement as i, html as a } from "lit";
+//#region src/dropdown/dropdown-footer.ts
+var o = class extends i {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-dropdown-footer",
+			version: "0.0.3",
+			parents: ["nve-dropdown"]
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.slot = "footer";
+	}
+};
+o = e([t()], o);
+//#endregion
+export { o as DropdownFooter };
+
+//# sourceMappingURL=dropdown-footer2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-footer2.js","names":[],"sources":["../../src/dropdown/dropdown-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 './dropdown-footer.css?inline';\n\n/**\n * @element nve-dropdown-footer\n * @description Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.\n * @since 0.36.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @slot - default slot for the dropdown footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-footer',\n    version: '0.0.0',\n    parents: ['nve-dropdown']\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":";;;;;;AAmBO,IAAA,IAAA,cAA6B,EAAW;;gBAC7B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;;OApBf,GAAO,CAAA,EAAA,EAAA"}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-dropdown-header
+ * @description Displays a title or contextual label at the top of a dropdown menu to categorize its contents.
+ * @since 0.36.0
+ * @entrypoint \@nvidia-elements/core/dropdown
+ * @slot - default slot for the dropdown header
+ * @cssprop --border-bottom
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+export declare class DropdownHeader 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/dropdown/dropdown-header.js

@@ -0,0 +1,6 @@
+//#region src/dropdown/dropdown-header.css?inline
+var e = ":host{--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color);--padding: var(--nve-ref-size-400);width:calc(100% + calc(var(--padding) * 2));margin:0 calc(var(--padding) * -1) var(--padding) calc(var(--padding) * -1)}[internal-host]{border-bottom:var(--border-bottom);padding:0 var(--padding) var(--padding) var(--padding)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=dropdown-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header.js","names":[],"sources":["../../src/dropdown/dropdown-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-md) solid var(--nve-ref-border-color);\n  --padding: var(--nve-ref-size-400);\n  width: calc(100% + calc(var(--padding) * 2));\n  margin: 0 calc(var(--padding) * -1) var(--padding) calc(var(--padding) * -1);\n}\n\n[internal-host] {\n  border-bottom: var(--border-bottom);\n  padding: 0 var(--padding) var(--padding) var(--padding);\n}\n"],"mappings":""}

package/dist/dropdown/dropdown-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 "./dropdown-header.js";
+import { LitElement as i, html as a } from "lit";
+//#region src/dropdown/dropdown-header.ts
+var o = class extends i {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-dropdown-header",
+			version: "0.0.3",
+			parents: ["nve-dropdown"]
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.slot = "header";
+	}
+};
+o = e([t()], o);
+//#endregion
+export { o as DropdownHeader };
+
+//# sourceMappingURL=dropdown-header2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-header2.js","names":[],"sources":["../../src/dropdown/dropdown-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 './dropdown-header.css?inline';\n\n/**\n * @element nve-dropdown-header\n * @description Displays a title or contextual label at the top of a dropdown menu to categorize its contents.\n * @since 0.36.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @slot - default slot for the dropdown header\n * @cssprop --border-bottom\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-header',\n    version: '0.0.0',\n    parents: ['nve-dropdown']\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":";;;;;;AAkBO,IAAA,IAAA,cAA6B,EAAW;;gBAC7B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,eAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;;OApBf,GAAO,CAAA,EAAA,EAAA"}

package/dist/dropdown/dropdown.d.ts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+import { IconButton } from '../icon-button';
+import { PopoverAlign, PopoverPosition, PopoverType, TypeNativePopoverController } from '../internal';
+/**
+ * @element nve-dropdown
+ * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @since 0.6.0
+ * @entrypoint \@nvidia-elements/core/dropdown
+ * @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 dropdown opens.
+ * @event close - Dispatched when the dropdown closes.
+ * @slot - default slot for dropdown content
+ * @cssprop --border
+ * @cssprop --border-radius
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --box-shadow
+ * @cssprop --width
+ * @cssprop --min-width
+ * @cssprop --gap
+ * @cssprop --arrow-transform - Transform applied to the popover arrow
+ * @cssprop --animation-duration - Duration of dropdown open/close animations
+ * @csspart icon-button - The close icon button element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+export declare class Dropdown extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    /**
+     * (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;
+    /**
+     * 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.
+     * If an arrow exists the alginment will be relative to the arrow against the anchor.
+     */
+    alignment: PopoverAlign;
+    /**
+     * @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 dropdown. Non-closable
+     * dropdowns suit menu or selection patterns.
+     */
+    closable: boolean;
+    /**
+     * Determines if an arrow renders.
+     */
+    arrow: boolean;
+    /** @private */
+    modal: boolean;
+    /** @private */
+    popoverType: PopoverType;
+    popoverArrow: HTMLElement;
+    protected typeNativePopoverController: TypeNativePopoverController<Dropdown>;
+    /** @private */
+    get popoverDismissible(): boolean;
+    /**
+     * Enables internal string values to update for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/dropdown/dropdown.examples.js

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

package/dist/dropdown/dropdown.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.examples.js","names":[],"sources":["../../src/dropdown/dropdown.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/forms/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\n\nexport default {\n  title: 'Elements/Dropdown',\n  component: 'nve-dropdown'\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.\n */\nexport const Default = {\n  render: () => html`\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  `\n};\n\n/**\n * @summary Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.\n */\nexport const Menu = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">dropdown content</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.\n * @tags test-case\n */\nexport const Events = {\n  inline: false,\n  render: () => html`\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<script type=\"module\">\n  const dropdown = document.querySelector('nve-dropdown');\n  dropdown.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  dropdown.addEventListener('toggle', () => console.log('toggle'));\n  dropdown.addEventListener('open', () => console.log('open'));\n  dropdown.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\" closable>\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">heading</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">footer</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.\n * @tags test-case\n */\nexport const MultipleTriggers = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-dropdown id=\"dropdown\">hello there</nve-dropdown>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown position, with the position attribute controlling placement when the trigger is not visible.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-dropdown anchor=\"card\" position=\"top\" alignment=\"center\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">dropdown positioned top</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"right\" alignment=\"center\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">dropdown positioned right</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"bottom\" alignment=\"center\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">dropdown positioned bottom</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"left\" alignment=\"center\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">dropdown positioned left</p>\n</nve-dropdown>\n<nve-card id=\"card\" style=\"width: 250px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px;\"></nve-card>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.\n * @tags test-case\n */\nexport const RadioGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>Sort By</label>\n    <nve-radio>\n      <label>Completed</label>\n      <input type=\"radio\" checked />\n      <nve-control-message>latest completed tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Failing</label>\n      <input type=\"radio\" />\n      <nve-control-message>latest failing tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Status</label>\n      <input type=\"radio\" />\n      <nve-control-message>task status priority</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.\n * @tags test-case\n */\nexport const CheckboxGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>Test Suites</label>\n    <nve-checkbox>\n      <label>Local</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Nightly</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Remote</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dropdown-btn\">open</nve-button>\n<nve-dropdown anchor=\"dropdown-btn\" trigger=\"dropdown-btn\" behavior-trigger hidden>\n  <p nve-text=\"body\">hello there</p>\n</nve-dropdown>\n  `\n};\n\n/**\n * @deprecated\n * @summary Dropdown hint, using the tooltip element to display a hint when the dropdown opens.\n * @tags test-case\n */\nexport const Hint = {\n  render: () => html`\n<nve-dropdown id=\"dropdown\">\n  dropdown content\n</nve-dropdown>\n\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.\n * @tags test-case\n */\nexport const PositionFallback = {\n  render: () => html`\n<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}