@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-row/nv-row.js

@@ -0,0 +1,23 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - The row content.
+ */
+export class NvRow {
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'b6a2c143bf767ab622d0305574be11c71a770421' }, h("slot", { key: '8665290a25fdb12165d52436fc64d1a11ff93814' })));
+    }
+    static get is() { return "nv-row"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./nv-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-row.css"]
+        };
+    }
+}
+//# sourceMappingURL=nv-row.js.map

package/dist/collection/components/nv-row/nv-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-row.js","sourceRoot":"","sources":["../../../src/components/nv-row/nv-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,KAAK;IAChB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nv-stack/nv-stack.css

@@ -0,0 +1,61 @@
+nv-stack {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+}
+nv-stack nv-col {
+  display: flex;
+}
+nv-stack:not(nv-row) {
+  flex-wrap: nowrap;
+}
+nv-stack > .nv-stack-item-flex {
+  flex-shrink: 1;
+  flex-grow: 1;
+}
+nv-stack > .nv-stack-item-lead {
+  margin-right: auto;
+}
+nv-stack > .nv-stack-item-lead + * {
+  margin-left: 0;
+}
+nv-stack > .nv-stack-item-center {
+  margin-right: auto;
+  margin-left: auto;
+}
+nv-stack > .nv-stack-item-tail {
+  margin-left: auto;
+}
+nv-stack > .nv-stack-nowrap {
+  white-space: nowrap;
+}
+nv-stack.nv-stack-vertical {
+  align-items: stretch;
+  flex-direction: column;
+}
+nv-stack.nv-stack-vertical > .nv-stack-item-lead {
+  margin-right: 0;
+  margin-bottom: auto;
+}
+nv-stack.nv-stack-vertical > .nv-stack-item-lead + * {
+  margin-top: 0;
+}
+nv-stack.nv-stack-vertical > .nv-stack-item-tail {
+  margin-left: 0;
+  margin-top: auto;
+}
+nv-stack.nv-stack-vertical > .nv-stack-item-center {
+  margin: auto 0;
+}
+nv-stack.nv-stack-flex > * {
+  flex-shrink: 1;
+  flex-grow: 1;
+}
+nv-stack.nv-stack-fill > * {
+  height: 100%;
+}
+nv-stack.nv-stack-fill.nv-stack-vertical > * {
+  height: auto;
+  width: 100%;
+}

package/dist/collection/components/nv-stack/nv-stack.docs.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvStackDocs = {
+    component: 'nv-stack',
+    stories: [
+        {
+            name: 'Default',
+            args: { gutter: 2 },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+        {
+            name: nameof(x => x.fill),
+            args: { fill: true },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+        {
+            name: nameof(x => x.flex),
+            args: { flex: true },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+        {
+            name: nameof(x => x.full),
+            args: { full: true },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+        {
+            name: nameof(x => x.gutter),
+            args: { gutter: 4 },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+        {
+            name: nameof(x => x.vertical),
+            args: { vertical: true },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }), h("div", { "data-class": "nv-panel bg-gray-100" }))),
+        },
+    ],
+};
+export default NvStackDocs;
+//# sourceMappingURL=nv-stack.docs.js.map

package/dist/collection/components/nv-stack/nv-stack.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-stack.docs.js","sourceRoot":"","sources":["../../../src/components/nv-stack/nv-stack.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR;gBACE,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO;gBAC7C,yBAAgB,sBAAsB,GAAO,CACpC,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,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 NvStackDocs: NovaDocs<Components.NvStack> = {\n  component: 'nv-stack',\n  stories: [\n    {\n      name: 'Default',\n      args: { gutter: 2 },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n    {\n      name: nameof<Components.NvStack>(x => x.fill),\n      args: { fill: true },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n    {\n      name: nameof<Components.NvStack>(x => x.flex),\n      args: { flex: true },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n    {\n      name: nameof<Components.NvStack>(x => x.full),\n      args: { full: true },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n    {\n      name: nameof<Components.NvStack>(x => x.gutter),\n      args: { gutter: 4 },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n    {\n      name: nameof<Components.NvStack>(x => x.vertical),\n      args: { vertical: true },\n      template: (\n        <nv-stack data-storybook-args>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n          <div data-class=\"nv-panel bg-gray-100\"></div>\n        </nv-stack>\n      ),\n    },\n  ],\n};\n\nexport default NvStackDocs;\n"]}

package/dist/collection/components/nv-stack/nv-stack.js

@@ -0,0 +1,123 @@
+import { Host, h } from "@stencil/core";
+import clsx from "clsx";
+/**
+ * @deprecated Please use tailwind classes instead
+ * @slot default - Content of the stack
+ */
+export class NvStack {
+    constructor() {
+        this.gutter = 2;
+        this.fill = undefined;
+        this.flex = undefined;
+        this.full = undefined;
+        this.vertical = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '4c8889bb870137f5c3aa8fc499c26fc77bc6fba1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'dbd5b334a0e6ee5aa3bbc0431d44d81933f1c05c' })));
+    }
+    static get is() { return "nv-stack"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./nv-stack.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gutter": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gutter refers to the space that exists between children components inside\nthe stack container."
+                },
+                "attribute": "gutter",
+                "reflect": true,
+                "defaultValue": "2"
+            },
+            "fill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill will force the children to fill the stack depending of the direction\nof the stack. In horizontal position, the children take the height of the\nstack. In vertical position, the children take the width of the stack."
+                },
+                "attribute": "fill",
+                "reflect": true
+            },
+            "flex": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flex will force the children to share the stack between the children\ndepending of the direction of the stack. In horizontal position, the\nchildren width will share the width of the stack. In vertical position,\nthe children height will share the height of the stack."
+                },
+                "attribute": "flex",
+                "reflect": true
+            },
+            "full": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full set the width of the stack to 100%.\n(same effect as WFull props)"
+                },
+                "attribute": "full",
+                "reflect": true
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the element of the stack vertically."
+                },
+                "attribute": "vertical",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=nv-stack.js.map

package/dist/collection/components/nv-stack/nv-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-stack.js","sourceRoot":"","sources":["../../../src/components/nv-stack/nv-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;GAGG;AAMH,MAAM,OAAO,OAAO;;sBASQ,CAAC;;;;;;IAgC3B,uBAAuB;IACvB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EAC1D,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EACzD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nv-tooltip/nv-tooltip.css

@@ -0,0 +1,22 @@
+nv-tooltip {
+  display: inline-block;
+  position: relative;
+}
+nv-tooltip:has([fluid]:not([fluid=false])) {
+  display: block;
+}
+nv-tooltip [data-scope=popover] {
+  background: var(--components-tooltip-background);
+  color: var(--components-tooltip-text);
+  font-weight: var(--font-weight-medium-emphasis);
+  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+  font-size: var(--tooltip-font-size);
+  border-radius: var(--tooltip-radius);
+  border: none;
+  box-shadow: 0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);
+}
+nv-tooltip [data-scope=arrow] {
+  background: var(--components-tooltip-background);
+  box-shadow: none;
+  border: none;
+}

package/dist/collection/components/nv-tooltip/nv-tooltip.docs.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvTooltipDocs = {
+    component: 'nv-tooltip',
+    subcomponents: ['nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            args: { message: 'This is a tooltip.' },
+            template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"))),
+        },
+        {
+            name: nameof(x => x.message),
+            args: { message: 'This is a tooltip. You can focus or hover' },
+            template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"))),
+        },
+        {
+            name: nameof(x => x.placement),
+            args: { message: 'Place Me!' },
+            template: (h("div", { "data-class": "flex py-6 gap-4" }, h("nv-tooltip", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", null, "Bottom")), h("nv-tooltip", { "data-storybook-args": true, placement: "left" }, h("nv-button", null, "Left")), h("nv-tooltip", { "data-storybook-args": true, placement: "right" }, h("nv-button", null, "Right")), h("nv-tooltip", { "data-storybook-args": true, placement: "top" }, h("nv-button", null, "Top")))),
+        },
+        {
+            name: 'MultipleTooltips',
+            description: 'Tooltips will automatically be grouped together, preventing animation overlap.',
+            args: {
+                message: 'We are in a group. Try to switch between them fast.',
+            },
+            template: (h("div", { "data-class": "py-6 flex gap-4" }, h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")))),
+        },
+        {
+            name: nameof(x => x.enterDelay),
+            args: { enterDelay: 500, message: 'Delayed!' },
+            template: (h("div", { "data-class": "flex py-6 gap-4" }, h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")))),
+        },
+    ],
+};
+export default NvTooltipDocs;
+//# sourceMappingURL=nv-tooltip.docs.js.map

package/dist/collection/components/nv-tooltip/nv-tooltip.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tooltip.docs.js","sourceRoot":"","sources":["../../../src/components/nv-tooltip/nv-tooltip.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,aAAa,GAAmC;IACpD,SAAS,EAAE,YAAY;IACvB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE;YACvC,QAAQ,EAAE,CACR,6DAA2C,MAAM;gBAC/C,gCAA+B,CACpB,CACd;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAClD,IAAI,EAAE,EAAE,OAAO,EAAE,2CAA2C,EAAE;YAC9D,QAAQ,EAAE,CACR,6DAA2C,MAAM;gBAC/C,gCAA+B,CACpB,CACd;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACpD,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;YAC9B,QAAQ,EAAE,CACR,yBAAgB,iBAAiB;gBAC/B,+CAAgC,SAAS,EAAC,QAAQ;oBAChD,8BAA6B,CAClB;gBAEb,+CAAgC,SAAS,EAAC,MAAM;oBAC9C,4BAA2B,CAChB;gBAEb,+CAAgC,SAAS,EAAC,OAAO;oBAC/C,6BAA4B,CACjB;gBAEb,+CAAgC,SAAS,EAAC,KAAK;oBAC7C,2BAA0B,CACf,CACT,CACP;SACF;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,WAAW,EACT,gFAAgF;YAClF,IAAI,EAAE;gBACJ,OAAO,EAAE,qDAAqD;aAC/D;YACD,QAAQ,EAAE,CACR,yBAAgB,iBAAiB;gBAC/B;oBACE,gCAA+B,CACpB;gBAEb;oBACE,gCAA+B,CACpB;gBAEb;oBACE,gCAA+B,CACpB;gBAEb;oBACE,gCAA+B,CACpB,CACT,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;YACrD,IAAI,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE;YAC9C,QAAQ,EAAE,CACR,yBAAgB,iBAAiB;gBAC/B;oBACE,gCAA+B,CACpB;gBAEb;oBACE,gCAA+B,CACpB,CACT,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,aAAa,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 NvTooltipDocs: NovaDocs<Components.NvTooltip> = {\n  component: 'nv-tooltip',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      args: { message: 'This is a tooltip.' },\n      template: (\n        <nv-tooltip data-storybook-args data-class=\"py-6\">\n          <nv-button>Hover Me</nv-button>\n        </nv-tooltip>\n      ),\n    },\n    {\n      name: nameof<Components.NvTooltip>(x => x.message),\n      args: { message: 'This is a tooltip. You can focus or hover' },\n      template: (\n        <nv-tooltip data-storybook-args data-class=\"py-6\">\n          <nv-button>Hover Me</nv-button>\n        </nv-tooltip>\n      ),\n    },\n    {\n      name: nameof<Components.NvTooltip>(x => x.placement),\n      args: { message: 'Place Me!' },\n      template: (\n        <div data-class=\"flex py-6 gap-4\">\n          <nv-tooltip data-storybook-args placement=\"bottom\">\n            <nv-button>Bottom</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args placement=\"left\">\n            <nv-button>Left</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args placement=\"right\">\n            <nv-button>Right</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args placement=\"top\">\n            <nv-button>Top</nv-button>\n          </nv-tooltip>\n        </div>\n      ),\n    },\n    {\n      name: 'MultipleTooltips',\n      description:\n        'Tooltips will automatically be grouped together, preventing animation overlap.',\n      args: {\n        message: 'We are in a group. Try to switch between them fast.',\n      },\n      template: (\n        <div data-class=\"py-6 flex gap-4\">\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvTooltip>(x => x.enterDelay),\n      args: { enterDelay: 500, message: 'Delayed!' },\n      template: (\n        <div data-class=\"flex py-6 gap-4\">\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n\n          <nv-tooltip data-storybook-args>\n            <nv-button>Hover Me</nv-button>\n          </nv-tooltip>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTooltipDocs;\n"]}

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

@@ -0,0 +1,102 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default - Content to be placed as the trigger.
+ * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.
+ */
+export class NvTooltip {
+    constructor() {
+        this.message = undefined;
+        this.placement = 'bottom';
+        this.enterDelay = 0;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === null;
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '7fbaa673028556f15b8c15a863f066d79b7b844e' }, h("slot", { key: 'b9007b3c3326ed7bb3bea05c2b2ad90d49b25a45' }), h("nv-popover", { key: '9a72b61bf4af4a769ba5ad991925bc982a440f93', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'aa7d584e0db97792915f5460a7760ad16f45c5ba', slot: "content" }, this.message), h("slot", { key: 'fc32501ada94b526adf6e9fcb71ec355f72a163d', name: "content" }))));
+    }
+    static get is() { return "nv-tooltip"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A string representing the text to be displayed inside the tooltip. This\ncontent is shown when the tooltip is activated by the user, such as on\nhover or focus events."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides where the tooltip shows up next to the element it\u2019s linked to\n(above, below, to the sides). If there isn\u2019t enough room, it will adjust\nit's position on the axis to fit on the screen, so users can always see it."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "enterDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls how long (in milliseconds) the tooltip waits to show after you\nhover over or focus on an element. If you move away before the delay is up,\nthe tooltip won\u2019t appear."
+                },
+                "attribute": "enter-delay",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-tooltip.js.map

package/dist/collection/components/nv-tooltip/nv-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-tooltip.js","sourceRoot":"","sources":["../../../src/components/nv-tooltip/nv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlE;;;GAGG;AAMH,MAAM,OAAO,SAAS;;;yBAqBY,QAAQ;0BAQV,CAAC;;IAE/B,uBAAuB;IACvB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa;YAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK;gBACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n  private triggerElement!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won’t appear.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === null;\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const DevComponents = () => (h("div", null, 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, "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-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("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" }), h("nv-badge", { color: "2", label: "Badge color 2" }), 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" })));
+//# sourceMappingURL=dev-components.js.map

package/dist/collection/dev/dev-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-components.js","sourceRoot":"","sources":["../../src/dev/dev-components.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport const DevComponents: FunctionalComponent = () => (\n  <div>\n    <div class=\"flex gap-4 items-start mb-20\">\n      <nv-menu>\n        <nv-button slot=\"trigger\">Button</nv-button>\n        <ul slot=\"content\">\n          <nv-menuitem id=\"foo\" disabled data-testid=\"disabled-item\">\n            Menu Item 1\n          </nv-menuitem>\n          <nv-menuitem id=\"bar\" data-testid=\"enabled-item\">\n            Menu Item 2\n          </nv-menuitem>\n        </ul>\n      </nv-menu>\n      <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n        <nv-button>Tooltip!</nv-button>\n        <img\n          slot=\"content\"\n          class=\"rounded border-white\"\n          src=\"https://picsum.photos/200/50\"\n          alt=\"profile\"\n        />\n      </nv-tooltip>\n      <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n        <nv-button>Tooltip!</nv-button>\n        <img\n          slot=\"content\"\n          class=\"rounded border-white\"\n          src=\"https://picsum.photos/200/50\"\n          alt=\"profile\"\n        />\n      </nv-tooltip>\n      <nv-tooltip message=\"hello!\" group-name=\"tooltip-test\">\n        <nv-button>Tooltip!</nv-button>\n        <img\n          slot=\"content\"\n          class=\"rounded border-white\"\n          src=\"https://picsum.photos/200/50\"\n          alt=\"profile\"\n        />\n      </nv-tooltip>\n\n      <nv-popover\n        placement=\"bottom\"\n        has-arrow\n        group-name=\"test\"\n        trigger-mode=\"click\"\n      >\n        <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        </p>\n      </nv-popover>\n      <nv-popover\n        placement=\"bottom\"\n        has-arrow\n        group-name=\"test\"\n        trigger-mode=\"click\"\n      >\n        <nv-button slot=\"trigger\">trigger popover</nv-button>\n\n        <p slot=\"content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n        </p>\n      </nv-popover>\n\n      <nv-menu>\n        <nv-button slot=\"trigger\">\n          <nv-icon name=\"menu\" slot=\"leading-icon\"></nv-icon>Menu\n        </nv-button>\n\n        <ul slot=\"content\">\n          <nv-menuitem icon=\"user\" shortcut=\"&#8984;K\" disabled>\n            Item 1\n          </nv-menuitem>\n\n          <nv-menuitem icon=\"bulb\" disabled>\n            Item 2\n          </nv-menuitem>\n\n          <nv-menuitem icon=\"bulb\">Item 3</nv-menuitem>\n          <nv-menuitem icon=\"bulb\">Item 4</nv-menuitem>\n          <nv-menuitem icon=\"bulb\">Item 5</nv-menuitem>\n\n          <hr />\n\n          <nv-menu nested placement=\"right-start\">\n            <nv-menuitem slot=\"trigger\" hasSubmenu>\n              submenu\n            </nv-menuitem>\n\n            <ul slot=\"content\">\n              <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n              <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n              <nv-menu nested placement=\"right-start\">\n                <nv-menuitem icon=\"bulb\" slot=\"trigger\" hasSubmenu>\n                  submenu\n                </nv-menuitem>\n\n                <ul slot=\"content\">\n                  <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n                  <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n                  <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n                  <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n                </ul>\n              </nv-menu>\n              <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n            </ul>\n          </nv-menu>\n\n          <nv-menu nested placement=\"right-start\">\n            <nv-menuitem slot=\"trigger\" hasSubmenu>\n              submenu\n            </nv-menuitem>\n\n            <ul slot=\"content\">\n              <nv-menuitem icon=\"bulb\">Sub Item 1</nv-menuitem>\n              <nv-menuitem icon=\"bulb\">Sub Item 2</nv-menuitem>\n              <nv-menuitem icon=\"bulb\">Sub Item 3</nv-menuitem>\n              <nv-menuitem icon=\"bulb\">Sub Item 4</nv-menuitem>\n            </ul>\n          </nv-menu>\n        </ul>\n      </nv-menu>\n    </div>\n\n    <nv-row>\n      <nv-col size={4}>Col-4</nv-col>\n      <nv-col size={8}>Col-8</nv-col>\n    </nv-row>\n\n    <nv-badge></nv-badge>\n    <nv-badge label=\"Label\"></nv-badge>\n    <nv-badge lead-icon=\"user\"></nv-badge>\n\n    <nv-badge label=\"Icon slot\">\n      <nv-icon slot=\"leading-icon\" name=\"user\">\n        {' '}\n      </nv-icon>\n    </nv-badge>\n\n    <nv-badge label=\"Icon slot\" lead-icon=\"home\">\n      <nv-icon slot=\"leading-icon\" name=\"search\">\n        {' '}\n      </nv-icon>\n    </nv-badge>\n\n    <nv-badge label=\"Icon slot\">\n      <nv-icon slot=\"leading-icon\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-search\"\n        >\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path d=\"M8 9h8\" />\n          <path d=\"M8 13h5\" />\n          <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\" />\n          <path d=\"M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n          <path d=\"M20.2 20.2l1.8 1.8\" />\n        </svg>\n      </nv-icon>\n    </nv-badge>\n\n    <nv-badge dismissible label=\"hello\"></nv-badge>\n    <nv-badge color=\"1\" label=\"Badge color 1\"></nv-badge>\n    <nv-badge color=\"2\" label=\"Badge color 2\"></nv-badge>\n    <nv-badge color=\"3\" label=\"Badge color 3\"></nv-badge>\n    <nv-badge color=\"4\" label=\"Badge color 4\"></nv-badge>\n    <nv-badge color=\"5\" label=\"Badge color 5\"></nv-badge>\n  </div>\n);\n"]}

package/dist/collection/dev/dev-forms.js

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const DevForms = () => (h("div", null, h("fieldset", null, h("nv-fieldradio", { class: "m-6", label: "hello 1", name: "test", value: "1", description: "hello", "error-description": "wrong", disabled: true, error: true, "label-placement": "before" }), h("nv-fieldradio", { class: "m-6", label: "hello 2", name: "test", value: "2", error: true }), h("nv-fieldradio", { class: "m-6", label: "hello 3", name: "test", value: "3" })), h("form", { class: "m-6" }, h("nv-avatar", { size: "xs", initials: "AB", color: "1" }), h("nv-avatar", { size: "xl", src: "https://picsum.photos/200/400.jpg" }), h("nv-icon", { name: "user", size: "xl" }), h("nv-icon", { name: "search", size: "sm" }), h("nv-icon", { name: "chart-bubble", size: "xs" }), h("nv-icon", { name: "icon-5", size: "lg" }), h("div", { class: "my-10 flex" }, h("nv-button", { type: "button", id: "toggle", class: "mb-4 ml-auto mr-auto", size: "xs", emphasis: "high" }, "Hello", h("nv-icon", { name: "user", slot: "leading-icon" }), h("nv-icon", { name: "user", slot: "leading-icon" }), h("nv-icon", { name: "user", slot: "leading-icon" }), h("nv-icon", { name: "user", slot: "trailing-icon" }))), h("nv-alert", { heading: "Alert Title", message: "Alert Message", feedback: "error", dismissible: true }, "hello"), h("nv-fieldtext", { label: "Hello World", description: "hello", placeholder: "test", "error-description": "wrong", required: true, minlength: 10, value: "test", readonly: true }), h("nv-fieldnumber", { label: "Hello Number", description: "Tell number I said hello.", step: 0.2, value: 2, min: 0, max: 3 }), h("nv-fieldcheckbox", { id: "mysuperid" }), h("nv-fieldcheckbox", { id: "mysuperid", class: "nv-field nv-field-checkbox nv-field-label-before label-placement-start hydrated", value: "on", "label-placement": "startbefore" }, h("div", { class: "nv-field-input" }, h("input", { type: "checkbox", id: "mysuperid", autocomplete: "off", value: "on", class: "" }))), h("div", { class: "my-16 flex flex-col gap-16" }, h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { name: "Unchecked", label: "Unchecked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, name: "Checked", label: "Checked", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "after", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "after", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { name: "Unchecked", label: "Unchecked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, name: "Checked", label: "Checked", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, name: "Indeterminate", label: "Indeterminate", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { required: true, name: "Unchecked required", label: "Unchecked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, required: true, name: "Checked required", label: "Checked required", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, required: true, name: "Indeterminate required", label: "Indeterminate required", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { disabled: true, name: "Unchecked disabled", label: "Unchecked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, disabled: true, name: "Checked disabled", label: "Checked disabled", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, disabled: true, name: "Indeterminate disabled", label: "Indeterminate disabled", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { readonly: true, name: "Unchecked readonly", label: "Unchecked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, readonly: true, name: "Checked readonly", label: "Checked readonly", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, readonly: true, name: "Indeterminate readonly", label: "Indeterminate readonly", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", name: "Unchecked error", label: "Unchecked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", name: "Checked error", label: "Checked error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", name: "Indeterminate error", label: "Indeterminate error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", disabled: true, name: "Unchecked disabled error", label: "Unchecked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Checked disabled error", label: "Checked disabled error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", disabled: true, name: "Indeterminate disabled error", label: "Indeterminate disabled error", indeterminate: true, "label-placement": "before", description: "Description" })), h("div", { class: "flex gap-4 " }, h("nv-fieldcheckbox", { error: true, "error-description": "An error occurred", readonly: true, name: "Unchecked readonly error", label: "Unchecked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Checked readonly error", label: "Checked readonly error", "label-placement": "before", description: "Description" }), h("nv-fieldcheckbox", { checked: true, error: true, "error-description": "An error occurred", readonly: true, name: "Indeterminate readonly error", label: "Indeterminate readonly error", indeterminate: true, "label-placement": "before", description: "Description" }))))));
+//# sourceMappingURL=dev-forms.js.map

package/dist/collection/dev/dev-forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-forms.js","sourceRoot":"","sources":["../../src/dev/dev-forms.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAwB,GAAG,EAAE,CAAC,CACjD;IACE;QACE,qBACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,GAAG,EACT,WAAW,EAAC,OAAO,uBACD,OAAO,EACzB,QAAQ,QACR,KAAK,2BACW,QAAQ,GACT;QACjB,qBACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,GAAG,EACT,KAAK,SACU;QACjB,qBACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,GAAG,GACM,CACR;IACX,YAAM,KAAK,EAAC,KAAK;QACf,iBAAW,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,GAAa;QACzD,iBAAW,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,mCAAmC,GAAa;QAEzE,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAW;QACzC,eAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAW;QAC3C,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAW;QACjD,eAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAW;QAE3C,WAAK,KAAK,EAAC,YAAY;YACrB,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM;;gBAGf,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW;gBACnD,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW;gBACnD,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW;gBACnD,eAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAW,CAC1C,CACR;QAEN,gBACE,OAAO,EAAC,aAAa,EACrB,OAAO,EAAC,eAAe,EACvB,QAAQ,EAAC,OAAO,EAChB,WAAW,kBAGF;QAEX,oBACE,KAAK,EAAC,aAAa,EACnB,WAAW,EAAC,OAAO,EACnB,WAAW,EAAC,MAAM,uBACA,OAAO,EACzB,QAAQ,QACR,SAAS,EAAE,EAAE,EACb,KAAK,EAAC,MAAM,EACZ,QAAQ,SACM;QAEhB,sBACE,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,2BAA2B,EACvC,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,GACU;QAElB,wBAAkB,EAAE,EAAC,WAAW,GAAoB;QAEpD,wBACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,iFAAiF,EACvF,KAAK,EAAC,IAAI,qBACM,aAAa;YAE7B,WAAK,KAAK,EAAC,gBAAgB;gBACzB,aACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,WAAW,EACd,YAAY,EAAC,KAAK,EAClB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,EAAE,GACD,CACL,CACW;QAEnB,WAAK,KAAK,EAAC,4BAA4B;YACrC,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,WAAW,qBACD,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,qBACC,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,eAAe,EACrB,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,iBAAiB,qBACP,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,eAAe,qBACL,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAC,qBAAqB,EAC3B,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,0BAA0B,EAC/B,KAAK,EAAC,0BAA0B,qBAChB,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,qBACd,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,8BAA8B,EACnC,KAAK,EAAC,8BAA8B,EACpC,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,0BAA0B,EAC/B,KAAK,EAAC,0BAA0B,qBAChB,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,qBACd,OAAO,EACvB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,8BAA8B,EACnC,KAAK,EAAC,8BAA8B,EACpC,aAAa,2BACG,OAAO,EACvB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,WAAW,qBACD,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,qBACC,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,eAAe,EACrB,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,QAAQ,QACR,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,oBAAoB,qBACV,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,kBAAkB,qBACR,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,iBAAiB,qBACP,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,eAAe,qBACL,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAC,qBAAqB,EAC3B,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,0BAA0B,EAC/B,KAAK,EAAC,0BAA0B,qBAChB,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,qBACd,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,8BAA8B,EACnC,KAAK,EAAC,8BAA8B,EACpC,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB;YACN,WAAK,KAAK,EAAC,aAAa;gBACtB,wBACE,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,0BAA0B,EAC/B,KAAK,EAAC,0BAA0B,qBAChB,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,wBAAwB,qBACd,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP;gBACpB,wBACE,OAAO,QACP,KAAK,6BACa,mBAAmB,EACrC,QAAQ,QACR,IAAI,EAAC,8BAA8B,EACnC,KAAK,EAAC,8BAA8B,EACpC,aAAa,2BACG,QAAQ,EACxB,WAAW,EAAC,aAAa,GACP,CAChB,CACF,CACD,CACH,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport const DevForms: FunctionalComponent = () => (\n  <div>\n    <fieldset>\n      <nv-fieldradio\n        class=\"m-6\"\n        label=\"hello 1\"\n        name=\"test\"\n        value=\"1\"\n        description=\"hello\"\n        error-description=\"wrong\"\n        disabled\n        error\n        label-placement=\"before\"\n      ></nv-fieldradio>\n      <nv-fieldradio\n        class=\"m-6\"\n        label=\"hello 2\"\n        name=\"test\"\n        value=\"2\"\n        error\n      ></nv-fieldradio>\n      <nv-fieldradio\n        class=\"m-6\"\n        label=\"hello 3\"\n        name=\"test\"\n        value=\"3\"\n      ></nv-fieldradio>\n    </fieldset>\n    <form class=\"m-6\">\n      <nv-avatar size=\"xs\" initials=\"AB\" color=\"1\"></nv-avatar>\n      <nv-avatar size=\"xl\" src=\"https://picsum.photos/200/400.jpg\"></nv-avatar>\n\n      <nv-icon name=\"user\" size=\"xl\"></nv-icon>\n      <nv-icon name=\"search\" size=\"sm\"></nv-icon>\n      <nv-icon name=\"chart-bubble\" size=\"xs\"></nv-icon>\n      <nv-icon name=\"icon-5\" size=\"lg\"></nv-icon>\n\n      <div class=\"my-10 flex\">\n        <nv-button\n          type=\"button\"\n          id=\"toggle\"\n          class=\"mb-4 ml-auto mr-auto\"\n          size=\"xs\"\n          emphasis=\"high\"\n        >\n          Hello\n          <nv-icon name=\"user\" slot=\"leading-icon\"></nv-icon>\n          <nv-icon name=\"user\" slot=\"leading-icon\"></nv-icon>\n          <nv-icon name=\"user\" slot=\"leading-icon\"></nv-icon>\n          <nv-icon name=\"user\" slot=\"trailing-icon\"></nv-icon>\n        </nv-button>\n      </div>\n\n      <nv-alert\n        heading=\"Alert Title\"\n        message=\"Alert Message\"\n        feedback=\"error\"\n        dismissible\n      >\n        hello\n      </nv-alert>\n\n      <nv-fieldtext\n        label=\"Hello World\"\n        description=\"hello\"\n        placeholder=\"test\"\n        error-description=\"wrong\"\n        required\n        minlength={10}\n        value=\"test\"\n        readonly\n      ></nv-fieldtext>\n\n      <nv-fieldnumber\n        label=\"Hello Number\"\n        description=\"Tell number I said hello.\"\n        step={0.2}\n        value={2}\n        min={0}\n        max={3}\n      ></nv-fieldnumber>\n\n      <nv-fieldcheckbox id=\"mysuperid\"></nv-fieldcheckbox>\n\n      <nv-fieldcheckbox\n        id=\"mysuperid\"\n        class=\"nv-field nv-field-checkbox nv-field-label-before label-placement-start hydrated\"\n        value=\"on\"\n        label-placement=\"startbefore\"\n      >\n        <div class=\"nv-field-input\">\n          <input\n            type=\"checkbox\"\n            id=\"mysuperid\"\n            autocomplete=\"off\"\n            value=\"on\"\n            class=\"\"\n          ></input>\n        </div>\n      </nv-fieldcheckbox>\n\n      <div class=\"my-16 flex flex-col gap-16\">\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            name=\"Unchecked\"\n            label=\"Unchecked\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            name=\"Checked\"\n            label=\"Checked\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            name=\"Indeterminate\"\n            label=\"Indeterminate\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            required\n            name=\"Unchecked required\"\n            label=\"Unchecked required\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            required\n            name=\"Checked required\"\n            label=\"Checked required\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            required\n            name=\"Indeterminate required\"\n            label=\"Indeterminate required\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            disabled\n            name=\"Unchecked disabled\"\n            label=\"Unchecked disabled\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            disabled\n            name=\"Checked disabled\"\n            label=\"Checked disabled\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            disabled\n            name=\"Indeterminate disabled\"\n            label=\"Indeterminate disabled\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            readonly\n            name=\"Unchecked readonly\"\n            label=\"Unchecked readonly\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            readonly\n            name=\"Checked readonly\"\n            label=\"Checked readonly\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            readonly\n            name=\"Indeterminate readonly\"\n            label=\"Indeterminate readonly\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            name=\"Unchecked error\"\n            label=\"Unchecked error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            name=\"Checked error\"\n            label=\"Checked error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            name=\"Indeterminate error\"\n            label=\"Indeterminate error\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Unchecked disabled error\"\n            label=\"Unchecked disabled error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Checked disabled error\"\n            label=\"Checked disabled error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Indeterminate disabled error\"\n            label=\"Indeterminate disabled error\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Unchecked readonly error\"\n            label=\"Unchecked readonly error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Checked readonly error\"\n            label=\"Checked readonly error\"\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Indeterminate readonly error\"\n            label=\"Indeterminate readonly error\"\n            indeterminate\n            label-placement=\"after\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            name=\"Unchecked\"\n            label=\"Unchecked\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            name=\"Checked\"\n            label=\"Checked\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            name=\"Indeterminate\"\n            label=\"Indeterminate\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            required\n            name=\"Unchecked required\"\n            label=\"Unchecked required\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            required\n            name=\"Checked required\"\n            label=\"Checked required\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            required\n            name=\"Indeterminate required\"\n            label=\"Indeterminate required\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            disabled\n            name=\"Unchecked disabled\"\n            label=\"Unchecked disabled\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            disabled\n            name=\"Checked disabled\"\n            label=\"Checked disabled\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            disabled\n            name=\"Indeterminate disabled\"\n            label=\"Indeterminate disabled\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            readonly\n            name=\"Unchecked readonly\"\n            label=\"Unchecked readonly\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            readonly\n            name=\"Checked readonly\"\n            label=\"Checked readonly\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            readonly\n            name=\"Indeterminate readonly\"\n            label=\"Indeterminate readonly\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            name=\"Unchecked error\"\n            label=\"Unchecked error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            name=\"Checked error\"\n            label=\"Checked error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            name=\"Indeterminate error\"\n            label=\"Indeterminate error\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Unchecked disabled error\"\n            label=\"Unchecked disabled error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Checked disabled error\"\n            label=\"Checked disabled error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            disabled\n            name=\"Indeterminate disabled error\"\n            label=\"Indeterminate disabled error\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n        <div class=\"flex gap-4 \">\n          <nv-fieldcheckbox\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Unchecked readonly error\"\n            label=\"Unchecked readonly error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Checked readonly error\"\n            label=\"Checked readonly error\"\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n          <nv-fieldcheckbox\n            checked\n            error\n            error-description=\"An error occurred\"\n            readonly\n            name=\"Indeterminate readonly error\"\n            label=\"Indeterminate readonly error\"\n            indeterminate\n            label-placement=\"before\"\n            description=\"Description\"\n          ></nv-fieldcheckbox>\n        </div>\n      </div>\n    </form>\n  </div>\n);\n"]}