@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/pagination/pagination.examples.json

@@ -0,0 +1,154 @@
+{
+  "element": "nve-pagination",
+  "entrypoint": "@nvidia-elements/core/pagination/pagination.examples.json",
+  "items": [
+    {
+      "id": "core-pagination_default",
+      "name": "Default",
+      "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  pagination.addEventListener(\"change\", (e) => console.log(e.target.value));\n</script>\n",
+      "summary": "Basic pagination component with default styling and behavior.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_skippable",
+      "name": "Skippable",
+      "template": "<nve-pagination value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
+      "summary": "Pagination with skip buttons to navigate to first and last pages quickly.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_disabled",
+      "name": "Disabled",
+      "template": "<nve-pagination disabled value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
+      "summary": "Disabled pagination component that prevents user interaction.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_flat",
+      "name": "Flat",
+      "template": "<nve-pagination container=\"flat\" value=\"1\" items=\"100\" step=\"10\" skippable></nve-pagination>\n",
+      "summary": "Pagination with flat container styling for a more minimal appearance.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_inline",
+      "name": "Inline",
+      "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
+      "summary": "Inline pagination layout that fits inline with content.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_disable-step",
+      "name": "DisableStep",
+      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"10\"></nve-pagination>\n",
+      "summary": "Inline pagination with disabled step selector to prevent page size changes.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_forms",
+      "name": "Forms",
+      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
+      "summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_no-items-count",
+      "name": "NoItemsCount",
+      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
+      "summary": "Pagination without items count display, useful when total count is unknown.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_large-values",
+      "name": "LargeValues",
+      "template": "<nve-pagination container=\"inline\" value=\"1\" items=\"10000\" step=\"100\"></nve-pagination>\n",
+      "summary": "Pagination handling large datasets with higher step values for efficient navigation.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_dynamic-items",
+      "name": "DynamicItems",
+      "template": "<nve-pagination disable-step container=\"inline\" value=\"1\" items=\"100\" step=\"20\"></nve-pagination>\n<script type=\"module\">\n  const pagination = document.querySelector(\"nve-pagination\");\n  let items = loadItems();\n  pagination.addEventListener(\"last-page\", async () => {\n    items = [...items, ...loadItems()];\n    pagination.items = items.length;\n  });\n  function loadItems() {\n    return new Array(100).fill(\"\");\n  }\n</script>\n",
+      "summary": "If the upper bound of items is unknown, use the `last-page` event to determine when to load more data and update the pagination with the latest total of items.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-pagination_dynamic-step-size",
+      "name": "DynamicStepSize",
+      "template": "<!-- javascript property binding -->\n<nve-pagination value=\"1\" items=\"10000\" step=\"100\" step-sizes=\"[100, 500, 1000]\"></nve-pagination>\n",
+      "summary": "When a custom step exists, the select options dynamically adapt to the step and append to the default option list.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_suffix-label",
+      "name": "SuffixLabel",
+      "template": "<nve-pagination value=\"1\" items=\"50000\" step=\"100\">\n  <span slot=\"suffix-label\">of 50,000+</span>\n</nve-pagination>\n",
+      "summary": "Use the `suffix-label` slot to customize the \"of total\" label when dealing with approximated totals from API responses. This is useful when the API returns a limited count but indicates there are more items available.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-pagination_page-list-pattern",
+      "name": "PageListPattern",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-button disabled container=\"flat\"\n    ><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button\n  >\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
+      "summary": "Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_skip-pattern",
+      "name": "SkipPattern",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"arrow-stop\"\n    direction=\"left\"\n    aria-label=\"first\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n  <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
+      "summary": "Enhanced pagination pattern with first/last page buttons and numbered page navigation.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_vertical-pattern",
+      "name": "VerticalPattern",
+      "template": "<nve-toolbar container=\"inset\">\n  <label nve-text=\"body muted sm\">1 of 13</label>\n  <nve-icon-button\n    container=\"flat\"\n    size=\"sm\"\n    icon-name=\"chevron\"\n    direction=\"up\"\n    aria-label=\"previous\"\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
+      "summary": "Vertical pagination pattern with up/down navigation arrows for compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-pagination_custom-select-pattern",
+      "name": "CustomSelectPattern",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-select style=\"--width: 80px\">\n    <select aria-label=\"page size\">\n      <option value=\"10\">1-10</option>\n    </select>\n  </nve-select>\n  <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"chevron\"\n    direction=\"left\"\n    aria-label=\"previous\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
+      "summary": "Custom pagination with select dropdown for page size and navigation arrows.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

package/dist/pagination/pagination.js

@@ -0,0 +1,6 @@
+//#region src/pagination/pagination.css?inline
+var e = ":host{--font-size: var(--nve-ref-font-size-100);width:fit-content;display:inline-flex;contain:initial}[internal-host]{display:flex;align-items:center}label{color:var(--nve-sys-text-muted-color);font-size:var(--nve-ref-font-size-100);margin-inline:var(--nve-ref-space-xxs);white-space:nowrap}.select-label{background:var(--nve-sys-interaction-field-background);color:var(--nve-sys-interaction-field-color);padding:0 var(--nve-ref-size-200);font-size:var(--font-size);position:absolute;inset:var(--nve-ref-size-50);display:flex;place-items:center;pointer-events:none;text-wrap:nowrap;width:fit-content}:host([container=\"flat\"]) select,:host([container=\"inline\"]) select{opacity:0}:host([container=\"flat\"]) .select-label,:host([container=\"inline\"]) .select-label{background:transparent}:host([container=\"inline\"]) select{opacity:0}:host([container=\"inline\"]) nve-select{--width: fit-content;margin-inline-end:0}:host([container=\"inline\"]) label{margin-inline:0}nve-input{margin-inline-end:var(--nve-ref-space-xs);--width: fit-content}nve-select{margin-inline-end:var(--nve-ref-space-xs);--width: fit-content}nve-icon-button:state(disabled){--nve-sys-interaction-state-ratio-disabled: 0 !important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=pagination.js.map

package/dist/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/pagination/pagination.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  --font-size: var(--nve-ref-font-size-100);\n  width: fit-content;\n  display: inline-flex;\n  contain: initial;\n}\n\n[internal-host] {\n  display: flex;\n  align-items: center;\n}\n\nlabel {\n  color: var(--nve-sys-text-muted-color);\n  font-size: var(--nve-ref-font-size-100);\n  margin-inline: var(--nve-ref-space-xxs);\n  white-space: nowrap;\n}\n\n.select-label {\n  background: var(--nve-sys-interaction-field-background);\n  color: var(--nve-sys-interaction-field-color);\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  position: absolute;\n  inset: var(--nve-ref-size-50);\n  display: flex;\n  place-items: center;\n  pointer-events: none;\n  text-wrap: nowrap;\n  width: fit-content;\n}\n\n:host([container='flat']) select,\n:host([container='inline']) select {\n  opacity: 0;\n}\n\n:host([container='flat']) .select-label,\n:host([container='inline']) .select-label {\n  background: transparent;\n}\n\n:host([container='inline']) select {\n  opacity: 0;\n}\n\n:host([container='inline']) nve-select {\n  --width: fit-content;\n  margin-inline-end: 0;\n}\n\n:host([container='inline']) label {\n  margin-inline: 0;\n}\n\nnve-input {\n  margin-inline-end: var(--nve-ref-space-xs);\n  --width: fit-content;\n}\n\nnve-select {\n  margin-inline-end: var(--nve-ref-space-xs);\n  --width: fit-content;\n}\n\nnve-icon-button:state(disabled) {\n  --nve-sys-interaction-state-ratio-disabled: 0 !important;\n}\n"],"mappings":""}

package/dist/pagination/pagination2.js

@@ -0,0 +1,124 @@
+import { formatStandardNumber as e } from "../internal/utils/objects.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as r } from "../internal/controllers/i18n.controller.js";
+import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
+import { typeSSR as a } from "../internal/controllers/type-ssr.controller.js";
+import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
+import { useStyles as s } from "../internal/styles/index.js";
+import { IconButton as c } from "../icon-button/icon-button2.js";
+import { Select as l } from "../select/select2.js";
+import u from "./pagination.js";
+import { LitElement as d, html as f, nothing as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+import { FormControlMixin as h } from "@nvidia-elements/forms/mixin";
+//#region src/pagination/pagination.ts
+var g = class extends h(d) {
+	#e = new r(this);
+	static {
+		this.styles = s([u]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-pagination",
+			version: "0.0.3",
+			valueSchema: { type: "number" }
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[c.metadata.tag]: c,
+			[l.metadata.tag]: l
+		};
+	}
+	get keynavListConfig() {
+		return {
+			items: this.shadowRoot.querySelectorAll(`${c.metadata.tag}, input, select`),
+			layout: "horizontal"
+		};
+	}
+	get #t() {
+		return (this.value - 1) * this.step + this.step;
+	}
+	get #n() {
+		return this.items / this.value === this.step;
+	}
+	get #r() {
+		return this.value === 1;
+	}
+	get #i() {
+		let t = (this.value - 1) * this.step + 1, n = Math.min(this.value * this.step, this.items || Infinity);
+		return `${e(t)}-${e(n)}`;
+	}
+	get #a() {
+		return this.items ? f`<label><slot name="suffix-label">${this.i18n.of} ${e(this.items)}</slot></label>` : p;
+	}
+	get #o() {
+		return f`<nve-icon-button part="icon-button previous-icon-button" @click="${() => this.#m(this.value - 1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.previous}" container="inline" icon-name="chevron" direction="left"></nve-icon-button>`;
+	}
+	get #s() {
+		return f`<nve-icon-button part="icon-button next-icon-button" @click="${() => this.#m(this.value + 1)}" .disabled="${this.disabled || this.#t >= this.items}" .ariaLabel="${this.i18n.next}" container="inline" icon-name="chevron" direction="right"></nve-icon-button>`;
+	}
+	get #c() {
+		return f`<nve-icon-button part="icon-button start-icon-button" @click="${() => this.#m(1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.start}" container="inline" icon-name="arrow-stop" direction="left"></nve-icon-button>`;
+	}
+	get #l() {
+		return f`<nve-icon-button part="icon-button end-icon-button" @click="${() => this.#m(this.items / this.step)}" .disabled="${this.disabled || (this.value - 1) * this.step + this.step >= this.items}" .ariaLabel="${this.i18n.end}" container="inline" icon-name="arrow-stop" direction="right"></nve-icon-button>`;
+	}
+	#u;
+	get #d() {
+		return this.disableStep ? f`<label>${this.#i} </label>` : f`<nve-select part="select" .container="${this.container}"><select .ariaLabel="${this.i18n.currentPage}" @change="${(e) => this.#p(parseInt(e.target.value, 10))}" value="${this.step}" .disabled="${this.disabled || this.disableStep}">${this.stepSizes.map((e) => f`<option ?selected="${this.step === e}" value="${e}">${e}</option>`)}</select><div class="select-label">${this.#i}</div></nve-select>`;
+	}
+	render() {
+		return f`<div internal-host role="presentation">${this.skippable && this.items ? f`${this.#c} ${this.#o} ${this.#d} ${this.#a} ${this.#s} ${this.#l}` : f`${this.#d} ${this.#a} ${this.#o} ${this.#s}`}</div>`;
+	}
+	constructor() {
+		super(), this.step = 10, this.stepSizes = [
+			10,
+			20,
+			50,
+			100
+		], this.i18n = this.#e.i18n, this.value = 1;
+	}
+	async connectedCallback() {
+		super.connectedCallback(), t(this), this._internals.role = "toolbar", await this.updateComplete, this.#f();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#u?.unobserve(this);
+	}
+	#f() {
+		let e = this.shadowRoot.querySelector(".select-label"), t = this.shadowRoot.querySelector("select");
+		e && t && (this.#u = new ResizeObserver((e) => t.style.minWidth = `${e[0].contentRect.width + 36}px`), this.#u.observe(e));
+	}
+	#p(e) {
+		this.step = e, this.dispatchEvent(new CustomEvent("step-change", {
+			detail: this.step,
+			bubbles: !0,
+			composed: !0
+		})), this.#m(this.value);
+	}
+	#m(e) {
+		this.value !== e && (this.value = e, this.dispatchInputEvent(), this.dispatchChangeEvent()), this.#n && this.dispatchEvent(new CustomEvent("last-page", {
+			bubbles: !0,
+			composed: !0
+		})), this.#r && this.dispatchEvent(new CustomEvent("first-page", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+};
+n([m({ type: Number })], g.prototype, "step", void 0), n([m({ type: Array })], g.prototype, "stepSizes", void 0), n([m({ type: Number })], g.prototype, "items", void 0), n([m({ type: Boolean })], g.prototype, "skippable", void 0), n([m({
+	type: Boolean,
+	attribute: "disable-step"
+})], g.prototype, "disableStep", void 0), n([m({
+	type: String,
+	reflect: !0
+})], g.prototype, "container", void 0), n([m({ type: Object })], g.prototype, "i18n", void 0), g = n([
+	a(),
+	i(),
+	o()
+], g);
+//#endregion
+export { g as Pagination };
+
+//# sourceMappingURL=pagination2.js.map

package/dist/pagination/pagination2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination2.js","names":["#currentPage","#isLastPage","#isFirstPage","#selectLabel","#label","#previousButton","#setValue","#nextButton","#startButton","#endButton","#select","#setStep","#i18nController","#setupLabelWidth","#resizeObserver"],"sources":["../../src/pagination/pagination.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  formatStandardNumber,\n  keyNavigationList,\n  typeSSR,\n  useStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Select } from '@nvidia-elements/core/select';\nimport styles from './pagination.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// explicit jsdoc annotation due to inheritance context lost with CEM generator\n\n/**\n * @element nve-pagination\n * @description Pagination is a control that enables users to navigate through pages of content.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/pagination\n * @event input - Dispatched when the value (page) has changed\n * @event change - Dispatched when the value (page) has changed\n * @event first-page - Dispatched when the first page is active\n * @event last-page - Dispatched when the last page is active\n * @slot - default slot for content\n * @slot suffix-label - slot for overriding the \"n of total\" label when total is an approximation\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --width\n * @csspart icon-button - Base part applied to all icon button elements\n * @csspart previous-icon-button - The previous page icon button\n * @csspart next-icon-button - The next page icon button\n * @csspart start-icon-button - The first page icon button\n * @csspart end-icon-button - The last page icon button\n * @csspart select - The page size select element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @property {number} value - value the current page number\n */\n@typeSSR()\n@keyNavigationList<Pagination>()\n@scopedRegistry()\nexport class Pagination extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * The number of items per page.\n   */\n  @property({ type: Number }) step = 10;\n  /**\n   * The array of custom step-size.\n   */\n  @property({ type: Array }) stepSizes = [10, 20, 50, 100];\n\n  /**\n   * The total number of items.\n   */\n  @property({ type: Number }) items: number;\n\n  /**\n   * Whether the pagination is skippable to start/end.\n   */\n  @property({ type: Boolean }) skippable: boolean;\n\n  /**\n   * Whether the step selector has a disabled state.\n   */\n  @property({ type: Boolean, attribute: 'disable-step' }) disableStep: boolean;\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pagination',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Select.metadata.tag]: Select\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.shadowRoot!.querySelectorAll<HTMLElement>(`${IconButton.metadata.tag}, input, select`),\n      layout: 'horizontal'\n    };\n  }\n\n  get #currentPage() {\n    return (this.value! - 1) * this.step + this.step;\n  }\n\n  get #isLastPage() {\n    return this.items / this.value! === this.step;\n  }\n\n  get #isFirstPage() {\n    return this.value === 1;\n  }\n\n  get #selectLabel() {\n    const start = (this.value! - 1) * this.step + 1;\n    const end = Math.min(this.value! * this.step, this.items || Infinity);\n    return `${formatStandardNumber(start)}-${formatStandardNumber(end)}`;\n  }\n\n  get #label() {\n    return this.items\n      ? html`<label><slot name=\"suffix-label\">${this.i18n.of} ${formatStandardNumber(this.items)}</slot></label>`\n      : nothing;\n  }\n\n  get #previousButton() {\n    return html`<nve-icon-button part=\"icon-button previous-icon-button\"\n      @click=${() => this.#setValue(this.value! - 1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.previous}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #nextButton() {\n    return html`<nve-icon-button part=\"icon-button next-icon-button\"\n      @click=${() => this.#setValue(this.value! + 1)}\n      .disabled=${this.disabled || this.#currentPage >= this.items}\n      .ariaLabel=${this.i18n.next}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  get #startButton() {\n    return html`<nve-icon-button part=\"icon-button start-icon-button\"\n      @click=${() => this.#setValue(1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.start}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #endButton() {\n    return html`<nve-icon-button part=\"icon-button end-icon-button\"\n      @click=${() => this.#setValue(this.items / this.step)}\n      .disabled=${this.disabled || (this.value! - 1) * this.step + this.step >= this.items}\n      .ariaLabel=${this.i18n.end}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  #resizeObserver: ResizeObserver;\n\n  get #select() {\n    return this.disableStep\n      ? html`<label>${this.#selectLabel}&nbsp;</label>`\n      : html`\n          <nve-select part=\"select\" .container=${this.container}>\n            <select\n              .ariaLabel=${this.i18n.currentPage}\n              @change=${(e: Event) => this.#setStep(parseInt((e.target as HTMLSelectElement).value, 10))}\n              value=${this.step}\n              .disabled=${this.disabled || this.disableStep}\n            >\n            ${this.stepSizes.map(i => html`<option ?selected=${this.step === i} value=${i}>${i}</option>`)}\n            </select>\n            <div class=\"select-label\">${this.#selectLabel}</div>\n          </nve-select>\n        `;\n  }\n\n  render() {\n    return html`\n      <div internal-host role=\"presentation\">\n        ${\n          this.skippable && this.items\n            ? html`\n              ${this.#startButton} ${this.#previousButton} ${this.#select} ${this.#label} ${this.#nextButton}\n              ${this.#endButton}\n            `\n            : html` ${this.#select} ${this.#label} ${this.#previousButton} ${this.#nextButton} `\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = 1;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    await this.updateComplete;\n    this.#setupLabelWidth();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.unobserve(this);\n  }\n\n  #setupLabelWidth() {\n    const label = this.shadowRoot!.querySelector('.select-label');\n    const select = this.shadowRoot!.querySelector('select');\n    if (label && select) {\n      this.#resizeObserver = new ResizeObserver(\n        entries => (select!.style.minWidth = `${entries[0]!.contentRect.width + 36}px`)\n      );\n      this.#resizeObserver.observe(label);\n    }\n  }\n\n  #setStep(value: number) {\n    /* eslint-disable-next-line */\n    this.step = value; // stateful due to internalized select element\n    this.dispatchEvent(new CustomEvent('step-change', { detail: this.step, bubbles: true, composed: true }));\n    this.#setValue(this.value!);\n  }\n\n  #setValue(value: number) {\n    if (this.value !== value) {\n      this.value = value;\n      this.dispatchInputEvent();\n      this.dispatchChangeEvent();\n    }\n\n    if (this.#isLastPage) {\n      this.dispatchEvent(new CustomEvent('last-page', { bubbles: true, composed: true }));\n    }\n\n    if (this.#isFirstPage) {\n      this.dispatchEvent(new CustomEvent('first-page', { bubbles: true, composed: true }));\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/panel/define.d.ts

@@ -0,0 +1,9 @@
+import { Panel, PanelHeader, PanelContent, PanelFooter } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-panel': Panel;
+        'nve-panel-header': PanelHeader;
+        'nve-panel-content': PanelContent;
+        'nve-panel-footer': PanelFooter;
+    }
+}

package/dist/panel/define.js

@@ -0,0 +1,6 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Panel as t, PanelContent as n, PanelFooter as r, PanelHeader as i } from "./panel2.js";
+e(t), e(i), e(n), e(r);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/panel/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/panel/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 { Panel, PanelHeader, PanelContent, PanelFooter } from '@nvidia-elements/core/panel';\n\ndefine(Panel);\ndefine(PanelHeader);\ndefine(PanelContent);\ndefine(PanelFooter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-panel': Panel;\n    'nve-panel-header': PanelHeader;\n    'nve-panel-content': PanelContent;\n    'nve-panel-footer': PanelFooter;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAM,EACb,EAAO,EAAY,EACnB,EAAO,EAAa,EACpB,EAAO,EAAY"}

package/dist/panel/index.d.ts

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

package/dist/panel/index.js

@@ -0,0 +1,2 @@
+import { Panel as e, PanelContent as t, PanelFooter as n, PanelHeader as r } from "./panel2.js";
+export { e as Panel, t as PanelContent, n as PanelFooter, r as PanelHeader };

package/dist/panel/panel-content.js

@@ -0,0 +1,6 @@
+//#region src/panel/panel-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;width:100%;contain:none}::slotted(nve-menu){--width: 100%}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=panel-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel-content.js","names":[],"sources":["../../src/panel/panel-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  width: 100%;\n  contain: none;\n}\n\n::slotted(nve-menu),\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}

package/dist/panel/panel-footer.js

@@ -0,0 +1,6 @@
+//#region src/panel/panel-footer.css?inline
+var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--gap: var(--nve-ref-space-sm)}footer[internal-host]{padding:var(--padding);border-top:var(--border-top);color:var(--color);display:flex;place-items:flex-start;gap:var(--gap);::slotted(nve-button){flex-grow:1}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=panel-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel-footer.js","names":[],"sources":["../../src/panel/panel-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-300) var(--nve-ref-size-400);\n  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --gap: var(--nve-ref-space-sm);\n}\n\nfooter[internal-host] {\n  padding: var(--padding);\n  border-top: var(--border-top);\n  color: var(--color);\n  display: flex;\n  place-items: flex-start;\n  gap: var(--gap);\n\n  ::slotted(nve-button),\n  ::slotted(nve-button) {\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

package/dist/panel/panel-header.js

@@ -0,0 +1,6 @@
+//#region src/panel/panel-header.css?inline
+var e = ":host{--padding: var(--nve-ref-size-300) 0 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);flex-grow:1}[internal-host]{padding:var(--padding);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-grow:1}::slotted([slot=\"title\"]){margin:0;font-size:var(--nve-ref-font-size-200);font-weight:var(--nve-ref-font-weight-semibold)}::slotted([slot=\"subtitle\"]){margin:0;font-size:var(--nve-ref-font-size-100);font-weight:var(--nve-ref-font-weight-regular);color:var(--nve-sys-text-muted-color)}::slotted([slot=\"action-icon\"]){margin-block-start:calc((var(--nve-ref-size-300) * -1) + var(--nve-ref-size-100));align-self:self-start;z-index:99}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=panel-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel-header.js","names":[],"sources":["../../src/panel/panel-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) 0 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\n  flex-grow: 1;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  flex-grow: 1;\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-semibold);\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  color: var(--nve-sys-text-muted-color);\n}\n\n::slotted([slot='action-icon']) {\n  margin-block-start: calc((var(--nve-ref-size-300) * -1) + var(--nve-ref-size-100)); /* not nve-ref-size-300 */\n  align-self: self-start;\n  z-index: 99;\n}\n"],"mappings":""}

package/dist/panel/panel.d.ts

@@ -0,0 +1,117 @@
+import { LitElement } from 'lit';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-panel-header
+ * @description Displays the title, subtitle, and optional action controls at the top of a panel.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/panel
+ * @slot - default content slot
+ * @slot title - Title Text
+ * @slot subtitle - Subtitle Text
+ * @slot action-icon - Extra Action Button
+ * @cssprop --padding
+ * @cssprop --border-bottom
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ * @deprecated use `nve-page-panel` with `nve-page` instead
+ */
+export declare class PanelHeader extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}
+/**
+ * @element nve-panel-content
+ * @description Contains the main body content within a panel, providing a structured region for detailed information.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/panel
+ * @slot - This is a default/unnamed slot for panel content
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ */
+export declare class PanelContent extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+}
+/**
+ * @element nve-panel-footer
+ * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/panel
+ * @slot - This is a default/unnamed slot for panel footer content
+ * @cssprop --padding
+ * @cssprop --border-top
+ * @cssprop --gap
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ */
+export declare class PanelFooter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}
+/**
+ * @element nve-panel
+ * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/panel
+ * @event open - Dispatched when the panel opens.
+ * @event close - Dispatched when the panel closes.
+ * @slot - This is a default/unnamed slot for panel content
+ * @slot header - header element (Use `panel-header` or custom content)
+ * @slot content - content element (Use `panel-content` or custom content)
+ * @slot footer - footer element (Use `panel-footer` or custom content)
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --box-shadow
+ * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button
+ * @csspart icon-button - The expand/collapse icon button element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ */
+export declare class Panel extends LitElement {
+    #private;
+    /**
+     * Determines whether the panel is fully expanded, displaying its contents, or not.
+     */
+    expanded: boolean;
+    /**
+     * Determines whether the panel collapses down to an expand icon, or fully hides.
+     */
+    closable: boolean;
+    /**
+     * Determines whether the panel should handle auto-closing behavior vs. defaults to off.
+     */
+    behaviorExpand: boolean;
+    /**
+     * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.
+     */
+    side: 'left' | 'right';
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    /**
+     * Enables updating internal string values for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/panel/panel.examples.js

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

package/dist/panel/panel.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.examples.js","names":[],"sources":["../../src/panel/panel.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/panel/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/notification/define.js';\n\n/* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n\nexport default {\n  title: 'Elements/Panel',\n  component: 'nve-panel'\n};\n\n/**\n * @summary Basic panel layout with header showing session details and metadata in a collapsible side panel.\n */\nexport const Default = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\"></div>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Left-positioned collapsible panel for sidebar navigation and content details.\n * @tags test-case\n */\nexport const LeftSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Right-positioned collapsible panel for supplementary content and property inspectors.\n * @tags test-case\n */\nexport const RightSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"right\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Closable panel with external toggle button for programmatic show/hide control.\n * @tags test-case\n */\nexport const ClosablePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand id=\"trigger-closable-false\" expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.\n * @tags test-case\n */\nexport const WithTrigger = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded closable side=\"left\"  style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Panel with complete header including title, subtitle, and action icon slots for rich header content.\n * @tags test-case\n */\nexport const WithFullHeader = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\">Subtitle</div>\n\n            <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Panel with footer containing action buttons for form submissions and destructive actions.\n * @tags test-case\n */\nexport const WithFooter = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:600px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n\n          <nve-panel-footer>\n            <nve-button interaction=\"destructive\" container=\"flat\">Destructive</nve-button>\n            <nve-button>Default</nve-button>\n          </nve-panel-footer>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/* eslint-enable @nvidia-elements/lint/no-restricted-attributes */"],"mappings":";AAGA,IAAA,IAAS"}