@rededor/cura 1.2.0 → 1.3.0

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

@@ -23,14 +23,14 @@ export class CuraAccordion {
         };
         this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
         this.color = 'primary';
-        this.activeColor = 'accent';
         this.colorMode = 'dark';
-        this.iconSize = 32;
+        this.iconSize = 20;
+        this.labelIcon = '';
         this.openIcon = 'down';
         this.closeIcon = 'up';
         this.iconColor = '';
-        this.iconActiveColor = '';
         this.behavior = 'default';
+        this.level = 3;
         this.styles = {};
     }
     handleChangeColor() {
@@ -39,8 +39,6 @@ export class CuraAccordion {
     connectedCallback() {
         const weights = window.CuraAPI.theme.fonts.getWeights();
         this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
-        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
-        this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
         this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
         this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
         this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
@@ -62,17 +60,20 @@ export class CuraAccordion {
         // Theme
         item.colorMode = this.colorMode;
         item.iconColor = this.iconColor || this.color;
-        item.iconActiveColor = this.iconActiveColor || this.activeColor;
         // Icon
         item.iconSize = this.iconSize;
+        if (this.labelIcon)
+            item.labelIcon = this.labelIcon; // It's possible to define a specific icon for each item.
         item.openIcon = this.openIcon;
         item.closeIcon = this.closeIcon;
+        // Level
+        item.level = this.level;
     }
     setColors() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`), '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`), '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`), '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`), '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`), '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`), '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`), '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`), '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`), '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`), '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`), '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`) });
+        this.styles = Object.assign(Object.assign({}, this.styles), { "--acc-color": window.CuraAPI.theme.colors.getColor("neutral-black"), "--acc-color-hover": window.CuraAPI.theme.colors.getColor(`${this.color}-base`), "--acc-color-icon": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), "--acc-color-icon-hover": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-darker`), "--acc-color-inverted": window.CuraAPI.theme.colors.getColor("neutral-white"), "--acc-color-hover-inverted": window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), "--acc-color-icon-inverted": window.CuraAPI.theme.colors.getColor("neutral-white"), "--acc-color-icon-hover-inverted": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`) });
     }
     render() {
-        return (h(Host, { key: '6d25b84df610918423ce8eac4213e4f012af6a20', style: this.styles }, h("slot", { key: '812c3195ec83ecee009a221bc3bec303903c1e68', name: 'accordion-item' })));
+        return (h(Host, { key: 'a56103203dd352195eaac03957350c73a1fcfb06', style: this.styles }, h("slot", { key: '3226a757908201e1c91d6a9a195980d9020f2327', name: 'accordion-item' })));
     }
     static get is() { return "cura-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -106,24 +107,6 @@ export class CuraAccordion {
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
-            "activeColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "active-color",
-                "reflect": true,
-                "defaultValue": "'accent'"
-            },
             "colorMode": {
                 "type": "string",
                 "mutable": false,
@@ -158,9 +141,9 @@ export class CuraAccordion {
                 },
                 "attribute": "icon-size",
                 "reflect": true,
-                "defaultValue": "32"
+                "defaultValue": "20"
             },
-            "openIcon": {
+            "labelIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -174,11 +157,11 @@ export class CuraAccordion {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open-icon",
+                "attribute": "label-icon",
                 "reflect": true,
-                "defaultValue": "'down'"
+                "defaultValue": "''"
             },
-            "closeIcon": {
+            "openIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -192,11 +175,11 @@ export class CuraAccordion {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "close-icon",
+                "attribute": "open-icon",
                 "reflect": true,
-                "defaultValue": "'up'"
+                "defaultValue": "'down'"
             },
-            "iconColor": {
+            "closeIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -208,13 +191,13 @@ export class CuraAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
+                    "text": ""
                 },
-                "attribute": "icon-color",
+                "attribute": "close-icon",
                 "reflect": true,
-                "defaultValue": "''"
+                "defaultValue": "'up'"
             },
-            "iconActiveColor": {
+            "iconColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -226,9 +209,9 @@ export class CuraAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color scheme base color\n(By default, the icon will use the same color of 'color')"
                 },
-                "attribute": "icon-active-color",
+                "attribute": "icon-color",
                 "reflect": true,
                 "defaultValue": "''"
             },
@@ -249,6 +232,24 @@ export class CuraAccordion {
                 "attribute": "behavior",
                 "reflect": true,
                 "defaultValue": "'default'"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1 to 6 (3 default)."
+                },
+                "attribute": "level",
+                "reflect": true,
+                "defaultValue": "3"
             }
         };
     }
@@ -262,9 +263,6 @@ export class CuraAccordion {
         return [{
                 "propName": "color",
                 "methodName": "handleChangeColor"
-            }, {
-                "propName": "activeColor",
-                "methodName": "handleChangeColor"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"cura-accordion.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion/cura-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["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  @Prop({reflect: true}) activeColor = 'accent';\n  @Watch('color')\n  @Watch('activeColor')\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 = 32;\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' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\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  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-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);\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: true, attributes: true}\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    item.iconActiveColor = this.iconActiveColor || this.activeColor;\n    // Icon\n    item.iconSize = this.iconSize;\n    item.openIcon = this.openIcon;\n    item.closeIcon = this.closeIcon;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`),\n      '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`),\n      '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`),\n      '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`),\n      '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`),\n\n      '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`),\n      '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`),\n      '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`),\n      '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`),\n      '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`),\n      '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`),\n      '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`),\n      '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`),\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","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion/cura-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["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: true, attributes: true}\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"]}

package/dist/collection/components/accordion/cura-accordion/cura-accordion.stories.js

@@ -20,26 +20,26 @@ export default {
         // return `<div>${label}</div>`;
         return `<cura-accordion
     color="${args.color}"
-    active-color="${args.activeColor}"
-    color-mode="${args.colorMode}"
-    open-icon="${args.openIcon}"
-    close-icon="${args.closeIcon}"
-    icon-size="${args.iconSize}"
-    icon-color="${args.iconColor}"
-    icon-active-color="${args.iconActiveColor}"
-    behavior="${args.behavior}"
-    style="${args.darkBackground ? 'background-color: #999; padding: 10px' : 'padding: 10px'}"
+    color-mode="${args.colorMode}" ${args.labelIcon ? `
+    label-icon="${args.labelIcon}"` : ''} ${args.openIcon ? `
+    open-icon="${args.openIcon}"` : ''} ${args.closeIcon ? `
+    close-icon="${args.closeIcon}"` : ''}
+    icon-size="${args.iconSize}" ${args.iconColor ? `
+    icon-color="${args.iconColor}"` : ''}
+    behavior="${args.behavior}" ${args.level ? `
+    level="${args.level}"` : ''}
+    style="${args.darkBackground ? 'background-color: black; padding: 10px' : 'padding: 10px'}"
   >
-    <cura-accordion-item label="Item 1">
+    <cura-accordion-item label="${args.label} 1" ${args.labelIconItem ? `label-icon="${args.labelIconItem}"` : ''}>
       Texto 1
     </cura-accordion-item>
-    <cura-accordion-item label="Item 2">
+    <cura-accordion-item label="Label 2">
       Texto 2
     </cura-accordion-item>
-    <cura-accordion-item label="Item 3">
+    <cura-accordion-item label="Label 3">
       Texto 3
     </cura-accordion-item>
-    <cura-accordion-item label="Item 4">
+    <cura-accordion-item label="Label 4">
       Texto 4
     </cura-accordion-item>
   </cura-accordion>`;
@@ -55,16 +55,6 @@ export default {
             },
             name: 'color'
         },
-        activeColor: {
-            control: { type: 'select' },
-            options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-            description: 'Define cor base do item ativo. Cor do DS sem profundidade (ex: accent).',
-            table: {
-                category: 'Properties',
-                defaultValue: { summary: 'accent' }
-            },
-            name: 'active-color'
-        },
         colorMode: {
             control: { type: 'inline-radio' },
             options: ['dark', 'light'],
@@ -85,6 +75,23 @@ export default {
             },
             name: 'behavior'
         },
+        level: {
+            control: { type: 'number', min: 1, max: 6, step: 1 },
+            description: 'Define a tag semântica da label. Ex. h1, h2, h3, etc.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 3 }
+            }
+        },
+        labelIcon: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Ícone da label. (É possivel adicionar este atributo diretamente em um "cura-accordion-item")',
+            table: {
+                category: 'Icons'
+            },
+            name: 'label-icon'
+        },
         openIcon: {
             control: { type: 'select' },
             options: iconNames,
@@ -111,7 +118,7 @@ export default {
             description: 'Tamanho do ícone.',
             table: {
                 category: 'Icons',
-                defaultValue: { summary: '24' }
+                defaultValue: { summary: '20' }
             },
             name: 'icon-size'
         },
@@ -124,15 +131,6 @@ export default {
             },
             name: 'icon-color'
         },
-        iconActiveColor: {
-            control: { type: 'select' },
-            options: ['', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
-            description: 'Cor do ícone ativo. (Por padrão ele utiliza a mesma cor da propriedade \'active-color\').',
-            table: {
-                category: 'Icons',
-            },
-            name: 'icon-active-color'
-        },
         darkBackground: {
             control: 'boolean',
             description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em temas escuros de background',
@@ -141,20 +139,40 @@ export default {
                 defaultValue: { summary: 'false' }
             }
         },
+        label: {
+            control: 'text',
+            description: 'Label do item.',
+            table: {
+                category: 'Accordion Item 1'
+            },
+            name: 'label'
+        },
+        labelIconItem: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Ícone da label do item.',
+            table: {
+                category: 'Accordion Item 1'
+            },
+            name: 'label-icon'
+        },
     },
 };
 export const Accordion = {
     args: {
         color: 'primary',
-        activeColor: 'accent',
         colorMode: 'dark',
+        labelIcon: '',
         openIcon: 'down',
         closeIcon: 'up',
-        iconSize: '24',
+        iconSize: '20',
         iconColor: "",
-        iconActiveColor: "",
         behavior: 'default',
+        level: '',
         darkBackground: false,
+        // Accordion Item
+        label: "Label do item",
+        labelIconItem: "",
     },
 };
 //# sourceMappingURL=cura-accordion.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cura-accordion.stories.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion/cura-accordion.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,mFAAmF;QACnF,gCAAgC;QAChC,OAAO;aACE,IAAI,CAAC,KAAK;oBACH,IAAI,CAAC,WAAW;kBAClB,IAAI,CAAC,SAAS;iBACf,IAAI,CAAC,QAAQ;kBACZ,IAAI,CAAC,SAAS;iBACf,IAAI,CAAC,QAAQ;kBACZ,IAAI,CAAC,SAAS;yBACP,IAAI,CAAC,eAAe;gBAC7B,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,eAAe;;;;;;;;;;;;;;oBAcxE,CAAC;IACnB,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YAC7F,WAAW,EAAE,oEAAoE;YACjF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;aACpC;YACD,IAAI,EAAE,OAAO;SACd;QACD,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YAC7F,WAAW,EAAE,yEAAyE;YACtF,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;aACnC;YACD,IAAI,EAAE,cAAc;SACrB;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;aACjC;YACD,IAAI,EAAE,YAAY;SACnB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;YACjC,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;aACpC;YACD,IAAI,EAAE,UAAU;SACjB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0BAA0B;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;aACjC;YACD,IAAI,EAAE,WAAW;SAClB;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;aAC/B;YACD,IAAI,EAAE,YAAY;SACnB;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAChE,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;aAC/B;YACD,IAAI,EAAE,WAAW;SAClB;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACjG,WAAW,EAAE,8EAA8E;YAC3F,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;YACD,IAAI,EAAE,YAAY;SACnB;QACD,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACjG,WAAW,EAAE,2FAA2F;YACxG,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;YACD,IAAI,EAAE,mBAAmB;SAC1B;QAED,cAAc,EAAE;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,4HAA4H;YACzI,KAAK,EAAE;gBACL,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;aAClC;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,QAAQ;QACrB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE,EAAE;QACb,eAAe,EAAE,EAAE;QACnB,QAAQ,EAAE,SAAS;QACnB,cAAc,EAAE,KAAK;KACtB;CACF,CAAC","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Componentes/Accordion/Accordion',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-accordion\n    color=\"${args.color}\"\n    active-color=\"${args.activeColor}\"\n    color-mode=\"${args.colorMode}\"\n    open-icon=\"${args.openIcon}\"\n    close-icon=\"${args.closeIcon}\"\n    icon-size=\"${args.iconSize}\"\n    icon-color=\"${args.iconColor}\"\n    icon-active-color=\"${args.iconActiveColor}\"\n    behavior=\"${args.behavior}\"\n    style=\"${args.darkBackground ? 'background-color: #999; padding: 10px' : 'padding: 10px'}\"\n  >\n    <cura-accordion-item label=\"Item 1\">\n      Texto 1\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Item 2\">\n      Texto 2\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Item 3\">\n      Texto 3\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Item 4\">\n      Texto 4\n    </cura-accordion-item>\n  </cura-accordion>`;\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Define cor base do item. Cor do DS sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      },\n      name: 'color'\n    },\n    activeColor: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Define cor base do item ativo. Cor do DS sem profundidade (ex: accent).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent'}\n      },\n      name: 'active-color'\n    },\n    colorMode: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Seta tema claro ou escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'color-mode'\n    },\n    behavior: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'keep-open'],\n      description: 'Comportamento do accordion.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default'}\n      },\n      name: 'behavior'\n    },\n    openIcon: {\n      control: { type: 'select' },\n      options: iconNames,\n      description: 'Ícone para abrir o item.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'down'}\n      },\n      name: 'open-icon'\n    },\n    closeIcon: {\n      control: { type: 'select' },\n      options: iconNames,\n      description: 'Ícone para fechar o item.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'up'}\n      },\n      name: 'close-icon'\n    },\n    iconSize: {\n      control: { type: 'select' },\n      options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n      description: 'Tamanho do ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: '24'}\n      },\n      name: 'icon-size'\n    },\n    iconColor: {\n      control: { type: 'select' },\n      options: ['', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor do ícone. (Por padrão ele utiliza a mesma cor da propriedade \\'color\\').',\n      table: {\n        category: 'Icons',\n      },\n      name: 'icon-color'\n    },\n    iconActiveColor: {\n      control: { type: 'select' },\n      options: ['', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor do ícone ativo. (Por padrão ele utiliza a mesma cor da propriedade \\'active-color\\').',\n      table: {\n        category: 'Icons',\n      },\n      name: 'icon-active-color'\n    },\n\n    darkBackground: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em temas escuros de background',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n  },\n};\n\nexport const Accordion = {\n  args: {\n    color: 'primary',\n    activeColor: 'accent',\n    colorMode: 'dark',\n    openIcon: 'down',\n    closeIcon: 'up',\n    iconSize: '24',\n    iconColor: \"\",\n    iconActiveColor: \"\",\n    behavior: 'default',\n    darkBackground: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-accordion.stories.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion/cura-accordion.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Componentes/Accordion/Accordion',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-accordion\n    color=\"${args.color}\"\n    color-mode=\"${args.colorMode}\" ${args.labelIcon ? `\n    label-icon=\"${args.labelIcon}\"` : ''} ${args.openIcon ? `\n    open-icon=\"${args.openIcon}\"` : ''} ${args.closeIcon ? `\n    close-icon=\"${args.closeIcon}\"` : ''}\n    icon-size=\"${args.iconSize}\" ${args.iconColor ? `\n    icon-color=\"${args.iconColor}\"` : ''}\n    behavior=\"${args.behavior}\" ${args.level ? `\n    level=\"${args.level}\"` : ''}\n    style=\"${args.darkBackground ? 'background-color: black; padding: 10px' : 'padding: 10px'}\"\n  >\n    <cura-accordion-item label=\"${args.label} 1\" ${args.labelIconItem ? `label-icon=\"${args.labelIconItem}\"` : ''}>\n      Texto 1\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Label 2\">\n      Texto 2\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Label 3\">\n      Texto 3\n    </cura-accordion-item>\n    <cura-accordion-item label=\"Label 4\">\n      Texto 4\n    </cura-accordion-item>\n  </cura-accordion>`;\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Define cor base do item. Cor do DS sem profundidade (ex: primary).',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary'}\n      },\n      name: 'color'\n    },\n    colorMode: {\n      control: { type: 'inline-radio' },\n      options: ['dark', 'light'],\n      description: 'Seta tema claro ou escuro.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'dark'}\n      },\n      name: 'color-mode'\n    },\n    behavior: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'keep-open'],\n      description: 'Comportamento do accordion.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default'}\n      },\n      name: 'behavior'\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica da label. Ex. h1, h2, h3, etc.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 3 }\n      }\n    },\n    labelIcon: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Ícone da label. (É possivel adicionar este atributo diretamente em um \"cura-accordion-item\")',\n      table: {\n        category: 'Icons'\n      },\n      name: 'label-icon'\n    },\n    openIcon: {\n      control: { type: 'select' },\n      options: iconNames,\n      description: 'Ícone para abrir o item.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'down'}\n      },\n      name: 'open-icon'\n    },\n    closeIcon: {\n      control: { type: 'select' },\n      options: iconNames,\n      description: 'Ícone para fechar o item.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'up'}\n      },\n      name: 'close-icon'\n    },\n    iconSize: {\n      control: { type: 'select' },\n      options: [\"128\", \"72\", \"64\", \"48\", \"40\", \"32\", \"24\", \"20\", \"16\"],\n      description: 'Tamanho do ícone.',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: '20'}\n      },\n      name: 'icon-size'\n    },\n    iconColor: {\n      control: { type: 'select' },\n      options: ['', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n      description: 'Cor do ícone. (Por padrão ele utiliza a mesma cor da propriedade \\'color\\').',\n      table: {\n        category: 'Icons',\n      },\n      name: 'icon-color'\n    },\n\n    darkBackground: {\n      control: 'boolean',\n      description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em temas escuros de background',\n      table: {\n        category: 'CSS',\n        defaultValue: { summary: 'false'}\n      }\n    },\n\n    label: {\n      control: 'text',\n      description: 'Label do item.',\n      table: {\n        category: 'Accordion Item 1'\n      },\n      name: 'label'\n    },\n    labelIconItem: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Ícone da label do item.',\n      table: {\n        category: 'Accordion Item 1'\n      },\n      name: 'label-icon'\n    },\n\n  },\n};\n\nexport const Accordion = {\n  args: {\n    color: 'primary',\n    colorMode: 'dark',\n    labelIcon: '',\n    openIcon: 'down',\n    closeIcon: 'up',\n    iconSize: '20',\n    iconColor: \"\",\n    behavior: 'default',\n    level: '',\n    darkBackground: false,\n\n    // Accordion Item\n    label: \"Label do item\",\n    labelIconItem: \"\",\n  },\n};\n"]}

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.css

@@ -23,50 +23,79 @@
  * Responsive media for large and up.
  * Use: @include large-up() { ... }
  */
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
 :host {
   display: block;
 }
 :host .accordion-item {
   width: 100%;
 }
-:host .accordion-item .label {
-  display: flex;
-  flex-direction: column;
-}
-:host .accordion-item .label::before {
+: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(--base-spacing) * 2px);
-  min-height: 40px;
+  gap: calc(var(--base-spacing) * 3px);
+  padding: calc(var(--base-spacing) * 3px);
   word-break: break-word;
   cursor: pointer;
   font-size: 1.14em;
   font-weight: var(--font-weight-regular);
-  color: var(--color-base);
-  padding: 0px;
+}
+:host .accordion-item .label .label-container .label-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--base-spacing) * 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 {
-  color: var(--color-light);
+: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(--icon-color-light) !important;
-}
-:host .accordion-item .label .label-container:active {
-  color: var(--color-dark);
-}
-:host .accordion-item .label .label-container:active cura-icon {
-  --color: var(--icon-color-dark) !important;
+  --color: var(--acc-color-icon-hover) !important;
 }
 :host .accordion-item .content {
   font-size: 1em;
@@ -75,59 +104,31 @@
   transition: max-height 0.25s ease;
 }
 :host .accordion-item .content .content-wrapper {
-  padding: calc(var(--base-spacing) * 2px) 0px;
-  border-top: solid 1px var(--neutral-base);
+  padding: calc(var(--base-spacing) * 3px);
 }
-:host .accordion-item.active .label .label-container {
-  color: var(--color-active-base);
+: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.active .label .label-container:hover {
-  color: var(--color-active-light);
+:host .accordion-item.inverted .label .label-container cura-heading {
+  --color-body: var(--acc-color-inverted) !important;
 }
-:host .accordion-item.active .label .label-container:hover cura-icon {
-  --color: var(--icon-color-active-light) !important;
+:host .accordion-item.inverted .label .label-container cura-icon {
+  --color: var(--acc-color-icon-inverted) !important;
 }
-:host .accordion-item.active .label .label-container:active {
-  color: var(--color-active-dark);
+:host .accordion-item.inverted .label .label-container:hover cura-heading {
+  --color-body: var(--acc-color-hover-inverted) !important;
 }
-:host .accordion-item.active .label .label-container:active cura-icon {
-  --color: var(--icon-color-active-dark) !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;
 }
-:host .accordion-item.inverted .label .label-container {
-  color: var(--neutral-lighter);
-}
-:host .accordion-item.inverted .label .label-container:hover {
-  color: var(--color-lighter);
-}
-:host .accordion-item.inverted .label .label-container:hover cura-icon {
-  --color: var(--icon-color-lighter) !important;
-}
-:host .accordion-item.inverted .label .label-container:active {
-  color: var(--color-light);
-}
-:host .accordion-item.inverted .label .label-container:active cura-icon {
-  --color: var(--icon-color-light) !important;
-}
-:host .accordion-item.active.inverted .label .label-container {
-  color: var(--neutral-purewhite);
-}
-:host .accordion-item.active.inverted .label .label-container:hover {
-  color: var(--color-active-lighter);
-}
-:host .accordion-item.active.inverted .label .label-container:hover cura-icon {
-  --color: var(--icon-color-active-lighter) !important;
-}
-:host .accordion-item.active.inverted .label .label-container:active {
-  color: var(--color-active-light);
-}
-:host .accordion-item.active.inverted .label .label-container:active cura-icon {
-  --color: var(--icon-color-active-light) !important;
-}
 @media (min-width: 769px) and (max-width: 992px) {
   :host .accordion-item .label .label-container {
     font-size: 1.29em;