@nvidia-elements/core 0.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.examples.js","names":[],"sources":["../../src/button-group/button-group.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Button Group',\n  component: 'nve-button-group',\n};\n\n/**\n * @summary Basic button group for organizing related actions into a unified control with connected visual appearance.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with single selection behavior for mutually exclusive options like view modes or formatting.\n */\nexport const SingleSelect = {\n  render: () => html`\n  <nve-button-group behavior-select=\"single\">\n    <nve-icon-button pressed container=\"flat\" icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with multi-selection behavior for toggling many options simultaneously like text formatting.\n */\nexport const MultiSelect = {\n  render: () => html`\n    <nve-button-group behavior-select=\"multi\">\n      <nve-icon-button pressed container=\"flat\" icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button pressed container=\"flat\" icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group in disabled state for indicating unavailable actions or read-only contexts.\n */\nexport const Disabled = {\n  render: () => html`\n    <nve-button-group container=\"rounded\">\n      <nve-button disabled>button</nve-button>\n      <nve-divider orientation=\"vertical\"></nve-divider>\n      <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\" disabled></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with flat container styling for minimal visual appearance and reduced emphasis.\n */\nexport const Flat = {\n  render: () => html`\n    <nve-button-group container=\"flat\">\n      <nve-icon-button pressed icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group for clustering related action buttons with cohesive visual treatment.\n */\nexport const Action = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Split button groups with different interaction styles for primary actions with dropdown alternatives.\n */\nexport const ActionSplit = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group>\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Split button groups with rounded container styling for softer visual appearance and modern aesthetics.\n */\nexport const ActionSplitRounded = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group container=\"rounded\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\" interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\"  interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Rounded button group with single selection for segmented controls and filter options with pill-style buttons.\n */\nexport const Rounded = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-button pressed>All Time</nve-button>\n      <nve-button>30 Days</nve-button>\n      <nve-button>90 Days</nve-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Rounded button group with icon buttons for compact view switchers and mode toggles.\n */\nexport const RoundedIcon = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"image\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.\n */\nexport const OrientationVertical = {\n  render: () => html`\n    <nve-button-group orientation=\"vertical\">\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,105 @@
+{
+  "element": "nve-button-group",
+  "entrypoint": "@nvidia-elements/core/button-group/button-group.examples.json",
+  "items": [
+    {
+      "id": "core-button-group_default",
+      "name": "Default",
+      "template": "<nve-button-group>\n  <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Basic button group for organizing related actions into a unified control with connected visual appearance.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_single-select",
+      "name": "SingleSelect",
+      "template": "<nve-button-group behavior-select=\"single\">\n  <nve-icon-button pressed container=\"flat\" icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"bars-4\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group with single selection behavior for mutually exclusive options like view modes or formatting.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_multi-select",
+      "name": "MultiSelect",
+      "template": "<nve-button-group behavior-select=\"multi\">\n  <nve-icon-button pressed container=\"flat\" icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n  <nve-icon-button pressed container=\"flat\" icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group with multi-selection behavior for toggling many options simultaneously like text formatting.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_disabled",
+      "name": "Disabled",
+      "template": "<nve-button-group container=\"rounded\">\n  <nve-button disabled>button</nve-button>\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\" disabled></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group in disabled state for indicating unavailable actions or read-only contexts.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_flat",
+      "name": "Flat",
+      "template": "<nve-button-group container=\"flat\">\n  <nve-icon-button pressed icon-name=\"split-vertical\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n  <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group with flat container styling for minimal visual appearance and reduced emphasis.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_action",
+      "name": "Action",
+      "template": "<nve-button-group>\n  <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group for clustering related action buttons with cohesive visual treatment.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_action-split",
+      "name": "ActionSplit",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button-group>\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group interaction=\"emphasis\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group interaction=\"destructive\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n</div>\n",
+      "summary": "Split button groups with different interaction styles for primary actions with dropdown alternatives.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_action-split-rounded",
+      "name": "ActionSplitRounded",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button-group container=\"rounded\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group container=\"rounded\" interaction=\"emphasis\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n\n  <nve-button-group container=\"rounded\" interaction=\"destructive\">\n    <nve-button>button</nve-button>\n    <nve-divider orientation=\"vertical\"></nve-divider>\n    <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n  </nve-button-group>\n</div>\n",
+      "summary": "Split button groups with rounded container styling for softer visual appearance and modern aesthetics.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_rounded",
+      "name": "Rounded",
+      "template": "<nve-button-group container=\"rounded\" behavior-select=\"single\">\n  <nve-button pressed>All Time</nve-button>\n  <nve-button>30 Days</nve-button>\n  <nve-button>90 Days</nve-button>\n</nve-button-group>\n",
+      "summary": "Rounded button group with single selection for segmented controls and filter options with pill-style buttons.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_rounded-icon",
+      "name": "RoundedIcon",
+      "template": "<nve-button-group container=\"rounded\" behavior-select=\"single\">\n  <nve-icon-button icon-name=\"table\"></nve-icon-button>\n  <nve-icon-button icon-name=\"image\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Rounded button group with icon buttons for compact view switchers and mode toggles.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button-group_orientation-vertical",
+      "name": "OrientationVertical",
+      "template": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n",
+      "summary": "Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/button-group/button-group.global.css?inline
+var e = "@supports (position-anchor: --selected){nve-button-group{&:has(>:state(pressed)):not(:has(>:state(pressed)~:state(pressed)),:has(>[container]),:has(>[interaction])){--indicator-background: var(--nve-sys-support-accent-color);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);height:anchor-size(height);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:anchor(top);left:anchor(left);z-index:0}&[orientation=vertical]:after{transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100)}&[container=rounded]:after{--indicator-border-radius: var(--nve-ref-border-radius-full)}>nve-button,>nve-icon-button{&:state(pressed){--background: transparent;anchor-name:--selected;z-index:1}}}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button-group.global.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.global.js","names":[],"sources":["../../src/button-group/button-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n@supports (position-anchor: --selected) {\n  nve-button-group,\n  nve-button-group {\n    /* prettier-ignore */\n    &:has(> :state(pressed)):not(:has(> :state(pressed) ~ :state(pressed)), :has(> [container]), :has(> [interaction])) {\n      --indicator-background: var(--nve-sys-support-accent-color);\n      --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n      &::after {\n        background: var(--indicator-background);\n        border-radius: var(--indicator-border-radius);\n        position: fixed;\n        display: block;\n        content: '';\n        width: anchor-size(width);\n        height: anchor-size(height);\n        transition:\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n        position-anchor: --selected;\n        top: anchor(top);\n        left: anchor(left);\n        z-index: 0;\n      }\n\n      &[orientation='vertical']::after {\n        transition:\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n      }\n\n      &[container='rounded']::after {\n        --indicator-border-radius: var(--nve-ref-border-radius-full);\n      }\n\n      > nve-button,\n      > nve-button,\n      > nve-icon-button,\n      > nve-icon-button {\n        &:state(pressed) {\n          --background: transparent;\n          anchor-name: --selected;\n          z-index: 1;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/button-group/button-group.js

@@ -0,0 +1,6 @@
+//#region src/button-group/button-group.css?inline
+var e = ":host{--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--background: var(--nve-sys-interaction-background);--border-radius: var(--nve-ref-border-radius-sm);--padding: var(--nve-ref-space-xxs);--gap: var(--nve-ref-space-xxxs);--width: fit-content;--height: fit-content;width:var(--width);height:var(--height)}[internal-host]{background:var(--background);border-radius:var(--border-radius);padding:var(--padding);gap:var(--gap);overflow:hidden;display:flex;height:100%;align-items:center}::slotted(nve-button),::slotted(nve-icon-button){--height: var(--nve-sys-interaction-field-height);--border-radius: var(--nve-ref-border-radius-sm)}::slotted(nve-icon-button){--width: var(--nve-sys-interaction-field-height)}::slotted(nve-divider){margin-block-start:calc(-1 * var(--padding));height:calc(100% + var(--padding));--color: color-mix(in oklab, var(--nve-sys-interaction-background) 100%, var(--nve-sys-interaction-color) 50%)}:host([container=\"flat\"]){--background: transparent}:host([container=\"rounded\"]){--border-radius: var(--nve-ref-border-radius-full)}:host([container=\"rounded\"]:not(:state(split))) ::slotted(nve-button),:host([container=\"rounded\"]:not(:state(split))) ::slotted(nve-icon-button){--border-radius: var(--nve-ref-border-radius-full)}:host([orientation=\"vertical\"]){--gap: var(--nve-ref-space-xs)}:host([orientation=\"vertical\"]) [internal-host]{flex-direction:column}:host([interaction=\"emphasize\"]) ::slotted(nve-divider),:host([interaction=\"emphasis\"]) ::slotted(nve-divider){--color: color-mix( in oklab, var(--nve-sys-interaction-emphasis-background) 100%, var(--nve-sys-interaction-emphasis-color) 50% )}:host([interaction=\"destructive\"]) ::slotted(nve-divider){--color: color-mix( in oklab, var(--nve-sys-interaction-destructive-background) 100%, var(--nve-sys-interaction-destructive-color) 50% )}:host(:state(split)){--padding: 0;--gap: 0}:host(:state(split)) ::slotted(nve-button){--border-radius: var(--nve-ref-border-radius-none)}:host(:state(split)) ::slotted(nve-icon-button){--border-radius: var(--nve-ref-border-radius-none)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../src/button-group/button-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  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --background: var(--nve-sys-interaction-background);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --padding: var(--nve-ref-space-xxs);\n  --gap: var(--nve-ref-space-xxxs);\n  --width: fit-content;\n  --height: fit-content;\n  width: var(--width);\n  height: var(--height);\n}\n\n[internal-host] {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  gap: var(--gap);\n  overflow: hidden;\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n::slotted(nve-button),\n::slotted(nve-icon-button),\n::slotted(nve-button),\n::slotted(nve-icon-button) {\n  --height: var(--nve-sys-interaction-field-height);\n  --border-radius: var(--nve-ref-border-radius-sm);\n}\n\n::slotted(nve-icon-button) {\n  --width: var(--nve-sys-interaction-field-height);\n}\n\n::slotted(nve-divider),\n::slotted(nve-divider) {\n  margin-block-start: calc(-1 * var(--padding));\n  height: calc(100% + var(--padding));\n  --color: color-mix(in oklab, var(--nve-sys-interaction-background) 100%, var(--nve-sys-interaction-color) 50%);\n}\n\n:host([container='flat']) {\n  --background: transparent;\n}\n\n:host([container='rounded']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([container='rounded']:not(:state(split))) ::slotted(nve-button),\n:host([container='rounded']:not(:state(split))) ::slotted(nve-icon-button),\n:host([container='rounded']:not(:state(split))) ::slotted(nve-button),\n:host([container='rounded']:not(:state(split))) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([orientation='vertical']) {\n  --gap: var(--nve-ref-space-xs);\n}\n\n:host([orientation='vertical']) [internal-host] {\n  flex-direction: column;\n}\n\n:host([interaction='emphasize']) ::slotted(nve-divider), /* deprecated */\n:host([interaction='emphasis']) ::slotted(nve-divider),\n:host([interaction='emphasis']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-emphasis-background) 100%,\n    var(--nve-sys-interaction-emphasis-color) 50%\n  );\n}\n\n:host([interaction='destructive']) ::slotted(nve-divider),\n:host([interaction='destructive']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-destructive-background) 100%,\n    var(--nve-sys-interaction-destructive-color) 50%\n  );\n}\n\n:host(:state(split)) {\n  --padding: 0;\n  --gap: 0;\n}\n\n:host(:state(split)) ::slotted(nve-button),\n:host(:state(split)) ::slotted(nve-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n\n:host(:state(split)) ::slotted(nve-icon-button),\n:host(:state(split)) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n"],"mappings":""}

package/dist/button-group/button-group2.js

@@ -0,0 +1,75 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { audit as r } from "../internal/controllers/audit.controller.js";
+import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
+import { useStyles as a } from "../internal/styles/index.js";
+import o from "./button-group.js";
+import s from "./button-group.global.js";
+import { LitElement as c, html as l } from "lit";
+import { property as u } from "lit/decorators/property.js";
+import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
+//#region src/button-group/button-group.ts
+var f = class extends c {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal";
+	}
+	get keynavListConfig() {
+		return {
+			items: this.#e,
+			layout: this.orientation
+		};
+	}
+	static {
+		this.styles = a([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-button-group",
+			version: "0.0.0",
+			children: [
+				"nve-button",
+				"nve-icon-button",
+				"nve-divider"
+			]
+		};
+	}
+	get #e() {
+		return [...this.iconButtons, ...this.buttons];
+	}
+	render() {
+		return l`<div internal-host><slot @slotchange="${this.#t}"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this), e(this, s), this._internals.role = "group", this.addEventListener("click", (e) => this.#n(e.target));
+	}
+	updated(e) {
+		super.updated(e), this.#t();
+	}
+	#t() {
+		this.container === "flat" && this.#e.forEach((e) => e.container = "flat"), this.interaction && this.#e.forEach((e) => e.interaction = this.interaction), this.dividers.length ? this._internals.states.add("split") : this._internals.states.delete("split");
+	}
+	#n(e) {
+		e.matches?.("nve-button, nve-button, nve-icon-button, nve-icon-button") && (this.behaviorSelect === "single" ? (this.#e.forEach((e) => e.pressed = !1), e.pressed = !0) : this.behaviorSelect === "multi" && (e.pressed = !e.pressed));
+	}
+};
+n([u({
+	type: String,
+	attribute: "behavior-select"
+})], f.prototype, "behaviorSelect", void 0), n([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "container", void 0), n([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "orientation", void 0), n([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "interaction", void 0), n([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "size", void 0), n([d({ selector: "nve-divider, nve-divider" })], f.prototype, "dividers", void 0), n([d({ selector: "nve-icon-button, nve-icon-button" })], f.prototype, "iconButtons", void 0), n([d({ selector: "nve-button, nve-button" })], f.prototype, "buttons", void 0), f = n([r(), i()], f);
+//#endregion
+export { f as ButtonGroup };
+
+//# sourceMappingURL=button-group2.js.map

package/dist/button-group/button-group2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group2.js","names":["#buttons","#syncStyleStates","#selectButton"],"sources":["../../src/button-group/button-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport { attachInternals, keyNavigationList, useStyles, audit, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group is a control that enables users to choose between two or more distinct mutually exclusive options.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` or `nve-icon-button`\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role\n */\n@audit()\n@keyNavigationList<ButtonGroup>()\nexport class ButtonGroup extends LitElement {\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.#buttons,\n      layout: this.orientation\n    };\n  }\n\n  /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */\n  @property({ type: String, attribute: 'behavior-select' }) behaviorSelect: 'single' | 'multi';\n\n  /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'rounded';\n\n  /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  /** Determines size of button */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button-group',\n    version: '0.0.0',\n    children: ['nve-button', 'nve-icon-button', 'nve-divider']\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements({ selector: 'nve-divider, nve-divider' }) private dividers!: Divider[];\n\n  @queryAssignedElements({ selector: 'nve-icon-button, nve-icon-button' }) private iconButtons!: IconButton[];\n\n  @queryAssignedElements({ selector: 'nve-button, nve-button' }) private buttons!: Button[];\n\n  get #buttons() {\n    return [...this.iconButtons, ...this.buttons];\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncStyleStates}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'group';\n    this.addEventListener('click', e => this.#selectButton(e.target as HTMLElement & { pressed?: boolean }));\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#syncStyleStates();\n  }\n\n  #syncStyleStates() {\n    if (this.container === 'flat') {\n      this.#buttons.forEach(btn => (btn.container = 'flat'));\n    }\n\n    if (this.interaction) {\n      this.#buttons.forEach(btn => (btn.interaction = this.interaction));\n    }\n\n    this.dividers.length ? this._internals.states.add('split') : this._internals.states.delete('split');\n  }\n\n  #selectButton(button: HTMLElement & { pressed?: boolean }) {\n    if (!button.matches?.('nve-button, nve-button, nve-icon-button, nve-icon-button')) {\n      return;\n    }\n\n    if (this.behaviorSelect === 'single') {\n      this.#buttons.forEach(i => (i.pressed = false));\n      button.pressed = true;\n    } else if (this.behaviorSelect === 'multi') {\n      button.pressed = !button.pressed;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAgCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C;;CAdrF,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,MAAA;GACP,QAAQ,KAAK;GACd;;;gBAkBa,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;;GAC7C;;CAWD,KAAA,IAAe;AACb,SAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,QAAQ;;CAG/C,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAsB;;CAKhD,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,UAAS,MAAK,MAAA,EAAmB,EAAE,OAA8C,CAAC;;CAG1G,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAuB;;CAGzB,KAAmB;AASjB,EARI,KAAK,cAAc,UACrB,MAAA,EAAc,SAAQ,MAAQ,EAAI,YAAY,OAAQ,EAGpD,KAAK,eACP,MAAA,EAAc,SAAQ,MAAQ,EAAI,cAAc,KAAK,YAAa,EAGpE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,QAAQ,GAAG,KAAK,WAAW,OAAO,OAAO,QAAQ;;CAGrG,GAAc,GAA6C;AACpD,IAAO,UAAU,2DAA2D,KAI7E,KAAK,mBAAmB,YAC1B,MAAA,EAAc,SAAQ,MAAM,EAAE,UAAU,GAAO,EAC/C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;;;GA7E5B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGxD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAazC,EAAsB,EAAE,UAAU,4BAA4B,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAE/D,EAAsB,EAAE,UAAU,oCAAoC,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAEvE,EAAsB,EAAE,UAAU,0BAA0B,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAzC/D,GAAO,EACP,GAAgC,CAAA,EAAA,EAAA"}

package/dist/button-group/define.d.ts

@@ -0,0 +1,6 @@
+import { ButtonGroup } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-button-group': ButtonGroup;
+    }
+}

package/dist/button-group/define.js

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

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

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

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

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

package/dist/button-group/index.js

@@ -0,0 +1,2 @@
+import { ButtonGroup as e } from "./button-group2.js";
+export { e as ButtonGroup };

package/dist/card/card-content.js

@@ -0,0 +1,6 @@
+//#region src/card/card-content.css?inline
+var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);padding:var(--padding);color:var(--color);flex-grow:1;contain:initial}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=card-content.js.map

package/dist/card/card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.js","names":[],"sources":["../../src/card/card-content.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  padding: var(--padding);\n  color: var(--color);\n  flex-grow: 1;\n  contain: initial;\n}\n"],"mappings":""}

package/dist/card/card-footer.js

@@ -0,0 +1,6 @@
+//#region src/card/card-footer.css?inline
+var e = ":host{--padding: var(--nve-ref-size-400);--border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);contain:none}footer[internal-host]{padding:var(--padding);border-top:var(--border-top);color:var(--color);display:flex;justify-content:space-between;align-items:center}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=card-footer.js.map

package/dist/card/card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.js","names":[],"sources":["../../src/card/card-footer.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-400);\n  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: none;\n}\n\nfooter[internal-host] {\n  padding: var(--padding);\n  border-top: var(--border-top);\n  color: var(--color);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n"],"mappings":""}

package/dist/card/card-header.js

@@ -0,0 +1,6 @@
+//#region src/card/card-header.css?inline
+var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--line-height: 1em;--gap: var(--nve-ref-space-xs);contain:none}[internal-host]{padding:var(--padding);border-bottom:var(--border-bottom);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center}.content{display:flex;flex-direction:column;gap:var(--gap);width:100%}::slotted([slot=\"title\"]){margin:0;font-size:var(--nve-ref-font-size-200);font-weight:var(--nve-ref-font-weight-bold)}::slotted([slot=\"subtitle\"]){margin:0;font-size:var(--nve-ref-font-size-100);font-weight:var(--nve-ref-font-weight-regular)}::slotted(nve-tabs){margin-block-end:calc(-1 * var(--padding))}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=card-header.js.map

package/dist/card/card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.js","names":[],"sources":["../../src/card/card-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --line-height: 1em;\n  --gap: var(--nve-ref-space-xs);\n  contain: none;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap);\n  width: 100%;\n}\n\n::slotted([slot='title']) {\n  margin: 0;\n  font-size: var(--nve-ref-font-size-200);\n  font-weight: var(--nve-ref-font-weight-bold);\n}\n\n::slotted([slot='subtitle']) {\n  margin: 0;\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-regular);\n}\n\n::slotted(nve-tabs),\n::slotted(nve-tabs) {\n  margin-block-end: calc(-1 * var(--padding));\n}\n"],"mappings":""}

package/dist/card/card.d.ts

@@ -0,0 +1,88 @@
+import { LitElement } from 'lit';
+import { ContainerElement } from '../internal';
+/**
+ * @element nve-card
+ * @description A container for content representing a single entity.
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/card
+ * @slot - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --box-shadow
+ * @cssprop --border
+ * @aria https://github.com/w3c/aria-practices/issues
+ */
+export declare class Card extends LitElement implements ContainerElement {
+    /** flat (embed into parent container) or full (width of viewport) */
+    container?: 'flat' | 'full';
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * @element nve-card-header
+ * @description Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/card
+ * @slot - default slot
+ * @slot title - (deprecated) Title Text
+ * @slot subtitle - (deprecated) Subtitle Text
+ * @slot header-action - (deprecated) Header Action Button
+ * @cssprop --padding
+ * @cssprop --border-bottom
+ * @cssprop --line-height
+ * @cssprop --gap
+ * @aria https://github.com/w3c/aria-practices/issues
+ */
+export declare class CardHeader extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    slot: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * @element nve-card-content
+ * @description Contains the primary body content of a card, providing a structured region for the main information or media.
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/card
+ * @slot - This is a default/unnamed slot for card content
+ * @cssprop --padding
+ * @aria https://github.com/w3c/aria-practices/issues
+ */
+export declare class CardContent extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * @element nve-card-footer
+ * @description Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/card
+ * @slot - This is a default/unnamed slot for card footer content
+ * @cssprop --padding
+ * @cssprop --border-top
+ * @aria https://github.com/w3c/aria-practices/issues
+ */
+export declare class CardFooter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    slot: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/card/card.examples.js

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

package/dist/card/card.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-card container=\"full\">\n    <nve-card-content>\n      <p nve-text=\"body\">container full</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/card/card.examples.json

@@ -0,0 +1,98 @@
+{
+  "element": "nve-card",
+  "entrypoint": "@nvidia-elements/core/card/card.examples.json",
+  "items": [
+    {
+      "id": "core-card_default",
+      "name": "Default",
+      "template": "<nve-card>\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n",
+      "summary": "Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_actions",
+      "name": "Actions",
+      "template": "<nve-card>\n  <nve-card-header>\n    <div nve-layout=\"column gap:xs\">\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>\n      <nve-button>action</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n",
+      "summary": "Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_media-card",
+      "name": "MediaCard",
+      "template": "<div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
+      "summary": "Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_with-divider",
+      "name": "WithDivider",
+      "template": "<nve-card style=\"width: 400px; height: 300px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n  <nve-divider></nve-divider>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n</nve-card>\n",
+      "summary": "Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_description-list",
+      "name": "DescriptionList",
+      "template": "<nve-card style=\"width: 650px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <dl nve-layout=\"grid gap:lg\">\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the\n        bow (the front of the vessel).\n      </dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing\n        towards the bow (the front of the vessel).\n      </dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
+      "summary": "Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_with-tabs",
+      "name": "WithTabs",
+      "template": "<nve-card style=\"width: 400px; height: 200px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm bold\">Heading</h2>\n    <nve-tabs>\n      <nve-tabs-item selected>tab 1</nve-tabs-item>\n      <nve-tabs-item>tab 2</nve-tabs-item>\n      <nve-tabs-item>tab 3</nve-tabs-item>\n    </nve-tabs>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n</nve-card>\n",
+      "summary": "Card with integrated tabs in the header for multi-panel content within a single card interface.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_container-full",
+      "name": "ContainerFull",
+      "template": "<nve-card container=\"full\">\n  <nve-card-content>\n    <p nve-text=\"body\">container full</p>\n  </nve-card-content>\n</nve-card>\n",
+      "summary": "Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_container-flat",
+      "name": "ContainerFlat",
+      "template": "<nve-card container=\"flat\">\n  <nve-card-content>\n    <p nve-text=\"body\">container flat</p>\n  </nve-card-content>\n</nve-card>\n",
+      "summary": "Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-card_audit",
+      "name": "Audit",
+      "template": "<!-- invalid padding usage -->\n<nve-card nve-layout=\"pad:md\"></nve-card>\n<!-- invalid parent element -->\n<nve-card-header> card header </nve-card-header>\n<nve-card-content> card content </nve-card-content>\n<nve-card-footer> card footer </nve-card-footer>\n",
+      "summary": "Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-card_overflow-content",
+      "name": "OverflowContent",
+      "template": "<nve-card style=\"height: 250px; width: 400px\">\n  <nve-card-header>\n    <h2 nve-text=\"heading sm medium\">Heading</h2>\n  </nve-card-header>\n  <nve-card-content>\n    <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n    <p nve-text=\"body\">card content</p>\n  </nve-card-content>\n  <nve-card-footer>\n    <p nve-text=\"body\">card footer</p>\n  </nve-card-footer>\n</nve-card>\n",
+      "summary": "Card with overflow content, where the card body scrolls when content exceeds the card height.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/card/card.js

@@ -0,0 +1,6 @@
+//#region src/card/card.css?inline
+var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: var(--nve-ref-border-radius-lg);--box-shadow: var(--nve-ref-shadow-100);--border-bottom: none;--border: 0;border-radius:var(--border-radius);box-shadow:var(--box-shadow);border-bottom:var(--border-bottom);background:var(--background);border:var(--border);color:var(--color);display:flex;flex-direction:column;align-items:stretch;justify-content:start;overflow:hidden;contain:none;width:stretch}[internal-host]{display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%}:host([container=\"full\"]){--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--border-radius: 0}:host([container=\"flat\"]){--nve-sys-interaction-background: unset;--nve-sys-interaction-field-background: unset;--background: transparent;--border-bottom: none;--border-radius: 0;--box-shadow: none}slot:not([name]){scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width);display:block;width:100%;height:100%;overflow:auto}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=card.js.map

package/dist/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --border-bottom: none;\n  --border: 0;\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  border-bottom: var(--border-bottom);\n  background: var(--background);\n  border: var(--border);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  contain: none;\n  width: stretch;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n}\n\n:host([container='full']) {\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: 0;\n}\n\n:host([container='flat']) {\n  --nve-sys-interaction-background: unset;\n  --nve-sys-interaction-field-background: unset;\n  --background: transparent;\n  --border-bottom: none;\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\nslot:not([name]) {\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n"],"mappings":""}