npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.0.0-beta.36 → 3.0.0-beta.38 - Mend

@nova-design-system/nova-webcomponents 3.0.0-beta.36 → 3.0.0-beta.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (624) hide show

package/dist/collection/components/nv-table/nv-table.docs.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvTableDocs = {
     component: 'nv-table',
+    badge: 'beta',
     subcomponents: [
         'nv-tablehead',
         'nv-tablebody',

package/dist/collection/components/nv-table/nv-table.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n component: 'nv-table',\n subcomponents: [\n 'nv-tablehead',\n 'nv-tablebody',\n 'nv-tablerow',\n 'nv-tablecolumn',\n 'nv-tabledatacell',\n 'nv-icon',\n ],\n composedComponents: [\n 'nv-tablehead',\n 'nv-tablebody',\n 'nv-tablerow',\n 'nv-tablecolumn',\n 'nv-tabledatacell',\n 'nv-icon',\n ],\n stories: [\n {\n name: 'Default',\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'No Columns No Data Message',\n args: {\n noColumnsNoDataMessage: 'Nothing to display.',\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'No Data Message',\n args: {\n noDataMessage: 'No element available to display.',\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Array And Empty Data',\n args: {\n columns: ['Name', 'Age', 'Email'],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns JSON And Empty Data',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Data Array And Empty Columns',\n args: {\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Data JSON And Empty Columns',\n args: {\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Array And Data Array',\n args: {\n columns: ['Name', 'Age', 'Email'],\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns JSON And Data JSON',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Decomposed And Empty Data',\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data Array',\n args: {\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data JSON',\n args: {\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Empty Columns',\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Columns Array',\n args: {\n columns: ['Name', 'Age', 'Email'],\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Columns JSON',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data Decomposed',\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>\n <nv-icon name=\"mail\"></nv-icon>\n <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n alice@mail.com\n </a>\n </nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Slot Before',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"before\">Before</div>\n </nv-table>\n ),\n },\n {\n name: 'Slot After',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"after\">After</div>\n </nv-table>\n ),\n },\n {\n name: 'Slot Before And After',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"before\">Before</div>\n <div slot=\"after\">After</div>\n </nv-table>\n ),\n },\n ],\n};\n\nexport default NvTableDocs;\n"]}
1	+ {"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n component: 'nv-table',\n badge: 'beta',\n subcomponents: [\n 'nv-tablehead',\n 'nv-tablebody',\n 'nv-tablerow',\n 'nv-tablecolumn',\n 'nv-tabledatacell',\n 'nv-icon',\n ],\n composedComponents: [\n 'nv-tablehead',\n 'nv-tablebody',\n 'nv-tablerow',\n 'nv-tablecolumn',\n 'nv-tabledatacell',\n 'nv-icon',\n ],\n stories: [\n {\n name: 'Default',\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'No Columns No Data Message',\n args: {\n noColumnsNoDataMessage: 'Nothing to display.',\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'No Data Message',\n args: {\n noDataMessage: 'No element available to display.',\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Array And Empty Data',\n args: {\n columns: ['Name', 'Age', 'Email'],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns JSON And Empty Data',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Data Array And Empty Columns',\n args: {\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Data JSON And Empty Columns',\n args: {\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Array And Data Array',\n args: {\n columns: ['Name', 'Age', 'Email'],\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns JSON And Data JSON',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: <nv-table data-storybook-args></nv-table>,\n },\n {\n name: 'Columns Decomposed And Empty Data',\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data Array',\n args: {\n data: [\n { name: 'Alice', age: '25', email: 'alice@mail.com' },\n { name: 'Bob', age: '30', email: 'bob@mail.com' },\n ],\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data JSON',\n args: {\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Empty Columns',\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Columns Array',\n args: {\n columns: ['Name', 'Age', 'Email'],\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Data Decomposed And Columns JSON',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n },\n template: (\n <nv-table data-storybook-args>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Columns Decomposed And Data Decomposed',\n template: (\n <nv-table data-storybook-args>\n <nv-tablehead slot=\"head\">\n <nv-tablerow>\n <nv-tablecolumn>Name</nv-tablecolumn>\n <nv-tablecolumn>Age</nv-tablecolumn>\n <nv-tablecolumn>Email</nv-tablecolumn>\n </nv-tablerow>\n </nv-tablehead>\n <nv-tablebody slot=\"body\">\n <nv-tablerow>\n <nv-tabledatacell>Alice</nv-tabledatacell>\n <nv-tabledatacell>25</nv-tabledatacell>\n <nv-tabledatacell>\n <nv-icon name=\"mail\"></nv-icon>\n <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n alice@mail.com\n </a>\n </nv-tabledatacell>\n </nv-tablerow>\n <nv-tablerow>\n <nv-tabledatacell>Bob</nv-tabledatacell>\n <nv-tabledatacell>30</nv-tabledatacell>\n <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n </nv-tablerow>\n </nv-tablebody>\n </nv-table>\n ),\n },\n {\n name: 'Slot Before',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"before\">Before</div>\n </nv-table>\n ),\n },\n {\n name: 'Slot After',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"after\">After</div>\n </nv-table>\n ),\n },\n {\n name: 'Slot Before And After',\n args: {\n columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n dataJson: `[\n { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n ]`,\n },\n template: (\n <nv-table data-storybook-args>\n <div slot=\"before\">Before</div>\n <div slot=\"after\">After</div>\n </nv-table>\n ),\n },\n ],\n};\n\nexport default NvTableDocs;\n"]}

package/dist/collection/components/nv-table/nv-table.js CHANGED Viewed

@@ -6,6 +6,9 @@ import { Host, h } from "@stencil/core";
  * @slot before - Use this slot to insert HTML before the table.
  * @slot after - Use this slot to insert HTML after the table.
  * @slot body - Use this slot to insert HTML into the table body.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental - This component is still under development and is not ready for use.
  */
 export class NvTable {
     constructor() {
@@ -126,7 +129,7 @@ export class NvTable {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (h(Host, { key: '8de3c15197a92540c43b80df5eb14e456d7fa9fb' }, h("div", { key: '355ae5642547c995b0cd61f6ed5c56086546717a', class: "hidden" }, h("slot", { key: '92fadc1b368c4938723dd006ffe860ef7e3f333b' }), h("slot", { key: '68d5eee9f4f162bf8b8674e5b0387cd2c7c9443d', name: "head" }), h("slot", { key: 'a03dba982bbea6e7a49072aa44a0e3329c289759', name: "body" })), h("slot", { key: 'f8474331714b5c1f07c63d84eabdca28daac467f', name: "before" }), this.parsedColumns.length === 0 &&
+        return (h(Host, { key: '9372fd6501e5f4b069bf82845357c86cfbea5be1' }, h("div", { key: 'bcf46dcec109ca3410c412094c8111b952e68b55', class: "hidden" }, h("slot", { key: '0bff60d688bd816a292a0ac4f79b1dfc9c7e7064' }), h("slot", { key: '5dc70dac8bcba2ff8406420f6bc42d8ad65ae8fe', name: "head" }), h("slot", { key: 'c2d2240cb24d776da41e335598038227a4909949', name: "body" })), h("slot", { key: 'a36a96d5c0ef08008db29a6394b186b1034f3081', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (h("p", null, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 ? (h("thead", null, h("tr", null, this.parsedColumns.map(column => (h("th", null, column)))))) : headerRows.length > 0 ? (h("thead", null, headerRows.map(row => {
@@ -137,7 +140,7 @@ export class NvTable {
             : Object.values(row).map(value => h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (h("tr", null, cells.map(cell => (h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), h("slot", { key: 'cb6d29a453c6d76ce6e97cd5928b180d70c37a33', name: "after" })));
+        })) : null))), h("slot", { key: '786406a13707dbf9374c3c0db485d956af9677ae', name: "after" })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-table/nv-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-table.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/\n @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: './nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: string[] = []; // Parsed array of column headers\n\n @State()\n parsedData: any[] = []; // Parsed array of data rows\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Defines the table columns.\n * @example ['Name', 'Age', 'Email']\n * @default []\n /\n @Prop()\n readonly columns: string[] = [];\n\n /\n Defines the table columns.\n * It can be passed directly as an array of strings or as a JSON string.\n * @example '[\"Name\", \"Age\", \"Email\"]'\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n Defines the table data.\n * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n Defines the table data.\n * It can be passed directly as an array of objects or as a JSON string.\n * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: string[], oldValue: string[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n /\n * Parses the columns array.\n * @param {string[]} newValue - The new value of the columns array.\n * @param {string[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: string[], oldValue: string[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerRows = this.hasSlotHead\n ? Array.from(\n this.el\n .querySelector('[slot=\"head\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n const bodyRows = this.hasSlotBody\n ? Array.from(\n this.el\n .querySelector('[slot=\"body\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n headerRows.length === 0 &&\n bodyRows.length === 0 ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 ? (\n <thead>\n <tr>\n {this.parsedColumns.map(column => (\n <th>{column}</th>\n ))}\n </tr>\n </thead>\n ) : headerRows.length > 0 ? (\n <thead>\n {headerRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tablecolumn'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <th\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n scope={cell.scope}\n innerHTML={cell.innerHTML}\n ></th>\n ))}\n </tr>\n );\n })}\n </thead>\n ) : null}\n\n <tbody>\n {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : this.parsedData.length > 0 ? (\n this.parsedData.map(row => (\n <tr>\n {this.parsedColumns.length > 0\n ? this.parsedColumns.map(column => (\n <td>{row[column.toLowerCase()] \|\| ''}</td>\n ))\n : Object.values(row).map(value => <td>{value}</td>)}\n </tr>\n ))\n ) : bodyRows.length > 0 ? (\n bodyRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tabledatacell'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <td\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n innerHTML={cell.innerHTML}\n ></td>\n ))}\n </tr>\n );\n })\n ) : null}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"]}
1	+ {"version":3,"file":"nv-table.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/\n @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n \n @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n /\n@Component({\n tag: 'nv-table',\n styleUrl: './nv-table.scss',\n shadow: false,\n})\nexport class NvTable {\n @Element() el: HTMLNvTableElement;\n\n /*************************************************************************/\n //#region STATES\n\n @State()\n parsedColumns: string[] = []; // Parsed array of column headers\n\n @State()\n parsedData: any[] = []; // Parsed array of data rows\n\n @State()\n hasSlotHead: boolean = false;\n\n @State()\n hasSlotBody: boolean = false;\n\n //#endregion STATES\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Defines the table columns.\n * @example ['Name', 'Age', 'Email']\n * @default []\n /\n @Prop()\n readonly columns: string[] = [];\n\n /\n Defines the table columns.\n * It can be passed directly as an array of strings or as a JSON string.\n * @example '[\"Name\", \"Age\", \"Email\"]'\n /\n @Prop({ reflect: true })\n readonly columnsJson?: string;\n\n /\n Defines the table data.\n * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n * @default []\n /\n @Prop()\n readonly data: any[] = [];\n\n /\n Defines the table data.\n * It can be passed directly as an array of objects or as a JSON string.\n * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n /\n @Prop({ reflect: true })\n readonly dataJson?: string;\n\n /\n The message to display when there is no data available.\n * @default 'No data available'\n /\n @Prop()\n readonly noDataMessage: string = 'No data available';\n\n /\n The message to display when there are no columns or data available.\n * @default 'No data or columns available to display.'\n /\n @Prop()\n readonly noColumnsNoDataMessage: string =\n 'No data or columns available to display.';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('columns')\n parseColumns(newValue: string[], oldValue: string[]) {\n this.parseColumnsArray(newValue, oldValue);\n }\n\n @Watch('columnsJson')\n parseJsonColumns(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseColumnsArray(newItems, this.parsedColumns);\n } catch (e) {\n console.error('Invalid JSON format for columnsJson:', e.message);\n this.parsedColumns = [];\n }\n }\n\n @Watch('data')\n parseData(newValue: any[], oldValue: any[]) {\n this.parseDataArray(newValue, oldValue);\n }\n\n @Watch('dataJson')\n parseJsonData(newValue: string \| undefined) {\n try {\n const newItems = newValue ? JSON.parse(newValue) : [];\n\n this.parseDataArray(newItems, this.parsedData);\n } catch (e) {\n console.error('Invalid JSON format for dataJson:', e.message);\n this.parsedData = [];\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n /\n * Parses the columns array.\n * @param {string[]} newValue - The new value of the columns array.\n * @param {string[]} oldValue - The old value of the columns array.\n /\n private parseColumnsArray(newValue: string[], oldValue: string[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n }\n\n /\n Parses the data array.\n * @param {any[]} newValue - The new value of the data array.\n * @param {any[]} oldValue - The old value of the data array.\n /\n private parseDataArray(newValue: any[], oldValue: any[]) {\n if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n this.parsedData = Array.isArray(newValue) ? newValue : [];\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n if (this.columnsJson) {\n this.parseJsonColumns(this.columnsJson);\n } else {\n this.parseColumns(this.columns, this.parsedColumns);\n }\n\n if (this.dataJson) {\n this.parseJsonData(this.dataJson);\n } else {\n this.parseData(this.data, this.parsedData);\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n render() {\n const headerRows = this.hasSlotHead\n ? Array.from(\n this.el\n .querySelector('[slot=\"head\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n const bodyRows = this.hasSlotBody\n ? Array.from(\n this.el\n .querySelector('[slot=\"body\"]')\n .querySelectorAll('nv-tablerow'),\n )\n : [];\n\n return (\n <Host>\n <div class=\"hidden\">\n <slot></slot>\n <slot name=\"head\"></slot>\n <slot name=\"body\"></slot>\n </div>\n\n <slot name=\"before\"></slot>\n\n {this.parsedColumns.length === 0 &&\n this.parsedData.length === 0 &&\n headerRows.length === 0 &&\n bodyRows.length === 0 ? (\n <p>{this.noColumnsNoDataMessage}</p>\n ) : (\n <table>\n {this.parsedColumns.length > 0 ? (\n <thead>\n <tr>\n {this.parsedColumns.map(column => (\n <th>{column}</th>\n ))}\n </tr>\n </thead>\n ) : headerRows.length > 0 ? (\n <thead>\n {headerRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tablecolumn'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <th\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n scope={cell.scope}\n innerHTML={cell.innerHTML}\n ></th>\n ))}\n </tr>\n );\n })}\n </thead>\n ) : null}\n\n <tbody>\n {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n <tr>\n <td colSpan={this.parsedColumns.length \|\| 12}>\n {this.noDataMessage}\n </td>\n </tr>\n ) : this.parsedData.length > 0 ? (\n this.parsedData.map(row => (\n <tr>\n {this.parsedColumns.length > 0\n ? this.parsedColumns.map(column => (\n <td>{row[column.toLowerCase()] \|\| ''}</td>\n ))\n : Object.values(row).map(value => <td>{value}</td>)}\n </tr>\n ))\n ) : bodyRows.length > 0 ? (\n bodyRows.map(row => {\n const cells = Array.from(\n row.querySelectorAll('nv-tabledatacell'),\n );\n return (\n <tr>\n {cells.map(cell => (\n <td\n colSpan={cell.colspan}\n rowSpan={cell.rowspan}\n headers={cell.headers}\n innerHTML={cell.innerHTML}\n ></td>\n ))}\n </tr>\n );\n })\n ) : null}\n </tbody>\n </table>\n )}\n\n <slot name=\"after\"></slot>\n </Host>\n );\n }\n\n //#endregion RENDER\n /**************************************************************************/\n}\n"]}

package/dist/collection/components/nv-tablebody/nv-tablebody.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class NvTablebody {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '500001e6d0de218e7d0d7a8bd689164d65aaa039' }, h("tbody", { key: '97d4947747a3dcdd6f8d1d941cdc8fa19b983908' }, h("slot", { key: 'cbecc34bdc025bf64b9d810ed2ff23bb6dfc6f31' }))));
+        return (h(Host, { key: '3d720789ff593cefb4654979e2ba8da4f4b1cabe' }, h("tbody", { key: '665a9d81666f8df896054f63c6a48f8b7c6890e4' }, h("slot", { key: '5ee7f08d51cfc69998290a5c78f859716d7656d7' }))));
     }
     static get is() { return "nv-tablebody"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tablecolumn/nv-tablecolumn.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class NvTablecolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd84688d8480034f9ccfc0965056fe97d7fded63d' }, h("th", { key: '66af0bd8372fd31f26f1d76dce881a50b4c2c3a7', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: '4a7517e19a7f9db8f29d748c75dad359e75dc367' }))));
+        return (h(Host, { key: '48d70635460ac6948df4c68c8e0047e9ce541746' }, h("th", { key: '22311aa6136e6812ab6826ee1d40c29d0488dbdf', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, h("slot", { key: 'ce784ed22c04dc6518a0feb76ad5f045856d0713' }))));
     }
     static get is() { return "nv-tablecolumn"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tabledatacell/nv-tabledatacell.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class NvTabledatacell {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7a1ce39e2214eb2f85ce54642c9ce01b8af84267' }, h("td", { key: '74359eaa2f3b91c9c58bf1fb24444614c6b21676', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, h("slot", { key: 'cc6eb32e097d4b11a43194aaeda4db1ddda1ff12' }))));
+        return (h(Host, { key: '9f635d593df08dd1dfc19e8aa3b322dbed87a424' }, h("td", { key: '0e34944ec0afcdae29ab4f22736dd061f30e43d4', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, h("slot", { key: '93f888fa237c38aa92188c07cb644548fc9f98e0' }))));
     }
     static get is() { return "nv-tabledatacell"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tablehead/nv-tablehead.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class NvTablehead {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '49d3a0f625f25d004fb3c0b4fe570c9bece0cf28' }, h("thead", { key: '7c3c48978fd21f6e942c2b7da1646c79e0e96e37' }, h("slot", { key: 'f61a4f0f89571e1d3d0548b1391207a3d0f09319' }))));
+        return (h(Host, { key: 'cdf37e086d4194bdcb941942226d17ba38ec7dc7' }, h("thead", { key: '3a8f72860faed461685b8184aeb274eec59188ba' }, h("slot", { key: 'f7450cf4858bc7452e4cb840ac7e06e5848dc75f' }))));
     }
     static get is() { return "nv-tablehead"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tablerow/nv-tablerow.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class NvTablerow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b36e5025d1bdc47acfb8502ca733681b34bb5481' }, h("tr", { key: '60d9831825ab3fe6acda82ae63336c4f2dddf52a' }, h("slot", { key: 'd5f7388f36ef8a3c06d2ba13c6d2b751479be426' }))));
+        return (h(Host, { key: '065e38cdcbd56b69dba909bc2d5d6e0eb8ab51df' }, h("tr", { key: '0cdd81a4089dec01ed317a47353fdd0cc531e142' }, h("slot", { key: 'c1a734288012582482531e75e50a94556a6d809f' }))));
     }
     static get is() { return "nv-tablerow"; }
     static get originalStyleUrls() {

package/dist/collection/components/{nv-fieldtoggle/nv-fieldtoggle.css → nv-toggle/nv-toggle.css} RENAMED Viewed

@@ -1,20 +1,20 @@
-nv-fieldtoggle {
+nv-toggle {
   display: inline-flex;
   align-items: flex-start;
   gap: var(--form-gap-x);
   position: relative;
 }
-nv-fieldtoggle:not([disabled], [readonly]) input,
-nv-fieldtoggle:not([disabled], [readonly]) label {
+nv-toggle:not([disabled], [readonly]) input,
+nv-toggle:not([disabled], [readonly]) label {
   cursor: pointer;
 }
-nv-fieldtoggle.label-placement-before {
+nv-toggle.label-placement-before {
   flex-direction: row-reverse;
 }
-nv-fieldtoggle[disabled] {
+nv-toggle[disabled] {
   opacity: 0.5;
 }
-nv-fieldtoggle label {
+nv-toggle label {
   align-self: stretch;
   color: var(--components-form-text-label-default);
   font-family: "TT Norms Pro", sans-serif;
@@ -23,14 +23,14 @@ nv-fieldtoggle label {
   font-weight: 500;
   line-height: var(--form-label-line-height);
 }
-nv-fieldtoggle .input-container {
+nv-toggle .input-container {
   position: relative;
   color: var(--components-form-shape-foreground-default);
 }
-nv-fieldtoggle .input-container:has(input[type=checkbox]:disabled:not([readonly])) {
+nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])) {
   color: var(--components-form-shape-foreground-disabled);
 }
-nv-fieldtoggle .input-container input[type=checkbox] {
+nv-toggle .input-container input[type=checkbox] {
   appearance: none;
   position: relative;
   display: flex;
@@ -44,7 +44,7 @@ nv-fieldtoggle .input-container input[type=checkbox] {
   border-color: var(--components-form-field-border-default);
   background: var(--components-form-field-background-default);
 }
-nv-fieldtoggle .input-container input[type=checkbox]::after {
+nv-toggle .input-container input[type=checkbox]::after {
   content: "";
   display: block;
   width: var(--form-toggle-switch-dot-default);
@@ -56,24 +56,24 @@ nv-fieldtoggle .input-container input[type=checkbox]::after {
   left: 25%;
   transform: translate(-50%, -50%);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:hover {
+nv-toggle .input-container input[type=checkbox]:hover {
   border-color: var(--components-form-field-border-hover);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:focus {
+nv-toggle .input-container input[type=checkbox]:focus {
   border-color: var(--components-form-field-border-default);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:focus, nv-fieldtoggle .input-container input[type=checkbox]:focus-within {
+nv-toggle .input-container input[type=checkbox]:focus, nv-toggle .input-container input[type=checkbox]:focus-within {
   outline: none;
 }
-nv-fieldtoggle .input-container input[type=checkbox]:focus-visible, nv-fieldtoggle .input-container input[type=checkbox]:has(:focus-visible) {
-  outline: var(--focus-outline-stroke) solid var(--color-focus-brand);
+nv-toggle .input-container input[type=checkbox]:focus-visible, nv-toggle .input-container input[type=checkbox]:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
   outline-offset: calc(var(--focus-outline-offset) * 1);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:checked {
+nv-toggle .input-container input[type=checkbox]:checked {
   background: var(--components-form-field-background-checked);
   border-color: var(--components-form-field-background-checked);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:checked::after {
+nv-toggle .input-container input[type=checkbox]:checked::after {
   content: "";
   display: block;
   width: var(--form-toggle-switch-dot-default);
@@ -85,19 +85,19 @@ nv-fieldtoggle .input-container input[type=checkbox]:checked::after {
   left: 75%;
   transform: translate(-50%, -50%);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:checked:focus {
+nv-toggle .input-container input[type=checkbox]:checked:focus {
   background: var(--components-form-field-background-checked);
   border-color: var(--components-form-field-border-focus);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]) {
+nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]) {
   box-shadow: unset;
   background: var(--components-form-field-background-disabled);
   border-color: var(--components-form-field-border-default);
 }
-nv-fieldtoggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after {
+nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after {
   background-color: var(--components-form-shape-foreground-disabled);
 }
-nv-fieldtoggle .description {
+nv-toggle .description {
   align-self: stretch;
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
@@ -106,7 +106,7 @@ nv-fieldtoggle .description {
   font-weight: 450;
   line-height: var(--form-description-line-height);
 }
-nv-fieldtoggle .text-container {
+nv-toggle .text-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;

package/dist/collection/components/{nv-fieldtoggle/nv-fieldtoggle.docs.js → nv-toggle/nv-toggle.docs.js} RENAMED Viewed

@@ -1,65 +1,65 @@
 import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
-const NvFieldtoggleDocs = {
-    component: 'nv-fieldtoggle',
+const NvToggleDocs = {
+    component: 'nv-toggle',
     stories: [
         {
             name: 'Default',
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: nameof(x => x.label),
             description: 'The label displayed next to the toggle.',
             args: { label: 'Label' },
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: nameof(x => x.description),
             description: 'A description providing additional context or information about the toggle.',
             args: { description: 'Description' },
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: nameof(x => x.checked),
             description: 'Indicates whether the toggle is checked or not.',
             args: { checked: true },
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: nameof(x => x.disabled),
             description: 'Disables the toggle, preventing user interaction.',
             args: { disabled: true },
-            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-fieldtoggle", { "data-storybook-args": true }), h("nv-fieldtoggle", { "data-storybook-args": true, checked: true }))),
+            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-toggle", { "data-storybook-args": true }), h("nv-toggle", { "data-storybook-args": true, checked: true }))),
         },
         {
             name: nameof(x => x.readonly),
             description: 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',
             args: { readonly: true },
-            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-fieldtoggle", { "data-storybook-args": true }), h("nv-fieldtoggle", { "data-storybook-args": true, checked: true }))),
+            template: (h("div", { "data-class": "flex gap-4 " }, h("nv-toggle", { "data-storybook-args": true }), h("nv-toggle", { "data-storybook-args": true, checked: true }))),
         },
         {
             name: nameof(x => x.hideLabel),
             description: 'Hides the label visually while still keeping it available for screen readers.',
             args: { label: 'Label', hideLabel: true },
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: nameof(x => x.labelPlacement),
             description: 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',
             args: { label: 'Label', labelPlacement: 'before' },
-            template: h("nv-fieldtoggle", { "data-storybook-args": true }),
+            template: h("nv-toggle", { "data-storybook-args": true }),
         },
         {
             name: 'SlotLabel',
             description: 'You can use the `label` slot to customize the content of the label.',
-            template: (h("nv-fieldtoggle", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"))),
+            template: (h("nv-toggle", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"))),
         },
         {
             name: 'SlotDescription',
             description: 'You can use the `description` slot to customize the content of the description.',
-            template: (h("nv-fieldtoggle", { "data-storybook-args": true }, h("span", { slot: "description" }, "Description"))),
+            template: (h("nv-toggle", { "data-storybook-args": true }, h("span", { slot: "description" }, "Description"))),
         },
     ],
 };
-export default NvFieldtoggleDocs;
-//# sourceMappingURL=nv-fieldtoggle.docs.js.map
+export default NvToggleDocs;
+//# sourceMappingURL=nv-toggle.docs.js.map

package/dist/collection/components/nv-toggle/nv-toggle.docs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nv-toggle.docs.js","sourceRoot":"","sources":["../../../src/components/nv-toggle/nv-toggle.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,YAAY,GAAkC;IAClD,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/C,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACxB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACrD,WAAW,EACT,6EAA6E;YAC/E,IAAI,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACpC,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YACjD,WAAW,EAAE,iDAAiD;YAC9D,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAClD,WAAW,EAAE,mDAAmD;YAChE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,+CAA2C;gBAC3C,8CAA+B,OAAO,SAAa,CAC/C,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAClD,WAAW,EACT,uGAAuG;YACzG,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,+CAA2C;gBAC3C,8CAA+B,OAAO,SAAa,CAC/C,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACnD,WAAW,EACT,+EAA+E;YACjF,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;YACzC,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YACxD,WAAW,EACT,wGAAwG;YAC1G,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;YAClD,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,qEAAqE;YACvE,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,OAAO,YAAa,CACrB,CACb;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EACT,iFAAiF;YACnF,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,aAAa,kBAAmB,CACjC,CACb;SACF;KACF;CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvToggleDocs: NovaDocs<Components.NvToggle> = {\n component: 'nv-toggle',\n stories: [\n {\n name: 'Default',\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.label),\n description: 'The label displayed next to the toggle.',\n args: { label: 'Label' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.description),\n description:\n 'A description providing additional context or information about the toggle.',\n args: { description: 'Description' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.checked),\n description: 'Indicates whether the toggle is checked or not.',\n args: { checked: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.disabled),\n description: 'Disables the toggle, preventing user interaction.',\n args: { disabled: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n {\n name: nameof<Components.NvToggle>(x => x.readonly),\n description:\n 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',\n args: { readonly: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n {\n name: nameof<Components.NvToggle>(x => x.hideLabel),\n description:\n 'Hides the label visually while still keeping it available for screen readers.',\n args: { label: 'Label', hideLabel: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.labelPlacement),\n description:\n 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',\n args: { label: 'Label', labelPlacement: 'before' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"label\">Label</span>\n </nv-toggle>\n ),\n },\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"description\">Description</span>\n </nv-toggle>\n ),\n },\n ],\n};\n\nexport default NvToggleDocs;\n"]}

package/dist/collection/components/{nv-fieldtoggle/nv-fieldtoggle.js → nv-toggle/nv-toggle.js} RENAMED Viewed

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from "uuid";
  * @slot label - Content to be placed as the label, will override the label prop.
  * @slot description - Content to be placed as the description, will override the description prop.
  */
-export class NvFieldtoggle {
+export class NvToggle {
     constructor() {
         /****************************************************************************/
         //#region PROPERTIES
@@ -60,18 +60,19 @@ export class NvFieldtoggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3ea6cc0c5c5955ab9e2447d940e7716a8e120bd8', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '5b7df808f832edcbc600df0c64af6ad7c1e41e40', class: "input-container" }, h("input", { key: '8680c917371bf0c7b0a91610f18e51800f65f094', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '3273cf879e7ebdf9cb0ab81df4b674d39943c8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd98f1db14a1de22dc47f6f6cb95431211c364ddf', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '1a1ca78c91d39e230a95af52fff8dd1f97a095e0', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9c63a661b4a722575d74d2a0f38a41813b0b822e', class: "description" }, h("slot", { key: '5074ff74cc430a43387905a53d854e2acda5c8b5', name: "description" }, this.description))))));
+        return (h(Host, { key: 'fd7d393f428febc115781037af278a63e885b050', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '438c1274a3b4232bbfc4bb85949ce8f47c53f427', class: "input-container" }, h("input", { key: '21e8bcb0ab978e4121865d19347200a3bb764f80', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '087fa18da2cf5e0c6a3820315849789fe78773e6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b675e8019b0f01d42c36c8a9531ddfc4f1d228c0', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '060b5ad24ba0425d0f528d06e268c83631b1c4b8', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c6ff377866f8811173ff06b8aad0fc86d2f4baa8', class: "description" }, h("slot", { key: '3fc242b00e50b5d504226cf3352859fa9e1571fa', name: "description" }, this.description))))));
     }
-    static get is() { return "nv-fieldtoggle"; }
+    static get is() { return "nv-toggle"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["nv-fieldtoggle.scss"]
+            "$": ["nv-toggle.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["nv-fieldtoggle.css"]
+            "$": ["nv-toggle.css"]
         };
     }
     static get properties() {
@@ -157,13 +158,13 @@ export class NvFieldtoggle {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`${FieldLabelPlacement}`",
+                    "original": "`${LabelPlacement}`",
                     "resolved": "\"after\" | \"before\"",
                     "references": {
-                        "FieldLabelPlacement": {
+                        "LabelPlacement": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::FieldLabelPlacement"
+                            "id": "src/utils/constants.ts::LabelPlacement"
                         }
                     }
                 },
@@ -317,4 +318,4 @@ export class NvFieldtoggle {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldtoggle.js.map
+//# sourceMappingURL=nv-toggle.js.map

package/dist/collection/components/nv-toggle/nv-toggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nv-toggle.js","sourceRoot":"","sources":["../../../src/components/nv-toggle/nv-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n Event,\n EventEmitter,\n Listen,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n tag: 'nv-toggle',\n styleUrl: 'nv-toggle.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvToggle {\n @Element() el!: HTMLNvToggleElement;\n\n /****************************************************************************/\n //#region PROPERTIES\n\n /**\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n */\n @Prop()\n readonly inputId: string = uuidv4();\n\n /**\n * The name attribute for the toggle input, used to reference the form data\n * after submission.\n */\n @Prop()\n readonly name?: string;\n\n /**\n * The value attribute of the toggle input, representing the value sent on\n * form submission when the toggle is checked.\n */\n @Prop()\n readonly value?: string;\n\n /** The label displayed next to the toggle.*/\n @Prop()\n readonly label?: string;\n\n /**\n * Determines the position of the label relative to the toggle, either\n * 'start' (before) or 'end' (after).\n */\n @Prop({ reflect: true })\n readonly labelPlacement: `${LabelPlacement}`;\n\n /**\n * Hides the label visually while still keeping it available for screen\n * readers.\n */\n @Prop()\n readonly hideLabel: boolean = false;\n\n /**\n * A description providing additional context or information about the\n * toggle.\n */\n @Prop({ reflect: true })\n readonly description?: string;\n\n /** Indicates whether the toggle is checked or not. */\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /** Disables the toggle, preventing user interaction. */\n @Prop()\n readonly disabled: boolean = false;\n\n /**\n * Sets the toggle to read-only, preventing user changes but still allowing\n * focus and selection of text.\n */\n @Prop()\n readonly readonly: boolean = false;\n\n //#endregion PROPERTIES\n /****************************************************************************/\n //#region EVENTS\n\n /**\n * Emits when the checked state changes.\n * @bind checked\n */\n @Event()\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /****************************************************************************/\n //#region WATCHERS\n\n /**\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n */\n @Watch('checked')\n onCheckedChanged(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /**\n * Listens for the change event on the toggle input element and updates the checked state.\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n */\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target.type === 'checkbox' && target.id === this.inputId) {\n if (this.readonly || this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /****************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n )}\n >\n <div class=\"input-container\">\n <input\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n autocomplete=\"off\"\n value={this.value}\n checked={Boolean(this.checked)}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n />\n </div>\n\n <div class=\"text-container\">\n {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n <label\n htmlFor={this.inputId}\n class={clsx(this.hideLabel && 'visually-hidden')}\n >\n <slot name=\"label\">{this.label}</slot>\n </label>\n )}\n\n {(this.description ||\n this.el.querySelector('[slot=\"description\"]')) && (\n <div class=\"description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-tooltip/nv-tooltip.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4813090b7b9cabaa208ee6b7e384003a64a5db4b' }, h("slot", { key: 'b80271e22aab3dca30afc8c35eb9861df29669c5' }), h("nv-popover", { key: '854d726cccce5018b4eed180c97798cade7a46c5', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '343519886ef5f664a5ad461b5f3978cec527c9fb', slot: "content" }, this.message), h("slot", { key: '75eeb2a6f32e6eba85dc5d717773be4611a05de4', name: "content" }))));
+        return (h(Host, { key: 'd3fe8bc3ae08011cbee7a7f7d097f310e3d45d9d' }, h("slot", { key: '8d54cb3574200d1a0d2e59e382e08bd50f9431a1' }), h("nv-popover", { key: 'abf871f80cc732fccae585c6bdb1e2cf343c1347', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'c3e8fe0ebfa1ff29d0a160dd86f80ce475b3be8a', slot: "content" }, this.message), h("slot", { key: '541748e092313441909d88d777ed890ff4c9a104', name: "content" }))));
     }
     static get is() { return "nv-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/dev/dev-components.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { h } from "@stencil/core";
-export const DevComponents = () => (h("div", null, h("div", { class: "py-10 flex justify-center" }, h("nv-breadcrumbs", null, h("nv-breadcrumb", { tooltip: "Home" }, h("a", { href: "#" }, h("nv-icon", { name: "home" }))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Dev")), h("nv-breadcrumb", { type: "collapsed", tooltip: "Show more" }, h("li", null, h("a", { href: "#" }, "Home")), h("li", null, h("a", { href: "#" }, "About")), h("li", null, h("a", { href: "#" }, "Contact"))), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current Page")))), h("div", { class: "flex gap-4 items-start mb-20" }, h("nv-menu", null, h("nv-button", { slot: "trigger" }, "Button"), h("ul", { slot: "content" }, h("nv-menuitem", { id: "foo", disabled: true, "data-testid": "disabled-item" }, "Menu Item 1"), h("nv-menuitem", { id: "bar", "data-testid": "enabled-item" }, "Menu Item 2"))), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-popover", { placement: "bottom", "has-arrow": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "trigger popover"), h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), h("nv-popover", { placement: "bottom", "has-arrow": true, "group-name": "test", "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "trigger popover"), h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), h("nv-menu", null, h("nv-button", { slot: "trigger" }, h("nv-icon", { name: "menu", slot: "leading-icon" }), "Menu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", disabled: true }, "Item 1"), h("nv-menuitem", { icon: "bulb", disabled: true }, "Item 2"), h("nv-menuitem", { icon: "bulb" }, "Item 3"), h("nv-menuitem", { icon: "bulb" }, "Item 4"), h("nv-menuitem", { icon: "bulb" }, "Item 5"), h("hr", null), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { icon: "bulb", slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 3"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4"))), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4"))), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 3"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4")))))), h("nv-row", null, h("nv-col", { size: 4 }, "Col-4"), h("nv-col", { size: 8 }, "Col-8")), h("div", { class: "grid grid-cols-5 gap-4" }, h("nv-badge", null), h("nv-badge", { label: "Label" }), h("nv-badge", { "lead-icon": "user" }), h("nv-badge", { label: "Icon slot" }, h("nv-icon", { slot: "leading-icon", name: "user" }, ' ')), h("nv-badge", { label: "Icon slot", "lead-icon": "home" }, h("nv-icon", { slot: "leading-icon", name: "search" }, ' ')), h("nv-badge", { label: "Icon slot" }, h("nv-icon", { slot: "leading-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-message-search" }, h("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M8 9h8" }), h("path", { d: "M8 13h5" }), h("path", { d: "M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5" }), h("path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" }), h("path", { d: "M20.2 20.2l1.8 1.8" })))), h("nv-badge", { dismissible: true, label: "hello" }), h("nv-badge", { color: "1", label: "Badge color 1", leadIcon: "user" }), h("nv-badge", { color: "2", label: "Badge color 2", leadIcon: "search" }), h("nv-badge", { color: "3", label: "Badge color 3" }), h("nv-badge", { color: "4", label: "Badge color 4" }), h("nv-badge", { color: "5", label: "Badge color 5" }), h("nv-badge", { color: "6", label: "Badge color 6" }), h("nv-badge", { color: "7", label: "Badge color 7" }), h("nv-badge", { color: "8", label: "Badge color 8" }), h("nv-badge", { color: "9", label: "Badge color 9" }), h("nv-badge", { color: "10", label: "Badge color 10" }))));
+export const DevComponents = () => (h("div", null, h("div", { class: "py-10 flex justify-center" }, h("nv-breadcrumbs", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", { type: "collapsed", tooltip: "Show more" }, h("li", null, h("a", { href: "#" }, "Breadcrumb")), h("li", null, h("a", { href: "#" }, "Breadcrumb")), h("li", null, h("a", { href: "#" }, "Breadcrumb"))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Breadcrumb")), h("nv-breadcrumb", { current: true }, h("a", { href: "#" }, "Current Page")))), h("div", { class: "flex gap-4 items-start mb-20" }, h("nv-menu", null, h("nv-button", { slot: "trigger" }, "Button"), h("ul", { slot: "content" }, h("nv-menuitem", { id: "foo", disabled: true, "data-testid": "disabled-item" }, "Menu Item 1"), h("nv-menuitem", { id: "bar", "data-testid": "enabled-item" }, "Menu Item 2"))), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-tooltip", { message: "hello!", "group-name": "tooltip-test" }, h("nv-button", null, "Tooltip!"), h("img", { slot: "content", class: "rounded border-white", src: "https://picsum.photos/200/50", alt: "profile" })), h("nv-dialog", null, h("nv-button", { slot: "trigger" }, "Dialog!"), h("img", { autofocus: true, src: "https://picsum.photos/400/400" }), h("div", { slot: "footer" }, h("nv-button", null, "Custom Footer"))), h("nv-dialog", { clickOutside: true }, h("nv-button", { slot: "trigger" }, "Default dialog"), h("img", { autofocus: true, src: "https://picsum.photos/400/400" })), h("nv-popover", { placement: "bottom", "has-arrow": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "trigger popover"), h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), h("nv-popover", { placement: "bottom", "has-arrow": true, "group-name": "test", "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "trigger popover"), h("p", { slot: "content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")), h("nv-menu", null, h("nv-button", { slot: "trigger" }, h("nv-icon", { name: "menu", slot: "leading-icon" }), "Menu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", disabled: true }, "Item 1"), h("nv-menuitem", { icon: "bulb", disabled: true }, "Item 2"), h("nv-menuitem", { icon: "bulb" }, "Item 3"), h("nv-menuitem", { icon: "bulb" }, "Item 4"), h("nv-menuitem", { icon: "bulb" }, "Item 5"), h("hr", null), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { icon: "bulb", slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 3"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4"))), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4"))), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true }, "submenu"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "bulb" }, "Sub Item 1"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 2"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 3"), h("nv-menuitem", { icon: "bulb" }, "Sub Item 4")))))), h("nv-row", null, h("nv-col", { size: 4 }, "Col-4"), h("nv-col", { size: 8 }, "Col-8")), h("div", { class: "grid grid-cols-5 gap-4" }, h("nv-badge", null), h("nv-badge", { label: "Label" }), h("nv-badge", { "lead-icon": "user" }), h("nv-badge", { label: "Icon slot" }, h("nv-icon", { slot: "leading-icon", name: "user" }, ' ')), h("nv-badge", { label: "Icon slot", "lead-icon": "home" }, h("nv-icon", { slot: "leading-icon", name: "search" }, ' ')), h("nv-badge", { label: "Icon slot" }, h("nv-icon", { slot: "leading-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-message-search" }, h("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M8 9h8" }), h("path", { d: "M8 13h5" }), h("path", { d: "M11.008 19.195l-3.008 1.805v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5" }), h("path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" }), h("path", { d: "M20.2 20.2l1.8 1.8" })))), h("nv-badge", { dismissible: true, label: "hello" }), h("nv-badge", { color: "1", label: "Badge color 1", leadIcon: "user" }), h("nv-badge", { color: "2", label: "Badge color 2", leadIcon: "search" }), h("nv-badge", { color: "3", label: "Badge color 3" }), h("nv-badge", { color: "4", label: "Badge color 4" }), h("nv-badge", { color: "5", label: "Badge color 5" }), h("nv-badge", { color: "6", label: "Badge color 6" }), h("nv-badge", { color: "7", label: "Badge color 7" }), h("nv-badge", { color: "8", label: "Badge color 8" }), h("nv-badge", { color: "9", label: "Badge color 9" }), h("nv-badge", { color: "10", label: "Badge color 10" }))));
 //# sourceMappingURL=dev-components.js.map