@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/sort-button/define.js

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

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

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

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

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

package/dist/sort-button/index.js

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

package/dist/sort-button/sort-button.d.ts

@@ -0,0 +1,39 @@
+import { Icon } from '../icon';
+import { BaseButton } from '../internal';
+/**
+ * @element nve-sort-button
+ * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/sort-button
+ * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --border-radius
+ * @cssprop --color
+ * @csspart icon - The icon element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/
+ */
+export declare class SortButton extends BaseButton {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    /**
+     * The current sort value, can be ascending, descending, or none.
+     */
+    sort: 'ascending' | 'descending' | 'none';
+    /**
+     * Updates internal string values for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import('lit-html').TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+}

package/dist/sort-button/sort-button.examples.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sort-button.examples.js","names":[],"sources":["../../src/sort-button/sort-button.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/sort-button/define.js';\n\nexport default {\n  title: 'Elements/Sort Button',\n  component: 'nve-sort-button',\n};\n\n/**\n * @summary Basic sort button in its default unsorted state for column header sorting controls.\n */\nexport const Default = {\n  render: () => html`\n<nve-sort-button></nve-sort-button>`\n};\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on light theme background.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}\n\n/**\n * @summary Sort button states (unsorted, ascending, descending) displayed on dark theme background.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,37 @@
+{
+  "element": "nve-sort-button",
+  "entrypoint": "@nvidia-elements/core/sort-button/sort-button.examples.json",
+  "items": [
+    {
+      "id": "core-sort-button_default",
+      "name": "Default",
+      "template": "<nve-sort-button></nve-sort-button>\n",
+      "summary": "Basic sort button in its default unsorted state for column header sorting controls.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sort-button_light-theme",
+      "name": "LightTheme",
+      "template": "<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n",
+      "summary": "Sort button states (unsorted, ascending, descending) displayed on light theme background.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-sort-button_dark-theme",
+      "name": "DarkTheme",
+      "template": "<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-sort-button></nve-sort-button>\n  <nve-sort-button sort=\"ascending\"></nve-sort-button>\n  <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n",
+      "summary": "Sort button states (unsorted, ascending, descending) displayed on dark theme background.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/sort-button/sort-button.js

@@ -0,0 +1,6 @@
+//#region src/sort-button/sort-button.css?inline
+var e = ":host{--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800);--border-radius: var(--nve-ref-border-radius-full)}[internal-host]{width:var(--width);height:var(--height);border-radius:var(--border-radius);background:transparent;border:0;display:flex;flex-direction:column;cursor:pointer;place-items:center;place-content:center;padding:0;position:relative;outline:0;overflow:hidden}nve-icon{--color: var(--nve-sys-text-placeholder-color);cursor:pointer}:host([sort=\"ascending\"]) nve-icon,:host([sort=\"descending\"]) nve-icon{--color: var(--nve-sys-text-emphasis-color)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=sort-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sort-button.js","names":[],"sources":["../../src/sort-button/sort-button.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n[internal-host] {\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  background: transparent;\n  border: 0;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  place-items: center;\n  place-content: center;\n  padding: 0;\n  position: relative;\n  outline: 0;\n  overflow: hidden;\n}\n\nnve-icon {\n  --color: var(--nve-sys-text-placeholder-color);\n  cursor: pointer;\n}\n\n:host([sort='ascending']) nve-icon,\n:host([sort='descending']) nve-icon {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n"],"mappings":""}

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

@@ -0,0 +1,55 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { BaseButton as t } from "../internal/base/button.js";
+import { I18nController as n } from "../internal/controllers/i18n.controller.js";
+import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import { Icon as a } from "../icon/icon2.js";
+import o from "./sort-button.js";
+import { html as s } from "lit";
+import { property as c } from "lit/decorators/property.js";
+//#region src/sort-button/sort-button.ts
+var l = {
+	none: "ascending",
+	ascending: "descending",
+	descending: "none"
+}, u = class extends t {
+	static {
+		this.styles = i([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-sort-button",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [a.metadata.tag]: a };
+	}
+	#e = new n(this);
+	render() {
+		return s`<div internal-host focus-within><nve-icon part="icon" .name="${this.sort === "descending" ? "sort-descending" : "sort-ascending"}" aria-hidden="true"></nve-icon></div>`;
+	}
+	constructor() {
+		super(), this.sort = "none", this.i18n = this.#e.i18n, this.type = "button";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.role = "spinbutton", this.addEventListener("click", () => {
+			this._internals.ariaLabel = `${this.#e.i18n.sort} ${l[this.sort]}`, this.dispatchEvent(new CustomEvent("sort", {
+				detail: {
+					value: this.sort,
+					next: l[this.sort]
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], u.prototype, "sort", void 0), e([c({ type: Object })], u.prototype, "i18n", void 0), u = e([r()], u);
+//#endregion
+export { u as SortButton };
+
+//# sourceMappingURL=sort-button2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sort-button2.js","names":["#i18nController"],"sources":["../../src/sort-button/sort-button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, BaseButton, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends BaseButton {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n\n    this.addEventListener('click', () => {\n      this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n      this.dispatchEvent(\n        new CustomEvent('sort', {\n          detail: { value: this.sort, next: nextSort[this.sort] },\n          bubbles: true,\n          composed: true\n        })\n      );\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;CACb,EAgBM,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAOD,KAAwC,IAAI,EAAqB,KAAK;CAOtE,SAAS;AACP,SAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;;CAKtG,cAAc;AAEZ,EADA,OAAO,cAlB8E,oBAOpD,MAAA,EAAqB,MAYtD,KAAK,OAAO;;CAGd,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO,cAEvB,KAAK,iBAAiB,eAAe;AAEnC,GADA,KAAK,WAAW,YAAY,GAAG,MAAA,EAAqB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;KAAO;IACvD,SAAS;IACT,UAAU;IACX,CAAC,CACH;IACD;;;GAnCH,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAOzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvB5B,GAAgB,CAAA,EAAA,EAAA"}

package/dist/sparkline/define.d.ts

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

package/dist/sparkline/define.js

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

package/dist/sparkline/define.js.map

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

package/dist/sparkline/index.d.ts

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

package/dist/sparkline/index.js

@@ -0,0 +1,2 @@
+import { Sparkline as e } from "./sparkline2.js";
+export { e as Sparkline };

package/dist/sparkline/sparkline.d.ts

@@ -0,0 +1,64 @@
+import { PropertyValues, LitElement } from 'lit';
+import { DataElement, Interpolation, SizeExpanded, SparklineMark, SupportStatus, TaskStatus } from '../internal';
+/**
+ * @element nve-sparkline
+ * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/sparkline
+ * @cssprop --height - Height (defaults to 1em and scales with parent font-size).
+ * @cssprop --line-color
+ * @cssprop --line-width
+ * @cssprop --fill-color - Color used by area and column marks.
+ * @cssprop --gradient-max-color
+ * @cssprop --gradient-min-color
+ * @cssprop --zero-line-color
+ * @cssprop --zero-line-width
+ * @cssprop --win-color  Color used to represent positive values (wins).
+ * @cssprop --loss-color Color used to represent negative values (losses).
+ * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).
+ * @cssprop --symbol-color
+ * @cssprop --symbol-border-color
+ * @cssprop --symbol-border-width
+ * @cssprop --symbol-radius - symbol circle radius in SVG units.
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Sparkline extends LitElement implements DataElement<number[]> {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** Numeric values representing a data series. */
+    data: number[];
+    /** Controls the visual representation of data points. */
+    mark: SparklineMark;
+    /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */
+    interpolation: Interpolation;
+    /** Applies semantic status colors used across Elements status patterns. */
+    status?: TaskStatus | SupportStatus;
+    /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */
+    size?: SizeExpanded;
+    /** Denotes the first data point by rendering a symbol at its position. */
+    denoteFirst: boolean;
+    /** Denotes the last data point by rendering a symbol at its position. */
+    denoteLast: boolean;
+    /** Denotes all minimum-value data points by rendering symbols at their positions. */
+    denoteMin: boolean;
+    /** Denotes all maximum-value data points by rendering symbols at their positions. */
+    denoteMax: boolean;
+    /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */
+    intervalLength: number;
+    /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */
+    min?: number;
+    /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */
+    max?: number;
+    /** Cached valid numeric values derived from data property. */
+    private validData;
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/sparkline/sparkline.examples.js

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

package/dist/sparkline/sparkline.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.examples.js","names":[],"sources":["../../src/sparkline/sparkline.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/sparkline/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Sparkline',\n  component: 'nve-sparkline',\n};\n\n/**\n * @summary Basic sparkline from numeric array values. Use as a compact trend indicator.\n */\nexport const Default = {\n  render: () => html`\n    <nve-sparkline id=\"default\"></nve-sparkline>\n    <script type=\"module\">\n      const sparkline = document.querySelector('nve-sparkline#default');\n      sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n    </script>\n  `\n};\n\n/**\n * @summary Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.\n */\nexport const Marks = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n      <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Semantic statuses apply task, support, and trend color mappings.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n      <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Sparklines inherit font size and flow inline with surrounding text and metrics.\n */\nexport const InlineWithText = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <p nve-text=\"body loose\">\n        This week's lane keeping safety score trend \n        <nve-sparkline\n          mark=\"area\"\n          status=\"success\"\n          data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n          aria-label=\"lane keeping safety score trend\"></nve-sparkline>\n        shows a steady rise after an early dip, with decreasing interventions per shift: \n        <nve-sparkline\n          mark=\"column\"\n          status=\"accent\"\n          data=\"[16, 14, 15, 13, 12, 11, 10]\"\n          aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, \n        and predominantly successful route outcomes: \n        <nve-sparkline\n          mark=\"winloss\"\n          status=\"success\"\n          data=\"[1, 1, -1, 1, 0, 1, 1]\"\n          aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n      </p>\n    </div>\n  `\n};\n\n/**\n * @summary Embed sparklines in grid cells to add compact trend context to tabular data.\n */\nexport const DataGrid = {\n  render: () => html`\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>Autonomy Service</nve-grid-column>\n        <nve-grid-column>Safety Score</nve-grid-column>\n        <nve-grid-column>Interventions / Shift</nve-grid-column>\n        <nve-grid-column>Route Outcome</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell>Lane Keeping</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping 30 day safety score trend\"\n            mark=\"area\"\n            status=\"success\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping interventions per shift\"\n            mark=\"column\"\n            status=\"success\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Object Detection</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection 30 day safety score trend\"\n            mark=\"area\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection interventions per shift\"\n            mark=\"column\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Path Planning</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning 30 day safety score trend\"\n            mark=\"area\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning interventions per shift\"\n            mark=\"column\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  `\n};\n\n/**\n * @summary Explicit size tokens set fixed sparkline height independent of text context.\n */\nexport const ExplicitSize = {\n  render: () => html`\n    <div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n      <nve-sparkline size=\"xs\"></nve-sparkline>\n      <nve-sparkline size=\"sm\"></nve-sparkline>\n      <nve-sparkline size=\"md\"></nve-sparkline>\n      <nve-sparkline size=\"lg\"></nve-sparkline>\n      <nve-sparkline size=\"xl\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-sizes > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Without a size attribute, height scales with the parent text size for typographic alignment.\n */\nexport const DefaultSize = {\n  render: () => html`\n    <div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n        <span>heading</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n        <span>body</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n        <span>label sm</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#inline-sparkline-sizes > div[nve-text] > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Interpolation controls linear, smooth, or step transitions between points.\n */\nexport const Interpolation = {\n  render: () => html`\n    <div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n      <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-interpolations > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Symbols denote specific data points in line, area, and gradient marks.\n */\nexport const Symbols = {\n  render: () => html`\n    <div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n      <nve-sparkline denote-last></nve-sparkline>\n      <nve-sparkline denote-first denote-last></nve-sparkline>\n      <nve-sparkline denote-min denote-max></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-symbols > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.\n */\nexport const FixedDataDomain = {\n  render: () => html`\n    <div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary The chart renders a zero baseline when the data includes both positive and negative values.\n */\nexport const ZeroLine = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Interval length adjusts spacing between points for line marks, from compact to spacious.\n */\nexport const IntervalLength = {\n  render: () => html`\n    <div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n      <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n      <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n      <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-intervals > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [10, 20, 15, 25, 18];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary CSS custom properties are available to adjust dimensions and visual styling.\n */\nexport const CustomStyling = {\n  render: () => html`\n    <nve-sparkline\n      aria-label=\"custom sparkline\"\n      mark=\"gradient\"\n      interpolation=\"smooth\"\n      data=\"[8, 14, 9, 17, 13, 21, 16]\"\n      denote-last\n      style=\"\n        --height: 120px;\n        --accent-color: var(--nve-sys-layer-canvas-background);\n        --accent-radius: 5px;\n        --accent-border-width: 3px;\n        --line-width: 2.5px;\n        --line-color: var(--nve-ref-color-blue-cobalt-1100);\n        --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n        --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n      \"\n    ></nve-sparkline>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/sparkline/sparkline.examples.json

@@ -0,0 +1,123 @@
+{
+  "element": "nve-sparkline",
+  "entrypoint": "@nvidia-elements/core/sparkline/sparkline.examples.json",
+  "items": [
+    {
+      "id": "core-sparkline_default",
+      "name": "Default",
+      "template": "<nve-sparkline id=\"default\"></nve-sparkline>\n<script type=\"module\">\n  const sparkline = document.querySelector(\"nve-sparkline#default\");\n  sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n</script>\n",
+      "summary": "Basic sparkline from numeric array values. Use as a compact trend indicator.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_marks",
+      "name": "Marks",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n  <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n  <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n</div>\n",
+      "summary": "Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n  <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n  <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n  <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n</div>\n",
+      "summary": "Semantic statuses apply task, support, and trend color mappings.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_inline-with-text",
+      "name": "InlineWithText",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body loose\">\n    This week's lane keeping safety score trend\n    <nve-sparkline\n      mark=\"area\"\n      status=\"success\"\n      data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n      aria-label=\"lane keeping safety score trend\"\n    ></nve-sparkline>\n    shows a steady rise after an early dip, with decreasing interventions per shift:\n    <nve-sparkline\n      mark=\"column\"\n      status=\"accent\"\n      data=\"[16, 14, 15, 13, 12, 11, 10]\"\n      aria-label=\"lane keeping interventions per shift\"\n    ></nve-sparkline\n    >, and predominantly successful route outcomes:\n    <nve-sparkline\n      mark=\"winloss\"\n      status=\"success\"\n      data=\"[1, 1, -1, 1, 0, 1, 1]\"\n      aria-label=\"lane keeping route outcomes\"\n    ></nve-sparkline\n    >.\n  </p>\n</div>\n",
+      "summary": "Sparklines inherit font size and flow inline with surrounding text and metrics.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_data-grid",
+      "name": "DataGrid",
+      "template": "<nve-grid>\n  <nve-grid-header>\n    <nve-grid-column>Autonomy Service</nve-grid-column>\n    <nve-grid-column>Safety Score</nve-grid-column>\n    <nve-grid-column>Interventions / Shift</nve-grid-column>\n    <nve-grid-column>Route Outcome</nve-grid-column>\n  </nve-grid-header>\n  <nve-grid-row>\n    <nve-grid-cell>Lane Keeping</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping 30 day safety score trend\"\n        mark=\"area\"\n        status=\"success\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping interventions per shift\"\n        mark=\"column\"\n        status=\"success\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Lane Keeping route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>Object Detection</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection 30 day safety score trend\"\n        mark=\"area\"\n        status=\"warning\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection interventions per shift\"\n        mark=\"column\"\n        status=\"warning\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Object Detection route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n  <nve-grid-row>\n    <nve-grid-cell>Path Planning</nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning 30 day safety score trend\"\n        mark=\"area\"\n        status=\"danger\"\n        min=\"0\"\n        max=\"100\"\n        data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning interventions per shift\"\n        mark=\"column\"\n        status=\"danger\"\n        min=\"0\"\n        max=\"50\"\n        data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline\n        aria-label=\"Path Planning route outcomes\"\n        mark=\"winloss\"\n        data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n        size=\"md\"\n      ></nve-sparkline>\n    </nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "summary": "Embed sparklines in grid cells to add compact trend context to tabular data.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_explicit-size",
+      "name": "ExplicitSize",
+      "template": "<div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n  <nve-sparkline size=\"xs\"></nve-sparkline>\n  <nve-sparkline size=\"sm\"></nve-sparkline>\n  <nve-sparkline size=\"md\"></nve-sparkline>\n  <nve-sparkline size=\"lg\"></nve-sparkline>\n  <nve-sparkline size=\"xl\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-sizes > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n  }\n</script>\n",
+      "summary": "Explicit size tokens set fixed sparkline height independent of text context.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_default-size",
+      "name": "DefaultSize",
+      "template": "<div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n  <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n    <span>heading</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n  <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n    <span>body</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n  <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n    <span>label sm</span>\n    <nve-sparkline></nve-sparkline>\n  </div>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#inline-sparkline-sizes > div[nve-text] > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n  }\n</script>\n",
+      "summary": "Without a size attribute, height scales with the parent text size for typographic alignment.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_interpolation",
+      "name": "Interpolation",
+      "template": "<div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n  <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n  <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-interpolations > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n  }\n</script>\n",
+      "summary": "Interpolation controls linear, smooth, or step transitions between points.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_symbols",
+      "name": "Symbols",
+      "template": "<div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n  <nve-sparkline denote-last></nve-sparkline>\n  <nve-sparkline denote-first denote-last></nve-sparkline>\n  <nve-sparkline denote-min denote-max></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-symbols > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n  }\n</script>\n",
+      "summary": "Symbols denote specific data points in line, area, and gradient marks.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_fixed-data-domain",
+      "name": "FixedDataDomain",
+      "template": "<div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n  <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n</div>\n",
+      "summary": "Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_zero-line",
+      "name": "ZeroLine",
+      "template": "<div nve-layout=\"row gap:md\">\n  <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n  <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n  <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n</div>\n",
+      "summary": "The chart renders a zero baseline when the data includes both positive and negative values.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_interval-length",
+      "name": "IntervalLength",
+      "template": "<div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n  <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n  <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n  <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n</div>\n<script type=\"module\">\n  const sparklines = document.querySelectorAll(\"#sparkline-intervals > nve-sparkline\");\n  for (const sparkline of sparklines) {\n    sparkline.data = [10, 20, 15, 25, 18];\n  }\n</script>\n",
+      "summary": "Interval length adjusts spacing between points for line marks, from compact to spacious.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-sparkline_custom-styling",
+      "name": "CustomStyling",
+      "template": "<nve-sparkline\n  aria-label=\"custom sparkline\"\n  mark=\"gradient\"\n  interpolation=\"smooth\"\n  data=\"[8, 14, 9, 17, 13, 21, 16]\"\n  denote-last\n  style=\"\n    --height: 120px;\n    --accent-color: var(--nve-sys-layer-canvas-background);\n    --accent-radius: 5px;\n    --accent-border-width: 3px;\n    --line-width: 2.5px;\n    --line-color: var(--nve-ref-color-blue-cobalt-1100);\n    --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n    --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n  \"\n></nve-sparkline>\n",
+      "summary": "CSS custom properties are available to adjust dimensions and visual styling.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/sparkline/sparkline.js

@@ -0,0 +1,6 @@
+//#region src/sparkline/sparkline.css?inline
+var e = ":host{--height: 1em;--line-color: var(--status-color);--line-width: 1.5px;--fill-color: var(--status-color);--gradient-max-color: color-mix(in oklab, var(--line-color), transparent 35%);--gradient-min-color: color-mix(in oklab, var(--line-color), transparent 95%);--zero-line-color: var(--line-color);--zero-line-width: 1.5px;--win-color: var(--nve-sys-status-finished-color);--loss-color: var(--nve-sys-status-failed-color);--draw-color: var(--nve-sys-status-pending-color);--accent-radius: 3px;--accent-color: var(--nve-sys-support-accent-emphasis-color);--accent-border-color: var(--nve-sys-support-accent-emphasis-color);--accent-border-width: 1;--_aspect-ratio: 1;display:inline-flex;height:var(--height);aspect-ratio:var(--_aspect-ratio);max-width:100%;contain:layout style}:host([size=\"xs\"]){--height: var(--nve-ref-size-200)}:host([size=\"sm\"]){--height: var(--nve-ref-size-300)}:host([size=\"md\"]){--height: var(--nve-ref-size-400)}:host([size=\"lg\"]){--height: var(--nve-ref-size-500)}:host([size=\"xl\"]){--height: var(--nve-ref-size-600)}[internal-host]{position:relative;container-type:size;width:100%;height:100%;--_vbw: calc(100 * var(--_aspect-ratio));--_vbh: 100;--_svg-unit-size: min(calc(100cqw / var(--_vbw)), calc(100cqh / var(--_vbh)));--_svg-origin-x: calc((100cqw - (var(--_vbw) * var(--_svg-unit-size))) / 2);--_svg-origin-y: calc((100cqh - (var(--_vbh) * var(--_svg-unit-size))) / 2)}svg{width:100%;height:100%;overflow:visible}.line{stroke:var(--line-color);stroke-width:var(--line-width);fill:none;stroke-linejoin:round;stroke-linecap:round}.area{fill:color-mix(in oklab,var(--fill-color) 20%,transparent);stroke:none}.zero-line{stroke:var(--zero-line-color);stroke-width:var(--zero-line-width)}.column{fill:var(--fill-color);stroke:none}.win{fill:var(--win-color);stroke:none}.loss{fill:var(--loss-color);stroke:none}.draw{fill:var(--draw-color);stroke:none}.accent{position:absolute;box-sizing:content-box;left:calc(var(--_svg-origin-x) + (var(--x) * var(--_svg-unit-size)));top:calc(var(--_svg-origin-y) + (var(--y) * var(--_svg-unit-size)));width:calc(2 * var(--accent-radius));height:calc(2 * var(--accent-radius));transform:translate(-50%,-50%);background:var(--accent-color);border:var(--accent-border-width) solid var(--accent-border-color);border-radius:50%;user-select:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=sparkline.js.map

package/dist/sparkline/sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.js","names":[],"sources":["../../src/sparkline/sparkline.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  --height: 1em;\n  --line-color: var(--status-color);\n  --line-width: 1.5px;\n  --fill-color: var(--status-color);\n  --gradient-max-color: color-mix(in oklab, var(--line-color), transparent 35%);\n  --gradient-min-color: color-mix(in oklab, var(--line-color), transparent 95%);\n  --zero-line-color: var(--line-color);\n  --zero-line-width: 1.5px;\n  --win-color: var(--nve-sys-status-finished-color);\n  --loss-color: var(--nve-sys-status-failed-color);\n  --draw-color: var(--nve-sys-status-pending-color);\n  --accent-radius: 3px;\n  --accent-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-color: var(--nve-sys-support-accent-emphasis-color);\n  --accent-border-width: 1;\n  --_aspect-ratio: 1;\n  display: inline-flex;\n  height: var(--height);\n  aspect-ratio: var(--_aspect-ratio);\n  max-width: 100%;\n  contain: layout style;\n}\n\n:host([size='xs']) {\n  --height: var(--nve-ref-size-200);\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='md']) {\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-500);\n}\n\n:host([size='xl']) {\n  --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n  position: relative;\n  container-type: size;\n  width: 100%;\n  height: 100%;\n\n  --_vbw: calc(100 * var(--_aspect-ratio));\n  --_vbh: 100;\n  --_svg-unit-size: min(calc(100cqw / var(--_vbw)), calc(100cqh / var(--_vbh)));\n  --_svg-origin-x: calc((100cqw - (var(--_vbw) * var(--_svg-unit-size))) / 2);\n  --_svg-origin-y: calc((100cqh - (var(--_vbh) * var(--_svg-unit-size))) / 2);\n}\n\nsvg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  stroke: var(--line-color);\n  stroke-width: var(--line-width);\n  fill: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n\n.area {\n  fill: color-mix(in oklab, var(--fill-color) 20%, transparent);\n  stroke: none;\n}\n\n.zero-line {\n  stroke: var(--zero-line-color);\n  stroke-width: var(--zero-line-width);\n}\n\n.column {\n  fill: var(--fill-color);\n  stroke: none;\n}\n\n.win {\n  fill: var(--win-color);\n  stroke: none;\n}\n\n.loss {\n  fill: var(--loss-color);\n  stroke: none;\n}\n\n.draw {\n  fill: var(--draw-color);\n  stroke: none;\n}\n\n.accent {\n  position: absolute;\n  box-sizing: content-box;\n  left: calc(var(--_svg-origin-x) + (var(--x) * var(--_svg-unit-size)));\n  top: calc(var(--_svg-origin-y) + (var(--y) * var(--_svg-unit-size)));\n  width: calc(2 * var(--accent-radius));\n  height: calc(2 * var(--accent-radius));\n  transform: translate(-50%, -50%);\n  background: var(--accent-color);\n  border: var(--accent-border-width) solid var(--accent-border-color);\n  border-radius: 50%;\n  user-select: none;\n}\n"],"mappings":""}

package/dist/sparkline/sparkline.utils.d.ts

@@ -0,0 +1,17 @@
+import { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '../internal';
+export declare const PRECISION = 2;
+export declare const VIEW_HEIGHT = 100;
+export declare const DEFAULT_INTERVAL_LENGTH_EM = 0.6;
+export declare function toValidData(data: unknown): number[];
+export declare function calculateViewBox(mark: SparklineMark, pointCount: number, intervalLength?: number): Dimensions;
+export declare function calculateDomain(values: number[], explicitMin?: number, explicitMax?: number, includeZero?: boolean): Scale | undefined;
+export declare function valueToY(value: number, min: number, max: number, viewHeight?: number): number;
+export declare function toPlotPoints(values: number[], min: number, max: number, viewWidth: number, viewHeight?: number): Point[];
+export declare function calculateSymbolIndices(values: number[], denoteFirst: boolean, denoteLast: boolean, denoteMin: boolean, denoteMax: boolean): Set<number>;
+export declare function toInterpolation(interpolation: unknown): Interpolation;
+export declare function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string;
+export declare function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight?: number): string;
+export declare function toColumnRects(points: Point[], baselineY: number, width: number): Rect[];
+export declare function toWinLossRects(values: number[], baselineY: number, width: number, height: number): (Rect & {
+    className: 'win' | 'loss' | 'draw';
+})[];