@rededor/cura 0.4.7 → 0.4.8

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

@@ -0,0 +1,272 @@
+import { Host, h } from '@stencil/core';
+export class CuraAccordion {
+  constructor() {
+    this.mutationObserverCallback = (mutations, _) => {
+      var _a;
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
+          if (this.behavior !== 'default')
+            continue;
+          this.host.querySelectorAll('cura-accordion-item').forEach(item => {
+            if (item != mutation.target) {
+              item.opened = false;
+            }
+          });
+        }
+        if (mutation.type === 'childList') {
+          const addedNodes = Array.from(mutation.addedNodes || []);
+          for (let node of addedNodes) {
+            this.setChildProperties(node);
+          }
+        }
+      }
+    };
+    this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
+    this.color = 'primary';
+    this.activeColor = 'accent';
+    this.colorMode = 'dark';
+    this.iconSize = 32;
+    this.openIcon = 'down';
+    this.closeIcon = 'up';
+    this.iconColor = '';
+    this.iconActiveColor = '';
+    this.behavior = 'default';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  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();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-regular'] = weights.regular;
+    this.styles['--font-weight-light'] = weights.light;
+    this.setColors();
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll('cura-accordion-item').forEach(item => {
+      this.setChildProperties(item);
+    });
+    const options = { childList: true, subtree: true, attributes: true };
+    this.mutationObserver.observe(this.host, options);
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+  }
+  setChildProperties(item) {
+    // Theme
+    item.colorMode = this.colorMode;
+    item.iconColor = this.iconColor || this.color;
+    item.iconActiveColor = this.iconActiveColor || this.activeColor;
+    // Icon
+    item.iconSize = this.iconSize;
+    item.openIcon = this.openIcon;
+    item.closeIcon = this.closeIcon;
+  }
+  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`) });
+  }
+  render() {
+    return (h(Host, { style: this.styles }, h("slot", { name: 'accordion-item' })));
+  }
+  static get is() { return "cura-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color scheme base color"
+        },
+        "attribute": "color",
+        "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,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the color mode to dark or light"
+        },
+        "attribute": "color-mode",
+        "reflect": true,
+        "defaultValue": "'dark'"
+      },
+      "iconSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accordion items icons"
+        },
+        "attribute": "icon-size",
+        "reflect": true,
+        "defaultValue": "32"
+      },
+      "openIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-icon",
+        "reflect": true,
+        "defaultValue": "'down'"
+      },
+      "closeIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-icon",
+        "reflect": true,
+        "defaultValue": "'up'"
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
+        },
+        "attribute": "icon-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "iconActiveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-active-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "behavior": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'keep-open'",
+          "resolved": "\"default\" | \"keep-open\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accordion behavior when item is clicked\n(The default will close all items except the current one)"
+        },
+        "attribute": "behavior",
+        "reflect": true,
+        "defaultValue": "'default'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }, {
+        "propName": "activeColor",
+        "methodName": "handleChangeColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-accordion.js.map

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

@@ -0,0 +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.styles['--font-weight-light'] = weights.light;\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"]}

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

@@ -0,0 +1,160 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import iconNames from '../../../assets/icons/iconset-default-list';
+export default {
+  title: 'Components/Accordion/Accordion',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var args = __rest(_a, []);
+    // You can either use a function to create DOM elements or use a plain html string!
+    // 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'}"
+  >
+    <cura-accordion-item label="Item 1">
+      Texto 1
+    </cura-accordion-item>
+    <cura-accordion-item label="Item 2">
+      Texto 2
+    </cura-accordion-item>
+    <cura-accordion-item label="Item 3">
+      Texto 3
+    </cura-accordion-item>
+    <cura-accordion-item label="Item 4">
+      Texto 4
+    </cura-accordion-item>
+  </cura-accordion>`;
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Define cor base do item. Cor do DS sem profundidade (ex: primary).',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'primary' }
+      },
+      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'],
+      description: 'Seta tema claro ou escuro.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'dark' }
+      },
+      name: 'color-mode'
+    },
+    behavior: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'keep-open'],
+      description: 'Comportamento do accordion.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'default' }
+      },
+      name: 'behavior'
+    },
+    openIcon: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Ícone para abrir o item.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'down' }
+      },
+      name: 'open-icon'
+    },
+    closeIcon: {
+      control: { type: 'select' },
+      options: iconNames,
+      description: 'Ícone para fechar o item.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: 'up' }
+      },
+      name: 'close-icon'
+    },
+    iconSize: {
+      control: { type: 'select' },
+      options: ["128", "72", "64", "48", "40", "32", "24", "20", "16"],
+      description: 'Tamanho do ícone.',
+      table: {
+        category: 'Icons',
+        defaultValue: { summary: '24' }
+      },
+      name: 'icon-size'
+    },
+    iconColor: {
+      control: { type: 'select' },
+      options: ['', 'primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+      description: 'Cor do ícone. (Por padrão ele utiliza a mesma cor da propriedade \'color\').',
+      table: {
+        category: 'Icons',
+      },
+      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',
+      table: {
+        category: 'CSS',
+        defaultValue: { summary: 'false' }
+      }
+    },
+  },
+};
+export const Accordion = {
+  args: {
+    color: 'primary',
+    activeColor: 'accent',
+    colorMode: 'dark',
+    openIcon: 'down',
+    closeIcon: 'up',
+    iconSize: '24',
+    iconColor: "",
+    iconActiveColor: "",
+    behavior: 'default',
+    darkBackground: false,
+  },
+};
+//# sourceMappingURL=cura-accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"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: 'Components/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"]}

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

@@ -0,0 +1,139 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * Responsive media for large only.
+ * Use: @include large-only() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
+/**
+ * Responsive media for xlarge only.
+ * Use: @include xlarge-only() { ... }
+ */
+:host {
+  display: block;
+}
+:host .accordion-item {
+  width: 100%;
+}
+:host .accordion-item .label {
+  display: flex;
+  flex-direction: column;
+}
+:host .accordion-item .label::before {
+  content: "";
+  display: block;
+  border-top: solid 1px var(--neutral-base);
+  width: 100%;
+}
+: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;
+  word-break: break-word;
+  cursor: pointer;
+  font-size: 1.14em;
+  font-weight: var(--font-weight-light);
+  color: var(--color-base);
+  padding: calc(var(--base-spacing) * 1px) 0px calc(var(--base-spacing) * 1px) 0px;
+}
+:host .accordion-item .label .label-container:hover {
+  color: var(--color-light);
+}
+: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;
+}
+: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(--base-spacing) * 2px) 0px;
+  border-top: solid 1px var(--neutral-base);
+}
+:host .accordion-item.active .label .label-container {
+  color: var(--color-active-base);
+}
+:host .accordion-item.active .label .label-container:hover {
+  color: var(--color-active-light);
+}
+:host .accordion-item.active .label .label-container:hover cura-icon {
+  --color: var(--icon-color-active-light) !important;
+}
+:host .accordion-item.active .label .label-container:active {
+  color: var(--color-active-dark);
+}
+:host .accordion-item.active .label .label-container:active cura-icon {
+  --color: var(--icon-color-active-dark) !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: 768px) and (max-width: 1365px) {
+  :host .accordion-item .label .label-container {
+    font-size: 1.29em;
+  }
+  :host .accordion-item .content {
+    font-size: 1.14em;
+  }
+}
+@media (min-width: 1366px) {
+  :host .accordion-item .label .label-container {
+    font-size: 1.29em;
+  }
+  :host .accordion-item .content {
+    font-size: 1.14em;
+  }
+}