@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/card/card2.js

@@ -0,0 +1,87 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as t } from "../internal/controllers/audit.controller.js";
+import { hostAttr as n } from "../internal/decorators/host-attr.js";
+import { useStyles as r } from "../internal/styles/index.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
+var d = class extends c {
+	static {
+		this.styles = r([i]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-card",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return l`<div internal-host><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>`;
+	}
+};
+e([u({
+	type: String,
+	reflect: !0
+})], d.prototype, "container", void 0), d = e([t()], d);
+var f = class extends c {
+	constructor(...e) {
+		super(...e), this.slot = "header";
+	}
+	static {
+		this.styles = r([a]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-card-header",
+			version: "0.0.3",
+			parents: ["nve-card"]
+		};
+	}
+	render() {
+		return l`<header internal-host><div class="content"><slot name="title"></slot><slot name="subtitle"></slot><slot></slot></div><slot name="header-action"></slot></header>`;
+	}
+};
+e([n()], f.prototype, "slot", void 0), f = e([t()], f);
+var p = class extends c {
+	static {
+		this.styles = r([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-card-content",
+			version: "0.0.3",
+			parents: ["nve-card"]
+		};
+	}
+	render() {
+		return l`<slot></slot>`;
+	}
+};
+p = e([t()], p);
+var m = class extends c {
+	constructor(...e) {
+		super(...e), this.slot = "footer";
+	}
+	static {
+		this.styles = r([s]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-card-footer",
+			version: "0.0.3",
+			parents: ["nve-card"]
+		};
+	}
+	render() {
+		return l`<footer internal-host><slot></slot></footer>`;
+	}
+};
+e([n()], m.prototype, "slot", void 0), m = e([t()], m);
+//#endregion
+export { d as Card, p as CardContent, m as CardFooter, f as CardHeader };
+
+//# sourceMappingURL=card2.js.map

package/dist/card/card2.js.map

@@ -0,0 +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 * @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 * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - default slot\n * @slot title - (deprecated) Title Text\n * @slot subtitle - (deprecated) Subtitle Text\n * @slot header-action - (deprecated) Header Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --line-height\n * @cssprop --gap\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\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  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"header-action\"></slot>\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 * @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 */\n@audit()\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 * @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 */\n@audit()\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  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA0BO,IAAA,IAAA,cAAmB,EAAuC;;gBAI/C,EAAU,CAAC,EAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,CAAI;;;GAVZ,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAH3C,GAAO,CAAA,EAAA,EAAA;AAyCD,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,EAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAA;GACX;;CAID,SAAS;AACP,SAAO,CAAI;;;GAHZ,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAVZ,GAAO,CAAA,EAAA,EAAA;AAqCD,IAAA,IAAA,cAA0B,EAAW;;gBAC1B,EAAU,CAAC,EAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;;OAXd,GAAO,CAAA,EAAA,EAAA;AA4BD,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,EAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAA;GACX;;CAID,SAAS;AACP,SAAO,CAAI;;;GAHZ,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAVZ,GAAO,CAAA,EAAA,EAAA"}

package/dist/card/define.d.ts

@@ -0,0 +1,9 @@
+import { Card, CardHeader, CardContent, CardFooter } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-card': Card;
+        'nve-card-header': CardHeader;
+        'nve-card-content': CardContent;
+        'nve-card-footer': CardFooter;
+    }
+}

package/dist/card/define.js

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

package/dist/card/define.js.map

@@ -0,0 +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/core/internal';\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,EAAK,EACZ,EAAO,EAAW,EAClB,EAAO,EAAY,EACnB,EAAO,EAAW"}

package/dist/card/index.d.ts

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

package/dist/card/index.js

@@ -0,0 +1,2 @@
+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 };

package/dist/chat-message/chat-message.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import { Color } from '../internal';
+/**
+ * @element nve-chat-message
+ * @description A chat message component displays a text message within a conversation, sent between users or bots
+ * @since 1.25.0
+ * @entrypoint \@nvidia-elements/core/chat-message
+ * @slot - default slot for content
+ * @slot prefix - for avatar/img content
+ * @slot suffix - for avatar/img content
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --border-radius
+ * @cssprop --font-size
+ * @cssprop --line-height
+ * @cssprop --overflow
+ * @cssprop --top-offset - Vertical offset for aligning message with avatar
+
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ * @stable false
+ */
+export declare class ChatMessage extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    container: 'flat';
+    color: Color;
+    arrowPosition: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

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

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

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

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

@@ -0,0 +1,75 @@
+{
+  "element": "nve-chat-message",
+  "entrypoint": "@nvidia-elements/core/chat-message/chat-message.examples.json",
+  "items": [
+    {
+      "id": "core-chat-message_default",
+      "name": "Default",
+      "template": "<nve-chat-message> Your deployment completed successfully. All services are running as expected. </nve-chat-message>\n",
+      "summary": "Basic chat message with default styling and behavior. Use this for simple text-based chat interactions.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-chat-message_arrow-position",
+      "name": "ArrowPosition",
+      "template": "<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\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"top-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
+      "summary": "Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-chat-message_flat",
+      "name": "Flat",
+      "template": "<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  <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\n    successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n",
+      "summary": "Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-chat-message_prefix-suffix",
+      "name": "PrefixSuffix",
+      "template": "<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\"> import '@nvidia-elements/code/codeblock/define.js'; </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
+      "summary": "Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-chat-message_codeblock",
+      "name": "Codeblock",
+      "template": "<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",
+      "summary": "Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-chat-message_top-offset",
+      "name": "TopOffset",
+      "template": "<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",
+      "summary": "Custom top offset positioning for precise arrow placement. Useful when you need fine-tuned control over the chat bubble positioning.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-chat-message_color",
+      "name": "Color",
+      "template": "<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\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-slate\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-denim\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-indigo\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-cobalt\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-sky\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-cyan\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-mint\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-seafoam\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-grass\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-amber\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"orange-pumpkin\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"red-tomato\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-magenta\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-plum\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-violet\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-lavender\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-rose\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-jade\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"lime-pear\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-nova\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"brand-green\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
+      "summary": "All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.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
+var l = class extends o {
+	static {
+		this.styles = r([i, n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-chat-message",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return s`<div internal-host><slot name="prefix"></slot><slot part="_message"></slot><slot name="suffix"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this, a);
+	}
+};
+t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "container", void 0), t([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "color", void 0), t([c({
+	type: String,
+	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

@@ -0,0 +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 * @since 1.25.0\n * @entrypoint \\@nvidia-elements/core/chat-message\n * @slot - default slot for 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\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n * @stable false\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  @property({ type: String, reflect: true }) container: 'flat';\n\n  @property({ type: String, reflect: true }) color: Color;\n\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":";;;;;;;;AAgCA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,GAAQ,EAAiB,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;GACV;;CAYD,SAAS;AACP,SAAO,CAAI;;CASb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa;;;GAtBxC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAEzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAEzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAkB,CAAC,CAAA,EAAA,EAAA,WAAA,iBAAA,KAAA,EAAA"}

package/dist/chat-message/define.d.ts

@@ -0,0 +1,6 @@
+import { ChatMessage } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-chat-message': ChatMessage;
+    }
+}

package/dist/chat-message/define.js

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

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

@@ -0,0 +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/core/internal';\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,EAAY"}

package/dist/chat-message/index.d.ts

@@ -0,0 +1 @@
+export * from './chat-message.js';

package/dist/chat-message/index.js

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

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

@@ -0,0 +1,17 @@
+import { CSSResult } from 'lit';
+import { ControlGroup } from '../forms';
+/**
+ * @element nve-checkbox-group
+ * @description Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/checkbox
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+ */
+export declare class CheckboxGroup extends ControlGroup {
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+}

package/dist/checkbox/checkbox-group.js

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

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

package/dist/checkbox/checkbox-group2.js

@@ -0,0 +1,28 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as t } from "../internal/controllers/audit.controller.js";
+import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import { ControlGroup as i } from "../forms/control-group/control-group2.js";
+import a from "./checkbox-group.js";
+//#region src/checkbox/checkbox-group.ts
+var o = class extends i {
+	static {
+		this.styles = r([...i.styles, a]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-checkbox-group",
+			version: "0.0.3",
+			children: [
+				"label",
+				"nve-control-message",
+				"nve-checkbox"
+			]
+		};
+	}
+};
+o = e([t(), n()], o);
+//#endregion
+export { o as CheckboxGroup };
+
+//# sourceMappingURL=checkbox-group2.js.map

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

@@ -0,0 +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,IAAA,IAAA,cAA4B,EAAa;;gBACjB,EAAU,CAAC,GAAG,EAAa,QAAQ,EAAO,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;IAAe;GAC3D;;;OATF,GAAO,EACP,GAAS,CAAA,EAAA,EAAA"}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,30 @@
+import { CSSResult } from 'lit';
+import { Control } from '../forms';
+/**
+ * @element nve-checkbox
+ * @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.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/checkbox
+ * @cssprop --cursor
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --border-width
+ * @cssprop --border-radius
+ * @cssprop --border-color
+ * @cssprop --background
+ * @cssprop --check-color
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+ */
+export declare class Checkbox extends Control {
+    protected nveControl: string;
+    static styles: CSSResult[];
+    /** @private - disable for inline control */
+    fitText: boolean;
+    /** @private - disable for inline control */
+    fitContent: boolean;
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+}

package/dist/checkbox/checkbox.examples.js

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

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

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