@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/card/card2.js

@@ -1,14 +1,14 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.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 i from "./card.js";
 import a from "./card-header.js";
 import o from "./card-content.js";
 import s from "./card-footer.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
-//#region src/card/card.ts
+// src/card/card.ts
 var d = class extends c {
 	static {
 		this.styles = n([i]);
@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-card"]
 		};
 	}
@@ -70,7 +70,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-card"]
 		};
 	}
@@ -79,7 +79,6 @@ var p = class extends c {
 	}
 };
 r([t()], m.prototype, "slot", void 0);
-//#endregion
 export { d as Card, p as CardContent, m as CardFooter, f as CardHeader };
 
 //# sourceMappingURL=card2.js.map

package/dist/card/card2.js.map

@@ -1 +1 @@
-{"version":3,"file":"card2.js","names":[],"sources":["../../src/card/card.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport cardStyleSheet from './card.css?inline';\nimport cardHeaderStyleSheet from './card-header.css?inline';\nimport cardContentStyleSheet from './card-content.css?inline';\nimport cardFooterStyleSheet from './card-footer.css?inline';\n\n/**\n * @element nve-card\n * @description A container for content representing a single entity.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --border\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class Card extends LitElement implements ContainerElement {\n  /** flat (embed into parent container) or full (width of viewport) */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  static styles = useStyles([cardStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"header\"></slot>\n\n        <slot></slot>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * @element nve-card-header\n * @description Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - Card title, supporting text, and optional action controls.\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --line-height\n * @cssprop --gap\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardHeader extends LitElement {\n  static styles = useStyles([cardHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-header',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n\n/**\n * @element nve-card-content\n * @description Contains the primary body content of a card, providing a structured region for the main information or media.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card content\n * @cssprop --padding\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardContent extends LitElement {\n  static styles = useStyles([cardContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-content',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-card-footer\n * @description Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardFooter extends LitElement {\n  static styles = useStyles([cardFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-footer',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA2BO,IAAM,IAAN,cAAmB,EAAuC;;EAI/C,KAAA,SAAA,EAAU,CAAC,CAAc,CAAC;;;EAEf,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CASb;AACF;AApBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAH1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA;AAsCP,IAAa,IAAb,cAAgC,EAAW;;EAUtB,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAA,EAAU,CAAC,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAOb;AACF;AAXG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA;AAuBZ,IAAa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAaa,IAAb,cAAgC,EAAW;;EAUtB,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAA,EAAU,CAAC,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"card2.js","names":["cardStyleSheet","_decorate","cardHeaderStyleSheet","cardContentStyleSheet","cardFooterStyleSheet","__decorate","card_default","card_header_default","card_content_default","card_footer_default","Card","LitElement","useStyles","property","audit","CardHeader","_args","hostAttr","CardContent","CardFooter","_args2"],"sources":["../../src/card/card.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport cardStyleSheet from './card.css?inline';\nimport cardHeaderStyleSheet from './card-header.css?inline';\nimport cardContentStyleSheet from './card-content.css?inline';\nimport cardFooterStyleSheet from './card-footer.css?inline';\n\n/**\n * @element nve-card\n * @description A container for content representing a single entity.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --border\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class Card extends LitElement implements ContainerElement {\n  /** flat (embed into parent container) or full (width of viewport) */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  static styles = useStyles([cardStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"header\"></slot>\n\n        <slot></slot>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * @element nve-card-header\n * @description Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - Card title, supporting text, and optional action controls.\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --line-height\n * @cssprop --gap\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardHeader extends LitElement {\n  static styles = useStyles([cardHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-header',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n\n/**\n * @element nve-card-content\n * @description Contains the primary body content of a card, providing a structured region for the main information or media.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card content\n * @cssprop --padding\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardContent extends LitElement {\n  static styles = useStyles([cardContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-content',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-card-footer\n * @description Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @aria https://github.com/w3c/aria-practices/issues\n */\nexport class CardFooter extends LitElement {\n  static styles = useStyles([cardFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-footer',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA2BO,IAAMU,IAAN,cAAmBC,EAAuC;;EAI/C,KAAA,SAAAC,EAAU,CAACZ,CAAc,CAAC;;;EAEf,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CASb;AACF;AApBGC,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,aAAA,KAAA,CAAA,GAH1C,IAAAT,EAAA,CAAAa,EAAM,CAAA,GAAAJ,CAAA;AAsCP,IAAaK,IAAb,cAAgCJ,EAAW;;EAUtB,A,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAAC,EAAU,CAACV,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAOb;AACF;AAXGD,EAAA,CAAAgB,EAAS,CAAA,GAAAF,EAAA,WAAA,QAAA,KAAA,CAAA;AAuBZ,IAAaG,IAAb,cAAiCP,EAAW;;EAC1B,KAAA,SAAAC,EAAU,CAACT,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAaagB,IAAb,cAAgCR,EAAW;;EAUtB,A,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAAC,EAAU,CAACR,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATGH,EAAA,CAAAgB,EAAS,CAAA,GAAAE,EAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/card/define.js

@@ -1,6 +1,5 @@
 import { Card as e, CardContent as t, CardFooter as n, CardHeader as r } from "./card2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(e), i(r), i(t), i(n);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/card/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/card/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 { Card, CardHeader, CardContent, CardFooter } from '@nvidia-elements/core/card';\n\ndefine(Card);\ndefine(CardHeader);\ndefine(CardContent);\ndefine(CardFooter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-card': Card;\n    'nve-card-header': CardHeader;\n    'nve-card-content': CardContent;\n    'nve-card-footer': CardFooter;\n  }\n}\n"],"mappings":";;AAMA,EAAO,CAAI,GACX,EAAO,CAAU,GACjB,EAAO,CAAW,GAClB,EAAO,CAAU"}
+{"version":3,"file":"define.js","names":["define","Card","CardHeader","CardContent","CardFooter"],"sources":["../../src/card/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 { Card, CardHeader, CardContent, CardFooter } from '@nvidia-elements/core/card';\n\ndefine(Card);\ndefine(CardHeader);\ndefine(CardContent);\ndefine(CardFooter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-card': Card;\n    'nve-card-header': CardHeader;\n    'nve-card-content': CardContent;\n    'nve-card-footer': CardFooter;\n  }\n}\n"],"mappings":";;AAMAA,EAAOC,CAAI,GACXD,EAAOE,CAAU,GACjBF,EAAOG,CAAW,GAClBH,EAAOI,CAAU"}

package/dist/card/index.js

@@ -1,2 +1 @@
-import { Card as e, CardContent as t, CardFooter as n, CardHeader as r } from "./card2.js";
-export { e as Card, t as CardContent, n as CardFooter, r as CardHeader };
+export { Card, CardContent, CardFooter, CardHeader } from "./card2.js";

package/dist/chat-message/chat-message.examples.js

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

package/dist/chat-message/chat-message.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.examples.js","names":[],"sources":["../../src/chat-message/chat-message.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/chat-message/define.js';\nimport '@nvidia-elements/core/avatar/define.js';\n\nexport default {\n  title: 'Elements/Chat Message',\n  component: 'nve-chat-message',\n};\n\n/**\n * @summary Basic chat message with default styling and behavior. Use this for simple text-based chat interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-chat-message>\n  Your deployment completed successfully. All services are running as expected.\n</nve-chat-message>\n`};\n\n/**\n * @summary Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.\n * @tags test-case\n */\nexport const ArrowPosition = {\n  render: () => html`\n<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.\n */\nexport const Flat = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.\n */\nexport const PrefixSuffix = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\" style=\"max-width: 600px\">\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    Hello, how may I assist you today?\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%; margin-left: auto\">\n    How do I use the chat message component?\n    <nve-avatar slot=\"suffix\" color=\"green-grass\">NV</nve-avatar>\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    <p nve-text=\"body\">To use the <code nve-text=\"code\">nve-chat-message</code> first import the element.</p>\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/code/codeblock/define.js';\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.\n */\nexport const Codeblock = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\">\n    How do I use the chat message component?\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n    import '@nvidia-elements/core/chat-message/define.js';\n    <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n  `\n}\n\n/**\n * @summary Custom top offset positioning for precise arrow placement. Useful when you need fine-tuned control over the chat bubble positioning.\n * @tags test-case\n */\nexport const TopOffset = {\n  render: () => html`\n<nve-chat-message arrow-position=\"top-start\" style=\"--top-offset: var(--nve-ref-space-sm)\">\n  <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n  Hello, how may I assist you today?\n</nve-chat-message>\n  `\n}\n\n/**\n * @summary All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-slate\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-denim\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-indigo\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-cobalt\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-sky\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-cyan\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-mint\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-seafoam\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-grass\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-amber\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"orange-pumpkin\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-tomato\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-magenta\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-plum\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-violet\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-lavender\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-rose\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-jade\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"lime-pear\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-nova\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"brand-green\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>`\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"chat-message.examples.js","names":["chat_message_examples_default"],"sources":["../../src/chat-message/chat-message.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/chat-message/define.js';\nimport '@nvidia-elements/core/avatar/define.js';\n\nexport default {\n  title: 'Elements/Chat Message',\n  component: 'nve-chat-message',\n};\n\n/**\n * @summary Basic chat message with default styling and behavior. Use this for simple text-based chat interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-chat-message>\n  Your deployment completed successfully. All services are running as expected.\n</nve-chat-message>\n`};\n\n/**\n * @summary Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.\n * @tags test-case\n */\nexport const ArrowPosition = {\n  render: () => html`\n<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.\n */\nexport const Flat = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.\n */\nexport const PrefixSuffix = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\" style=\"max-width: 600px\">\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    Hello, how may I assist you today?\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%; margin-left: auto\">\n    How do I use the chat message component?\n    <nve-avatar slot=\"suffix\" color=\"green-grass\">NV</nve-avatar>\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    <p nve-text=\"body\">To use the <code nve-text=\"code\">nve-chat-message</code> first import the element.</p>\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/code/codeblock/define.js';\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n`};\n\n/**\n * @summary Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.\n */\nexport const Codeblock = {\n  render: () => html`\n<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\">\n    How do I use the chat message component?\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n    import '@nvidia-elements/core/chat-message/define.js';\n    <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n  `\n}\n\n/**\n * @summary Custom top offset positioning for precise arrow placement. Useful when you need fine-tuned control over the chat bubble positioning.\n * @tags test-case\n */\nexport const TopOffset = {\n  render: () => html`\n<nve-chat-message arrow-position=\"top-start\" style=\"--top-offset: var(--nve-ref-space-sm)\">\n  <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n  Hello, how may I assist you today?\n</nve-chat-message>\n  `\n}\n\n/**\n * @summary All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-slate\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-denim\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-indigo\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-cobalt\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-sky\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-cyan\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-mint\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-seafoam\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-grass\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-amber\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"orange-pumpkin\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-tomato\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-magenta\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-plum\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-violet\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-lavender\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-rose\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-jade\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"lime-pear\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-nova\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"brand-green\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>`\n}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/chat-message/chat-message.global.js

@@ -1,6 +1,5 @@
-//#region src/chat-message/chat-message.global.css?inline
+// src/chat-message/chat-message.global.css?inline
 var e = "nve-chat-message:has([slot=prefix])::part(_message),nve-chat-message:has([slot=suffix])::part(_message){margin-block-start:var(--top-offset)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=chat-message.global.js.map

package/dist/chat-message/chat-message.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.global.js","names":[],"sources":["../../src/chat-message/chat-message.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-chat-message:has([slot='prefix'])::part(_message),\nnve-chat-message:has([slot='suffix'])::part(_message) {\n  margin-block-start: var(--top-offset);\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.global.js","names":["chat_message_global_default"],"sources":["../../src/chat-message/chat-message.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-chat-message:has([slot='prefix'])::part(_message),\nnve-chat-message:has([slot='suffix'])::part(_message) {\n  margin-block-start: var(--top-offset);\n}\n"],"mappings":""}

package/dist/chat-message/chat-message.js

@@ -1,6 +1,5 @@
-//#region src/chat-message/chat-message.css?inline
+// src/chat-message/chat-message.css?inline
 var e = ":host{--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-text-color);--padding: var(--nve-ref-size-300);--gap: var(--nve-ref-space-xs);--border-radius: var(--nve-ref-border-radius-md);--font-size: var(--nve-ref-font-size-200);--line-height: var(--nve-ref-font-line-height-tight);--top-offset: 0;--display: flex;--overflow: hidden;contain:content}@media(width<=350px){[internal-host]{flex-direction:column}}[internal-host]{gap:var(--gap);font-size:var(--font-size);display:var(--display);overflow:var(--overflow)}slot:not([name]){padding:var(--padding);background:var(--background);color:var(--color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);gap:var(--gap);display:flex;flex-direction:column;overflow:hidden}::slotted(nve-avatar){flex-shrink:0}:host([container=\"flat\"]){--background: transparent;--padding: 0 var(--nve-ref-size-200)}:host([color]){--background: var(--state-color);--color: var(--nve-sys-contrast-mute-color)}:host([arrow-position=\"top-start\"]) slot:not([name]){border-top-left-radius:0}:host([arrow-position=\"top-end\"]) slot:not([name]){border-top-right-radius:0}:host([arrow-position=\"bottom-start\"]) slot:not([name]){border-bottom-left-radius:0}:host([arrow-position=\"bottom-end\"]) slot:not([name]){border-bottom-right-radius:0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=chat-message.js.map

package/dist/chat-message/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","names":[],"sources":["../../src/chat-message/chat-message.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-sys-layer-container-background);\n  --color: var(--nve-sys-text-color);\n  --padding: var(--nve-ref-size-300);\n  --gap: var(--nve-ref-space-xs);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --font-size: var(--nve-ref-font-size-200);\n  --line-height: var(--nve-ref-font-line-height-tight);\n  --top-offset: 0;\n  --display: flex;\n  --overflow: hidden;\n  contain: content;\n}\n\n@media (width <= 350px) {\n  [internal-host] {\n    flex-direction: column; /* Stack vertically */\n  }\n}\n\n[internal-host] {\n  gap: var(--gap);\n  font-size: var(--font-size);\n  display: var(--display);\n  overflow: var(--overflow);\n}\n\nslot:not([name]) {\n  padding: var(--padding);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  gap: var(--gap);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n::slotted(nve-avatar) {\n  flex-shrink: 0;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n:host([color]) {\n  --background: var(--state-color);\n  --color: var(--nve-sys-contrast-mute-color);\n}\n\n:host([arrow-position='top-start']) slot:not([name]) {\n  border-top-left-radius: 0;\n}\n\n:host([arrow-position='top-end']) slot:not([name]) {\n  border-top-right-radius: 0;\n}\n\n:host([arrow-position='bottom-start']) slot:not([name]) {\n  border-bottom-left-radius: 0;\n}\n\n:host([arrow-position='bottom-end']) slot:not([name]) {\n  border-bottom-right-radius: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"chat-message.js","names":["chat_message_default"],"sources":["../../src/chat-message/chat-message.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-sys-layer-container-background);\n  --color: var(--nve-sys-text-color);\n  --padding: var(--nve-ref-size-300);\n  --gap: var(--nve-ref-space-xs);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --font-size: var(--nve-ref-font-size-200);\n  --line-height: var(--nve-ref-font-line-height-tight);\n  --top-offset: 0;\n  --display: flex;\n  --overflow: hidden;\n  contain: content;\n}\n\n@media (width <= 350px) {\n  [internal-host] {\n    flex-direction: column; /* Stack vertically */\n  }\n}\n\n[internal-host] {\n  gap: var(--gap);\n  font-size: var(--font-size);\n  display: var(--display);\n  overflow: var(--overflow);\n}\n\nslot:not([name]) {\n  padding: var(--padding);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  gap: var(--gap);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n::slotted(nve-avatar) {\n  flex-shrink: 0;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n:host([color]) {\n  --background: var(--state-color);\n  --color: var(--nve-sys-contrast-mute-color);\n}\n\n:host([arrow-position='top-start']) slot:not([name]) {\n  border-top-left-radius: 0;\n}\n\n:host([arrow-position='top-end']) slot:not([name]) {\n  border-top-right-radius: 0;\n}\n\n:host([arrow-position='bottom-start']) slot:not([name]) {\n  border-bottom-left-radius: 0;\n}\n\n:host([arrow-position='bottom-end']) slot:not([name]) {\n  border-bottom-right-radius: 0;\n}\n"],"mappings":""}

package/dist/chat-message/chat-message2.js

@@ -1,11 +1,11 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
 import { colorStateStyles as t, 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 i from "./chat-message.js";
 import a from "./chat-message.global.js";
 import { LitElement as o, html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/chat-message/chat-message.ts
+// src/chat-message/chat-message.ts
 var l = class extends o {
 	static {
 		this.styles = n([i, t]);
@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -34,7 +34,6 @@ r([c({
 	reflect: !0,
 	attribute: "arrow-position"
 })], l.prototype, "arrowPosition", void 0);
-//#endregion
 export { l as ChatMessage };
 
 //# sourceMappingURL=chat-message2.js.map

package/dist/chat-message/chat-message2.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message2.js","names":[],"sources":["../../src/chat-message/chat-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './chat-message.css?inline';\nimport globalStyles from './chat-message.global.css?inline';\n\n/**\n * @element nve-chat-message\n * @description A chat message component displays a text message within a conversation, sent between users or bots\n * @documentation https://nvidia.github.io/elements/docs/elements/chat-message/\n * @since 1.25.0\n * @entrypoint \\@nvidia-elements/core/chat-message\n * @slot - The message body displayed between the prefix and suffix content.\n * @slot prefix - for avatar/img content\n * @slot suffix - for avatar/img content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --line-height\n * @cssprop --overflow\n * @cssprop --top-offset - Vertical offset for aligning message with avatar\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\nexport class ChatMessage extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-chat-message',\n    version: '0.0.0'\n  };\n\n  /** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */\n  @property({ type: String, reflect: true }) container: 'flat';\n\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Removes the border radius from the selected message corner to indicate the speaker direction. */\n  @property({ type: String, reflect: true, attribute: 'arrow-position' }) arrowPosition:\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot part=\"_message\"></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;AA+BA,IAAa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY;CACxC;AACF;AAzBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA"}
+{"version":3,"file":"chat-message2.js","names":["styles","globalStyles","_decorate","__decorate","chat_message_default","chat_message_global_default","ChatMessage","LitElement","useStyles","colorStateStyles","appendRootNodeStyle","property"],"sources":["../../src/chat-message/chat-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './chat-message.css?inline';\nimport globalStyles from './chat-message.global.css?inline';\n\n/**\n * @element nve-chat-message\n * @description A chat message component displays a text message within a conversation, sent between users or bots\n * @documentation https://nvidia.github.io/elements/docs/elements/chat-message/\n * @since 1.25.0\n * @entrypoint \\@nvidia-elements/core/chat-message\n * @slot - The message body displayed between the prefix and suffix content.\n * @slot prefix - for avatar/img content\n * @slot suffix - for avatar/img content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --line-height\n * @cssprop --overflow\n * @cssprop --top-offset - Vertical offset for aligning message with avatar\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\nexport class ChatMessage extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-chat-message',\n    version: '0.0.0'\n  };\n\n  /** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */\n  @property({ type: String, reflect: true }) container: 'flat';\n\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Removes the border radius from the selected message corner to indicate the speaker direction. */\n  @property({ type: String, reflect: true, attribute: 'arrow-position' }) arrowPosition:\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot part=\"_message\"></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;AA+BA,IAAaM,IAAb,cAAiCC,EAAW;;EAC1B,KAAA,SAAAC,EAAU,CAACR,GAAQS,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxBC,EAAoB,MAAMT,CAAY;CACxC;AACF;AAzBGC,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,aAAA,KAAA,CAAA,GAExCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAAL,EAAA,WAAA,iBAAA,KAAA,CAAA"}

package/dist/chat-message/define.js

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

package/dist/chat-message/define.js.map

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

package/dist/chat-message/index.js

@@ -1,2 +1 @@
-import { ChatMessage as e } from "./chat-message2.js";
-export { e as ChatMessage };
+export { ChatMessage } from "./chat-message2.js";

package/dist/checkbox/checkbox-group.js

@@ -1,6 +1,5 @@
-//#region src/checkbox/checkbox-group.css?inline
+// src/checkbox/checkbox-group.css?inline
 var e = ":host{width:100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=checkbox-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":[],"sources":["../../src/checkbox/checkbox-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  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox-group.js","names":["checkbox_group_default"],"sources":["../../src/checkbox/checkbox-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  width: 100%;\n}\n"],"mappings":""}

package/dist/checkbox/checkbox-group2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { typeSSR as t } from "../internal/controllers/type-ssr.controller.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 { ControlGroup as i } from "../forms/control-group/control-group2.js";
 import a from "./checkbox-group.js";
-//#region src/checkbox/checkbox-group.ts
+// src/checkbox/checkbox-group.ts
 var o = class extends i {
 	static {
 		this.styles = n([...i.styles, a]);
@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: [
 				"label",
 				"nve-control-message",
@@ -22,7 +22,6 @@ var o = class extends i {
 	}
 };
 o = r([e(), t()], o);
-//#endregion
 export { o as CheckboxGroup };
 
 //# sourceMappingURL=checkbox-group2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group2.js","names":[],"sources":["../../src/checkbox/checkbox-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 { typeSSR, useStyles, audit } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './checkbox-group.css?inline';\n\n/**\n * @element nve-checkbox-group\n * @description Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\n@typeSSR()\nexport class CheckboxGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-checkbox-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-checkbox']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAM,IAAN,cAA4B,EAAa;;EACjB,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAc;EAC3D;;AACF;AAVC,IAAA,EAAA,CAAA,EAAM,GACN,EAAQ,CAAA,GAAA,CAAA"}
+{"version":3,"file":"checkbox-group2.js","names":["styles","_decorate","__decorate","checkbox_group_default","CheckboxGroup","ControlGroup","useStyles","audit","typeSSR"],"sources":["../../src/checkbox/checkbox-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 { typeSSR, useStyles, audit } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './checkbox-group.css?inline';\n\n/**\n * @element nve-checkbox-group\n * @description Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\n@typeSSR()\nexport class CheckboxGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-checkbox-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-checkbox']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAMI,IAAN,cAA4BC,EAAa;;EACjB,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAa,QAAQL,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAc;EAC3D;;AACF;AAVC,IAAAC,EAAA,CAAAM,EAAM,GACNC,EAAQ,CAAA,GAAAJ,CAAA"}

package/dist/checkbox/checkbox.examples.js

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

package/dist/checkbox/checkbox.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.examples.js","names":[],"sources":["../../src/checkbox/checkbox.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/checkbox/define.js';\n\nexport default {\n  title: 'Elements/Checkbox',\n  component: 'nve-checkbox',\n};\n\n/**\n * @summary Basic checkbox component with label for binary selection and form input.\n */\nexport const Default = {\n  render: () => html`\n<nve-checkbox>\n  <label>label</label>\n  <input type=\"checkbox\" checked />\n</nve-checkbox>`\n};\n\n/**\n * @summary Checkbox states including default, disabled, success, and error with control messages for validation feedback.\n */\nexport const States = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>`\n};\n\n/**\n * @summary Checkbox group with vertical layout for related options stacked in a column with validation states.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox with indeterminate state for representing partial selection or mixed values in hierarchical lists.\n * @tags test-case\n */\nexport const Indeterminate = {\n  render: () => html`\n<nve-checkbox>\n  <label>checkbox 1</label>\n  <input type=\"checkbox\" checked id=\"indeterminate\" />\n</nve-checkbox>\n<script type=\"module\">\n  document.querySelector('#indeterminate').indeterminate = true;\n</script>\n`\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"checkbox.examples.js","names":["checkbox_examples_default"],"sources":["../../src/checkbox/checkbox.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/checkbox/define.js';\n\nexport default {\n  title: 'Elements/Checkbox',\n  component: 'nve-checkbox',\n};\n\n/**\n * @summary Basic checkbox component with label for binary selection and form input.\n */\nexport const Default = {\n  render: () => html`\n<nve-checkbox>\n  <label>label</label>\n  <input type=\"checkbox\" checked />\n</nve-checkbox>`\n};\n\n/**\n * @summary Checkbox states including default, disabled, success, and error with control messages for validation feedback.\n */\nexport const States = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>`\n};\n\n/**\n * @summary Checkbox group with vertical layout for related options stacked in a column with validation states.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n`\n};\n\n/**\n * @summary Checkbox with indeterminate state for representing partial selection or mixed values in hierarchical lists.\n * @tags test-case\n */\nexport const Indeterminate = {\n  render: () => html`\n<nve-checkbox>\n  <label>checkbox 1</label>\n  <input type=\"checkbox\" checked id=\"indeterminate\" />\n</nve-checkbox>\n<script type=\"module\">\n  document.querySelector('#indeterminate').indeterminate = true;\n</script>\n`\n};"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/checkbox/checkbox.js

@@ -1,6 +1,5 @@
-//#region src/checkbox/checkbox.css?inline
+// src/checkbox/checkbox.css?inline
 var e = ":host{--cursor: pointer;--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400);--border-width: var(--nve-ref-border-width-md);--border-radius: var(--nve-ref-border-radius-xs);--border-color: var(--nve-ref-border-color);--background: transparent;--check-color: transparent;display:inline-block;contain:layout}::slotted(input){width:var(--width)!important;height:var(--height)!important;cursor:var(--cursor)!important;margin:0!important;position:absolute!important;opacity:0!important;inset:0!important}[input]{align-items:center;position:relative}@keyframes select-pop{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}[input] slot{width:var(--width);height:var(--height);border:var(--border-width) solid var(--border-color);background:var(--background);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;position:relative;overflow:visible;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.12,.32,.54,2),border-color var(--nve-ref-animation-duration-150) ease}[input] slot:before{content:\"\";width:calc(var(--width) * .7);height:calc(var(--width) * .7 / 1.369);aspect-ratio:1.369;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.05)}@supports not (clip-path: shape(from 0% 0%,line to 100% 100%)){[input] slot:before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:calc(var(--width) * .6);height:calc(var(--width) * .6);aspect-ratio:1}}@supports (clip-path: shape(from 0% 0%,line to 100% 100%)){[input] slot:before{clip-path:shape(from 98.17% 2.51%,arc by 0% 12.12% of 8% 8.57% small cw,line by -60.51% 82.87%,arc by -8.85% 0% of 8% 8.57% small cw,line to 1.68% 60.34%,arc by .15% -11.91% of 8% 8.58% small cw,arc by 8.7% -.21% of 8% 8.58% small cw,line to 33.23% 79.32%,line by 56.09% -76.81%,arc by 8.85% 0% of 8% 8.57% small cw,close)}}:host(:state(checked)){--background: var(--accent-color);--check-color: var(--nve-sys-text-white-color)}:host(:state(checked)) [input] slot{border:0}:host(:state(checked):state(dirty)) [input] slot{animation:select-pop var(--nve-ref-animation-duration-200) ease-out}:host(:state(checked)) [input] slot:before{background:var(--check-color)}:host(:state(indeterminate)){--background: var(--border-color)}:host(:state(indeterminate)) [input] slot:before{display:none}:host(:state(indeterminate)) [input] slot:after{background:var(--nve-sys-interaction-color);content:\"\";display:inline-block;width:calc(var(--width) * .5);height:var(--border-width);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.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  --cursor: pointer;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  --border-width: var(--nve-ref-border-width-md);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-color: var(--nve-ref-border-color);\n  --background: transparent;\n  --check-color: transparent;\n  display: inline-block;\n  contain: layout;\n}\n\n::slotted(input) {\n  width: var(--width) !important;\n  height: var(--height) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  position: absolute !important;\n  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes select-pop {\n  0% {\n    transform: scale(0.8);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n[input] slot {\n  width: var(--width);\n  height: var(--height);\n  border: var(--border-width) solid var(--border-color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: visible;\n  transition:\n    transform var(--nve-ref-animation-duration-200) cubic-bezier(0.12, 0.32, 0.54, 2),\n    border-color var(--nve-ref-animation-duration-150) ease;\n}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) * 0.7);\n  height: calc(var(--width) * 0.7 / 1.369);\n  aspect-ratio: 1.369;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1.05);\n}\n\n/* Fallback for browsers that don't support clip-path: shape(). Use polygon-based checkmark as fallback */\n@supports not (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n    width: calc(var(--width) * 0.6);\n    height: calc(var(--width) * 0.6);\n    aspect-ratio: 1;\n  }\n}\n\n/* Modern browsers with shape() support */\n@supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: shape(\n      from 98.17% 2.51%,\n      arc by 0% 12.12% of 8% 8.57% small cw,\n      line by -60.51% 82.87%,\n      arc by -8.85% 0% of 8% 8.57% small cw,\n      line to 1.68% 60.34%,\n      arc by 0.15% -11.91% of 8% 8.58% small cw,\n      arc by 8.7% -0.21% of 8% 8.58% small cw,\n      line to 33.23% 79.32%,\n      line by 56.09% -76.81%,\n      arc by 8.85% 0% of 8% 8.57% small cw,\n      close\n    );\n  }\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --check-color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot {\n  border: 0;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--check-color);\n}\n\n:host(:state(indeterminate)) {\n  --background: var(--border-color);\n}\n\n:host(:state(indeterminate)) [input] slot::before {\n  display: none;\n}\n\n:host(:state(indeterminate)) [input] slot::after {\n  /* stylelint-disable-next-line */\n  /* eslint-disable-next-line @nvidia-elements/lint/no-unexpected-css-variable */\n  background: var(--nve-sys-interaction-color);\n  content: '';\n  display: inline-block;\n  width: calc(var(--width) * 0.5);\n  height: var(--border-width);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox.js","names":["checkbox_default"],"sources":["../../src/checkbox/checkbox.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  --cursor: pointer;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  --border-width: var(--nve-ref-border-width-md);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-color: var(--nve-ref-border-color);\n  --background: transparent;\n  --check-color: transparent;\n  display: inline-block;\n  contain: layout;\n}\n\n::slotted(input) {\n  width: var(--width) !important;\n  height: var(--height) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  position: absolute !important;\n  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes select-pop {\n  0% {\n    transform: scale(0.8);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n[input] slot {\n  width: var(--width);\n  height: var(--height);\n  border: var(--border-width) solid var(--border-color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: visible;\n  transition:\n    transform var(--nve-ref-animation-duration-200) cubic-bezier(0.12, 0.32, 0.54, 2),\n    border-color var(--nve-ref-animation-duration-150) ease;\n}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) * 0.7);\n  height: calc(var(--width) * 0.7 / 1.369);\n  aspect-ratio: 1.369;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1.05);\n}\n\n/* Fallback for browsers that don't support clip-path: shape(). Use polygon-based checkmark as fallback */\n@supports not (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n    width: calc(var(--width) * 0.6);\n    height: calc(var(--width) * 0.6);\n    aspect-ratio: 1;\n  }\n}\n\n/* Modern browsers with shape() support */\n@supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: shape(\n      from 98.17% 2.51%,\n      arc by 0% 12.12% of 8% 8.57% small cw,\n      line by -60.51% 82.87%,\n      arc by -8.85% 0% of 8% 8.57% small cw,\n      line to 1.68% 60.34%,\n      arc by 0.15% -11.91% of 8% 8.58% small cw,\n      arc by 8.7% -0.21% of 8% 8.58% small cw,\n      line to 33.23% 79.32%,\n      line by 56.09% -76.81%,\n      arc by 8.85% 0% of 8% 8.57% small cw,\n      close\n    );\n  }\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --check-color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot {\n  border: 0;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--check-color);\n}\n\n:host(:state(indeterminate)) {\n  --background: var(--border-color);\n}\n\n:host(:state(indeterminate)) [input] slot::before {\n  display: none;\n}\n\n:host(:state(indeterminate)) [input] slot::after {\n  /* stylelint-disable-next-line */\n  /* eslint-disable-next-line @nvidia-elements/lint/no-unexpected-css-variable */\n  background: var(--nve-sys-interaction-color);\n  content: '';\n  display: inline-block;\n  width: calc(var(--width) * 0.5);\n  height: var(--border-width);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n"],"mappings":""}

package/dist/checkbox/checkbox2.js

@@ -1,10 +1,10 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.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 { Control as i } from "../forms/control/control2.js";
 import a from "./checkbox.js";
-//#region src/checkbox/checkbox.ts
+// src/checkbox/checkbox.ts
 var o = class extends i {
 	constructor(...e) {
 		super(...e), this.nveControl = "inline";
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: [
 				"label",
 				"input",
@@ -25,7 +25,6 @@ var o = class extends i {
 	}
 };
 r([t({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = r([e()], o);
-//#endregion
 export { o as Checkbox };
 
 //# sourceMappingURL=checkbox2.js.map

package/dist/checkbox/checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox2.js","names":[],"sources":["../../src/checkbox/checkbox.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 { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './checkbox.css?inline';\n\n/**\n * @element nve-checkbox\n * @description A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/checkbox/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --background\n * @cssprop --check-color\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\nexport class Checkbox extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static readonly metadata = {\n    tag: 'nve-checkbox',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAM,IAAN,cAAuB,EAAQ;;EAC2B,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAQvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AAfG,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"checkbox2.js","names":["styles","_decorate","__decorate","checkbox_default","Checkbox","Control","_args","useStyles","hostAttr","audit"],"sources":["../../src/checkbox/checkbox.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 { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './checkbox.css?inline';\n\n/**\n * @element nve-checkbox\n * @description A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/checkbox/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --background\n * @cssprop --check-color\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\nexport class Checkbox extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static readonly metadata = {\n    tag: 'nve-checkbox',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAMI,IAAN,cAAuBC,EAAQ;;EAC2B,A,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAAE,EAAU,CAAC,GAAGF,EAAQ,QAAQL,CAAM,CAAC;;;EAQvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AAfGC,EAAA,CAAAO,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAAJ,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAAH,EAAA,CAAAQ,EAAM,CAAA,GAAAL,CAAA"}

package/dist/checkbox/define.js

@@ -5,6 +5,5 @@ import { Checkbox as r } from "./checkbox2.js";
 import { CheckboxGroup as i } from "./checkbox-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/checkbox/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/checkbox/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 { Checkbox, CheckboxGroup } from '@nvidia-elements/core/checkbox';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Checkbox);\ndefine(CheckboxGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-checkbox': Checkbox;\n    'nve-checkbox-group': CheckboxGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,CAAQ,GACf,EAAO,CAAa,GACpB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Checkbox","CheckboxGroup","Control","ControlGroup","ControlMessage"],"sources":["../../src/checkbox/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 { Checkbox, CheckboxGroup } from '@nvidia-elements/core/checkbox';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Checkbox);\ndefine(CheckboxGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-checkbox': Checkbox;\n    'nve-checkbox-group': CheckboxGroup;\n  }\n}\n"],"mappings":";;;;;;AAOAA,EAAOC,CAAQ,GACfD,EAAOE,CAAa,GACpBF,EAAOG,CAAO,GACdH,EAAOI,CAAY,GACnBJ,EAAOK,CAAc"}

package/dist/color/color.examples.js

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

package/dist/color/color.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.examples.js","names":[],"sources":["../../src/color/color.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/color/define.js';\n\nexport default {\n  title: 'Elements/Color',\n  component: 'nve-color',\n};\n\n/**\n * @summary Basic color picker input with label and message for selecting hex color values.\n */\nexport const Default = {\n  render: () => html`\n<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n</nve-color>\n`\n};\n\n/**\n * @summary Color picker with datalist providing predefined color swatches for quick selection from a color palette.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-color>\n<label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"#1a6b00\"></option>\n    <option value=\"#448d00\"></option>\n    <option value=\"#69b027\"></option>\n    <option value=\"#8ac057\"></option>\n    <option value=\"#a9d081\"></option>\n    <option value=\"#0758bb\"></option>\n    <option value=\"#0865d8\"></option>\n    <option value=\"#0971f1\"></option>\n    <option value=\"#7298f4\"></option>\n    <option value=\"#a1b7f7\"></option>\n    <option value=\"#b43931\"></option>\n    <option value=\"#d04238\"></option>\n    <option value=\"#e94a3f\"></option>\n    <option value=\"#ee847f\"></option>\n    <option value=\"#f2aba8\"></option>\n  </datalist>\n</nve-color>\n  `\n}\n\n/**\n * @summary Color pickers 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-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n\n/**\n * @summary Color pickers 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-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"color.examples.js","names":["color_examples_default"],"sources":["../../src/color/color.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/color/define.js';\n\nexport default {\n  title: 'Elements/Color',\n  component: 'nve-color',\n};\n\n/**\n * @summary Basic color picker input with label and message for selecting hex color values.\n */\nexport const Default = {\n  render: () => html`\n<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n</nve-color>\n`\n};\n\n/**\n * @summary Color picker with datalist providing predefined color swatches for quick selection from a color palette.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-color>\n<label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"#1a6b00\"></option>\n    <option value=\"#448d00\"></option>\n    <option value=\"#69b027\"></option>\n    <option value=\"#8ac057\"></option>\n    <option value=\"#a9d081\"></option>\n    <option value=\"#0758bb\"></option>\n    <option value=\"#0865d8\"></option>\n    <option value=\"#0971f1\"></option>\n    <option value=\"#7298f4\"></option>\n    <option value=\"#a1b7f7\"></option>\n    <option value=\"#b43931\"></option>\n    <option value=\"#d04238\"></option>\n    <option value=\"#e94a3f\"></option>\n    <option value=\"#ee847f\"></option>\n    <option value=\"#f2aba8\"></option>\n  </datalist>\n</nve-color>\n  `\n}\n\n/**\n * @summary Color pickers 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-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n\n/**\n * @summary Color pickers 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-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/color/color.global.js

@@ -1,6 +1,5 @@
-//#region src/color/color.global.css?inline
+// src/color/color.global.css?inline
 var e = "nve-color input::-webkit-color-swatch{border:none!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=color.global.js.map

package/dist/color/color.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.global.js","names":[],"sources":["../../src/color/color.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-color input::-webkit-color-swatch {\n  border: none !important;\n}\n"],"mappings":""}
+{"version":3,"file":"color.global.js","names":["color_global_default"],"sources":["../../src/color/color.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-color input::-webkit-color-swatch {\n  border: none !important;\n}\n"],"mappings":""}

package/dist/color/color.js

@@ -1,6 +1,5 @@
-//#region src/color/color.css?inline
+// src/color/color.css?inline
 var e = ":host{--cursor: pointer}::slotted(input){padding:0!important;border:0!important;height:auto}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=color.js.map

package/dist/color/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../../src/color/color.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  --cursor: pointer;\n}\n\n::slotted(input) {\n  padding: 0 !important;\n  border: 0 !important;\n  height: auto;\n}\n"],"mappings":""}
+{"version":3,"file":"color.js","names":["color_default"],"sources":["../../src/color/color.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  --cursor: pointer;\n}\n\n::slotted(input) {\n  padding: 0 !important;\n  border: 0 !important;\n  height: auto;\n}\n"],"mappings":""}