@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/collection/components/dnn-tabs/dnn-tabs.stories.js

@@ -0,0 +1,48 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import readme from './readme.md';
+import { injectStyles } from "../../../.storybook/utilities";
+export default {
+  title: 'Elements/Tabs',
+  component: 'dnn-tabs',
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    '--color-background': {
+      control: 'color'
+    },
+    '--color-focus': {
+      control: 'color'
+    },
+    '--color-text': {
+      control: 'color'
+    },
+    '--color-visible': {
+      control: 'color'
+    },
+    '--color-visible-text': {
+      control: 'color'
+    },
+  }
+};
+const Template = (args, context) => {
+  return html `
+<dnn-tabs style=${ifDefined(injectStyles(args, context))}>
+    <dnn-tab tab-title="Lorem Ipsum">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl vel aliquam cursus. Fusce tincidunt vitae mi a malesuada. Praesent eros mi, semper ut orci quis, faucibus viverra felis. Cras non lacus vehicula, fermentum felis id, dictum diam. Proin congue urna est, ac viverra ligula sagittis eu. Proin diam libero, vulputate egestas dui at, molestie dictum dolor. Fusce varius ex vitae massa pulvinar, ut hendrerit enim molestie. Aliquam volutpat facilisis ipsum, nec mollis elit dapibus eu. Donec scelerisque interdum tristique. Aliquam accumsan sem urna, vel posuere dui faucibus et. Mauris quis rutrum massa.</p>
+        <p>Curabitur nisl tortor, egestas a lacus eu, consectetur ornare erat. Praesent auctor ante gravida rutrum dictum. Praesent congue in enim sed ornare. In at ultrices mauris. Donec vulputate ante vel lectus ullamcorper varius. Nullam ac dui velit. Quisque porttitor, eros id interdum posuere, turpis nisi convallis ex, quis venenatis massa eros sit amet ex. Donec sem quam, consectetur at consectetur quis, suscipit sit amet ligula. Morbi nec lectus iaculis, dapibus lorem eget, molestie dui. Sed porttitor lacus ut hendrerit vulputate. Cras efficitur nec ligula ut lobortis. Cras aliquam, magna ac condimentum ullamcorper, sapien dolor varius sapien, sed volutpat lorem felis et nulla.</p>
+    </dnn-tab>
+    <dnn-tab tab-title="Bacon Ipsum">
+        <p>Bacon ipsum dolor amet kielbasa kevin prosciutto andouille doner burgdoggen ham. Flank pork belly ham landjaeger venison, cow chicken andouille. Frankfurter pork swine alcatra meatloaf drumstick capicola. Sausage landjaeger strip steak swine ribeye kielbasa. Kevin tongue andouille drumstick landjaeger shank porchetta pork beef sirloin fatback. Prosciutto tri-tip burgdoggen, chislic ham flank bresaola shank tenderloin. Capicola pancetta sirloin hamburger cupim, shankle ground round kevin flank landjaeger meatball chuck beef short ribs ball tip.</p>
+        <p>Turducken leberkas doner, hamburger venison meatloaf sausage cow pork chop pork strip steak short ribs salami alcatra beef. Pastrami tenderloin sausage turkey hamburger pork sirloin pork belly burgdoggen spare ribs bacon jowl. Tail spare ribs filet mignon kevin, swine flank drumstick jerky pork loin beef ribs pork belly fatback ground round. Short ribs tail jowl jerky kevin, cow burgdoggen pancetta. Corned beef tri-tip pastrami pork chop bresaola chuck.</p>
+    </dnn-tab>
+    <dnn-tab tab-title="CupCake Ipsum">
+        <p>Candy cookie pie caramels soufflé danish. Wafer cake gummies soufflé biscuit dragée cheesecake cheesecake. Cookie tart fruitcake oat cake bear claw macaroon jelly beans. Sesame snaps sugar plum sugar plum halvah shortbread chocolate bar pastry. Wafer caramels cake marzipan oat cake apple pie cake halvah cake. Lollipop muffin gummies jujubes lollipop topping bonbon pastry.</p>
+        <p>Gingerbread sesame snaps toffee cake cheesecake gummies cake. Danish cake sweet sweet roll oat cake gummi bears shortbread bear claw. Croissant gummi bears cake danish tart gingerbread tootsie roll carrot cake jelly beans. Liquorice biscuit pastry cake carrot cake marzipan. Brownie gummies halvah chocolate cake donut. Gummi bears cotton candy jujubes macaroon gingerbread.</p>
+    </dnn-tab>
+</dnn-tabs>
+    `;
+};
+export const Tabs = Template.bind({});
+//# sourceMappingURL=dnn-tabs.stories.js.map

package/dist/collection/components/dnn-tabs/dnn-tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-tabs/dnn-tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,eAAe;EACtB,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACR,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,oBAAoB,EAAE;MAClB,OAAO,EAAE,OAAO;KACnB;IACD,eAAe,EAAE;MACb,OAAO,EAAE,OAAO;KACnB;IACD,cAAc,EAAE;MACZ,OAAO,EAAE,OAAO;KACnB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,OAAO;KACnB;IACD,sBAAsB,EAAE;MACpB,OAAO,EAAE,OAAO;KACnB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,OAAO,EAAE,EAAE;EAEnC,OAAO,IAAI,CAAA;kBACG,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;KAcnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { injectStyles } from \"../../../.storybook/utilities\";\n\nexport default {\n    title: 'Elements/Tabs',\n    component: 'dnn-tabs',\n    parameters: {\n        notes:  readme,\n    },\n    argTypes: {\n        '--color-background': {\n            control: 'color'\n        },\n        '--color-focus': {\n            control: 'color'\n        },\n        '--color-text': {\n            control: 'color'\n        },\n        '--color-visible': {\n            control: 'color'\n        },\n        '--color-visible-text': {\n            control: 'color'\n        },\n    }\n} as Meta;\n\nconst Template = (args: {}, context) => {\n \n    return html`\n<dnn-tabs style=${ifDefined(injectStyles(args, context))}>\n    <dnn-tab tab-title=\"Lorem Ipsum\">\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl vel aliquam cursus. Fusce tincidunt vitae mi a malesuada. Praesent eros mi, semper ut orci quis, faucibus viverra felis. Cras non lacus vehicula, fermentum felis id, dictum diam. Proin congue urna est, ac viverra ligula sagittis eu. Proin diam libero, vulputate egestas dui at, molestie dictum dolor. Fusce varius ex vitae massa pulvinar, ut hendrerit enim molestie. Aliquam volutpat facilisis ipsum, nec mollis elit dapibus eu. Donec scelerisque interdum tristique. Aliquam accumsan sem urna, vel posuere dui faucibus et. Mauris quis rutrum massa.</p>\n        <p>Curabitur nisl tortor, egestas a lacus eu, consectetur ornare erat. Praesent auctor ante gravida rutrum dictum. Praesent congue in enim sed ornare. In at ultrices mauris. Donec vulputate ante vel lectus ullamcorper varius. Nullam ac dui velit. Quisque porttitor, eros id interdum posuere, turpis nisi convallis ex, quis venenatis massa eros sit amet ex. Donec sem quam, consectetur at consectetur quis, suscipit sit amet ligula. Morbi nec lectus iaculis, dapibus lorem eget, molestie dui. Sed porttitor lacus ut hendrerit vulputate. Cras efficitur nec ligula ut lobortis. Cras aliquam, magna ac condimentum ullamcorper, sapien dolor varius sapien, sed volutpat lorem felis et nulla.</p>\n    </dnn-tab>\n    <dnn-tab tab-title=\"Bacon Ipsum\">\n        <p>Bacon ipsum dolor amet kielbasa kevin prosciutto andouille doner burgdoggen ham. Flank pork belly ham landjaeger venison, cow chicken andouille. Frankfurter pork swine alcatra meatloaf drumstick capicola. Sausage landjaeger strip steak swine ribeye kielbasa. Kevin tongue andouille drumstick landjaeger shank porchetta pork beef sirloin fatback. Prosciutto tri-tip burgdoggen, chislic ham flank bresaola shank tenderloin. Capicola pancetta sirloin hamburger cupim, shankle ground round kevin flank landjaeger meatball chuck beef short ribs ball tip.</p>\n        <p>Turducken leberkas doner, hamburger venison meatloaf sausage cow pork chop pork strip steak short ribs salami alcatra beef. Pastrami tenderloin sausage turkey hamburger pork sirloin pork belly burgdoggen spare ribs bacon jowl. Tail spare ribs filet mignon kevin, swine flank drumstick jerky pork loin beef ribs pork belly fatback ground round. Short ribs tail jowl jerky kevin, cow burgdoggen pancetta. Corned beef tri-tip pastrami pork chop bresaola chuck.</p>\n    </dnn-tab>\n    <dnn-tab tab-title=\"CupCake Ipsum\">\n        <p>Candy cookie pie caramels soufflé danish. Wafer cake gummies soufflé biscuit dragée cheesecake cheesecake. Cookie tart fruitcake oat cake bear claw macaroon jelly beans. Sesame snaps sugar plum sugar plum halvah shortbread chocolate bar pastry. Wafer caramels cake marzipan oat cake apple pie cake halvah cake. Lollipop muffin gummies jujubes lollipop topping bonbon pastry.</p>\n        <p>Gingerbread sesame snaps toffee cake cheesecake gummies cake. Danish cake sweet sweet roll oat cake gummi bears shortbread bear claw. Croissant gummi bears cake danish tart gingerbread tootsie roll carrot cake jelly beans. Liquorice biscuit pastry cake carrot cake marzipan. Brownie gummies halvah chocolate cake donut. Gummi bears cotton candy jujubes macaroon gingerbread.</p>\n    </dnn-tab>\n</dnn-tabs>\n    `;\n}\n\nexport const Tabs = Template.bind({});\n"]}

package/dist/collection/components/dnn-toggle/dnn-toggle.css

@@ -45,7 +45,7 @@ button .handle {
   background-color: white;
   width: 1em;
   height: 1em;
-  border-radius: var(--dnn-controls-radius, 50%);
+  border-radius: var(--handle-border-radius, var(--dnn-controls-radius, 50%));
   position: absolute;
   top: calc(50% - 0.5em);
   left: 2px;

package/dist/collection/components/dnn-toggle/dnn-toggle.js

@@ -1,94 +1,94 @@
-import { Component, h, Element, Prop, Event, Watch, Host } from "@stencil/core";
-export class DnnToggle {
-  constructor() {
-    /** If 'true' the toggle is checked (on). */
-    this.checked = false;
-    /** If 'true' the toggle is not be interacted with. */
-    this.disabled = false;
-  }
-  checkedChanged(isChecked) {
-    this.checkChanged.emit({ checked: isChecked });
-  }
-  render() {
-    return (h(Host, null,
-      h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
-          if (!this.disabled) {
-            this.checked = !this.checked;
-          }
-        } },
-        h("div", { class: "handle" }))));
-  }
-  static get is() { return "dnn-toggle"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-toggle.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-toggle.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If 'true' the toggle is checked (on)."
-      },
-      "attribute": "checked",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If 'true' the toggle is not be interacted with."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "checkChanged",
-      "name": "checkChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the toggle changed"
-      },
-      "complexType": {
-        "original": "DnnToggleChangeEventDetail",
-        "resolved": "DnnToggleChangeEventDetail",
-        "references": {
-          "DnnToggleChangeEventDetail": {
-            "location": "import",
-            "path": "./toggle-interface"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "checkedChanged"
-    }]; }
-}
+import { Component, h, Element, Prop, Event, Watch, Host } from "@stencil/core";
+export class DnnToggle {
+  constructor() {
+    /** If 'true' the toggle is checked (on). */
+    this.checked = false;
+    /** If 'true' the toggle is not be interacted with. */
+    this.disabled = false;
+  }
+  checkedChanged(isChecked) {
+    this.checkChanged.emit({ checked: isChecked });
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
+          if (!this.disabled) {
+            this.checked = !this.checked;
+          }
+        } },
+        h("div", { class: "handle" }))));
+  }
+  static get is() { return "dnn-toggle"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-toggle.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-toggle.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' the toggle is checked (on)."
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' the toggle is not be interacted with."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkChanged",
+      "name": "checkChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the toggle changed"
+      },
+      "complexType": {
+        "original": "DnnToggleChangeEventDetail",
+        "resolved": "DnnToggleChangeEventDetail",
+        "references": {
+          "DnnToggleChangeEventDetail": {
+            "location": "import",
+            "path": "./toggle-interface"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "checked",
+      "methodName": "checkedChanged"
+    }]; }
+}
 //# sourceMappingURL=dnn-toggle.js.map

package/dist/collection/components/dnn-toggle/dnn-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-toggle.js","sourceRoot":"","sources":["../../../src/components/dnn-toggle/dnn-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,SAAS;EALtB;IASI,4CAA4C;IACrB,YAAO,GAAG,KAAK,CAAC;IAEvC,sDAAsD;IAC9C,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;EACjD,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;WAChC;QACL,CAAC;QAED,WAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n    tag: \"dnn-toggle\",\r\n    styleUrl: \"dnn-toggle.scss\",\r\n    shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n    @Element() element: HTMLDnnToggleElement;\r\n\r\n    /** If 'true' the toggle is checked (on). */\r\n    @Prop({mutable: true}) checked = false;\r\n\r\n    /** If 'true' the toggle is not be interacted with. */\r\n    @Prop() disabled = false;\r\n\r\n    /** Fires when the toggle changed */\r\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n    @Watch(\"checked\")\r\n    checkedChanged(isChecked: boolean){\r\n        this.checkChanged.emit({checked: isChecked});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                <button disabled={this.disabled} class={{'checked': this.checked}}\r\n                    onClick={() => {\r\n                        if (!this.disabled) {\r\n                            this.checked = !this.checked;\r\n                        }\r\n                    }}\r\n                >\r\n                    <div class=\"handle\"></div>\r\n                </button>\r\n            </Host>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"dnn-toggle.js","sourceRoot":"","sources":["../../../../src/components/dnn-toggle/dnn-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9F,MAAM,OAAO,SAAS;EALtB;IASI,4CAA4C;IACrB,YAAO,GAAG,KAAK,CAAC;IAEvC,sDAAsD;IAC9C,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;EACjD,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE,GAAG,EAAE;UACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;WAChC;QACL,CAAC;QAED,WAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\n\n\n@Component({\n    tag: \"dnn-toggle\",\n    styleUrl: \"dnn-toggle.scss\",\n    shadow: true\n})\nexport class DnnToggle {\n\n    @Element() element: HTMLDnnToggleElement;\n\n    /** If 'true' the toggle is checked (on). */\n    @Prop({mutable: true}) checked = false;\n\n    /** If 'true' the toggle is not be interacted with. */\n    @Prop() disabled = false;\n\n    /** Fires when the toggle changed */\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\n\n    @Watch(\"checked\")\n    checkedChanged(isChecked: boolean){\n        this.checkChanged.emit({checked: isChecked});\n    }\n\n    render() {\n        return (\n            <Host>\n                <button disabled={this.disabled} class={{'checked': this.checked}}\n                    onClick={() => {\n                        if (!this.disabled) {\n                            this.checked = !this.checked;\n                        }\n                    }}\n                >\n                    <div class=\"handle\"></div>\n                </button>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/dnn-toggle/dnn-toggle.stories.js

@@ -0,0 +1,53 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { injectStyles } from "../../../.storybook/utilities";
+import readme from './readme.md';
+export default {
+  title: 'Elements/Toggle',
+  component: 'dnn-toggle',
+  parameters: {
+    actions: {
+      handles: ['checkChanged'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'checked': {
+      control: 'boolean',
+    },
+    'disabled': {
+      control: 'boolean',
+    },
+    '--background': {
+      control: 'color'
+    },
+    '--background-checked': {
+      control: 'color'
+    },
+    '--handle-background': {
+      control: 'color'
+    },
+    '--handle-background-checked': {
+      control: 'color'
+    },
+    '--border-radius': {
+      control: 'text'
+    },
+    '--handle-border-radius': {
+      control: 'text'
+    },
+  },
+};
+const Template = (args, context) => html `
+        <dnn-toggle
+            style=${ifDefined(injectStyles(args, context))}
+            ?checked=${ifDefined(args.checked)}
+            ?disabled=${ifDefined(args.disabled)}>
+        </dnn-toggle>
+    `;
+export const Toggle = Template.bind({});
+Toggle.args = {
+  checked: false,
+  disabled: false,
+};
+//# sourceMappingURL=dnn-toggle.stories.js.map

package/dist/collection/components/dnn-toggle/dnn-toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-toggle.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-toggle/dnn-toggle.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,cAAc,CAAC;KAC5B;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,SAAS,EAAE;MACP,OAAO,EAAE,SAAS;KACrB;IACD,UAAU,EAAE;MACR,OAAO,EAAE,SAAS;KACrB;IACD,cAAc,EAAE;MACZ,OAAO,EAAE,OAAO;KACnB;IACD,sBAAsB,EAAE;MACpB,OAAO,EAAE,OAAO;KACnB;IACD,qBAAqB,EAAE;MACnB,OAAO,EAAE,OAAO;KACnB;IACD,6BAA6B,EAAE;MAC3B,OAAO,EAAE,OAAO;KACnB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,MAAM;KAClB;IACD,wBAAwB,EAAE;MACtB,OAAO,EAAE,MAAM;KAClB;GACF;CACE,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAGjB,EAAE,OAAO,EAAE,EAAE,CACV,IAAI,CAAA;;oBAEY,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;uBACnC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;wBACtB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;KAE3C,CAAC;AAEN,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACV,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport { injectStyles } from \"../../../.storybook/utilities\";\nimport readme from './readme.md';\n\nexport default {\n    title: 'Elements/Toggle',\n    component: 'dnn-toggle',\n    parameters: {\n        actions: {\n            handles: ['checkChanged'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'checked': {\n            control: 'boolean',\n        },\n        'disabled': {\n            control: 'boolean',\n        },\n        '--background': {\n            control: 'color'\n        },\n        '--background-checked': {\n            control: 'color'\n        },\n        '--handle-background': {\n            control: 'color'\n        },\n        '--handle-background-checked': {\n            control: 'color'\n        },\n        '--border-radius': {\n            control: 'text'\n        },\n        '--handle-border-radius': {\n            control: 'text'\n        },\n      },\n} as Meta;\n\nconst Template = (args: {\n    checked: boolean;\n    disabled: boolean;\n}, context) =>\n    html`\n        <dnn-toggle\n            style=${ifDefined(injectStyles(args, context))}\n            ?checked=${ifDefined(args.checked)}\n            ?disabled=${ifDefined(args.disabled)}>\n        </dnn-toggle>\n    `;\n\nexport const Toggle = Template.bind({});\nToggle.args = {\n    checked: false,\n    disabled: false,\n};\n"]}

package/dist/collection/components/dnn-toggle/toggle-interface.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=toggle-interface.js.map

package/dist/collection/components/dnn-toggle/toggle-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-interface.js","sourceRoot":"","sources":["../../../src/components/dnn-toggle/toggle-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface DnnToggleChangeEventDetail {\r\n    checked: boolean;\r\n}"]}
+{"version":3,"file":"toggle-interface.js","sourceRoot":"","sources":["../../../../src/components/dnn-toggle/toggle-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface DnnToggleChangeEventDetail {\r\n    checked: boolean;\r\n}"]}

package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js

@@ -1,127 +1,131 @@
-import { Component, Host, h, Prop, State, Element, Event, Watch } from '@stencil/core';
-export class DnnTreeviewItem {
-  constructor() {
-    /** Defines if the current node is expanded.  */
-    this.expanded = false;
-    /** Manages state for whether or not item has children. */
-    this.hasChildren = false;
-  }
-  /** Watch expanded Prop */
-  watchExpanded(expanded) {
-    if (expanded) {
-      this.expander.classList.add("expanded");
-      this.collapsible.expanded = true;
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.collapsible.expanded = false;
-  }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      const child = this.childElement.children[0];
-      const count = child.assignedElements().length;
-      if (count > 0) {
-        this.hasChildren = true;
-      }
-      if (this.expanded) {
-        this.expander.classList.add("expanded");
-        this.collapsible.expanded = false;
-        setTimeout(() => {
-          this.collapsible.expanded = true;
-        }, 300);
-      }
-    });
-  }
-  toggleCollapse() {
-    this.expanded = !this.expanded;
-    if (this.expanded) {
-      this.expander.classList.add("expanded");
-      this.userExpanded.emit();
-      return;
-    }
-    this.expander.classList.remove("expanded");
-    this.userCollapsed.emit();
-  }
-  render() {
-    return (h(Host, null,
-      h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
-        h("button", { onClick: () => this.toggleCollapse() },
-          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-            h("path", { d: "M10 17l5-5-5-5v10z" }),
-            h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))),
-      h("div", { class: "item" },
-        h("div", { class: "item-slot" },
-          h("slot", null)),
-        h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded },
-          h("div", { ref: el => this.childElement = el },
-            h("slot", { name: "children" }))))));
-  }
-  static get is() { return "dnn-treeview-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-treeview-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-treeview-item.css"]
-  }; }
-  static get properties() { return {
-    "expanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines if the current node is expanded."
-      },
-      "attribute": "expanded",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasChildren": {}
-  }; }
-  static get events() { return [{
-      "method": "userExpanded",
-      "name": "userExpanded",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the user expands a node."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "userCollapsed",
-      "name": "userCollapsed",
-      "bubbles": false,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the user collapses a node."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "expanded",
-      "methodName": "watchExpanded"
-    }]; }
-}
+import { Component, Host, h, Prop, State, Element, Event, Watch } from '@stencil/core';
+/**
+ * @slot - The content of this node.
+ * @slot children - The content nested under this node.
+*/
+export class DnnTreeviewItem {
+  constructor() {
+    /** Defines if the current node is expanded.  */
+    this.expanded = false;
+    /** Manages state for whether or not item has children. */
+    this.hasChildren = false;
+  }
+  /** Watch expanded Prop */
+  watchExpanded(expanded) {
+    if (expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = true;
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.collapsible.expanded = false;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      const child = this.childElement.children[0];
+      const count = child.assignedElements().length;
+      if (count > 0) {
+        this.hasChildren = true;
+      }
+      if (this.expanded) {
+        this.expander.classList.add("expanded");
+        this.collapsible.expanded = false;
+        setTimeout(() => {
+          this.collapsible.expanded = true;
+        }, 300);
+      }
+    });
+  }
+  toggleCollapse() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.expander.classList.add("expanded");
+      this.userExpanded.emit();
+      return;
+    }
+    this.expander.classList.remove("expanded");
+    this.userCollapsed.emit();
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
+        h("button", { onClick: () => this.toggleCollapse() },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
+            h("path", { d: "M10 17l5-5-5-5v10z" }),
+            h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))),
+      h("div", { class: "item" },
+        h("div", { class: "item-slot" },
+          h("slot", null)),
+        h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded },
+          h("div", { ref: el => this.childElement = el },
+            h("slot", { name: "children" }))))));
+  }
+  static get is() { return "dnn-treeview-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-treeview-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-treeview-item.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the current node is expanded."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasChildren": {}
+  }; }
+  static get events() { return [{
+      "method": "userExpanded",
+      "name": "userExpanded",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the user expands a node."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "userCollapsed",
+      "name": "userCollapsed",
+      "bubbles": false,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires when the user collapses a node."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "expanded",
+      "methodName": "watchExpanded"
+    }]; }
+}
 //# sourceMappingURL=dnn-treeview-item.js.map