@nvidia-elements/core 2.8.0 → 2.9.0

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "resize-handle-split-horizontal",
       "name": "SplitHorizontal",
-      "template": "<section\n  id=\"split-horizontal-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-rows: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
+      "template": "<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-horizontal-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-horizontal-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\"));\n</script>\n",
       "summary": "Horizontal split pane with draggable divider that adjusts top and bottom panel heights.",
       "description": "",
       "composition": false,
@@ -32,7 +32,7 @@
     {
       "id": "resize-handle-split-vertical",
       "name": "SplitVertical",
-      "template": "<section\n  id=\"split-vertical-demo\"\n  style=\"\n    display: grid;\n    width: 250px;\n    height: 250px;\n    grid-template-columns: 1fr auto 1fr;\n    border: 1px solid var(--nve-ref-border-color);\n  \"\n>\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
+      "template": "<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector(\"#split-vertical-demo nve-resize-handle\");\n  const split = document.querySelector(\"#split-vertical-demo\");\n  handle.addEventListener(\"input\", (e) => (split.style.gridTemplateColumns = e.target.value + \"px auto 1fr\"));\n</script>\n",
       "summary": "Vertical split pane with draggable divider that adjusts left and right panel widths.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "id": "resize-handle-form",
       "name": "Form",
-      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const split = document.querySelector(\"#form-demo section\");\n  const handle = document.querySelector(\"#form-demo nve-resize-handle\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form);\n  });\n  handle.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    console.log(\"input\", e.target.value);\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle as a form control with name attribute for submitting resize values.",
       "description": "",
       "composition": false,
@@ -50,7 +50,7 @@
     {
       "id": "resize-handle-prevent",
       "name": "PreventDefault",
-      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section\n    style=\"\n      display: grid;\n      width: 250px;\n      height: 250px;\n      grid-template-rows: 1fr auto 1fr;\n      border: 1px solid var(--nve-ref-border-color);\n    \"\n  >\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
+      "template": "<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector(\"#prevent-default-demo section\");\n  const handle = document.querySelector(\"#prevent-default-demo nve-resize-handle\");\n  handle.addEventListener(\"toggle\", (e) => {\n    e.preventDefault();\n    console.log(\"toggle defaultPrevented:\", e.defaultPrevented);\n  });\n  handle.addEventListener(\"input\", (e) => {\n    split.style.gridTemplateRows = \"1fr auto \" + e.target.value + \"px\";\n  });\n</script>\n",
       "summary": "Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.",
       "description": "",
       "composition": false,

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends c(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "2.8.0",
+			version: "2.9.0",
 			valueSchema: { type: "number" }
 		};
 	}
@@ -31,21 +31,17 @@ var u = class extends c(a) {
 	}
 	constructor() {
 		super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new t(this), this.i18n = this.#t.i18n, this.#i = 0, this.#o = (e) => {
-			e.detail.kind === "pointerdown" && e.detail.event.button === 0 && e.detail.event.isPrimary && this.#r === void 0 && this.#c(e.detail.event.pointerId), e.detail.event.pointerId === this.#r && (e.detail.kind === "pointerup" && this.#u(), e.detail.kind === "pointercancel" && this.#d());
+			let t = e.detail;
+			t.kind === "pointerdown" ? t.event.button === 0 && t.event.isPrimary && this.#r === void 0 && t.claim({ kind: "drag" }) && this.#c(t.event.pointerId) : t.kind === "pointerend" && t.event.pointerId === this.#r && (t.interrupted ? this.#d() : this.#u());
 		}, this.#s = (e) => {
 			e.detail.kind === "drag" && e.detail.event.pointerId === this.#r && this.#l(e.detail);
-		}, this.value = this.value ?? 50, this.#i = this.valueAsNumber, this.#n = new e(this, { getCapabilities: () => ({
-			drag: !0,
-			pan: !1,
-			pinch: !1,
-			wheel: !1
-		}) });
+		}, this.value = this.value ?? 50, this.#i = this.valueAsNumber, this.#n = new e(this, { touchAction: "none" });
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._internals.role = "none", this.addEventListener("nve-gesture", this.#s), this.addEventListener("nve-pointer-input", this.#o);
+		super.connectedCallback(), this._internals.role = "none", this.addEventListener("nve-gesture", this.#s), this.addEventListener("nve-gesture-input", this.#o);
 	}
 	disconnectedCallback() {
-		this.removeEventListener("nve-gesture", this.#s), this.removeEventListener("nve-pointer-input", this.#o), this.#d(), super.disconnectedCallback();
+		this.removeEventListener("nve-gesture", this.#s), this.removeEventListener("nve-gesture-input", this.#o), this.#d(), super.disconnectedCallback();
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.#n.target = this, this.addEventListener("dblclick", () => {

package/dist/resize-handle/resize-handle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n  GestureController,\n  I18nController,\n  useStyles,\n  type Gesture,\n  type UnhandledPointerInput\n} from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, {\n      getCapabilities: () => ({ drag: true, pan: false, pinch: false, wheel: false })\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-pointer-input', this.#handlePointerInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handlePointerInput = (event: CustomEvent<UnhandledPointerInput>): void => {\n    if (\n      event.detail.kind === 'pointerdown' &&\n      event.detail.event.button === 0 &&\n      event.detail.event.isPrimary &&\n      this.#dragPointerId === undefined\n    ) {\n      this.#dragStart(event.detail.event.pointerId);\n    }\n    if (event.detail.event.pointerId !== this.#dragPointerId) return;\n    if (event.detail.kind === 'pointerup') this.#dragEnd();\n    if (event.detail.kind === 'pointercancel') this.#cancelDrag();\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n  GestureController,\n  I18nController,\n  useStyles,\n  type Gesture,\n  type GestureInput\n} from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, { touchAction: 'none' });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n    const input = event.detail;\n    if (input.kind === 'pointerdown') {\n      const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n      if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n    } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n      if (input.interrupted) this.#cancelDrag();\n      else this.#dragEnd();\n    }\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/select/select2.js

@@ -27,7 +27,7 @@ var S = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/skeleton/skeleton2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {

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

@@ -19,7 +19,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/sparkline/sparkline.examples.json

@@ -32,7 +32,7 @@
     {
       "id": "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",
+      "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 mark=\"area\" status=\"success\" data=\"[86, 87, 86, 88, 89, 90, 92, 93]\" 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 mark=\"column\" status=\"accent\" data=\"[16, 14, 15, 13, 12, 11, 10]\" aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, and predominantly successful route outcomes:\n    <nve-sparkline mark=\"winloss\" status=\"success\" data=\"[1, 1, -1, 1, 0, 1, 1]\" aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n  </p>\n</div>\n",
       "summary": "Sparklines inherit font size and flow inline with surrounding text and metrics.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "id": "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",
+      "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 aria-label=\"Lane Keeping 30 day safety score trend\" mark=\"area\" status=\"success\" min=\"0\" max=\"100\" data=\"[86, 87, 86, 88, 89, 90, 92, 93]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Lane Keeping interventions per shift\" mark=\"column\" status=\"success\" min=\"0\" max=\"50\" data=\"[12, 11, 12, 10, 9, 8, 7, 6]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Lane Keeping route outcomes\" mark=\"winloss\" data=\"[1, 1, 1, 0, 1, 0, 1, 1]\" 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 aria-label=\"Object Detection 30 day safety score trend\" mark=\"area\" status=\"warning\" min=\"0\" max=\"100\" data=\"[76, 88, 72, 79, 85, 70, 83, 74]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Object Detection interventions per shift\" mark=\"column\" status=\"warning\" min=\"0\" max=\"50\" data=\"[18, 20, 17, 19, 20, 21, 19, 22]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Object Detection route outcomes\" mark=\"winloss\" data=\"[1, 0, -1, 1, 0, -1, 0, 1]\" 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 aria-label=\"Path Planning 30 day safety score trend\" mark=\"area\" status=\"danger\" min=\"0\" max=\"100\" data=\"[58, 54, 49, 45, 40, 36, 31, 27]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Path Planning interventions per shift\" mark=\"column\" status=\"danger\" min=\"0\" max=\"50\" data=\"[24, 26, 29, 31, 34, 36, 39, 42]\" size=\"md\"></nve-sparkline>\n    </nve-grid-cell>\n    <nve-grid-cell>\n      <nve-sparkline aria-label=\"Path Planning route outcomes\" mark=\"winloss\" data=\"[1, -1, 0, -1, -1, -1, 0, -1]\" size=\"md\"></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,

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.8.0",
+			version: "2.9.0",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -33,7 +33,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: ["nve-tabs"]
 		};
 	}

package/dist/tabs/tabs.examples.json

@@ -25,7 +25,7 @@
     {
       "id": "tabs-border-background",
       "name": "BorderBackground",
-      "template": "<nve-tabs\n  behavior-select\n  style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none\"\n>\n  <nve-tabs-item selected> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> Tab 2 </nve-tabs-item>\n  <nve-tabs-item> Tab 3 </nve-tabs-item>\n</nve-tabs>\n",
+      "template": "<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none\">\n  <nve-tabs-item selected> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> Tab 2 </nve-tabs-item>\n  <nve-tabs-item> Tab 3 </nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Tabs with custom border background styling for brand-specific visual customization.",
       "description": "",
       "composition": false,
@@ -114,7 +114,7 @@
     {
       "id": "tabs-group-vertical-panels",
       "name": "GroupVerticalPanels",
-      "template": "<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
+      "template": "<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
       "summary": "Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.",
       "description": "",
       "composition": false,
@@ -123,7 +123,7 @@
     {
       "id": "tabs-group-vertical-end",
       "name": "GroupVerticalEnd",
-      "template": "<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
+      "template": "<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
       "summary": "Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.",
       "description": "",
       "composition": false,
@@ -132,7 +132,7 @@
     {
       "id": "tabs-external-controls",
       "name": "ExternalControls",
-      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\"\n        >Overview</nve-tabs-item\n      >\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
       "summary": "Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.",
       "description": "",
       "composition": true,

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends h(f) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.8.0",
+			version: "2.9.0",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -53,7 +53,7 @@ var v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.8.0",
+			version: "2.9.0",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tag/tag.examples.json

@@ -67,7 +67,7 @@
     {
       "id": "tag-slotted-color",
       "name": "SlottedColor",
-      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"red-cardinal\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"gray-slate\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"gray-denim\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"blue-indigo\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"blue-cobalt\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"blue-sky\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"teal-cyan\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"green-mint\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"teal-seafoam\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"green-grass\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"yellow-amber\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"orange-pumpkin\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"red-tomato\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"pink-magenta\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"purple-plum\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"purple-violet\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"purple-lavender\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"pink-rose\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"green-jade\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"lime-pear\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"yellow-nova\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n  <nve-tag color=\"brand-green\"\n    ><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green\n    <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag\n  >\n</div>\n",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-cardinal\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-slate\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-denim\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-indigo\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-cobalt\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-sky\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-cyan\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-mint\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-seafoam\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-grass\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-amber\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"orange-pumpkin\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-tomato\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-magenta\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-plum\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-violet\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-lavender\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-rose\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-jade\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"lime-pear\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-nova\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"brand-green\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n</div>\n",
       "summary": "Tag with icon, showing how the icon/dot color inherits the tag color.",
       "description": "",
       "composition": true,

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import type { CSSResult } from 'lit';
+import { type CSSResult } from 'lit';
 import { Control } from '@nvidia-elements/core/forms';
 /**
  * @element nve-textarea
@@ -6,6 +6,8 @@ import { Control } from '@nvidia-elements/core/forms';
  * @documentation https://nvidia.github.io/elements/docs/elements/textarea/
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/textarea
+ * @slot prefix - Content to display before the textarea.
+ * @slot suffix - Content to display after the textarea.
  * @cssprop --padding
  * @cssprop --font-size
  * @cssprop --height
@@ -20,6 +22,10 @@ import { Control } from '@nvidia-elements/core/forms';
  */
 export declare class Textarea extends Control {
     static styles: CSSResult[];
+    /** @private */
+    protected get prefixContent(): import("lit").TemplateResult<1>;
+    /** @private */
+    protected get suffixContent(): import("lit").TemplateResult<1>;
     static readonly metadata: {
         tag: string;
         version: string;

package/dist/textarea/textarea.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.\n * @tags test-case\n */\nexport const Slots = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with flat container for inline forms.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/textarea/textarea.examples.json

@@ -50,6 +50,28 @@
       "description": "",
       "composition": false,
       "tags": []
+    },
+    {
+      "id": "textarea-slots",
+      "name": "Slots",
+      "template": "<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>\n",
+      "summary": "Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "textarea-container-flat",
+      "name": "ContainerFlat",
+      "template": "<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
+      "summary": "Textarea with flat container for inline forms.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
     }
   ]
 }

package/dist/textarea/textarea.js

@@ -1,5 +1,5 @@
 //#region src/textarea/textarea.css?inline
-var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:100%;contain:layout}::slotted(textarea){padding:var(--padding)!important;font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;cursor:var(--cursor)!important}::slotted(textarea:not([rows])){min-height:var(--min-height)!important;height:var(--min-height)!important}::slotted(textarea:not([cols])){width:var(--width)!important}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}";
+var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:var(--width);contain:layout}::slotted(textarea){font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:0!important;color:var(--color)!important;cursor:var(--cursor)!important;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}slot[name=prefix],slot[name=suffix]{display:none;gap:var(--nve-ref-space-xxs)}@scope{:scope:has([slot=prefix]) slot[name=prefix]{display:flex}:scope:has([slot=suffix]) slot[name=suffix]{display:flex}:scope:has(textarea[style*=width],textarea[cols]) [input]{width:fit-content}:scope:has(textarea:focus-visible) [input]{outline:5px auto -webkit-focus-ring-color!important;outline:Highlight solid 2px!important}}[input]{flex-direction:column;gap:var(--nve-ref-space-xs);background:var(--background);border:var(--border);border-radius:var(--border-radius);padding:var(--padding);cursor:initial;outline:none!important}::slotted(textarea:not([rows],[style*=\"height\"])){height:var(--height)!important;min-height:var(--min-height)!important}::slotted(textarea:not([cols],[style*=\"width\"])){width:var(--width)!important}::slotted(textarea:not([cols],[rows])){field-sizing:content}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}:host([container=\"flat\"]){--background: transparent;--border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}";
 //#endregion
 export { e as default };
 

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.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-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: 100%;\n  contain: layout;\n}\n\n::slotted(textarea) {\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: var(--border) !important;\n  color: var(--color) !important;\n  border-radius: var(--border-radius) !important;\n  cursor: var(--cursor) !important;\n}\n\n::slotted(textarea:not([rows])) {\n  min-height: var(--min-height) !important;\n  height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols])) {\n  width: var(--width) !important;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.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-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n::slotted(textarea) {\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: 0 !important;\n  color: var(--color) !important;\n  cursor: var(--cursor) !important;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\nslot[name='prefix'],\nslot[name='suffix'] {\n  display: none;\n  gap: var(--nve-ref-space-xxs);\n}\n\n@scope {\n  :scope:has([slot='prefix']) slot[name='prefix'] {\n    display: flex;\n  }\n\n  :scope:has([slot='suffix']) slot[name='suffix'] {\n    display: flex;\n  }\n\n  :scope:has(textarea[style*='width'], textarea[cols]) [input] {\n    width: fit-content;\n  }\n\n  :scope:has(textarea:focus-visible) [input] {\n    outline: 5px auto -webkit-focus-ring-color !important;\n    outline: Highlight solid 2px !important;\n  }\n}\n\n[input] {\n  flex-direction: column;\n  gap: var(--nve-ref-space-xs);\n  background: var(--background);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  cursor: initial;\n  outline: none !important;\n}\n\n::slotted(textarea:not([rows], [style*='height'])) {\n  height: var(--height) !important;\n  min-height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols], [style*='width'])) {\n  width: var(--width) !important;\n}\n\n::slotted(textarea:not([cols], [rows])) {\n  field-sizing: content;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}