@rededor/cura 1.7.1 → 1.8.0

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -1,16 +1,43 @@
 import { Host, h } from "@stencil/core";
 export class CuraHeading {
     constructor() {
-        this.theme = window.CuraAPI.theme;
+        /**
+         * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+         * Values: 1(default) to 6.
+         */
         this.level = 1;
+        /**
+         * Heading style size.
+         * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
+         */
         this.size = 'medium';
+        /**
+         * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.
+         * Values: regular (default) | bold.
+         */
         this.weight = 'regular';
+        /**
+        * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+        * Values: Color from design system scheme. Default to 'accent-dark'.
+        */
         this.spotColor = 'accent-dark';
-        this.color = undefined;
+        /**
+         * CSS margin-block property values.
+         * Default to 1.25em
+         */
         this.marginBlock = '1.25em';
+        /**
+         * CSS line-height property values.
+         * Default to 130%
+         */
         this.lineHeight = '130%';
+        /**
+         * Apply text-overflow ellipsis definitions.
+         * Default to none
+         */
         this.textOverflow = 'none';
         this.styles = {};
+        this.theme = window.CuraAPI.theme;
     }
     connectedCallback() {
         this.setFontProperties();
@@ -77,6 +104,7 @@ export class CuraHeading {
         return {
             "level": {
                 "type": "number",
+                "attribute": "level",
                 "mutable": false,
                 "complexType": {
                     "original": "1 | 2 | 3 | 4 | 5 | 6",
@@ -89,12 +117,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1(default) to 6."
                 },
-                "attribute": "level",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "1"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall'",
@@ -107,12 +137,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Heading style size.\nValues: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "weight": {
                 "type": "string",
+                "attribute": "weight",
                 "mutable": false,
                 "complexType": {
                     "original": "'regular' | 'bold'",
@@ -125,12 +157,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\nValues: regular (default) | bold."
                 },
-                "attribute": "weight",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'regular'"
             },
             "spotColor": {
                 "type": "string",
+                "attribute": "spot-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -143,12 +177,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
                 },
-                "attribute": "spot-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'accent-dark'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -161,11 +197,13 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "marginBlock": {
                 "type": "string",
+                "attribute": "margin-block",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,12 +216,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "CSS margin-block property values.\nDefault to 1.25em"
                 },
-                "attribute": "margin-block",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'1.25em'"
             },
             "lineHeight": {
                 "type": "string",
+                "attribute": "line-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -196,12 +236,14 @@ export class CuraHeading {
                     "tags": [],
                     "text": "CSS line-height property values.\nDefault to 130%"
                 },
-                "attribute": "line-height",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'130%'"
             },
             "textOverflow": {
                 "type": "string",
+                "attribute": "text-overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'single' | string",
@@ -214,7 +256,8 @@ export class CuraHeading {
                     "tags": [],
                     "text": "Apply text-overflow ellipsis definitions.\nDefault to none"
                 },
-                "attribute": "text-overflow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'none'"
             }

package/dist/collection/components/text/cura-heading/cura-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6  = 1;\n\n  /**\n   * Heading style size.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n  /**\n   * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop({reflect: true}) color: string;\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 130%\n   */\n  @Prop({reflect: true}) lineHeight = '130%';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({reflect: true}) textOverflow: 'none' | 'single' | string = 'none';\n\n  /**\n   * Host element <cura-heading>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n  }\n\n  getClasses() {\n    const classes = {\n      'textoverflow-single': this.textOverflow === 'single'\n    };\n    classes[this.size.toLowerCase()] =  true;\n    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n  }\n\n  hostCSSProperties() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-spot': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"heading\" aria-level={this.level}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6  = 1;\n\n  /**\n   * Heading style size.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n  /**\n   * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop({reflect: true}) color: string;\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 130%\n   */\n  @Prop({reflect: true}) lineHeight = '130%';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({reflect: true}) textOverflow: 'none' | 'single' | string = 'none';\n\n  /**\n   * Host element <cura-heading>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n  }\n\n  getClasses() {\n    const classes = {\n      'textoverflow-single': this.textOverflow === 'single'\n    };\n    classes[this.size.toLowerCase()] =  true;\n    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n  }\n\n  hostCSSProperties() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-spot': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"heading\" aria-level={this.level}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -1,14 +1,33 @@
 import { Host, h } from "@stencil/core";
 export class CuraParagraph {
     constructor() {
-        this.theme = window.CuraAPI.theme;
+        /**
+         * Set size of body text.
+         * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.
+         */
         this.size = 'medium';
+        /**
+        * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+        * Values: Color from design system scheme. Default to 'accent-dark'.
+        */
         this.spotColor = 'accent-dark';
-        this.color = undefined;
+        /**
+         * CSS margin-block property values.
+         * Default to 1.25em
+         */
         this.marginBlock = '1.25em';
+        /**
+         * CSS line-height property values.
+         * Default to 140%
+         */
         this.lineHeight = '140%';
+        /**
+         * Apply text-overflow ellipsis definitions.
+         * Default to none
+         */
         this.textOverflow = 'none';
         this.styles = {};
+        this.theme = window.CuraAPI.theme;
     }
     connectedCallback() {
         this.setFontProperties();
@@ -61,6 +80,7 @@ export class CuraParagraph {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall'",
@@ -73,12 +93,14 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "Set size of body text.\nValues: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "spotColor": {
                 "type": "string",
+                "attribute": "spot-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -91,12 +113,14 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
                 },
-                "attribute": "spot-color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'accent-dark'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -109,11 +133,13 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "marginBlock": {
                 "type": "string",
+                "attribute": "margin-block",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -126,12 +152,14 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "CSS margin-block property values.\nDefault to 1.25em"
                 },
-                "attribute": "margin-block",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'1.25em'"
             },
             "lineHeight": {
                 "type": "string",
+                "attribute": "line-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -144,12 +172,14 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "CSS line-height property values.\nDefault to 140%"
                 },
-                "attribute": "line-height",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'140%'"
             },
             "textOverflow": {
                 "type": "string",
+                "attribute": "text-overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "'none' | 'single' | string",
@@ -162,7 +192,8 @@ export class CuraParagraph {
                     "tags": [],
                     "text": "Apply text-overflow ellipsis definitions.\nDefault to none"
                 },
-                "attribute": "text-overflow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'none'"
             }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,aAAa;;QAiDxB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;oBA3CkE,QAAQ;yBAMpE,aAAa;;2BAYX,QAAQ;0BAMT,MAAM;4BAMwB,MAAM;sBAYtD,EAAE;;IAGpB,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAChC,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;YAChC,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC;YACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;SAChE,CAAC;IACJ,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,qBAAqB,EAAE,IAAI,CAAC,YAAY,KAAK,QAAQ;SACtD,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC7C,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop({reflect: true}) color: string;\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '140%';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({reflect: true}) textOverflow: 'none' | 'single' | string = 'none';\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  hostCSSProperties() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-spot': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getClasses() {\n    const classes = {\n      'textoverflow-single': this.textOverflow === 'single',\n    }\n    classes[this.size.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,aAAa;IAL1B;QAOE;;;WAGG;QACoB,SAAI,GAAoE,QAAQ,CAAC;QAExG;;;UAGE;QACqB,cAAS,GAAG,aAAa,CAAC;QAQjD;;;WAGG;QACoB,gBAAW,GAAG,QAAQ,CAAC;QAE9C;;;WAGG;QACoB,eAAU,GAAG,MAAM,CAAC;QAE3C;;;WAGG;QACoB,iBAAY,GAA+B,MAAM,CAAC;QAYhE,WAAM,GAAG,EAAE,CAAC;QACrB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;KAgD9B;IA9CC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAChC,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;YAChC,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC;YACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;SAChE,CAAC;IACJ,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,qBAAqB,EAAE,IAAI,CAAC,YAAY,KAAK,QAAQ;SACtD,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC7C,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop({reflect: true}) color: string;\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '140%';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({reflect: true}) textOverflow: 'none' | 'single' | string = 'none';\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  hostCSSProperties() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-spot': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getClasses() {\n    const classes = {\n      'textoverflow-single': this.textOverflow === 'single',\n    }\n    classes[this.size.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/components/cura-accordion-item.js

@@ -1,22 +1,39 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './cura-heading2.js';
-import { d as defineCustomElement$2 } from './cura-icon2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
+import { d as defineCustomElement$3 } from './p-BHEafDKD.js';
+import { d as defineCustomElement$2 } from './p-B5aO1chh.js';
 
 const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item::after{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item:hover:not(.active)::after{content:\"\";display:block;border-top:solid 1px var(--acc-color-icon-hover);width:100%}:host .accordion-item .label{display:flex;flex-direction:column}:host .accordion-item .label .label-container{display:flex;flex-grow:1;justify-content:space-between;align-items:center;gap:calc(var(--cura-spacing-base) * 3px);padding:calc(var(--cura-spacing-base) * 3px);word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular)}:host .accordion-item .label .label-container .label-content{display:flex;justify-content:center;align-items:center;gap:calc(var(--cura-spacing-base) * 3px)}:host .accordion-item .label .label-container .label-content cura-icon{--color:var(--acc-color) !important}:host .accordion-item .label .label-container .label-content cura-heading{--color-body:var(--acc-color) !important}:host .accordion-item .label .label-container cura-icon{--color:var(--acc-color-icon) !important;margin-right:4px}:host .accordion-item .label .label-container:hover cura-heading{--color-body:var(--acc-color-hover) !important}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--acc-color-icon-hover) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--cura-spacing-base) * 3px)}:host .accordion-item.inverted:hover:not(.active)::after{content:\"\";display:block;border-top:solid 1px var(--acc-color-icon-hover-inverted);width:100%}:host .accordion-item.inverted .label .label-container cura-heading{--color-body:var(--acc-color-inverted) !important}:host .accordion-item.inverted .label .label-container cura-icon{--color:var(--acc-color-icon-inverted) !important}:host .accordion-item.inverted .label .label-container:hover cura-heading{--color-body:var(--acc-color-hover-inverted) !important}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--acc-color-icon-hover-inverted) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;transition:max-height 0.5s ease 0.14s}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
-const CuraAccordionItemStyle0 = curaAccordionItemCss;
 
-const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordionItem extends HTMLElement {
+const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordionItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Text label for accordion item
+         */
         this.label = '';
+        /** ***Properties below are inherited from the cura-accordion*** */
+        /**
+         * Accordion items icons
+         */
         this.iconSize = 20;
         this.labelIcon = '';
         this.openIcon = 'down';
         this.closeIcon = 'up';
+        /**
+         * Color scheme base color
+         * (By default, the icon will use the same color of 'color')
+         */
         this.iconColor = '';
+        /**
+         * Set the color mode to dark or light
+         */
         this.colorMode = 'dark';
+        /**
+         * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+         * Values: 1 to 6 (3 default).
+         */
         this.level = 3;
         this.opened = false;
         this.styles = {};
@@ -39,7 +56,7 @@ const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion
     render() {
         return (h(Host, { key: '3dd53ab4a597b1726045ec4d3ed066c6c30050d0', slot: "accordion-item" }, h("div", { key: '209291c7c9b587ac546e8b9e40b7d94a11a2489e', class: this.getClasses(), style: this.styles }, h("div", { key: '9c2de1103c7f30bc9d2cb0a86fc660c98b94be84', class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { key: '052a8be2c00edf3907e49970120d9b65937ab031', class: "label-container" }, h("div", { key: 'da543cdbcb0c0d5f691c3d2fcabfbfc9ec46f506', class: "label-content" }, this.renderIcon(), h("cura-heading", { key: 'f587de080f2c1779ffacf0b557827c24edf5e1ee', size: "small", level: this.level, weight: 'bold', "margin-block": "0", color: "neutral-black" }, this.label)), h("cura-icon", { key: '611b48e32dfd7056a563aab56401feb3c8febee2', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: "neutral-black" }))), h("div", { key: 'e1d5e606f3e9415570a2a5c2ba3d96264d430bd0', class: 'content' }, h("div", { key: '62b76ef21093a4d051120e2502936049a186c36a', class: "content-wrapper" }, h("slot", { key: '646b3d0163edf473c1a2e824f251f4db85b2fc18' }))))));
     }
-    static get style() { return CuraAccordionItemStyle0; }
+    static get style() { return curaAccordionItemCss; }
 }, [1, "cura-accordion-item", {
         "label": [513],
         "iconSize": [514, "icon-size"],
@@ -80,5 +97,6 @@ const CuraAccordionItem = CuraAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraAccordionItem, defineCustomElement };
+//# sourceMappingURL=cura-accordion-item.js.map
 
 //# sourceMappingURL=cura-accordion-item.js.map

package/dist/components/cura-accordion-item.js.map

@@ -1 +1 @@
-{"file":"cura-accordion-item.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,kkFAAkkF,CAAC;AAChmF,gCAAe,oBAAoB;;MCMtBA,mBAAiB;;;;;qBAKW,EAAE;wBAMP,EAAE;yBACD,EAAE;wBACH,MAAM;yBACL,IAAI;yBAMJ,EAAE;yBAKC,MAAM;qBAMU,CAAC;sBAEC,KAAK;sBAE3C,EAAE;;IAEpB,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;QACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QACjD,OAAO,OAAO,CAAC;KAChB;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,EAAE,CAAC;QAC/B,OAAO,iBAAW,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAc,CAAC;KACnG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,UAAU,EAAE,EAClB,qEAAc,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,KAAK,EAAC,eAAe,IAC/F,IAAI,CAAC,KAAK,CACE,CACX,EACN,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAc,CACpH,CACF,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    &::after {\n      content: \"\";\n      display: block;\n      border-top: solid 1px var(--neutral-base);\n      width: 100%;\n    }\n\n    &:hover:not(.active)::after {\n      content: \"\";\n      display: block;\n      border-top: solid 1px var(--acc-color-icon-hover);\n      width: 100%;\n    }\n\n    .label {\n      display: flex;\n      flex-direction: column;\n\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: #{$spacing-xxxs};\n        padding: #{$spacing-xxxs};\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n\n        .label-content {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          gap: #{$spacing-xxxs};\n\n          cura-icon {\n            --color: var(--acc-color) !important;\n          }\n\n          cura-heading {\n            --color-body: var(--acc-color) !important;\n          }\n        }\n\n        cura-icon {\n          --color: var(--acc-color-icon) !important;\n          margin-right: 4px;\n        }\n\n        &:hover {\n          cura-heading {\n            --color-body: var(--acc-color-hover) !important;\n          }\n          cura-icon {\n            --color: var(--acc-color-icon-hover) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: #{$spacing-xxxs};\n      }\n    }\n\n    &.inverted {\n      &:hover:not(.active)::after {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--acc-color-icon-hover-inverted);\n        width: 100%;\n      }\n\n      .label .label-container {\n        cura-heading {\n          --color-body: var(--acc-color-inverted) !important;\n        }\n        cura-icon {\n          --color: var(--acc-color-icon-inverted) !important;\n        }\n        &:hover {\n          cura-heading {\n            --color-body: var(--acc-color-hover-inverted) !important;\n          }\n          cura-icon {\n            --color: var(--acc-color-icon-hover-inverted) !important;\n          }\n        }\n      }\n    }\n\n    &.active {\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 20;\n  @Prop({reflect: true}) labelIcon = '';\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color')\n   */\n  @Prop({reflect: true}) iconColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1 to 6 (3 default).\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop({reflect: true, mutable: true}) opened: boolean = false;\n\n  @State() styles = {};\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  renderIcon() {\n    if (!this.labelIcon) return '';\n    return <cura-icon name={this.labelIcon} size={this.iconSize} color={\"neutral-black\"}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <div class=\"label-content\">\n                {this.renderIcon()}\n                <cura-heading size=\"small\" level={this.level} weight='bold' margin-block=\"0\" color=\"neutral-black\">\n                  {this.label}\n                </cura-heading>\n              </div>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={\"neutral-black\"}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-accordion-item.js","mappings":"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","names":["CuraAccordionItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    &::after {\n      content: \"\";\n      display: block;\n      border-top: solid 1px var(--neutral-base);\n      width: 100%;\n    }\n\n    &:hover:not(.active)::after {\n      content: \"\";\n      display: block;\n      border-top: solid 1px var(--acc-color-icon-hover);\n      width: 100%;\n    }\n\n    .label {\n      display: flex;\n      flex-direction: column;\n\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: #{$spacing-xxxs};\n        padding: #{$spacing-xxxs};\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n\n        .label-content {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          gap: #{$spacing-xxxs};\n\n          cura-icon {\n            --color: var(--acc-color) !important;\n          }\n\n          cura-heading {\n            --color-body: var(--acc-color) !important;\n          }\n        }\n\n        cura-icon {\n          --color: var(--acc-color-icon) !important;\n          margin-right: 4px;\n        }\n\n        &:hover {\n          cura-heading {\n            --color-body: var(--acc-color-hover) !important;\n          }\n          cura-icon {\n            --color: var(--acc-color-icon-hover) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: #{$spacing-xxxs};\n      }\n    }\n\n    &.inverted {\n      &:hover:not(.active)::after {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--acc-color-icon-hover-inverted);\n        width: 100%;\n      }\n\n      .label .label-container {\n        cura-heading {\n          --color-body: var(--acc-color-inverted) !important;\n        }\n        cura-icon {\n          --color: var(--acc-color-icon-inverted) !important;\n        }\n        &:hover {\n          cura-heading {\n            --color-body: var(--acc-color-hover-inverted) !important;\n          }\n          cura-icon {\n            --color: var(--acc-color-icon-hover-inverted) !important;\n          }\n        }\n      }\n    }\n\n    &.active {\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 20;\n  @Prop({reflect: true}) labelIcon = '';\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color')\n   */\n  @Prop({reflect: true}) iconColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1 to 6 (3 default).\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  @Prop({reflect: true, mutable: true}) opened: boolean = false;\n\n  @State() styles = {};\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  renderIcon() {\n    if (!this.labelIcon) return '';\n    return <cura-icon name={this.labelIcon} size={this.iconSize} color={\"neutral-black\"}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <div class=\"label-content\">\n                {this.renderIcon()}\n                <cura-heading size=\"small\" level={this.level} weight='bold' margin-block=\"0\" color=\"neutral-black\">\n                  {this.label}\n                </cura-heading>\n              </div>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={\"neutral-black\"}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-accordion.js

@@ -1,13 +1,42 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
 
 const curaAccordionCss = ":host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}";
-const CuraAccordionStyle0 = curaAccordionCss;
 
-const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion extends HTMLElement {
+const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Color scheme base color
+         */
+        this.color = 'primary';
+        /**
+         * Set the color mode to dark or light
+         */
+        this.colorMode = 'dark';
+        /**
+         * Accordion items icons
+         */
+        this.iconSize = 20;
+        this.labelIcon = '';
+        this.openIcon = 'down';
+        this.closeIcon = 'up';
+        /**
+         * Color scheme base color
+         * (By default, the icon will use the same color of 'color')
+         */
+        this.iconColor = '';
+        /**
+         * Accordion behavior when item is clicked
+         * (The default will close all items except the current one)
+         */
+        this.behavior = 'default';
+        /**
+         * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+         * Values: 1 to 6 (3 default).
+         */
+        this.level = 3;
         this.mutationObserverCallback = (mutations, _) => {
             var _a;
             for (const mutation of mutations) {
@@ -29,15 +58,6 @@ const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion ext
             }
         };
         this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
-        this.color = 'primary';
-        this.colorMode = 'dark';
-        this.iconSize = 20;
-        this.labelIcon = '';
-        this.openIcon = 'down';
-        this.closeIcon = 'up';
-        this.iconColor = '';
-        this.behavior = 'default';
-        this.level = 3;
         this.styles = {};
     }
     handleChangeColor() {
@@ -86,7 +106,7 @@ const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion ext
     static get watchers() { return {
         "color": ["handleChangeColor"]
     }; }
-    static get style() { return CuraAccordionStyle0; }
+    static get style() { return curaAccordionCss; }
 }, [1, "cura-accordion", {
         "color": [513],
         "colorMode": [513, "color-mode"],
@@ -119,5 +139,6 @@ const CuraAccordion = CuraAccordion$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraAccordion, defineCustomElement };
+//# sourceMappingURL=cura-accordion.js.map
 
 //# sourceMappingURL=cura-accordion.js.map

package/dist/components/cura-accordion.js.map

@@ -1 +1 @@
-{"file":"cura-accordion.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0KAA0K,CAAC;AACpM,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;QA4CxB,6BAAwB,GAAG,CAAC,SAA2B,EAAE,CAAmB;;YAC1E,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;gBAChC,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,IAAI,QAAQ,CAAC,aAAa,KAAK,QAAQ,KAAI,MAAA,QAAQ,CAAC,MAAM,0CAAG,QAAQ,CAAC,CAAA,EAAE;oBACxG,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;wBAAE,SAAS;oBAC1C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,IAAI;wBAC5D,IAAI,IAAI,IAAI,QAAQ,CAAC,MAAM,EAAE;4BAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;yBACrB;qBACF,CAAC,CAAC;iBACJ;gBACD,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;oBACjC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC;oBACzD,KAAI,IAAI,IAAI,IAAI,UAAU,EAAE;wBAC1B,IAAI,CAAC,kBAAkB,CAAC,IAAoC,CAAC,CAAC;qBAC/D;iBACF;aACF;SACF,CAAA;QACD,qBAAgB,GAAqB,IAAI,gBAAgB,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;qBAvD1D,SAAS;yBASa,MAAM;wBAKzB,EAAE;yBACD,EAAE;wBACH,MAAM;yBACL,IAAI;yBAMJ,EAAE;wBAMsB,SAAS;qBAMb,CAAC;sBAsBtC,EAAE;;IAvDpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAuDD,iBAAiB;QACf,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACpE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,OAAO,CAAC,IAAI;YAC5D,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;SAC/B,CAAC,CAAC;QACH,MAAM,OAAO,GAAyB,EAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,CAAA;QAC1F,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;KAClD;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;KACpC;IAED,kBAAkB,CAAC,IAAkC;;QAEnD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC;;QAE9C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACpD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;;QAEhC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACzB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACpE,mBAAmB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,EAC/E,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,OAAO,CAAC,EAChG,wBAAwB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,SAAS,CAAC,EACxG,sBAAsB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EAC7E,4BAA4B,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,UAAU,CAAC,EAC3F,2BAA2B,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EAClF,iCAAiC,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,UAAU,CAAC,GACnH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC9B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordion"],"sources":["src/components/accordion/cura-accordion/cura-accordion.scss?tag=cura-accordion&encapsulation=shadow","src/components/accordion/cura-accordion/cura-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  color: var(--font-color);\n  font-size: var(--font-size);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  font-weight: var(--font-weight-regular);\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion',\n  styleUrl: 'cura-accordion.scss',\n  shadow: true,\n})\nexport class CuraAccordion {\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Color scheme base color\n   */\n  @Prop({reflect: true}) color = 'primary';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop({reflect: true}) colorMode: 'dark' | 'light' = 'dark';\n\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 20;\n  @Prop({reflect: true}) labelIcon = '';\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color')\n   */\n  @Prop({reflect: true}) iconColor = '';\n\n  /**\n   * Accordion behavior when item is clicked\n   * (The default will close all items except the current one)\n   */\n  @Prop({reflect: true}) behavior: 'default' | 'keep-open' = 'default';\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1 to 6 (3 default).\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6  = 3;\n\n  mutationObserverCallback = (mutations: MutationRecord[], _: MutationObserver) => {\n    for (const mutation of mutations) {\n      if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && mutation.target?.['opened']) {\n        if (this.behavior !== 'default') continue;\n        this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n          if (item != mutation.target) {\n            item.opened = false;\n          }\n        });\n      }\n      if (mutation.type === 'childList') {\n        const addedNodes = Array.from(mutation.addedNodes || []);\n        for(let node of addedNodes) {\n          this.setChildProperties(node as HTMLCuraAccordionItemElement);\n        }\n      }\n    }\n  }\n  mutationObserver: MutationObserver = new MutationObserver(this.mutationObserverCallback);\n\n  @State() styles = {};\n\n  connectedCallback() {\n    const weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-regular'] = weights.regular;\n    this.setColors();\n  }\n\n  componentDidLoad() {\n    this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n      this.setChildProperties(item);\n    });\n    const options: MutationObserverInit = {childList: true, subtree: false, attributes: false}\n    this.mutationObserver.observe(this.host, options)\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n  }\n\n  setChildProperties(item: HTMLCuraAccordionItemElement) {\n    // Theme\n    item.colorMode = this.colorMode;\n    item.iconColor = this.iconColor || this.color;\n    // Icon\n    item.iconSize = this.iconSize;\n    if (this.labelIcon) item.labelIcon = this.labelIcon; // It's possible to define a specific icon for each item.\n    item.openIcon = this.openIcon;\n    item.closeIcon = this.closeIcon;\n    // Level\n    item.level = this.level;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      \"--acc-color\": window.CuraAPI.theme.colors.getColor(\"neutral-black\"),\n      \"--acc-color-hover\": window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      \"--acc-color-icon\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`),\n      \"--acc-color-icon-hover\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-darker`),\n      \"--acc-color-inverted\": window.CuraAPI.theme.colors.getColor(\"neutral-white\"),\n      \"--acc-color-hover-inverted\": window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      \"--acc-color-icon-inverted\": window.CuraAPI.theme.colors.getColor(\"neutral-white\"),\n      \"--acc-color-icon-hover-inverted\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`),\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <slot name='accordion-item'></slot>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-accordion.js","mappings":"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","names":["CuraAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/cura-accordion/cura-accordion.scss?tag=cura-accordion&encapsulation=shadow","src/components/accordion/cura-accordion/cura-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  color: var(--font-color);\n  font-size: var(--font-size);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  font-weight: var(--font-weight-regular);\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion',\n  styleUrl: 'cura-accordion.scss',\n  shadow: true,\n})\nexport class CuraAccordion {\n\n  @Element() host: HTMLElement;\n\n  /**\n   * Color scheme base color\n   */\n  @Prop({reflect: true}) color = 'primary';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop({reflect: true}) colorMode: 'dark' | 'light' = 'dark';\n\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 20;\n  @Prop({reflect: true}) labelIcon = '';\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color')\n   */\n  @Prop({reflect: true}) iconColor = '';\n\n  /**\n   * Accordion behavior when item is clicked\n   * (The default will close all items except the current one)\n   */\n  @Prop({reflect: true}) behavior: 'default' | 'keep-open' = 'default';\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1 to 6 (3 default).\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6  = 3;\n\n  mutationObserverCallback = (mutations: MutationRecord[], _: MutationObserver) => {\n    for (const mutation of mutations) {\n      if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && mutation.target?.['opened']) {\n        if (this.behavior !== 'default') continue;\n        this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n          if (item != mutation.target) {\n            item.opened = false;\n          }\n        });\n      }\n      if (mutation.type === 'childList') {\n        const addedNodes = Array.from(mutation.addedNodes || []);\n        for(let node of addedNodes) {\n          this.setChildProperties(node as HTMLCuraAccordionItemElement);\n        }\n      }\n    }\n  }\n  mutationObserver: MutationObserver = new MutationObserver(this.mutationObserverCallback);\n\n  @State() styles = {};\n\n  connectedCallback() {\n    const weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-regular'] = weights.regular;\n    this.setColors();\n  }\n\n  componentDidLoad() {\n    this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n      this.setChildProperties(item);\n    });\n    const options: MutationObserverInit = {childList: true, subtree: false, attributes: false}\n    this.mutationObserver.observe(this.host, options)\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n  }\n\n  setChildProperties(item: HTMLCuraAccordionItemElement) {\n    // Theme\n    item.colorMode = this.colorMode;\n    item.iconColor = this.iconColor || this.color;\n    // Icon\n    item.iconSize = this.iconSize;\n    if (this.labelIcon) item.labelIcon = this.labelIcon; // It's possible to define a specific icon for each item.\n    item.openIcon = this.openIcon;\n    item.closeIcon = this.closeIcon;\n    // Level\n    item.level = this.level;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      \"--acc-color\": window.CuraAPI.theme.colors.getColor(\"neutral-black\"),\n      \"--acc-color-hover\": window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      \"--acc-color-icon\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`),\n      \"--acc-color-icon-hover\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-darker`),\n      \"--acc-color-inverted\": window.CuraAPI.theme.colors.getColor(\"neutral-white\"),\n      \"--acc-color-hover-inverted\": window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      \"--acc-color-icon-inverted\": window.CuraAPI.theme.colors.getColor(\"neutral-white\"),\n      \"--acc-color-icon-hover-inverted\": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`),\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <slot name='accordion-item'></slot>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}