@nvidia-elements/core 0.0.5 → 0.0.7

package/dist/data.snippets.json

@@ -188,33 +188,6 @@
     "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
     "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
   },
-  "Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "card"
-    ],
-    "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div slot=\"title\">${1:Title}</div>\n    <div slot=\"subtitle\">${2:Sub Title}</div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card"
-    ],
-    "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card-grid"
-    ],
-    "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
-  },
   "Button Group": {
     "srcFile": "button-group.snippets.html",
     "prefix": [
@@ -251,32 +224,32 @@
     "description": "Simple vertical button group with three icon buttons.",
     "body": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
   },
-  "Alert Group": {
-    "srcFile": "alert.snippets.html",
+  "Card": {
+    "srcFile": "card.snippets.html",
     "prefix": [
-      "alert-group"
+      "card"
     ],
     "type": "pattern",
-    "description": "Alert group with two alerts.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert closable>${3:Alert Text}</nve-alert>\n  <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
+    "description": "Basic Card with header and footer",
+    "body": "<nve-card>\n  <nve-card-header>\n    <div slot=\"title\">${1:Title}</div>\n    <div slot=\"subtitle\">${2:Sub Title}</div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
   },
-  "Alert with Action": {
-    "srcFile": "alert.snippets.html",
+  "Media Card": {
+    "srcFile": "card.snippets.html",
     "prefix": [
-      "alert-action"
+      "media-card"
     ],
     "type": "pattern",
-    "description": "Alert with action button.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
+    "description": "Basic media Card with card content and card footer",
+    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
   },
-  "Multiline Alert ": {
-    "srcFile": "alert.snippets.html",
+  "Media Card Grid": {
+    "srcFile": "card.snippets.html",
     "prefix": [
-      "multiline-alert"
+      "media-card-grid"
     ],
     "type": "pattern",
-    "description": "Alert text and preformatted code output.",
-    "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
+    "description": "Grid layout with 3 media cards",
+    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
   },
   "Accordion": {
     "srcFile": "accordion.snippets.html",
@@ -304,5 +277,32 @@
     "type": "pattern",
     "description": "Accordion group with two accordion children.",
     "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${2:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${3:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${4:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${5:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${6:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${7:Content} </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n$0\n"
+  },
+  "Alert Group": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "alert-group"
+    ],
+    "type": "pattern",
+    "description": "Alert group with two alerts.",
+    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert closable>${3:Alert Text}</nve-alert>\n  <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
+  },
+  "Alert with Action": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "alert-action"
+    ],
+    "type": "pattern",
+    "description": "Alert with action button.",
+    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
+  },
+  "Multiline Alert ": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "multiline-alert"
+    ],
+    "type": "pattern",
+    "description": "Alert text and preformatted code output.",
+    "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
   }
 }

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/divider/divider2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer.d.ts

@@ -86,4 +86,5 @@ export declare class Drawer extends LitElement {
     };
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/dist/drawer/drawer2.js

@@ -28,7 +28,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {
@@ -39,10 +39,14 @@ var p = class extends u {
 	}
 	#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)));
-		});
+		super.connectedCallback(), this.addEventListener("toggle", this.#n);
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("toggle", this.#n), this.#t?.remove(), this.#t = void 0;
+	}
+	#n = (t) => {
+		this.inline && (this.#t && t.newState === "closed" ? this.#t.remove() : (this.#t = e(this), this.after(this.#t)));
+	};
 };
 t([f({
 	type: String,

package/dist/drawer/drawer2.js.map

@@ -1 +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"}
+{"version":3,"file":"drawer2.js","names":["#i18nController","#onToggle","#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', this.#onToggle);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('toggle', this.#onToggle);\n    this.#inlineElement?.remove();\n    this.#inlineElement = undefined;\n  }\n\n  #onToggle = (toggleEvent: ToggleEvent) => {\n    if (this.inline) {\n      if (this.#inlineElement && toggleEvent.newState === 'closed') {\n        this.#inlineElement.remove();\n      } else {\n        this.#inlineElement = createGhostElement(this);\n        this.after(this.#inlineElement);\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,UAAU,MAAA,EAAe;;CAGjD,uBAA6B;AAI3B,EAHA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,UAAU,MAAA,EAAe,EAClD,MAAA,GAAqB,QAAQ,EAC7B,MAAA,IAAsB,KAAA;;CAGxB,MAAa,MAA6B;AACxC,EAAI,KAAK,WACH,MAAA,KAAuB,EAAY,aAAa,WAClD,MAAA,EAAoB,QAAQ,IAE5B,MAAA,IAAsB,EAAmB,KAAK,EAC9C,KAAK,MAAM,MAAA,EAAoB;;;GA9GpC,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/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "0.0.5",
+			version: "0.0.7",
 			children: ["nve-dropdown"]
 		};
 	}
@@ -26,7 +26,7 @@ var d = class extends c {
 		super.connectedCallback(), t(this, s), globalThis.document?.addEventListener("pointerup", this.#e), this.addEventListener("keydown", this.#r), this.addEventListener("open", this.#i), this.addEventListener("close", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#e);
+		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#e), this.removeEventListener("keydown", this.#r), this.removeEventListener("open", this.#i), this.removeEventListener("close", this.#a);
 	}
 	#t() {
 		this.dropdowns.forEach((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  isSimpleFocusable,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --nve-dropdown-group-spacing\n * @cssprop --nve-dropdown-group-transition\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @stable false\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup(event: PointerEvent) {\n    const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n    const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n    if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n      this.close();\n    }\n  }\n\n  #keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (event.code === 'Escape') {\n      this.close();\n    }\n    if (event.code === 'ArrowRight') {\n      const targetId = target.getAttribute('popovertarget');\n      const dropdown = this.dropdowns.find(dropdown => dropdown.id === targetId);\n      dropdown?.showPopover();\n    }\n    if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n      target.closest('nve-dropdown')?.hidePopover();\n    }\n  }\n\n  #onOpen(event: CustomEvent) {\n    const dropdown = event.target as HTMLElement;\n    const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n    if (isLocalDropdown) {\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const element = event.target as HTMLElement;\n    const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n    if (isLocalDropdown) {\n      // _activeTrigger is a popover controller internal API\n      const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n      dropdown._activeTrigger?.focus();\n    }\n  }\n\n  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA+BO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,EAAE,CAAC;;;kBAEF;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAA;GACZ;;CAID,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAoB;;CAK9C,MAAe,MAAoB,MAAA,EAAgB,EAAE;CAErD,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,WAAW,UAAU,iBAAiB,aAAa,MAAA,EAAiB,EACpE,KAAK,iBAAiB,WAAW,MAAA,EAAc,EAC/C,KAAK,iBAAiB,QAAQ,MAAA,EAA8B,EAC5D,KAAK,iBAAiB,SAAS,MAAA,EAA+B;;CAGhE,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,WAAW,UAAU,oBAAoB,aAAa,MAAA,EAAiB;;CAGzE,KAAiB;AACf,OAAK,UAAU,SAAQ,MAAY;AACjC,KAAS,cAAc;IACvB;;CAGJ,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,gBAAgB,CAAC,EAC1F,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,EAAS,CAAC;AAC1G,EAAI,KAAyB,KAC3B,KAAK,OAAO;;CAIhB,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;AAIrB,MAHI,EAAM,SAAS,YACjB,KAAK,OAAO,EAEV,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,gBAAgB;AACpC,QAAK,UAAU,MAAK,MAAY,EAAS,OAAO,EAAS,EAChE,aAAa;;AAEzB,EAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,OAAsB,IAC9E,EAAO,QAAQ,eAAe,EAAE,aAAa;;CAIjD,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;AAEvB,EADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAS,IAEvG,EAA2B,EAAS,CAAC,IAAI,OAAO;;CAIpD,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;AAEtB,EADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAQ,IAGpF,EACR,gBAAgB,OAAO;;CAIpC,QAAQ;AACN,OAAK,iBAAiB,eAAe,CAAC,SAAQ,MAAK,EAAE,aAAa,CAAC;;;GA1EpE,GAAuB,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAVzB,GAAO,CAAA,EAAA,EAAA"}
+{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  isSimpleFocusable,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --nve-dropdown-group-spacing\n * @cssprop --nve-dropdown-group-transition\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @stable false\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n    this.removeEventListener('keydown', this.#keydown);\n    this.removeEventListener('open', this.#onOpen as EventListener);\n    this.removeEventListener('close', this.#onClose as EventListener);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup(event: PointerEvent) {\n    const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n    const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n    if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n      this.close();\n    }\n  }\n\n  #keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (event.code === 'Escape') {\n      this.close();\n    }\n    if (event.code === 'ArrowRight') {\n      const targetId = target.getAttribute('popovertarget');\n      const dropdown = this.dropdowns.find(dropdown => dropdown.id === targetId);\n      dropdown?.showPopover();\n    }\n    if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n      target.closest('nve-dropdown')?.hidePopover();\n    }\n  }\n\n  #onOpen(event: CustomEvent) {\n    const dropdown = event.target as HTMLElement;\n    const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n    if (isLocalDropdown) {\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const element = event.target as HTMLElement;\n    const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n    if (isLocalDropdown) {\n      // _activeTrigger is a popover controller internal API\n      const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n      dropdown._activeTrigger?.focus();\n    }\n  }\n\n  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA+BO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,EAAE,CAAC;;;kBAEF;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAA;GACZ;;CAID,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAoB;;CAK9C,MAAe,MAAoB,MAAA,EAAgB,EAAE;CAErD,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,WAAW,UAAU,iBAAiB,aAAa,MAAA,EAAiB,EACpE,KAAK,iBAAiB,WAAW,MAAA,EAAc,EAC/C,KAAK,iBAAiB,QAAQ,MAAA,EAA8B,EAC5D,KAAK,iBAAiB,SAAS,MAAA,EAA+B;;CAGhE,uBAAuB;AAKrB,EAJA,MAAM,sBAAsB,EAC5B,WAAW,UAAU,oBAAoB,aAAa,MAAA,EAAiB,EACvE,KAAK,oBAAoB,WAAW,MAAA,EAAc,EAClD,KAAK,oBAAoB,QAAQ,MAAA,EAA8B,EAC/D,KAAK,oBAAoB,SAAS,MAAA,EAA+B;;CAGnE,KAAiB;AACf,OAAK,UAAU,SAAQ,MAAY;AACjC,KAAS,cAAc;IACvB;;CAGJ,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,gBAAgB,CAAC,EAC1F,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,EAAS,CAAC;AAC1G,EAAI,KAAyB,KAC3B,KAAK,OAAO;;CAIhB,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;AAIrB,MAHI,EAAM,SAAS,YACjB,KAAK,OAAO,EAEV,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,gBAAgB;AACpC,QAAK,UAAU,MAAK,MAAY,EAAS,OAAO,EAAS,EAChE,aAAa;;AAEzB,EAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,OAAsB,IAC9E,EAAO,QAAQ,eAAe,EAAE,aAAa;;CAIjD,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;AAEvB,EADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAS,IAEvG,EAA2B,EAAS,CAAC,IAAI,OAAO;;CAIpD,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;AAEtB,EADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAQ,IAGpF,EACR,gBAAgB,OAAO;;CAIpC,QAAQ;AACN,OAAK,iBAAiB,eAAe,CAAC,SAAQ,MAAK,EAAE,aAAa,CAAC;;;GA7EpE,GAAuB,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAVzB,GAAO,CAAA,EAAA,EAAA"}

package/dist/dropzone/dropzone.d.ts

@@ -29,6 +29,8 @@ declare const Dropzone_base: {
         readonly _validators: import('@nvidia-elements/forms').Validator[];
         readonly _internals: ElementInternals;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        _stopInternalPropagation: (event: Event) => void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         _handleAttributeChange(name: string, newValue: string): void;
         formResetCallback(): void;
@@ -397,7 +399,6 @@ declare const Dropzone_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
-        disconnectedCallback?(): void;
         requestUpdate?(name?: string, oldValue?: unknown): void;
     };
     formAssociated: boolean;

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "0.0.5",
+			version: "0.0.7",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	connectedCallback() {

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	#e;

package/dist/forms/control/control.d.ts

@@ -21,7 +21,7 @@ import { TemplateResult, LitElement, nothing } from 'lit';
  */
 export declare class Control extends LitElement {
     #private;
-    /** Set current visaul state for control. This overrides any validation states active. */
+    /** Set current visual state for control. This overrides any validation states active. */
     status: 'warning' | 'error' | 'success' | 'disabled';
     /** Set current control + label + control message layout. Layouts will collapse based on available container space. */
     layout: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';

package/dist/forms/control/control2.js

@@ -40,50 +40,55 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {
 		return this.nveControl === "inline" ? y`<div internal-host part="_internal-host"><div input part="_input"><slot interaction-state></slot></div><slot name="label" part="_label"></slot><slot name="messages" part="_messages"></slot></div>` : y`<div internal-host part="_internal-host"><slot name="label" part="_label"></slot><div input part="_input">${this.prefixContent}<slot></slot>${this.suffixContent}</div><slot name="messages" part="_messages"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), a(this), e(this, g), this.shadowRoot.addEventListener("slotchange", () => {
-			this.#l(), this.input && this.#i.length === 0 && (this.#a(), this.#o());
-		});
+		super.connectedCallback(), a(this), e(this, g), this.shadowRoot.addEventListener("slotchange", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#i.forEach((e) => e.disconnect());
+		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#s), this.fitText && this.input && (this.input.removeEventListener("input", this.#l), this.input.removeEventListener("change", this.#l)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
 	}
+	#a = () => {
+		this.#f(), this.input && this.#i.length === 0 && (this.#o(), this.#c());
+	};
 	reset() {
 		this.input.value = this.input.getAttribute("value") ?? "", this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#a() {
-		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), t(this, ["hidden", "status"], () => this.#l())), this.#c(), this.#u(), this.shadowRoot.addEventListener("slotchange", () => {
-			this.#l(), this.#u();
-		});
-	}
 	#o() {
-		this.fitText && (this.#s(), this.input.addEventListener("input", () => this.#s()), this.input.addEventListener("change", () => this.#s()));
+		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), t(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#s);
+	}
+	#s = () => {
+		this.#f(), this.#p();
+	};
+	#c() {
+		this.fitText && (this.#u(), this.input.addEventListener("input", this.#l), this.input.addEventListener("change", this.#l));
 	}
-	#s() {
+	#l = () => {
+		this.#u();
+	};
+	#u() {
 		if (this.input.tagName === "INPUT") {
 			let e = this.input.type === "text" ? 0 : 4;
 			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
 		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
 	}
-	#c() {
+	#d() {
 		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
 	}
-	#l() {
+	#f() {
 		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
 	}
-	#u() {
-		this.#d(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
+	#p() {
+		this.#m(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
 	}
-	#d() {
+	#m() {
 		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
 		e && (e.slot = "label");
 	}

package/dist/forms/control/control2.js.map

@@ -1 +1 @@
-{"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#updateStyleStates","#observers","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visaul state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#updateStyleStates();\n\n      if (this.input && this.#observers.length === 0) {\n        this.#setupInput();\n        this.#setupFitText();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.input.value = this.input.getAttribute('value') ?? '';\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #setupInput() {\n    setupControlValidationStates(this, this.#messages);\n\n    this.#observers.push(\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#updateStyleStates();\n      this.#updateAssociations();\n    });\n  }\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', () => this.#getCharacterWidth());\n      this.input.addEventListener('change', () => this.#getCharacterWidth());\n    }\n  }\n\n  #getCharacterWidth() {\n    if (this.input.tagName === 'INPUT') {\n      const offset = this.input.type !== 'text' ? 4 : 0;\n      this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n      this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n    } else if (this.input.tagName === 'SELECT') {\n      this.style.setProperty(\n        '--control-width',\n        `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n      );\n    }\n  }\n\n  #polyfillShowPicker() {\n    if (!this.input.showPicker) {\n      this.input.showPicker = () => this.input.focus();\n    }\n  }\n\n  #updateStyleStates() {\n    if (this.input) {\n      this.toggleAttribute('multiple', this.input?.multiple);\n      this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n    }\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateLabel(this.#label, this.input);\n    associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n    if (this._associateDatalist) {\n      associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n    }\n  }\n\n  #assignLabel() {\n    const label =\n      this.querySelector('label') ||\n      (this.shadowRoot!.querySelector('slot')!\n        .assignedNodes({ flatten: true })\n        .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n    if (label) {\n      label.slot = 'label';\n    }\n  }\n\n  protected showPicker() {\n    try {\n      this.input.showPicker();\n    } catch {\n      //\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#observers","#updateStyleStates","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visual state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n    this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n    if (this.fitText && this.input) {\n      this.input.removeEventListener('input', this.#onFitTextUpdate);\n      this.input.removeEventListener('change', this.#onFitTextUpdate);\n    }\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#observers.length = 0;\n  }\n\n  #onRootSlotchange = () => {\n    this.#updateStyleStates();\n\n    if (this.input && this.#observers.length === 0) {\n      this.#setupInput();\n      this.#setupFitText();\n    }\n  };\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.input.value = this.input.getAttribute('value') ?? '';\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #setupInput() {\n    setupControlValidationStates(this, this.#messages);\n\n    this.#observers.push(\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n  }\n\n  #onInputSlotchange = () => {\n    this.#updateStyleStates();\n    this.#updateAssociations();\n  };\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', this.#onFitTextUpdate);\n      this.input.addEventListener('change', this.#onFitTextUpdate);\n    }\n  }\n\n  #onFitTextUpdate = () => {\n    this.#getCharacterWidth();\n  };\n\n  #getCharacterWidth() {\n    if (this.input.tagName === 'INPUT') {\n      const offset = this.input.type !== 'text' ? 4 : 0;\n      this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n      this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n    } else if (this.input.tagName === 'SELECT') {\n      this.style.setProperty(\n        '--control-width',\n        `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n      );\n    }\n  }\n\n  #polyfillShowPicker() {\n    if (!this.input.showPicker) {\n      this.input.showPicker = () => this.input.focus();\n    }\n  }\n\n  #updateStyleStates() {\n    if (this.input) {\n      this.toggleAttribute('multiple', this.input?.multiple);\n      this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n    }\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateLabel(this.#label, this.input);\n    associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n    if (this._associateDatalist) {\n      associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n    }\n  }\n\n  #assignLabel() {\n    const label =\n      this.querySelector('label') ||\n      (this.shadowRoot!.querySelector('slot')!\n        .assignedNodes({ flatten: true })\n        .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n    if (label) {\n      label.slot = 'label';\n    }\n  }\n\n  protected showPicker() {\n    try {\n      this.input.showPicker();\n    } catch {\n      //\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAsB,EAAW;;8BAYuC,sBAGM,gBAKhD,MAAA,EAAqB,wBA6CO,8BAOhC;;CAvD/B,KAAwC,IAAI,EAAqB,KAAK;CAQtE,KAAA,IAAa;AACX,SAAO,KAAK,YACR,cAA+B,uBAAqB,EACpD,iBAAiB,EAAE,SAAS,IAAM,CAAC,GAAG;;CAG5C,KAAA,IAAgB;AACd,SAAQ,KAAK,YACT,cAA+B,0BAAwB,EACvD,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE;;CAG/C;CAGA,IAAI,QAA0B;AAY5B,SAXI,CAAC,KAAY,CAAC,MAAA,MAQhB,MAAA,KANE,KAAK,cAAc,OAAO,EACtB,kBAAkB,EAClB,MAAK,MAAK,EAAE,QAAA,oEAAmB,CAAC,IACpC,MAAM,KAAK,KAAK,WAAY,cAAc,OAAO,EAAE,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE,CAAC,CAAC,MAAK,MACjG,EAAE,QAAA,oEAAmB,CACtB,KACgC,KAAK,cAAc,EAAW,GAG5D,MAAA;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAQT,KAAoD,EAAE;;gBAItC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,KAAK,eAAe,WAYvB,CAAI,wMAXJ,CAAI,6GAIA,KAAK,cAAc,eAEnB,KAAK,cAAc;;CAc7B,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAY,iBAAiB,cAAc,MAAA,EAAuB;;CAGzE,uBAAuB;AASrB,EARA,MAAM,sBAAsB,EAC5B,KAAK,WAAY,oBAAoB,cAAc,MAAA,EAAuB,EAC1E,KAAK,WAAY,oBAAoB,cAAc,MAAA,EAAwB,EACvE,KAAK,WAAW,KAAK,UACvB,KAAK,MAAM,oBAAoB,SAAS,MAAA,EAAsB,EAC9D,KAAK,MAAM,oBAAoB,UAAU,MAAA,EAAsB,GAEjE,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC,EAC1D,MAAA,EAAgB,SAAS;;CAG3B,WAA0B;AAGxB,EAFA,MAAA,GAAyB,EAErB,KAAK,SAAS,MAAA,EAAgB,WAAW,MAC3C,MAAA,GAAkB,EAClB,MAAA,GAAoB;;CAKxB,QAAQ;AAGN,EAFA,KAAK,MAAM,QAAQ,KAAK,MAAM,aAAa,QAAQ,IAAI,IACvD,KAAK,eAAe,EACpB,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGjF,KAAc;AAYZ,EAXA,EAA6B,MAAM,MAAA,EAAe,EAElD,MAAA,EAAgB,KACd,GAAG,EAAmB,KAAK,EAC3B,GAAG,EAAyB,MAAM,MAAA,EAAe,EACjD,EAAyB,KAAK,EAC9B,EAAwB,MAAM,CAAC,UAAU,SAAS,QAAQ,MAAA,GAAyB,CAAC,CACrF,EAED,MAAA,GAA0B,EAC1B,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,cAAc,MAAA,EAAwB;;CAG1E,WAA2B;AAEzB,EADA,MAAA,GAAyB,EACzB,MAAA,GAA0B;;CAG5B,KAAgB;AACd,EAAI,KAAK,YACP,MAAA,GAAyB,EACzB,KAAK,MAAM,iBAAiB,SAAS,MAAA,EAAsB,EAC3D,KAAK,MAAM,iBAAiB,UAAU,MAAA,EAAsB;;CAIhE,WAAyB;AACvB,QAAA,GAAyB;;CAG3B,KAAqB;AACnB,MAAI,KAAK,MAAM,YAAY,SAAS;GAClC,IAAM,IAAS,KAAK,MAAM,SAAS,SAAa,IAAJ;AAE5C,GADA,KAAK,MAAM,YAAY,mBAAmB,GAAG,KAAK,MAAM,MAAM,SAAS,EAAO,IAAI,EAClF,KAAK,MAAM,MAAM,YAAY,aAAa,GAAG,KAAK,MAAM,MAAM,SAAS,EAAE,KAAK,YAAY;SACjF,KAAK,MAAM,YAAY,YAChC,KAAK,MAAM,YACT,mBACA,GAAI,KAAK,MAAuC,QAAS,KAAK,MAAuC,eAAgB,YAAa,SAAS,EAAE,IAC9I;;CAIL,KAAsB;AACpB,EAAK,KAAK,MAAM,eACd,KAAK,MAAM,mBAAmB,KAAK,MAAM,OAAO;;CAIpD,KAAqB;AACnB,EAAI,KAAK,UACP,KAAK,gBAAgB,YAAY,KAAK,OAAO,SAAS,EACtD,KAAK,OAAO,aAAa,OAAO,GAAG,KAAK,aAAa,QAAQ,GAAG,GAAG,KAAK,gBAAgB,OAAO;;CAInG,KAAsB;AAKpB,EAJA,MAAA,GAAmB,EACnB,EAAe,MAAA,GAAa,KAAK,MAAM,EACvC,EAAyB,MAAM,KAAK,MAAA,EAAe,EAAE,KAAK,MAAM,EAE5D,KAAK,sBACP,EAAkB,KAAK,cAAmC,WAAW,EAAG,KAAK,MAAM;;CAIvF,KAAe;EACb,IAAM,IACJ,KAAK,cAAc,QAAQ,IAC1B,KAAK,WAAY,cAAc,OAAO,CACpC,cAAc,EAAE,SAAS,IAAM,CAAC,CAChC,MAAM,MAAa,EAAkB,YAAY,QAAQ;AAC9D,EAAI,MACF,EAAM,OAAO;;CAIjB,aAAuB;AACrB,MAAI;AACF,QAAK,MAAM,YAAY;UACjB;;;GA1NT,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAGjE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAKpE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KA0CzC,EAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,SAlExC,GAAS,CAAA,EAAA,EAAA"}

package/dist/forms/control-group/control-group2.js

@@ -25,7 +25,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {