@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/icon-button/define.js

@@ -1,7 +1,6 @@
 import { IconButton as e } from "./icon-button2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/icon-button/define.ts
+// src/icon-button/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/icon-button/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/icon-button/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/foundations/internal/define';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\n\ndefine(IconButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-icon-button': IconButton;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAU"}
+{"version":3,"file":"define.js","names":["define","IconButton"],"sources":["../../src/icon-button/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/foundations/internal/define';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\n\ndefine(IconButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-icon-button': IconButton;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAU"}

package/dist/icon-button/icon-button.examples.js

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

package/dist/icon-button/icon-button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.examples.js","names":[],"sources":["../../src/icon-button/icon-button.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/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Icon Button',\n  component: 'nve-icon-button'\n};\n\n/**\n * @summary Basic icon button for compact actions and toolbar controls with minimal visual footprint.\n */\nexport const Default = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.\n */\nexport const Interactions = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.\n * @tags test-case\n */\nexport const FlatInteractions = {\n  render: () => html`\n    <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with pressed state for toggle functionality like filters or visibility controls.\n */\nexport const Pressed = {\n  render: () => html`\n    <nve-icon-button pressed icon-name=\"filter\"></nve-icon-button>\n    <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.\n * @tags test-case\n */\nexport const PressedFlat = {\n  render: () => html`\n    <nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"eye\"  aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with pressed state for minimal toggle controls within text or content flows.\n * @tags test-case\n */\nexport const PressedInline = {\n  render: () => html`\n    <nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with selected state for mutually exclusive options like view modes or layout choices.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.\n * @tags test-case\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with selected state for minimal mode selection within content flows.\n * @tags test-case\n */\nexport const SelectedInline = {\n  render: () => html`\n    <nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.\n * @tags test-case\n */\nexport const CustomIcon = {\n  render: () => html`\n    <nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n    <nve-icon-button>🎉</nve-icon-button>\n    <nve-icon-button>\n      🔗 <a href=\"#\" aria-label=\"custom icon button\"></a>\n    </nve-icon-button>\n  `\n}\n\n/**\n * @summary Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.\n */\nexport const Link = {\n  render: () => html`\n<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>`\n}\n\n/**\n * @summary Icon buttons styled for light and dark themes with all interaction states for theme consistency.\n * @tags test-case\n */\nexport const Themes = {\n  render: () => html`\n    <div nve-theme=\"root light\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n    <div nve-theme=\"root dark\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"icon-button.examples.js","names":["icon_button_examples_default"],"sources":["../../src/icon-button/icon-button.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/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Icon Button',\n  component: 'nve-icon-button'\n};\n\n/**\n * @summary Basic icon button for compact actions and toolbar controls with minimal visual footprint.\n */\nexport const Default = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.\n */\nexport const Interactions = {\n  render: () => html`\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.\n * @tags test-case\n */\nexport const FlatInteractions = {\n  render: () => html`\n    <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with pressed state for toggle functionality like filters or visibility controls.\n */\nexport const Pressed = {\n  render: () => html`\n    <nve-icon-button pressed icon-name=\"filter\"></nve-icon-button>\n    <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.\n * @tags test-case\n */\nexport const PressedFlat = {\n  render: () => html`\n    <nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"eye\"  aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with pressed state for minimal toggle controls within text or content flows.\n * @tags test-case\n */\nexport const PressedInline = {\n  render: () => html`\n    <nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with selected state for mutually exclusive options like view modes or layout choices.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.\n * @tags test-case\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Inline icon buttons with selected state for minimal mode selection within content flows.\n * @tags test-case\n */\nexport const SelectedInline = {\n  render: () => html`\n    <nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n    <nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n  `\n}\n\n/**\n * @summary Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.\n * @tags test-case\n */\nexport const CustomIcon = {\n  render: () => html`\n    <nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n    <nve-icon-button>🎉</nve-icon-button>\n    <nve-icon-button>\n      🔗 <a href=\"#\" aria-label=\"custom icon button\"></a>\n    </nve-icon-button>\n  `\n}\n\n/**\n * @summary Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.\n */\nexport const Link = {\n  render: () => html`\n<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>`\n}\n\n/**\n * @summary Icon buttons styled for light and dark themes with all interaction states for theme consistency.\n * @tags test-case\n */\nexport const Themes = {\n  render: () => html`\n    <div nve-theme=\"root light\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n    <div nve-theme=\"root dark\">\n      <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n      <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n    </div>\n  `\n}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/icon-button/icon-button.js

@@ -1,6 +1,5 @@
-//#region src/icon-button/icon-button.css?inline
+// src/icon-button/icon-button.css?inline
 var e = ":host{--color: var(--nve-sys-text-muted-color);--border-radius: var(--nve-ref-border-radius-full);--padding: 0;--line-height: 0;--gap: 0;--height: var(--nve-ref-size-800);--width: var(--nve-ref-size-800);--font-size: calc(var(--width) / 2.3)}:host([container*=\"inline\"]){--height: var(--nve-ref-size-800);--line-height: 0}:host([size=\"sm\"]){--padding: 0;--height: var(--nve-ref-size-700);--width: var(--nve-ref-size-700)}:host([size=\"lg\"]){--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000);--padding: 0}[internal-host]{font-size:var(--font-size)}[internal-host]:after{display:none!important}nve-icon{--color: var(--_icon-color);pointer-events:none}::slotted(a){text-decoration:none!important;color:var(--color)!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=icon-button.js.map

package/dist/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/icon-button/icon-button.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  --color: var(--nve-sys-text-muted-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --padding: 0;\n  --line-height: 0;\n  --gap: 0;\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2.3);\n}\n\n/* override base button inline style */\n:host([container*='inline']) {\n  --height: var(--nve-ref-size-800);\n  --line-height: 0;\n}\n\n:host([size='sm']) {\n  --padding: 0;\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --padding: 0;\n}\n\n[internal-host] {\n  font-size: var(--font-size);\n}\n\n/* disable pseudo element on base button */\n[internal-host]::after {\n  display: none !important;\n}\n\nnve-icon {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n"],"mappings":""}
+{"version":3,"file":"icon-button.js","names":["icon_button_default"],"sources":["../../src/icon-button/icon-button.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  --color: var(--nve-sys-text-muted-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --padding: 0;\n  --line-height: 0;\n  --gap: 0;\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2.3);\n}\n\n/* override base button inline style */\n:host([container*='inline']) {\n  --height: var(--nve-ref-size-800);\n  --line-height: 0;\n}\n\n:host([size='sm']) {\n  --padding: 0;\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --padding: 0;\n}\n\n[internal-host] {\n  font-size: var(--font-size);\n}\n\n/* disable pseudo element on base button */\n[internal-host]::after {\n  display: none !important;\n}\n\nnve-icon {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n"],"mappings":""}

package/dist/icon-button/icon-button2.js

@@ -1,13 +1,13 @@
 import { removeEmptySlotWhitespace as e } from "../internal/utils/dom.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import { Button as a } from "../button/button2.js";
 import o from "./icon-button.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/icon-button/icon-button.ts
+// src/icon-button/icon-button.ts
 var l = class extends a {
 	static {
 		this.styles = n([...a.styles, o]);
@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -35,7 +35,6 @@ r([c({
 	type: String,
 	reflect: !0
 })], l.prototype, "size", void 0), r([c({ type: String })], l.prototype, "appearance", void 0), l = r([t()], l);
-//#endregion
 export { l as IconButton };
 
 //# sourceMappingURL=icon-button2.js.map

package/dist/icon-button/icon-button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button2.js","names":[],"sources":["../../src/icon-button/icon-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { removeEmptySlotWhitespace, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Button } from '@nvidia-elements/core/button';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './icon-button.css?inline';\n\n/**\n * @element nve-icon-button\n * @description An icon button is a button that displays only an icon without a visual label.\n * @documentation https://nvidia.github.io/elements/docs/elements/icon-button/\n * @since 0.2.1\n * @entrypoint \\@nvidia-elements/core/icon-button\n * @slot - default slot for custom icons\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --line-height\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --background\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class IconButton extends Button {\n  /**\n   * Sets the icon name, which determines which icon to display.\n   */\n  @property({ type: String, attribute: 'icon-name' }) iconName: IconName;\n\n  /**\n   * Sets the direction of the icon.\n   * Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)\n   */\n  @property({ type: String, reflect: true }) direction: 'up' | 'down' | 'left' | 'right';\n\n  /**\n   * Sets size of the icon button.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to\n   * the outline form when that asset is unavailable.\n   */\n  @property({ type: String }) appearance?: 'outline' | 'solid';\n\n  static styles = useStyles([...Button.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-icon-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within aria-hidden=\"true\">\n        <slot @slotchange=${(e: Event) => removeEmptySlotWhitespace(e.target as HTMLSlotElement)}>\n          <nve-icon .name=${this.iconName} .appearance=${this.appearance} .direction=${this.direction} .size=${this.size} aria-hidden=\"true\" part=\"icon\"></nve-icon>\n        </slot>\n      </div>\n      <slot name=\"anchor\"></slot>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;AAgCO,IAAM,IAAN,cAAyB,EAAO;;EAuBrB,KAAA,SAAA,EAAU,CAAC,GAAG,EAAO,QAAQ,CAAM,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAEA,SAAS;EACP,OAAO,CAAI,4FAEc,MAAa,EAA0B,EAAE,MAAyB,EAAE,qBACrE,KAAK,SAAS,iBAAe,KAAK,WAAW,gBAAc,KAAK,UAAU,WAAS,KAAK,KAAK;CAKvH;AACF;AAxCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAMjD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAtB3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"icon-button2.js","names":["styles","_decorate","__decorate","icon_button_default","IconButton","Button","useStyles","Icon","removeEmptySlotWhitespace","e","property","scopedRegistry"],"sources":["../../src/icon-button/icon-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { removeEmptySlotWhitespace, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Button } from '@nvidia-elements/core/button';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './icon-button.css?inline';\n\n/**\n * @element nve-icon-button\n * @description An icon button is a button that displays only an icon without a visual label.\n * @documentation https://nvidia.github.io/elements/docs/elements/icon-button/\n * @since 0.2.1\n * @entrypoint \\@nvidia-elements/core/icon-button\n * @slot - default slot for custom icons\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --line-height\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --background\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class IconButton extends Button {\n  /**\n   * Sets the icon name, which determines which icon to display.\n   */\n  @property({ type: String, attribute: 'icon-name' }) iconName: IconName;\n\n  /**\n   * Sets the direction of the icon.\n   * Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)\n   */\n  @property({ type: String, reflect: true }) direction: 'up' | 'down' | 'left' | 'right';\n\n  /**\n   * Sets size of the icon button.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to\n   * the outline form when that asset is unavailable.\n   */\n  @property({ type: String }) appearance?: 'outline' | 'solid';\n\n  static styles = useStyles([...Button.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-icon-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within aria-hidden=\"true\">\n        <slot @slotchange=${(e: Event) => removeEmptySlotWhitespace(e.target as HTMLSlotElement)}>\n          <nve-icon .name=${this.iconName} .appearance=${this.appearance} .direction=${this.direction} .size=${this.size} aria-hidden=\"true\" part=\"icon\"></nve-icon>\n        </slot>\n      </div>\n      <slot name=\"anchor\"></slot>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;AAgCO,IAAMI,IAAN,cAAyBC,EAAO;;EAuBrB,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAO,QAAQL,CAAM,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBO,EAAK,SAAS,MAAMA,EACvB;;CAEA,SAAS;EACP,OAAO,CAAI,4FAEc,MAAaC,EAA0BC,EAAE,MAAyB,EAAE,qBACrE,KAAK,SAAS,iBAAe,KAAK,WAAW,gBAAc,KAAK,UAAU,WAAS,KAAK,KAAK;CAKvH;AACF;AAxCGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAAN,EAAA,WAAA,YAAA,KAAA,CAAA,GAMjDH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxCH,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAN,EAAA,WAAA,cAAA,KAAA,CAAA,GAtB3B,IAAAH,EAAA,CAAAU,EAAe,CAAA,GAAAP,CAAA"}

package/dist/icon-button/index.js

@@ -1,2 +1 @@
-import { IconButton as e } from "./icon-button2.js";
-export { e as IconButton };
+export { IconButton } from "./icon-button2.js";

package/dist/iframe/define.js

@@ -1,7 +1,6 @@
 import { Iframe as e } from "./iframe2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/iframe/define.ts
+// src/iframe/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/iframe/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/iframe/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/foundations/internal/define';\nimport { Iframe } from './iframe.js';\n\ndefine(Iframe);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-iframe': Iframe;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAM"}
+{"version":3,"file":"define.js","names":["define","Iframe"],"sources":["../../src/iframe/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/foundations/internal/define';\nimport { Iframe } from './iframe.js';\n\ndefine(Iframe);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-iframe': Iframe;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAM"}

package/dist/iframe/iframe.examples.js

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

package/dist/iframe/iframe.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"iframe.examples.js","names":[],"sources":["../../src/iframe/iframe.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/iframe/define.js';\n\nexport default {\n  title: 'Elements/Iframe',\n  component: 'nve-iframe'\n};\n\n/**\n * @summary Supplies the iframe with Elements themes, utilities, fonts, and component registrations through its head template. Use this structure because iframe documents do not inherit resources from the parent document.\n */\nexport const Default = {\n  render: () => html`\n<nve-iframe aria-label=\"Elements iframe example\">\n  <template slot=\"head\">\n    <title>Elements iframe example</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <nve-alert status=\"success\">isolated iframe content</nve-alert>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Synchronizes the iframe height with expandable content so the host layout avoids empty space or internal scrollbars. Use for previews whose intrinsic height changes after interaction.\n * @tags test-case\n */\nexport const DynamicHeight = {\n  render: () => html`\n<nve-iframe aria-label=\"Dynamic height iframe example\" style=\"--border: 1px solid red\">\n  <template slot=\"head\">\n    <title>Dynamic iframe height</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <nve-accordion behavior-expand>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Dynamic height in iframe</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>\n        The iframe expands when this content opens and contracts when it closes.\n      </nve-accordion-content>\n    </nve-accordion>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Overrides intrinsic iframe dimensions with `--width` and `--height` to create a stable preview viewport. Use when you need to inspect embedded content at a fixed size regardless of its rendered bounds.\n * @tags test-case\n */\nexport const FixedSize = {\n  render: () => html`\n<nve-iframe aria-label=\"Fixed-size iframe example\" style=\"--height: 256px; --width: 256px; --border: 1px solid red\">\n  <template><p style=\"height: 128px; width: 128px; margin: 1px; outline: 1px solid yellow;\">override iframe size</p></template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary The iframe browsing-context boundary clips popovers at its viewport and prevents them from escaping. Keep overlays inside the frame, or render them outside the iframe when they must overlap surrounding content.\n * @tags test-case\n */\nexport const OverflowClip = {\n  render: () => html`\n<nve-iframe aria-label=\"Overflow clipping iframe example\" style=\"--height: 150px; --border: 1px solid red\">\n  <template slot=\"head\">\n    <title>Clipped iframe popover</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <div nve-layout=\"pad:md\">\n      <nve-dropdown id=\"dropdown\">Popovers <strong>are clipped</strong> by the iframe.</nve-dropdown>\n      <nve-button popovertarget=\"dropdown\">Open popover</nve-button>\n    </div>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Regenerates the iframe document when its source template changes. Use for live previews or generated output that must stay synchronized with edits made in the parent document.\n * @tags test-case\n */\nexport const DynamicallyUpdatedContent = {\n  render: () => html`\n<nve-iframe id=\"property-example\" aria-label=\"Dynamically updated iframe example\">\n  <template>\n    <p nve-text=\"body\">Initial iframe content.</p>\n  </template>\n</nve-iframe>\n<script type=\"module\">\n  document.querySelector('#property-example template').innerHTML =\n    '<p nve-text=\"body\">This template was dynamically updated.</p>';\n</script>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"iframe.examples.js","names":["iframe_examples_default"],"sources":["../../src/iframe/iframe.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/iframe/define.js';\n\nexport default {\n  title: 'Elements/Iframe',\n  component: 'nve-iframe'\n};\n\n/**\n * @summary Supplies the iframe with Elements themes, utilities, fonts, and component registrations through its head template. Use this structure because iframe documents do not inherit resources from the parent document.\n */\nexport const Default = {\n  render: () => html`\n<nve-iframe aria-label=\"Elements iframe example\">\n  <template slot=\"head\">\n    <title>Elements iframe example</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <nve-alert status=\"success\">isolated iframe content</nve-alert>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Synchronizes the iframe height with expandable content so the host layout avoids empty space or internal scrollbars. Use for previews whose intrinsic height changes after interaction.\n * @tags test-case\n */\nexport const DynamicHeight = {\n  render: () => html`\n<nve-iframe aria-label=\"Dynamic height iframe example\" style=\"--border: 1px solid red\">\n  <template slot=\"head\">\n    <title>Dynamic iframe height</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <nve-accordion behavior-expand>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Dynamic height in iframe</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>\n        The iframe expands when this content opens and contracts when it closes.\n      </nve-accordion-content>\n    </nve-accordion>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Overrides intrinsic iframe dimensions with `--width` and `--height` to create a stable preview viewport. Use when you need to inspect embedded content at a fixed size regardless of its rendered bounds.\n * @tags test-case\n */\nexport const FixedSize = {\n  render: () => html`\n<nve-iframe aria-label=\"Fixed-size iframe example\" style=\"--height: 256px; --width: 256px; --border: 1px solid red\">\n  <template><p style=\"height: 128px; width: 128px; margin: 1px; outline: 1px solid yellow;\">override iframe size</p></template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary The iframe browsing-context boundary clips popovers at its viewport and prevents them from escaping. Keep overlays inside the frame, or render them outside the iframe when they must overlap surrounding content.\n * @tags test-case\n */\nexport const OverflowClip = {\n  render: () => html`\n<nve-iframe aria-label=\"Overflow clipping iframe example\" style=\"--height: 150px; --border: 1px solid red\">\n  <template slot=\"head\">\n    <title>Clipped iframe popover</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/bundles/index.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/themes/dist/fonts/inter.css\" />\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/styles/dist/bundles/index.css\" />\n    <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@nvidia-elements/core/dist/bundles/index.min.js\"></script>\n  </template>\n  <template>\n    <div nve-layout=\"pad:md\">\n      <nve-dropdown id=\"dropdown\">Popovers <strong>are clipped</strong> by the iframe.</nve-dropdown>\n      <nve-button popovertarget=\"dropdown\">Open popover</nve-button>\n    </div>\n  </template>\n</nve-iframe>\n  `\n};\n\n/**\n * @summary Regenerates the iframe document when its source template changes. Use for live previews or generated output that must stay synchronized with edits made in the parent document.\n * @tags test-case\n */\nexport const DynamicallyUpdatedContent = {\n  render: () => html`\n<nve-iframe id=\"property-example\" aria-label=\"Dynamically updated iframe example\">\n  <template>\n    <p nve-text=\"body\">Initial iframe content.</p>\n  </template>\n</nve-iframe>\n<script type=\"module\">\n  document.querySelector('#property-example template').innerHTML =\n    '<p nve-text=\"body\">This template was dynamically updated.</p>';\n</script>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/iframe/iframe.js

@@ -1,6 +1,5 @@
-//#region src/iframe/iframe.css?inline
+// src/iframe/iframe.css?inline
 var e = ":host{--width: var(--_width, fit-content);--height: var(--_height, fit-content);--border: none;display:block;width:fit-content;height:fit-content;border:var(--border)}iframe{width:var(--width);height:var(--height);border:0}@supports (frame-sizing: content-height){:host{--height: var(--_height, 0px)}iframe{frame-sizing:content-height}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=iframe.js.map

package/dist/iframe/iframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"iframe.js","names":[],"sources":["../../src/iframe/iframe.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: var(--_width, fit-content);\n  --height: var(--_height, fit-content);\n  --border: none;\n  display: block;\n  width: fit-content;\n  height: fit-content;\n  border: var(--border);\n}\n\niframe {\n  width: var(--width);\n  height: var(--height);\n  border: 0;\n}\n\n@supports (frame-sizing: content-height) {\n  :host {\n    /* Native sizing locks the initial viewport height as its minimum. */\n    --height: var(--_height, 0px);\n  }\n\n  iframe {\n    frame-sizing: content-height;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"iframe.js","names":["iframe_default"],"sources":["../../src/iframe/iframe.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: var(--_width, fit-content);\n  --height: var(--_height, fit-content);\n  --border: none;\n  display: block;\n  width: fit-content;\n  height: fit-content;\n  border: var(--border);\n}\n\niframe {\n  width: var(--width);\n  height: var(--height);\n  border: 0;\n}\n\n@supports (frame-sizing: content-height) {\n  :host {\n    /* Native sizing locks the initial viewport height as its minimum. */\n    --height: var(--_height, 0px);\n  }\n\n  iframe {\n    frame-sizing: content-height;\n  }\n}\n"],"mappings":""}

package/dist/iframe/iframe2.js

@@ -1,34 +1,20 @@
 import { useStyles as e } from "../internal/styles/index.js";
 import t from "./iframe.js";
 import { LitElement as n, html as r } from "lit";
-//#region src/iframe/iframe.ts
+// src/iframe/iframe.ts
 function i(e) {
 	return typeof e == "object" && !!e && "resize" in e && e.resize === !0 && "documentId" in e && typeof e.documentId == "number" && "width" in e && typeof e.width == "number" && (!("height" in e) || typeof e.height == "number");
 }
-var a = (e) => `
+var a = "\n    window.addEventListener('message', event => {\n      if (event.source !== window.parent || typeof event.data !== 'string') {\n        return;\n      }\n\n      let message;\n      try {\n        message = JSON.parse(event.data);\n      } catch {\n        return;\n      }\n\n      if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {\n        return;\n      }\n\n      document.documentElement.setAttribute('nve-theme', message.theme);\n      document.documentElement.style.colorScheme = message.theme;\n    });\n", o = (e) => `
   <script type="module">
-    window.addEventListener('message', event => {
-      if (event.source !== window.parent || typeof event.data !== 'string') {
-        return;
-      }
-
-      let message;
-      try {
-        message = JSON.parse(event.data);
-      } catch {
-        return;
-      }
-
-      if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {
-        return;
-      }
-
-      document.documentElement.setAttribute('nve-theme', message.theme);
-      document.documentElement.style.colorScheme = message.theme;
-    });
+    ${a}
 
     let nativeHeight = CSS.supports('frame-sizing', 'content-height') && typeof window.requestResize === 'function';
     let previousWidth;
+    if (nativeHeight) {
+      // Establish the initial viewport before the load handler releases its height.
+      document.documentElement.getBoundingClientRect();
+    }
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (entry.target === document.body) {
@@ -54,14 +40,14 @@ var a = (e) => `
     });
     resizeObserver.observe(document.body);
   <\/script>
-`, o = class extends n {
+`, s = class extends n {
 	static {
 		this.styles = e([t]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-iframe",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static get observedAttributes() {
@@ -119,7 +105,7 @@ var a = (e) => `
       </head>
       <body nve-text="body">
         ${this.#e?.innerHTML ?? ""}
-        ${a(this.#i)}
+        ${o(this.#i)}
       </body>
       </html>
     `;
@@ -174,10 +160,9 @@ var a = (e) => `
 		} catch {
 			return;
 		}
-		!i(n) || n.documentId !== this.#i || (this.style.setProperty("--_width", `${n.width}px`), this.style.setProperty("--_height", n.height === void 0 ? "auto" : `${n.height}px`));
+		i(n) && n.documentId === this.#i && (this.style.setProperty("--_width", `${n.width}px`), this.style.setProperty("--_height", n.height === void 0 ? "auto" : `${n.height}px`));
 	};
 };
-//#endregion
-export { o as Iframe };
+export { s as Iframe };
 
 //# sourceMappingURL=iframe2.js.map

package/dist/iframe/iframe2.js.map

@@ -1 +1 @@
-{"version":3,"file":"iframe2.js","names":[],"sources":["../../src/iframe/iframe.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './iframe.css?inline';\n\ntype ResizeMessage = {\n  resize: true;\n  documentId: number;\n  width: number;\n  height?: number;\n};\n\ntype ThemeMessage = {\n  theme: string;\n};\n\nfunction isResizeMessage(value: unknown): value is ResizeMessage {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'resize' in value &&\n    value.resize === true &&\n    'documentId' in value &&\n    typeof value.documentId === 'number' &&\n    'width' in value &&\n    typeof value.width === 'number' &&\n    (!('height' in value) || typeof value.height === 'number')\n  );\n}\n\nconst iframeScript = (documentId: number) => /* html */ `\n  <script type=\"module\">\n    window.addEventListener('message', event => {\n      if (event.source !== window.parent || typeof event.data !== 'string') {\n        return;\n      }\n\n      let message;\n      try {\n        message = JSON.parse(event.data);\n      } catch {\n        return;\n      }\n\n      if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {\n        return;\n      }\n\n      document.documentElement.setAttribute('nve-theme', message.theme);\n      document.documentElement.style.colorScheme = message.theme;\n    });\n\n    let nativeHeight = CSS.supports('frame-sizing', 'content-height') && typeof window.requestResize === 'function';\n    let previousWidth;\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target === document.body) {\n          const width = entry.borderBoxSize[0].inlineSize;\n          if (nativeHeight) {\n            try {\n              window.requestResize();\n            } catch {\n              // Native sizing can reject the document even when the API exists.\n              nativeHeight = false;\n            }\n            if (nativeHeight && width === previousWidth) {\n              continue;\n            }\n          }\n          previousWidth = width;\n          const size = nativeHeight\n            ? { resize: true, documentId: ${documentId}, width }\n            : { resize: true, documentId: ${documentId}, width, height: entry.borderBoxSize[0].blockSize };\n          window.parent.postMessage(JSON.stringify(size), '*');\n        }\n      }\n    });\n    resizeObserver.observe(document.body);\n  </script>\n`;\n\n/**\n * @element nve-iframe\n * @description An iframe component that syncs with the parent document's theme and template content. Use when needing to render dynamically generated or isolated content.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/iframe\n * @documentation https://nvidia.github.io/elements/docs/elements/iframe/\n * @slot - A template containing the iframe body content.\n * @slot head - A template containing content inserted into the iframe head.\n * @cssprop --border\n * @cssprop --width\n * @cssprop --height\n * @beta\n */\nexport class Iframe extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-iframe',\n    version: '0.0.0'\n  };\n\n  static get observedAttributes() {\n    return [...super.observedAttributes, 'aria-label'];\n  }\n\n  get #template() {\n    return this.querySelector<HTMLTemplateElement>('template:not([slot])');\n  }\n\n  get #headTemplate() {\n    return this.querySelector<HTMLTemplateElement>('template[slot=\"head\"]');\n  }\n\n  get #iframe() {\n    return this.shadowRoot?.querySelector<HTMLIFrameElement>('iframe') ?? null;\n  }\n\n  get #themeHost() {\n    return this.closest<HTMLElement>('[nve-theme]');\n  }\n\n  #documentId = 0;\n  #templateObserver?: MutationObserver;\n  #headTemplateObserver?: MutationObserver;\n  #lightDomObserver?: MutationObserver;\n  #themeObserver?: MutationObserver;\n\n  render() {\n    return html`<iframe\n      internal-host\n      title=${this.ariaLabel ?? ''}\n      sandbox=\"allow-scripts\"\n      @load=${this.#handleLoad}\n    ></iframe>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    globalThis.window.addEventListener('message', this.#handleResizeMessage);\n    if (this.hasUpdated) {\n      this.#setupTemplateUpdates();\n      this.#setupTemplateHeadUpdates();\n      this.#setupLightDomUpdates();\n      this.#setupThemeUpdates();\n      this.#updateSource();\n    }\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    super.attributeChangedCallback(name, oldValue, newValue);\n    if (name === 'aria-label' && oldValue !== newValue) {\n      this.requestUpdate();\n    }\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setupTemplateUpdates();\n    this.#setupTemplateHeadUpdates();\n    this.#setupLightDomUpdates();\n    this.#setupThemeUpdates();\n    this.#updateSource();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#templateObserver?.disconnect();\n    this.#headTemplateObserver?.disconnect();\n    this.#lightDomObserver?.disconnect();\n    this.#themeObserver?.disconnect();\n    this.#templateObserver = undefined;\n    this.#headTemplateObserver = undefined;\n    this.#lightDomObserver = undefined;\n    this.#themeObserver = undefined;\n    globalThis.window.removeEventListener('message', this.#handleResizeMessage);\n  }\n\n  // <head> and <body> can't be slotted https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#usage_notes\n  #updateSource() {\n    const iframe = this.#iframe;\n    if (iframe === null) {\n      return;\n    }\n\n    // Start each document with the initial height rather than the previous resize result.\n    this.#documentId++;\n    this.style.setProperty('--_height', '0px');\n    if (CSS.supports('frame-sizing', 'content-height')) {\n      // Keep the initial viewport until the new document finishes loading.\n      iframe.style.height = getComputedStyle(iframe).height;\n    }\n    const theme = this.#themeHost?.getAttribute('nve-theme') ?? '';\n    iframe.srcdoc = `\n      <!DOCTYPE html>\n      <html nve-theme=\"${theme}\" style=\"color-scheme: ${theme}\">\n      <head>\n        <meta name=\"responsive-embedded-sizing\" content=\"allow-origins=*\">\n        <style>\n          html { box-sizing: border-box; }\n          *, *:before, *:after { box-sizing: inherit; }\n          html, body { margin: 0; overflow: hidden; }\n          html { width: 100vw; }\n        </style>\n        ${this.#headTemplate?.innerHTML ?? ''}\n      </head>\n      <body nve-text=\"body\">\n        ${this.#template?.innerHTML ?? ''}\n        ${iframeScript(this.#documentId)}\n      </body>\n      </html>\n    `;\n  }\n\n  #setupTemplateUpdates() {\n    this.#templateObserver?.disconnect();\n    const template = this.#template;\n    if (template) {\n      this.#templateObserver = new MutationObserver(() => this.#updateSource());\n      this.#templateObserver.observe(template.content, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributes: true\n      });\n    } else {\n      this.#templateObserver = undefined;\n    }\n  }\n\n  #setupTemplateHeadUpdates() {\n    this.#headTemplateObserver?.disconnect();\n    const headTemplate = this.#headTemplate;\n    if (headTemplate) {\n      this.#headTemplateObserver = new MutationObserver(() => this.#updateSource());\n      this.#headTemplateObserver.observe(headTemplate.content, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributes: true\n      });\n    } else {\n      this.#headTemplateObserver = undefined;\n    }\n  }\n\n  #setupLightDomUpdates() {\n    if (!this.#lightDomObserver) {\n      this.#lightDomObserver = new MutationObserver(() => {\n        this.#setupTemplateUpdates();\n        this.#setupTemplateHeadUpdates();\n        this.#updateSource();\n      });\n      this.#lightDomObserver.observe(this, { childList: true });\n    }\n  }\n\n  #setupThemeUpdates() {\n    const themeHost = this.#themeHost;\n    if (themeHost && !this.#themeObserver) {\n      this.#themeObserver = new MutationObserver(() => this.#syncTheme());\n      this.#themeObserver.observe(themeHost, { attributeFilter: ['nve-theme'] });\n    }\n  }\n\n  #handleLoad = () => {\n    const iframe = this.#iframe;\n    const documentId = this.#documentId;\n    requestAnimationFrame(() => {\n      if (this.isConnected && documentId === this.#documentId) {\n        iframe?.style.removeProperty('height');\n      }\n    });\n    this.#syncTheme();\n  };\n\n  #syncTheme = () => {\n    const theme = this.#themeHost?.getAttribute('nve-theme');\n    const contentWindow = this.#iframe?.contentWindow;\n    if (theme === null || theme === undefined || contentWindow === null || contentWindow === undefined) {\n      return;\n    }\n\n    const message: ThemeMessage = { theme };\n    // Sandboxed srcdoc documents have opaque origins, so authenticate messages by their window reference.\n    contentWindow.postMessage(JSON.stringify(message), '*');\n  };\n\n  #handleResizeMessage = (event: MessageEvent<unknown>) => {\n    const iframe = this.#iframe;\n    if (iframe === null || event.source !== iframe.contentWindow || typeof event.data !== 'string') {\n      return;\n    }\n\n    let message: unknown;\n    try {\n      message = JSON.parse(event.data);\n    } catch {\n      return;\n    }\n\n    if (!isResizeMessage(message) || message.documentId !== this.#documentId) {\n      return;\n    }\n\n    this.style.setProperty('--_width', `${message.width}px`);\n    this.style.setProperty('--_height', message.height === undefined ? 'auto' : `${message.height}px`);\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"iframe2.js","names":["styles","iframe_default","isResizeMessage","value","iframeThemeScript","iframeScript","documentId","Iframe","LitElement","useStyles","#template","#headTemplate","#iframe","#themeHost","#handleLoad","#handleResizeMessage","#setupTemplateUpdates","#setupTemplateHeadUpdates","#setupLightDomUpdates","#setupThemeUpdates","#updateSource","name","oldValue","newValue","props","#templateObserver","#headTemplateObserver","#lightDomObserver","#themeObserver","iframe","#documentId","theme","template","headTemplate","themeHost","#syncTheme","contentWindow","message","event"],"sources":["../../src/iframe/iframe.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './iframe.css?inline';\n\ntype ResizeMessage = {\n  resize: true;\n  documentId: number;\n  width: number;\n  height?: number;\n};\n\ntype ThemeMessage = {\n  theme: string;\n};\n\nfunction isResizeMessage(value: unknown): value is ResizeMessage {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'resize' in value &&\n    value.resize === true &&\n    'documentId' in value &&\n    typeof value.documentId === 'number' &&\n    'width' in value &&\n    typeof value.width === 'number' &&\n    (!('height' in value) || typeof value.height === 'number')\n  );\n}\n\nconst iframeThemeScript = `\n    window.addEventListener('message', event => {\n      if (event.source !== window.parent || typeof event.data !== 'string') {\n        return;\n      }\n\n      let message;\n      try {\n        message = JSON.parse(event.data);\n      } catch {\n        return;\n      }\n\n      if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {\n        return;\n      }\n\n      document.documentElement.setAttribute('nve-theme', message.theme);\n      document.documentElement.style.colorScheme = message.theme;\n    });\n`;\n\nconst iframeScript = (documentId: number) => /* html */ `\n  <script type=\"module\">\n    ${iframeThemeScript}\n\n    let nativeHeight = CSS.supports('frame-sizing', 'content-height') && typeof window.requestResize === 'function';\n    let previousWidth;\n    if (nativeHeight) {\n      // Establish the initial viewport before the load handler releases its height.\n      document.documentElement.getBoundingClientRect();\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target === document.body) {\n          const width = entry.borderBoxSize[0].inlineSize;\n          if (nativeHeight) {\n            try {\n              window.requestResize();\n            } catch {\n              // Native sizing can reject the document even when the API exists.\n              nativeHeight = false;\n            }\n            if (nativeHeight && width === previousWidth) {\n              continue;\n            }\n          }\n          previousWidth = width;\n          const size = nativeHeight\n            ? { resize: true, documentId: ${documentId}, width }\n            : { resize: true, documentId: ${documentId}, width, height: entry.borderBoxSize[0].blockSize };\n          window.parent.postMessage(JSON.stringify(size), '*');\n        }\n      }\n    });\n    resizeObserver.observe(document.body);\n  </script>\n`;\n\n/**\n * @element nve-iframe\n * @description An iframe component that syncs with the parent document's theme and template content. Use when needing to render dynamically generated or isolated content.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/iframe\n * @documentation https://nvidia.github.io/elements/docs/elements/iframe/\n * @slot - A template containing the iframe body content.\n * @slot head - A template containing content inserted into the iframe head.\n * @cssprop --border\n * @cssprop --width\n * @cssprop --height\n * @beta\n */\nexport class Iframe extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-iframe',\n    version: '0.0.0'\n  };\n\n  static get observedAttributes() {\n    return [...super.observedAttributes, 'aria-label'];\n  }\n\n  get #template() {\n    return this.querySelector<HTMLTemplateElement>('template:not([slot])');\n  }\n\n  get #headTemplate() {\n    return this.querySelector<HTMLTemplateElement>('template[slot=\"head\"]');\n  }\n\n  get #iframe() {\n    return this.shadowRoot?.querySelector<HTMLIFrameElement>('iframe') ?? null;\n  }\n\n  get #themeHost() {\n    return this.closest<HTMLElement>('[nve-theme]');\n  }\n\n  #documentId = 0;\n  #templateObserver?: MutationObserver;\n  #headTemplateObserver?: MutationObserver;\n  #lightDomObserver?: MutationObserver;\n  #themeObserver?: MutationObserver;\n\n  render() {\n    return html`<iframe\n      internal-host\n      title=${this.ariaLabel ?? ''}\n      sandbox=\"allow-scripts\"\n      @load=${this.#handleLoad}\n    ></iframe>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    globalThis.window.addEventListener('message', this.#handleResizeMessage);\n    if (this.hasUpdated) {\n      this.#setupTemplateUpdates();\n      this.#setupTemplateHeadUpdates();\n      this.#setupLightDomUpdates();\n      this.#setupThemeUpdates();\n      this.#updateSource();\n    }\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    super.attributeChangedCallback(name, oldValue, newValue);\n    if (name === 'aria-label' && oldValue !== newValue) {\n      this.requestUpdate();\n    }\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setupTemplateUpdates();\n    this.#setupTemplateHeadUpdates();\n    this.#setupLightDomUpdates();\n    this.#setupThemeUpdates();\n    this.#updateSource();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#templateObserver?.disconnect();\n    this.#headTemplateObserver?.disconnect();\n    this.#lightDomObserver?.disconnect();\n    this.#themeObserver?.disconnect();\n    this.#templateObserver = undefined;\n    this.#headTemplateObserver = undefined;\n    this.#lightDomObserver = undefined;\n    this.#themeObserver = undefined;\n    globalThis.window.removeEventListener('message', this.#handleResizeMessage);\n  }\n\n  // <head> and <body> can't be slotted https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#usage_notes\n  #updateSource() {\n    const iframe = this.#iframe;\n    if (iframe === null) {\n      return;\n    }\n\n    // Start each document with the initial height rather than the previous resize result.\n    this.#documentId++;\n    this.style.setProperty('--_height', '0px');\n    if (CSS.supports('frame-sizing', 'content-height')) {\n      // Keep the initial viewport until the new document finishes loading.\n      iframe.style.height = getComputedStyle(iframe).height;\n    }\n    const theme = this.#themeHost?.getAttribute('nve-theme') ?? '';\n    iframe.srcdoc = `\n      <!DOCTYPE html>\n      <html nve-theme=\"${theme}\" style=\"color-scheme: ${theme}\">\n      <head>\n        <meta name=\"responsive-embedded-sizing\" content=\"allow-origins=*\">\n        <style>\n          html { box-sizing: border-box; }\n          *, *:before, *:after { box-sizing: inherit; }\n          html, body { margin: 0; overflow: hidden; }\n          html { width: 100vw; }\n        </style>\n        ${this.#headTemplate?.innerHTML ?? ''}\n      </head>\n      <body nve-text=\"body\">\n        ${this.#template?.innerHTML ?? ''}\n        ${iframeScript(this.#documentId)}\n      </body>\n      </html>\n    `;\n  }\n\n  #setupTemplateUpdates() {\n    this.#templateObserver?.disconnect();\n    const template = this.#template;\n    if (template) {\n      this.#templateObserver = new MutationObserver(() => this.#updateSource());\n      this.#templateObserver.observe(template.content, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributes: true\n      });\n    } else {\n      this.#templateObserver = undefined;\n    }\n  }\n\n  #setupTemplateHeadUpdates() {\n    this.#headTemplateObserver?.disconnect();\n    const headTemplate = this.#headTemplate;\n    if (headTemplate) {\n      this.#headTemplateObserver = new MutationObserver(() => this.#updateSource());\n      this.#headTemplateObserver.observe(headTemplate.content, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributes: true\n      });\n    } else {\n      this.#headTemplateObserver = undefined;\n    }\n  }\n\n  #setupLightDomUpdates() {\n    if (!this.#lightDomObserver) {\n      this.#lightDomObserver = new MutationObserver(() => {\n        this.#setupTemplateUpdates();\n        this.#setupTemplateHeadUpdates();\n        this.#updateSource();\n      });\n      this.#lightDomObserver.observe(this, { childList: true });\n    }\n  }\n\n  #setupThemeUpdates() {\n    const themeHost = this.#themeHost;\n    if (themeHost && !this.#themeObserver) {\n      this.#themeObserver = new MutationObserver(() => this.#syncTheme());\n      this.#themeObserver.observe(themeHost, { attributeFilter: ['nve-theme'] });\n    }\n  }\n\n  #handleLoad = () => {\n    const iframe = this.#iframe;\n    const documentId = this.#documentId;\n    requestAnimationFrame(() => {\n      if (this.isConnected && documentId === this.#documentId) {\n        iframe?.style.removeProperty('height');\n      }\n    });\n    this.#syncTheme();\n  };\n\n  #syncTheme = () => {\n    const theme = this.#themeHost?.getAttribute('nve-theme');\n    const contentWindow = this.#iframe?.contentWindow;\n    if (theme === null || theme === undefined || contentWindow === null || contentWindow === undefined) {\n      return;\n    }\n\n    const message: ThemeMessage = { theme };\n    // Sandboxed srcdoc documents have opaque origins, so authenticate messages by their window reference.\n    contentWindow.postMessage(JSON.stringify(message), '*');\n  };\n\n  #handleResizeMessage = (event: MessageEvent<unknown>) => {\n    const iframe = this.#iframe;\n    if (iframe === null || event.source !== iframe.contentWindow || typeof event.data !== 'string') {\n      return;\n    }\n\n    let message: unknown;\n    try {\n      message = JSON.parse(event.data);\n    } catch {\n      return;\n    }\n\n    if (!isResizeMessage(message) || message.documentId !== this.#documentId) {\n      return;\n    }\n\n    this.style.setProperty('--_width', `${message.width}px`);\n    this.style.setProperty('--_height', message.height === undefined ? 'auto' : `${message.height}px`);\n  };\n}\n"],"mappings":"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"}

package/dist/iframe/index.js

@@ -1,2 +1 @@
-import { Iframe as e } from "./iframe2.js";
-export { e as Iframe };
+export { Iframe } from "./iframe2.js";

package/dist/index.js

@@ -1,8 +1,8 @@
 import { getThemeTokens as e } from "./internal/utils/dom.js";
 import { statusIcons as t } from "./internal/types/index.js";
 import { internal_exports as n } from "./internal/index.js";
-//#region src/index.ts
-var r = "2.20.0", i = "@nvidia-elements", a = n.I18nService;
+// src/index.ts
+var r = "2.20.2", i = "@nvidia-elements", a = n.I18nService;
 export { a as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, t as statusIcons };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/// <reference types=\"./declarations\" />\nexport const VERSION = '0.0.0';\nexport const SCOPE = '@nvidia-elements';\nexport { I18nService, getThemeTokens } from '@nvidia-elements/core/internal';\nexport * from './internal/types/index.js';\n"],"mappings":";;;;AAIA,IAAa,IAAU,SACV,IAAQ"}
+{"version":3,"file":"index.js","names":["VERSION","SCOPE","I18nService","internal_exports","getThemeTokens","statusIcons"],"sources":["../src/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/// <reference types=\"./declarations\" />\nexport const VERSION = '0.0.0';\nexport const SCOPE = '@nvidia-elements';\nexport { I18nService, getThemeTokens } from '@nvidia-elements/core/internal';\nexport * from './internal/types/index.js';\n"],"mappings":";;;;AAIA,IAAaA,IAAU,SACVC,IAAQ,oB"}

package/dist/input/define.js

@@ -5,6 +5,5 @@ import { Input as r } from "./input2.js";
 import { InputGroup as i } from "./input-group2.js";
 import { define as a } from "@nvidia-elements/foundations/internal/define";
 a(r), a(i), a(t), a(n), a(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/input/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/input/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/foundations/internal/define';\nimport { Input, InputGroup } from '@nvidia-elements/core/input';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Input);\ndefine(InputGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-input': Input;\n    'nve-input-group': InputGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,CAAK,GACZ,EAAO,CAAU,GACjB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Input","InputGroup","Control","ControlGroup","ControlMessage"],"sources":["../../src/input/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/foundations/internal/define';\nimport { Input, InputGroup } from '@nvidia-elements/core/input';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Input);\ndefine(InputGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-input': Input;\n    'nve-input-group': InputGroup;\n  }\n}\n"],"mappings":";;;;;;AAOAA,EAAOC,CAAK,GACZD,EAAOE,CAAU,GACjBF,EAAOG,CAAO,GACdH,EAAOI,CAAY,GACnBJ,EAAOK,CAAc"}

package/dist/input/input-group.examples.js

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

package/dist/input/input-group.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.examples.js","names":[],"sources":["../../src/input/input-group.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\n\nexport default {\n  title: 'Elements/InputGroup',\n  component: 'nve-input-group'\n};\n\n/**\n * @summary Input group combining select, input, and button for composite controls like domain URL entry.\n */\nexport const Default = {\n  render: () => html`\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n`\n};\n\n/**\n * @summary Input group with date range filters combining select and date inputs for filtering data by time periods.\n */\nexport const FilterGroupRange = {\n  render: () => html`\n<div nve-layout=\"row align:vertical-center\">\n  <nve-input-group>\n    <nve-select style=\"width:150px\">\n      <select aria-label=\"date type\">\n        <option value=\"1\">recording date</option>\n        <option value=\"2\">process date</option>\n      </select>\n    </nve-select>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly=\"\">start</nve-button>\n      <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n    </nve-date>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly=\"\">end</nve-button>\n      <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n    </nve-date>\n    <nve-icon-button aria-label=\"remove filter\" icon-name=\"cancel\"></nve-icon-button>\n  </nve-input-group>\n</div>\n    `\n}\n\n/**\n * @summary Input group with children that grow to fill available space.\n * @tags test-case\n */\nexport const ResponsiveWidth = {\n  render: () => html`\n<div nve-layout=\"row align:vertical-center\" style=\"width: 700px\">\n  <nve-input-group style=\"--width: 100%\">\n    <label>domain</label>\n    <nve-select style=\"width: 130px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input nve-layout=\"full\">\n      <input placeholder=\"example.com\" type=\"url\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n    </nve-input>\n    <nve-input style=\"width: 130px\">\n      <input placeholder=\"Enter port\" type=\"number\" aria-label=\"port\" />\n    </nve-input>\n    <nve-control-message>host: 123456</nve-control-message>\n  </nve-input-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"input-group.examples.js","names":["input_group_examples_default"],"sources":["../../src/input/input-group.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\n\nexport default {\n  title: 'Elements/InputGroup',\n  component: 'nve-input-group'\n};\n\n/**\n * @summary Input group combining select, input, and button for composite controls like domain URL entry.\n */\nexport const Default = {\n  render: () => html`\n<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n`\n};\n\n/**\n * @summary Input group with date range filters combining select and date inputs for filtering data by time periods.\n */\nexport const FilterGroupRange = {\n  render: () => html`\n<div nve-layout=\"row align:vertical-center\">\n  <nve-input-group>\n    <nve-select style=\"width:150px\">\n      <select aria-label=\"date type\">\n        <option value=\"1\">recording date</option>\n        <option value=\"2\">process date</option>\n      </select>\n    </nve-select>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly=\"\">start</nve-button>\n      <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n    </nve-date>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly=\"\">end</nve-button>\n      <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n    </nve-date>\n    <nve-icon-button aria-label=\"remove filter\" icon-name=\"cancel\"></nve-icon-button>\n  </nve-input-group>\n</div>\n    `\n}\n\n/**\n * @summary Input group with children that grow to fill available space.\n * @tags test-case\n */\nexport const ResponsiveWidth = {\n  render: () => html`\n<div nve-layout=\"row align:vertical-center\" style=\"width: 700px\">\n  <nve-input-group style=\"--width: 100%\">\n    <label>domain</label>\n    <nve-select style=\"width: 130px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input nve-layout=\"full\">\n      <input placeholder=\"example.com\" type=\"url\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n    </nve-input>\n    <nve-input style=\"width: 130px\">\n      <input placeholder=\"Enter port\" type=\"number\" aria-label=\"port\" />\n    </nve-input>\n    <nve-control-message>host: 123456</nve-control-message>\n  </nve-input-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/input/input-group.global.js

@@ -1,6 +1,5 @@
-//#region src/input/input-group.global.css?inline
+// src/input/input-group.global.css?inline
 var e = "nve-input-group[type=filter]>nve-select::part(_caret){display:none!important}nve-input-group>[nve-control],nve-input-group>nve-button{--border-radius: 0}nve-input-group[type=filter] [nve-control]:nth-child(odd),nve-input-group[type=filter] nve-button:nth-child(odd){--font-weight: var(--nve-ref-font-weight-medium);--text-align: center}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=input-group.global.js.map

package/dist/input/input-group.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.global.js","names":[],"sources":["../../src/input/input-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-input-group[type='filter'] > nve-select::part(_caret) {\n  display: none !important;\n}\n\nnve-input-group > [nve-control],\nnve-input-group > nve-button {\n  --border-radius: 0;\n}\n\nnve-input-group[type='filter'] [nve-control]:nth-child(odd),\nnve-input-group[type='filter'] nve-button:nth-child(odd) {\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --text-align: center;\n}\n"],"mappings":""}
+{"version":3,"file":"input-group.global.js","names":["input_group_global_default"],"sources":["../../src/input/input-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-input-group[type='filter'] > nve-select::part(_caret) {\n  display: none !important;\n}\n\nnve-input-group > [nve-control],\nnve-input-group > nve-button {\n  --border-radius: 0;\n}\n\nnve-input-group[type='filter'] [nve-control]:nth-child(odd),\nnve-input-group[type='filter'] nve-button:nth-child(odd) {\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --text-align: center;\n}\n"],"mappings":""}

package/dist/input/input-group.js

@@ -1,6 +1,5 @@
-//#region src/input/input-group.css?inline
+// src/input/input-group.css?inline
 var e = ":host{--background: var(--nve-ref-border-color);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--gap: calc(var(--nve-ref-space-xxxs) / 2);--border: none;--width: max-content;width:var(--width);contain:none}[internal-host]{border-radius:var(--border-radius);overflow:hidden;width:var(--width);border:var(--border)}.input-slot{background:var(--background);border-radius:var(--border-radius);flex-flow:row nowrap;gap:var(--gap)}slot[name=label]{align-self:center}::slotted(nve-icon-button){--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-support-emphasis-color);--border-radius: 0}::slotted(nve-select){--padding: 0 var(--nve-ref-size-200);width:fit-content}::slotted([nve-control]){--border-radius: 0 !important}::slotted([first-control]){--border-radius: var(--nve-ref-border-radius-sm) 0 0 var(--nve-ref-border-radius-sm) !important}::slotted([last-control]){--border-radius: 0 var(--nve-ref-border-radius-sm) var(--nve-ref-border-radius-sm) 0 !important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../../src/input/input-group.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  --background: var(--nve-ref-border-color);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: calc(var(--nve-ref-space-xxxs) / 2);\n  --border: none;\n  --width: max-content;\n  width: var(--width);\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  width: var(--width);\n  border: var(--border);\n}\n\n.input-slot {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  flex-flow: row nowrap;\n  gap: var(--gap);\n}\n\nslot[name='label'] {\n  align-self: center;\n}\n\n::slotted(nve-icon-button) {\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-support-emphasis-color);\n  --border-radius: 0;\n}\n\n::slotted(nve-select) {\n  --padding: 0 var(--nve-ref-size-200);\n  width: fit-content;\n}\n\n::slotted([nve-control]) {\n  --border-radius: 0 !important;\n}\n\n::slotted([first-control]) {\n  --border-radius: var(--nve-ref-border-radius-sm) 0 0 var(--nve-ref-border-radius-sm) !important;\n}\n\n::slotted([last-control]) {\n  --border-radius: 0 var(--nve-ref-border-radius-sm) var(--nve-ref-border-radius-sm) 0 !important;\n}\n"],"mappings":""}
+{"version":3,"file":"input-group.js","names":["input_group_default"],"sources":["../../src/input/input-group.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  --background: var(--nve-ref-border-color);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: calc(var(--nve-ref-space-xxxs) / 2);\n  --border: none;\n  --width: max-content;\n  width: var(--width);\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  width: var(--width);\n  border: var(--border);\n}\n\n.input-slot {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  flex-flow: row nowrap;\n  gap: var(--gap);\n}\n\nslot[name='label'] {\n  align-self: center;\n}\n\n::slotted(nve-icon-button) {\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-support-emphasis-color);\n  --border-radius: 0;\n}\n\n::slotted(nve-select) {\n  --padding: 0 var(--nve-ref-size-200);\n  width: fit-content;\n}\n\n::slotted([nve-control]) {\n  --border-radius: 0 !important;\n}\n\n::slotted([first-control]) {\n  --border-radius: var(--nve-ref-border-radius-sm) 0 0 var(--nve-ref-border-radius-sm) !important;\n}\n\n::slotted([last-control]) {\n  --border-radius: 0 var(--nve-ref-border-radius-sm) var(--nve-ref-border-radius-sm) 0 !important;\n}\n"],"mappings":""}

package/dist/input/input-group2.js

@@ -3,7 +3,7 @@ import { useStyles as t } from "../internal/styles/index.js";
 import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import r from "./input-group.global.js";
 import i from "./input-group.js";
-//#region src/input/input-group.ts
+// src/input/input-group.ts
 var a = class extends n {
 	static {
 		this.styles = t([...n.styles, i]);
@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input-group",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	async connectedCallback() {
@@ -20,7 +20,6 @@ var a = class extends n {
 		t[0]?.setAttribute("first-control", ""), t[t.length - 1]?.setAttribute("last-control", "");
 	}
 };
-//#endregion
 export { a as InputGroup };
 
 //# sourceMappingURL=input-group2.js.map

package/dist/input/input-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group2.js","names":[],"sources":["../../src/input/input-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport globalStyles from './input-group.global.css?inline';\nimport styles from './input-group.css?inline';\n\n/**\n * @element nve-input-group\n * @description Visually combines many related input controls into a unified composite field with shared styling.\n * @documentation https://nvidia.github.io/elements/docs/elements/input-group/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/input\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --gap\n * @cssprop --border\n * @cssprop --padding\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n */\nexport class InputGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-input-group',\n    version: '0.0.0'\n  };\n\n  async connectedCallback() {\n    appendRootNodeStyle(this, globalStyles);\n    super.connectedCallback();\n    await this.updateComplete;\n    const controls = Array.from(\n      this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n    );\n    controls[0]?.setAttribute('first-control', '');\n    controls[controls.length - 1]?.setAttribute('last-control', '');\n  }\n}\n"],"mappings":";;;;;;AAuBA,IAAa,IAAb,cAAgC,EAAa;;EACd,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,MAAM,oBAAoB;EAGxB,AAFA,EAAoB,MAAM,CAAY,GACtC,MAAM,kBAAkB,GACxB,MAAM,KAAK;EACX,IAAM,IAAW,MAAM,KACrB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF;EAEA,AADA,EAAS,EAAE,EAAE,aAAa,iBAAiB,EAAE,GAC7C,EAAS,EAAS,SAAS,EAAE,EAAE,aAAa,gBAAgB,EAAE;CAChE;AACF"}
+{"version":3,"file":"input-group2.js","names":["styles","globalStyles","input_group_global_default","input_group_default","InputGroup","ControlGroup","useStyles","appendRootNodeStyle","controls"],"sources":["../../src/input/input-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport globalStyles from './input-group.global.css?inline';\nimport styles from './input-group.css?inline';\n\n/**\n * @element nve-input-group\n * @description Visually combines many related input controls into a unified composite field with shared styling.\n * @documentation https://nvidia.github.io/elements/docs/elements/input-group/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/input\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --gap\n * @cssprop --border\n * @cssprop --padding\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n */\nexport class InputGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-input-group',\n    version: '0.0.0'\n  };\n\n  async connectedCallback() {\n    appendRootNodeStyle(this, globalStyles);\n    super.connectedCallback();\n    await this.updateComplete;\n    const controls = Array.from(\n      this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n    );\n    controls[0]?.setAttribute('first-control', '');\n    controls[controls.length - 1]?.setAttribute('last-control', '');\n  }\n}\n"],"mappings":";;;;;;AAuBA,IAAaI,IAAb,cAAgCC,EAAa;;EACd,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAa,QAAQL,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,MAAM,oBAAoB;EAGxB,AAFAO,EAAoB,MAAMN,CAAY,GACtC,MAAM,kBAAkB,GACxB,MAAM,KAAK;EACX,IAAMO,IAAW,MAAM,KACrB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF;EAEA,AADAA,EAAS,EAAE,EAAE,aAAa,iBAAiB,EAAE,GAC7CA,EAASA,EAAS,SAAS,EAAE,EAAE,aAAa,gBAAgB,EAAE;CAChE;AACF"}

package/dist/input/input.examples.js

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

package/dist/input/input.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.examples.js","names":[],"sources":["../../src/input/input.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Input',\n  component: 'nve-input'\n};\n\n/**\n * @summary Basic text input field with label and message for general text entry and form data collection.\n */\nexport const Default = {\n  render: () => html`\n<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with the standard input structure, label, and control message.\n */\nexport const Standard = {\n  render: () => html`\n<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>`\n};\n\n/**\n * @summary Text inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>`\n};\n\n/**\n * @summary Text input with rounded corners for a softer visual appearance and modern aesthetic.\n */\nexport const Rounded = {\n  render: () => html`\n<nve-input rounded>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with fit-text styling that adjusts width to match the input value for compact displays.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<nve-input fit-text>\n  <label>label</label>\n  <input value=\"123456789012345678901234567890\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with fit-content sizing that automatically adjusts width based on available space.\n * @tags test-case\n */\nexport const FitContent = {\n  render: () => html`\n<nve-input fit-content>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with flat container styling for minimal visual appearance and borderless design.\n */\nexport const Flat = {\n  render: () =>\n    html`\n<nve-input container=\"flat\">\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`,\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"input.examples.js","names":["input_examples_default"],"sources":["../../src/input/input.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Input',\n  component: 'nve-input'\n};\n\n/**\n * @summary Basic text input field with label and message for general text entry and form data collection.\n */\nexport const Default = {\n  render: () => html`\n<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with the standard input structure, label, and control message.\n */\nexport const Standard = {\n  render: () => html`\n<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n\n  <nve-input>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>`\n};\n\n/**\n * @summary Text inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"horizontal\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>`\n};\n\n/**\n * @summary Text input with rounded corners for a softer visual appearance and modern aesthetic.\n */\nexport const Rounded = {\n  render: () => html`\n<nve-input rounded>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with fit-text styling that adjusts width to match the input value for compact displays.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<nve-input fit-text>\n  <label>label</label>\n  <input value=\"123456789012345678901234567890\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with fit-content sizing that automatically adjusts width based on available space.\n * @tags test-case\n */\nexport const FitContent = {\n  render: () => html`\n<nve-input fit-content>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n};\n\n/**\n * @summary Text input with flat container styling for minimal visual appearance and borderless design.\n */\nexport const Flat = {\n  render: () =>\n    html`\n<nve-input container=\"flat\">\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`,\n};"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/input/input.js

@@ -1,6 +1,5 @@
-//#region src/input/input.css?inline
+// src/input/input.css?inline
 var e = ":host{--padding: 0 var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: var(--nve-ref-size-800);--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--border: var(--nve-ref-border-width-md) solid transparent;--border-bottom: var(--border);--cursor: text;--font-weight: normal;--_icon-height: var(--height);--_font-size: var(--font-size);--width: 100%;--max-width: 100%;--min-width: initial;width:var(--width);max-width:var(--max-width);min-width:var(--min-width)}[input]{height:var(--height);background:var(--background);border:var(--border);border-bottom:var(--border-bottom);border-radius:var(--border-radius);color:var(--color);cursor:var(--cursor);width:var(--control-width);display:flex;align-content:stretch}::slotted(input){accent-color:var(--accent-color)!important;cursor:var(--cursor)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;color:var(--color)!important;line-height:var(--height)!important;border:0!important;background:none!important;display:block!important;width:100%!important;font-weight:var(--font-weight)!important}nve-icon-button,::slotted(nve-icon-button){--height: var(--_icon-height);align-self:center}::slotted(nve-button:not([slot])){--font-size: var(--_font-size);--padding: 0 var(--nve-ref-size-200);--color: var(--label-color);--height: 100%}:host([rounded]){--border-radius: var(--nve-ref-border-radius-full)}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}:host([container=\"flat\"]){--border-radius: 0;--box-shadow: none;--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}:host([container=\"flat\"]) [input]{background:inherit}:host([container=\"flat\"]:focus-within){--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis)}:host([container=\"flat\"]:focus-within) [input]{outline:0!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=input.js.map