@nvidia-elements/core 2.12.2 → 2.13.0

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

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

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.12.2",
+			version: "2.13.0",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-card"]
 		};
 	}

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

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.12.2",
+			version: "2.13.0",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

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

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

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

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -4058,6 +4058,9 @@ export type ViewportProps = {
   "min-scale"?: number;
   /** Inclusive upper scale limit. */
   "max-scale"?: number;
+  /** Scale stops for keyboard and command zoom, clamped to the scale bounds.
+Defaults to built-in stops; an empty array uses only the bounds. */
+  "zoom-stops"?: readonly number[] | undefined;
   /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
   "behavior-pan"?: boolean | "space";
   /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
@@ -4076,6 +4079,9 @@ export type ViewportProps = {
   minScale?: number;
   /** Inclusive upper scale limit. */
   maxScale?: number;
+  /** Scale stops for keyboard and command zoom, clamped to the scale bounds.
+Defaults to built-in stops; an empty array uses only the bounds. */
+  zoomStops?: readonly number[] | undefined;
   /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
   behaviorPan?: boolean | "space";
   /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */

package/dist/custom-elements-vue.d.ts

@@ -3818,6 +3818,9 @@ type ViewportProps = {
   "min-scale"?: number;
   /** Inclusive upper scale limit. */
   "max-scale"?: number;
+  /** Scale stops for keyboard and command zoom, clamped to the scale bounds.
+Defaults to built-in stops; an empty array uses only the bounds. */
+  "zoom-stops"?: readonly number[] | undefined;
   /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
   "behavior-pan"?: boolean | "space";
   /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
@@ -3834,6 +3837,9 @@ type ViewportProps = {
   minScale?: number;
   /** Inclusive upper scale limit. */
   maxScale?: number;
+  /** Scale stops for keyboard and command zoom, clamped to the scale bounds.
+Defaults to built-in stops; an empty array uses only the bounds. */
+  zoomStops?: readonly number[] | undefined;
   /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
   behaviorPan?: boolean | "space";
   /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */

package/dist/custom-elements.json

@@ -53977,6 +53977,22 @@
               "attribute": "max-scale",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "zoomStops",
+              "type": {
+                "text": "readonly number[] | undefined",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "readonly number[]",
+                    "description": ""
+                  }
+                ]
+              },
+              "description": "Scale stops for keyboard and command zoom, clamped to the scale bounds.\nDefaults to built-in stops; an empty array uses only the bounds.",
+              "attribute": "zoom-stops"
+            },
             {
               "kind": "field",
               "name": "behaviorPan",
@@ -54431,6 +54447,21 @@
               "description": "Inclusive upper scale limit.",
               "fieldName": "maxScale"
             },
+            {
+              "name": "zoom-stops",
+              "type": {
+                "text": "readonly number[] | undefined",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "readonly number[]",
+                    "description": ""
+                  }
+                ]
+              },
+              "description": "Scale stops for keyboard and command zoom, clamped to the scale bounds.\nDefaults to built-in stops; an empty array uses only the bounds.",
+              "fieldName": "zoomStops"
+            },
             {
               "name": "behavior-pan",
               "type": {
@@ -54545,7 +54576,7 @@
             "since": "0.0.0",
             "status": "beta",
             "behavior": "content",
-            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
+            "markdown": "## nve-viewport\n\nA viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n\n### Example\n\n```html\n<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/viewport/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Content positioned in the viewport's infinite content space. |\n| background | `string` | Custom content rendered behind viewport content and excluded from content fitting |\n| overlay | `string` | Interactive content fixed above the transformed plane and excluded from content fitting |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| autoFit | `boolean` | Fits measurable direct default-slot content once after initial layout. |\n| behaviorPan (behavior-pan) | `boolean \\| 'space'` | Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. |\n| behaviorZoom (behavior-zoom) | `boolean` | Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. |\n| dragThreshold (drag-threshold) | `number` | CSS-pixel pointer movement required before a pointer pan begins. |\n| fitInset (fit-inset) | `number` | Default uniform CSS-pixel inset reserved around bounds when fitting content. |\n| maxScale (max-scale) | `number` | Inclusive upper scale limit. |\n| minScale (min-scale) | `number` | Inclusive lower scale limit. |\n| pannable | `boolean` | Whether the viewport may admit new user-input panning. |\n| scale | `number` | Content-to-viewport CSS-pixel scale. |\n| x | `number` | Horizontal content-space coordinate at the viewport origin. |\n| y | `number` | Vertical content-space coordinate at the viewport origin. |\n| zoomable | `boolean` | Whether the viewport may admit new user-input zooming. |\n| zoomStops (zoom-stops) | `readonly number[] \\| undefined` | Scale stops for keyboard and command zoom, clamped to the scale bounds. Defaults to built-in stops; an empty array uses only the bounds. |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| capabilitieschange | `CustomEvent` | Dispatched after effective user-input pan or zoom admission changes. |\n| pan | `CustomEvent` | Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation. |\n| panend | `CustomEvent` | Dispatched once when a sustained pan ends, including its terminal reason. |\n| panstart | `CustomEvent` | Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session. |\n| type | `CustomEvent` |  |\n| viewportchange | `CustomEvent` | Dispatched once after a render that commits one or more viewport transform changes. |\n| zoom | `CustomEvent` | Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation. |\n\n### Invoker Commands\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --pan-down | `CommandEvent` | With behavior-pan enabled, pans down by one discrete step. |\n| --pan-left | `CommandEvent` | With behavior-pan enabled, pans left by one discrete step. |\n| --pan-right | `CommandEvent` | With behavior-pan enabled, pans right by one discrete step. |\n| --pan-up | `CommandEvent` | With behavior-pan enabled, pans up by one discrete step. |\n| --zoom-in | `CommandEvent` | With behavior-zoom enabled, animates to the next permitted scale step. |\n| --zoom-out | `CommandEvent` | With behavior-zoom enabled, animates to the previous permitted scale step. |\n| --zoom-reset | `CommandEvent` | With behavior-zoom enabled, animates to 100% scale. |\n| --zoom-to-fit | `CommandEvent` | With behavior-zoom enabled, animates to fit direct default-slot element boxes. |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| animateTo | `animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void` | Animates the viewport to the requested partial transform. |\n| fitContents | `fitContents(options?: ViewportRevealOptions): void` | Fits the union of direct default-slot element boxes within the viewport. |\n| getTransform | `getTransform(): ViewportTransform` | Returns the current content-space origin and CSS-pixel scale. |\n| getVisibleRect | `getVisibleRect(): ViewportRect` | Returns the visible content-space rectangle. |\n| requestPan | `requestPan(proposal: ViewportPanProposal): boolean` | Requests one discrete user-originated pan. When pannable, the viewport dispatches a cancelable `pan` and applies the default transform if no listener cancels the event. Returns true only when that default changes the transform. |\n| requestZoom | `requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean` | Requests one discrete user-originated zoom. When zoomable, the viewport dispatches a cancelable `zoom` and applies the default transform if no listener cancels the event. Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail. Returns true when the default changes or schedules a change to the transform. |\n| reveal | `reveal(region: { x: number; y: number; width?: number; height?: number }, options?: ViewportRevealOptions): void` | Centers or fits a content-space region within the viewport. |\n| startPan | `startPan(proposal: ViewportPanProposal): ViewportPanSession \\| undefined` | Starts a sustained semantic pan after the caller crosses its activation threshold. Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates and one terminal `panend`. Returns undefined when pannable is false. |\n| toContentCoords | `toContentCoords(viewportX: number, viewportY: number): ViewportPoint` | Converts a viewport CSS-pixel point to content space. |\n| toViewportCoords | `toViewportCoords(contentX: number, contentY: number): ViewportPoint` | Converts a content-space point to viewport CSS pixels. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the fixed viewport area. [MDN](https://mdn.dev/CSS/background) |\n| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |\n| --pan-cursor | `string` | Cursor shown over a background eligible for primary-pointer panning. |\n| --panning-cursor | `string` | Cursor shown while a pointer pan is active. |"
           },
           "commands": [
             {
@@ -54589,6 +54620,10 @@
         {
           "kind": "variable",
           "name": "source"
+        },
+        {
+          "kind": "variable",
+          "name": "stops"
         }
       ],
       "exports": [

package/dist/data.html.json

@@ -5837,6 +5837,11 @@
           "description": "Inclusive upper scale limit.",
           "values": []
         },
+        {
+          "name": "zoom-stops",
+          "description": "Scale stops for keyboard and command zoom, clamped to the scale bounds.\nDefaults to built-in stops; an empty array uses only the bounds.",
+          "values": [{ "name": "readonly number[]" }]
+        },
         {
           "name": "behavior-pan",
           "description": "Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space.",

package/dist/data.snippets.json

@@ -188,33 +188,6 @@
     "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
     "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
   },
-  "Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "card"
-    ],
-    "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card"
-    ],
-    "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card-grid"
-    ],
-    "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
-  },
   "Button Group": {
     "srcFile": "button-group.snippets.html",
     "prefix": [
@@ -251,6 +224,33 @@
     "description": "Simple vertical button group with three icon buttons.",
     "body": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
   },
+  "Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "card"
+    ],
+    "type": "pattern",
+    "description": "Basic Card with header and footer",
+    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card"
+    ],
+    "type": "pattern",
+    "description": "Basic media Card with card content and card footer",
+    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card Grid": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card-grid"
+    ],
+    "type": "pattern",
+    "description": "Grid layout with 3 media cards",
+    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+  },
   "Alert Group": {
     "srcFile": "alert.snippets.html",
     "prefix": [

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -30,7 +30,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "2.12.2",
+			version: "2.13.0",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.12.2",
+			version: "2.13.0",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends m(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.12.2",
+			version: "2.13.0",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	connectedCallback() {

package/dist/format-bytes/format-bytes2.js

@@ -95,7 +95,7 @@ var g = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-bytes",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	get #e() {

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	get #e() {

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	#e;

package/dist/format-truncate/format-truncate2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	#e;

package/dist/forms/control/control2.js

@@ -48,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

package/dist/forms/control-message/control-message2.js

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	static {

package/dist/gauge/gauge2.js

@@ -40,7 +40,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	#e;

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	render() {

package/dist/grid/column/column2.js

@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.12.2"
+			version: "2.13.0"
 		};
 	}
 	get #e() {