@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,139 @@
+{
+  "element": "nve-icon-button",
+  "entrypoint": "@nvidia-elements/core/icon-button/icon-button.examples.json",
+  "items": [
+    {
+      "id": "core-icon-button_default",
+      "name": "Default",
+      "template": "<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n",
+      "summary": "Basic icon button for compact actions and toolbar controls with minimal visual footprint.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-icon-button_interactions",
+      "name": "Interactions",
+      "template": "<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",
+      "summary": "Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-icon-button_size",
+      "name": "Size",
+      "template": "<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",
+      "summary": "Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_flat-interactions",
+      "name": "FlatInteractions",
+      "template": "<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",
+      "summary": "Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_pressed",
+      "name": "Pressed",
+      "template": "<nve-icon-button pressed icon-name=\"filter-stroke\"></nve-icon-button>\n<nve-icon-button icon-name=\"filter\"></nve-icon-button>\n",
+      "summary": "Icon buttons with pressed state for toggle functionality like filters or visibility controls.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-icon-button_pressed-flat",
+      "name": "PressedFlat",
+      "template": "<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",
+      "summary": "Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_pressed-inline",
+      "name": "PressedInline",
+      "template": "<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",
+      "summary": "Inline icon buttons with pressed state for minimal toggle controls within text or content flows.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_selected",
+      "name": "Selected",
+      "template": "<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",
+      "summary": "Icon buttons with selected state for mutually exclusive options like view modes or layout choices.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-icon-button_selected-flat",
+      "name": "SelectedFlat",
+      "template": "<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",
+      "summary": "Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_selected-inline",
+      "name": "SelectedInline",
+      "template": "<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",
+      "summary": "Inline icon buttons with selected state for minimal mode selection within content flows.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_custom-icon",
+      "name": "CustomIcon",
+      "template": "<nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n<nve-icon-button>🎉</nve-icon-button>\n<nve-icon-button> 🔗 <a href=\"#\" aria-label=\"custom icon button\"></a> </nve-icon-button>\n",
+      "summary": "Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-icon-button_link",
+      "name": "Link",
+      "template": "<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>\n",
+      "summary": "Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-icon-button_themes",
+      "name": "Themes",
+      "template": "<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",
+      "summary": "Icon buttons styled for light and dark themes with all interaction states for theme consistency.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region 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}:host([interaction*=\"flat\"]) [interaction-state]{--nve-sys-interaction-state-ratio: 0 !important}:host([interaction*=\"flat\"]:state(pressed)){--color: var(--nve-sys-text-emphasis-color) !important;--background: none !important}:host([icon-name=\"chevron-left\"]),:host([icon-name=\"beginning\"]),:host([icon-name=\"collapse-panel\"]),:host([icon-name=\"navigate-back\"]){transform:rotate(270deg)}:host([icon-name=\"chevron-right\"]),:host([icon-name=\"end\"]),:host([icon-name=\"expand-panel\"]),:host([icon-name=\"navigate-to\"]),:host([icon-name=\"carousel-horizontal\"]){transform:rotate(90deg)}:host([icon-name=\"chevron-down\"]),:host([icon-name*=\"thumbs-down\"]){transform:rotate(180deg)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +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\n/* deprecated */\n:host([interaction*='flat']) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0 !important;\n}\n\n/* deprecated */\n:host([interaction*='flat']:state(pressed)) {\n  --color: var(--nve-sys-text-emphasis-color) !important;\n  --background: none !important;\n}\n\n/** @deprecated (left) 0.14.0 */\n:host([icon-name='chevron-left']),\n:host([icon-name='beginning']),\n:host([icon-name='collapse-panel']),\n:host([icon-name='navigate-back']) {\n  transform: rotate(270deg);\n}\n\n/** @deprecated (right) 0.14.0 */\n:host([icon-name='chevron-right']),\n:host([icon-name='end']),\n:host([icon-name='expand-panel']),\n:host([icon-name='navigate-to']),\n:host([icon-name='carousel-horizontal']) {\n  transform: rotate(90deg);\n}\n\n/** @deprecated (down) 0.14.0 */\n:host([icon-name='chevron-down']),\n:host([icon-name*='thumbs-down']) {\n  transform: rotate(180deg);\n}\n"],"mappings":""}

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

@@ -0,0 +1,41 @@
+import { removeEmptySlotWhitespace as e } from "../internal/utils/dom.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
+import { useStyles as r } from "../internal/styles/index.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
+var l = class extends a {
+	static {
+		this.styles = r([...a.styles, o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-icon-button",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [i.metadata.tag]: i };
+	}
+	render() {
+		return s`<div internal-host interaction-state focus-within aria-hidden="true"><slot @slotchange="${(t) => e(t.target)}"><nve-icon .name="${this.iconName}" .direction="${this.direction}" .size="${this.size}" aria-hidden="true" part="icon"></nve-icon></slot></div><slot name="anchor"></slot>`;
+	}
+};
+t([c({
+	type: String,
+	attribute: "icon-name"
+})], l.prototype, "iconName", void 0), t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "direction", void 0), t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0), l = t([n()], l);
+//#endregion
+export { l as IconButton };
+
+//# sourceMappingURL=icon-button2.js.map

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

@@ -0,0 +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 * @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  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} .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":";;;;;;;;;;AA+BO,IAAA,IAAA,cAAyB,EAAO;;gBAiBrB,EAAU,CAAC,GAAG,EAAO,QAAQ,EAAO,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAED,SAAS;AACP,SAAO,CAAI,4FAEc,MAAa,EAA0B,EAAE,OAA0B,CAAC,qBACrE,KAAK,SAAS,gBAAc,KAAK,UAAU,WAAS,KAAK,KAAK;;;GA5BvF,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAMlD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAhB3C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/icon-button/index.d.ts

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

package/dist/icon-button/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export declare const VERSION = "0.0.0";
+export declare const SCOPE = "@nvidia-elements";
+export { I18nService, getThemeTokens } from './internal';
+export * from './internal/types/index.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+import { getThemeTokens as e } from "./internal/utils/dom.js";
+import { I18nService as t } from "./internal/services/i18n.service.js";
+import { statusIcons as n } from "./internal/types/index.js";
+//#region src/index.ts
+var r = "0.0.3", i = "@nvidia-elements";
+//#endregion
+export { t as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, n as statusIcons };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"}

package/dist/input/define.d.ts

@@ -0,0 +1,7 @@
+import { Input, InputGroup } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-input': Input;
+        'nve-input-group': InputGroup;
+    }
+}

package/dist/input/define.js

@@ -0,0 +1,10 @@
+import { define as e } from "../internal/utils/dom.js";
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Input as i } from "./input2.js";
+import { InputGroup as a } from "./input-group2.js";
+e(i), e(a), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/input/define.js.map

@@ -0,0 +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/core/internal';\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,EAAM,EACb,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input.js';
+export * from './input-group.js';

package/dist/input/index.js

@@ -0,0 +1,3 @@
+import { Input as e, inputStyles as t } from "./input2.js";
+import { InputGroup as n } from "./input-group2.js";
+export { e as Input, n as InputGroup, t as inputStyles };

package/dist/input/input-group.d.ts

@@ -0,0 +1,23 @@
+import { CSSResult } from 'lit';
+import { ControlGroup } from '../forms';
+/**
+ * @element nve-input-group
+ * @description Visually combines many related input controls into a unified composite field with shared styling.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/input
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --gap
+ * @cssprop --border
+ * @cssprop --padding
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+export declare class InputGroup extends ControlGroup {
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    connectedCallback(): Promise<void>;
+}

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

@@ -0,0 +1,6 @@
+//#region 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

@@ -0,0 +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"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,24 @@
+{
+  "element": "nve-input-group",
+  "entrypoint": "@nvidia-elements/core/input/input-group.examples.json",
+  "items": [
+    {
+      "id": "core-input-input-group_default",
+      "name": "Default",
+      "template": "<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",
+      "summary": "Input group combining select, input, and button for composite controls like domain URL entry.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-input-input-group_filter-group-range",
+      "name": "FilterGroupRange",
+      "template": "<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",
+      "summary": "Input group with date range filters combining select and date inputs for filtering data by time periods.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region 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

@@ -0,0 +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),\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,\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),\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

@@ -0,0 +1,6 @@
+//#region 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:fit-content;contain:none}[internal-host]{border-radius:var(--border-radius);overflow:hidden;width:max-content;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

@@ -0,0 +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: fit-content;\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  width: max-content;\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::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::slotted(nve-select) {\n  --padding: 0 var(--nve-ref-size-200);\n  width: fit-content;\n}\n\n::slotted([nve-control]),\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

@@ -0,0 +1,26 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+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
+var a = class extends n {
+	static {
+		this.styles = t([...n.styles, i]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-input-group",
+			version: "0.0.3"
+		};
+	}
+	async connectedCallback() {
+		e(this, r), super.connectedCallback(), await this.updateComplete;
+		let t = Array.from(this.shadowRoot.querySelector("slot:not([name])").assignedElements());
+		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

@@ -0,0 +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 * @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":";;;;;;AAsBA,IAAa,IAAb,cAAgC,EAAa;;gBACd,EAAU,CAAC,GAAG,EAAa,QAAQ,EAAO,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACV;;CAED,MAAM,oBAAoB;AAGxB,EAFA,EAAoB,MAAM,EAAa,EACvC,MAAM,mBAAmB,EACzB,MAAM,KAAK;EACX,IAAM,IAAW,MAAM,KACrB,KAAK,WAAY,cAA+B,mBAAmB,CAAE,kBAAkB,CACxF;AAED,EADA,EAAS,IAAI,aAAa,iBAAiB,GAAG,EAC9C,EAAS,EAAS,SAAS,IAAI,aAAa,gBAAgB,GAAG"}

package/dist/input/input.d.ts

@@ -0,0 +1,41 @@
+import { CSSResult } from 'lit';
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+export declare const inputStyles: string;
+/**
+ * @element nve-input
+ * @description An input is a control that enables users to enter text.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/input
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @cssprop --color
+ * @cssprop --font-weight
+ * @cssprop --width
+ * @cssprop --min-width
+ * @cssprop --max-width
+ * @cssprop --border-bottom
+ * @cssprop --box-shadow
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ */
+export declare class Input extends Control implements ContainerElement {
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    /**
+     * Sets the rounded visual style of the input.
+     */
+    rounded: boolean;
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+}

package/dist/input/input.examples.js

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

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

@@ -0,0 +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"}

package/dist/input/input.examples.json

@@ -0,0 +1,86 @@
+{
+  "element": "nve-input",
+  "entrypoint": "@nvidia-elements/core/input/input.examples.json",
+  "items": [
+    {
+      "id": "core-input_default",
+      "name": "Default",
+      "template": "<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Basic text input field with label and message for general text entry and form data collection.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-input_standard",
+      "name": "Standard",
+      "template": "<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Text input with the standard input structure, label, and control message.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-input_vertical",
+      "name": "Vertical",
+      "template": "<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  <nve-input>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\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",
+      "summary": "Text inputs with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-input_horizontal",
+      "name": "Horizontal",
+      "template": "<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  <nve-input layout=\"horizontal\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\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  <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",
+      "summary": "Text inputs with horizontal layout showing validation states for inline forms and compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-input_rounded",
+      "name": "Rounded",
+      "template": "<nve-input rounded>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Text input with rounded corners for a softer visual appearance and modern aesthetic.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-input_fit-text",
+      "name": "FitText",
+      "template": "<nve-input fit-text>\n  <label>label</label>\n  <input value=\"123456789012345678901234567890\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Text input with fit-text styling that adjusts width to match the input value for compact displays.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-input_fit-content",
+      "name": "FitContent",
+      "template": "<nve-input fit-content>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Text input with fit-content sizing that automatically adjusts width based on available space.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-input_flat",
+      "name": "Flat",
+      "template": "<nve-input container=\"flat\">\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Text input with flat container styling for minimal visual appearance and borderless design.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/input/input.js

@@ -0,0 +1,6 @@
+//#region 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)}:host([fit-text]){--max-width: fit-content}[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

package/dist/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/input/input.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --cursor: text;\n  --font-weight: normal;\n  --_icon-height: var(--height);\n  --_font-size: var(--font-size);\n  --width: 100%;\n  --max-width: 100%;\n  --min-width: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --max-width: fit-content;\n}\n\n[input] {\n  height: var(--height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  color: var(--color);\n  cursor: var(--cursor);\n  width: var(--control-width);\n  display: flex;\n  align-content: stretch;\n}\n\n::slotted(input) {\n  /* https://web.dev/accent-color/#guaranteeing-contrast */\n  accent-color: var(--accent-color) !important;\n  cursor: var(--cursor) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  color: var(--color) !important;\n  line-height: var(--height) !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\n  width: 100% !important;\n  font-weight: var(--font-weight) !important;\n}\n\nnve-icon-button,\n::slotted(nve-icon-button),\n::slotted(nve-icon-button) {\n  --height: var(--_icon-height);\n  align-self: center;\n}\n\n::slotted(nve-button:not([slot])),\n::slotted(nve-button:not([slot])) {\n  --font-size: var(--_font-size);\n  --padding: 0 var(--nve-ref-size-200);\n  --color: var(--label-color);\n  --height: 100%;\n}\n\n:host([rounded]) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n:host([container='flat']) {\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n"],"mappings":""}

package/dist/input/input2.js

@@ -0,0 +1,31 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { Control as n } from "../forms/control/control2.js";
+import r from "./input.js";
+import { property as i } from "lit/decorators/property.js";
+//#region src/input/input.ts
+var a = r, o = class extends n {
+	constructor(...e) {
+		super(...e), this.rounded = !1;
+	}
+	static {
+		this.styles = t([...n.styles, r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-input",
+			version: "0.0.3"
+		};
+	}
+};
+e([i({
+	type: String,
+	reflect: !0
+})], o.prototype, "container", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "rounded", void 0);
+//#endregion
+export { o as Input, a as inputStyles };
+
+//# sourceMappingURL=input2.js.map