@rededor/cura 1.2.0 → 1.3.0

package/dist/collection/components/forms/cura-input-date/cura-input-date.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-input-date.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraInputDate = (args: any) => {\n  const block = `<cura-input-date\n  ${args.label ? `label=\"${args.label}\"` : ''}\n  ${args.size && args.size !== 'medium' ? `size=\"${args.size}\"` : ''}\n  ${args.status && args.status !== 'default' ? `status=\"${args.status}\"` : ''}\n  ${args.name ? `name=\"${args.name}\"` : ''}\n  ${args.helperText ? `helper-text=\"${args.helperText}\"` : ''}\n  ${args.enableRangeDates ? `enable-range-dates=\"${args.enableRangeDates}\"` : ''}\n  ${args.disablePassDates ? `disable-pass-dates=\"${args.disablePassDates}\"` : ''}\n  ${args.disableFutureDates ? `disable-future-dates=\"${args.disableFutureDates}\"` : ''}\n  ${args.iconName ? `icon-name=\"${args.iconName}\"` : ''}\n  ${args.placeholder ? `placeholder=\"${args.placeholder}\" ` : ''}\n  >\n</cura-input-date>\n`;\n  return `${block}`;\n};\n\nexport default {\n  title: 'Componentes/Forms/InputDate',\n  tags: ['autodocs'],\n\n  render: ({ ...args }) => {\n    return renderCuraInputDate(args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto da label do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Propriedade name do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'success', 'error'],\n      description: 'Status do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto de placeholder do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanho do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    helperText: {\n      control: 'text',\n      description: 'Define o texto de ajuda do input',\n      table: {\n        category: 'Properties',\n      },\n    },\n    disableFutureDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas futuras',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    enableRangeDates: {\n      control: 'boolean',\n      description: 'Define se deve habilitar um range de datas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    disablePassDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas passadas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone usado no campo de input date',\n      required: false,\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const InputDate = {\n  args: {\n    label: 'Label',\n    helperText: 'Texto de ajuda',\n    size: 'medium',\n    name: 'cura-input-date',\n    enableRangeDates: false,\n    disableFutureDates: false,\n    disablePassDates: false,\n    status: 'default',\n    iconName: '',\n    placeholder: '',\n  },\n};\n"]}
+{"version":3,"file":"cura-input-date.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraInputDate = (args: any) => {\n  const block = `<cura-input-date\n  style=\"min-height: 450px; height: 100%;\"\n  ${args.label ? `label=\"${args.label}\"` : ''}\n  ${\n    args.size && args.size !== 'medium'\n      ? `\n  size=\"${args.size}\"`\n      : ''\n  }${\n    args.status && args.status !== 'default'\n      ? `\n  status=\"${args.status}\"`\n      : ''\n  }${\n    args.name\n      ? `\n  name=\"${args.name}\"`\n      : ''\n  }${\n    args.helperText\n      ? `\n  helper-text=\"${args.helperText}\"`\n      : ''\n  }${\n    args.enableRangeDates\n      ? `\n  enable-range-dates=\"${args.enableRangeDates}\"`\n      : ''\n  }${\n    args.disablePassDates\n      ? `\n  disable-pass-dates=\"${args.disablePassDates}\"`\n      : ''\n  }${\n    args.disableFutureDates\n      ? `\n  disable-future-dates=\"${args.disableFutureDates}\"`\n      : ''\n  }${\n    args.iconName\n      ? `\n  icon-name=\"${args.iconName}\"`\n      : ''\n  }${\n    args.placeholder\n      ? `\n  placeholder=\"${args.placeholder}\"`\n      : ''\n  }>\n</cura-input-date>\n`;\n  return `${block}`;\n};\n\nexport default {\n  title: 'Componentes/Forms/InputDate',\n  tags: ['autodocs'],\n\n  render: ({ ...args }) => {\n    return renderCuraInputDate(args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto da label do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Propriedade name do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'success', 'error'],\n      description: 'Status do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto de placeholder do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanho do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    helperText: {\n      control: 'text',\n      description: 'Define o texto de ajuda do input',\n      table: {\n        category: 'Properties',\n      },\n    },\n    disableFutureDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas futuras',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    enableRangeDates: {\n      control: 'boolean',\n      description: 'Define se deve habilitar um range de datas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    disablePassDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas passadas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone usado no campo de input date',\n      required: false,\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const InputDate = {\n  args: {\n    label: 'Label',\n    helperText: 'Texto de ajuda',\n    size: 'medium',\n    name: 'cura-input-date',\n    enableRangeDates: false,\n    disableFutureDates: false,\n    disablePassDates: false,\n    status: 'default',\n    iconName: '',\n    placeholder: '',\n  },\n};\n"]}

package/dist/collection/components/forms/cura-input-text/cura-input-text.js

@@ -545,7 +545,7 @@ export class CuraInputText {
                     "references": {
                         "MaskPreset": {
                             "location": "local",
-                            "path": "/home/marcuslima/Documents/www/rededor/web/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
+                            "path": "/Users/fellipesoares/Code/cura/packages/component-lib/src/components/forms/cura-input-text/cura-input-text.tsx",
                             "id": "src/components/forms/cura-input-text/cura-input-text.tsx::MaskPreset"
                         }
                     }

package/dist/collection/components/forms/cura-label/cura-label.js

@@ -46,7 +46,7 @@ export class CuraLabel {
         };
     }
     render() {
-        return (h(Host, { key: '08a9753ada3d3d7e94f80256d375f9c40bd7eb52', style: this.hostCSSProperties() }, h("p", { key: 'abd0b048fa46c15038595459eb173dbebe54b3f8', style: this.styles, class: this.getClasses() }, h("slot", { key: '9f950127eaa32d0137be06592a9872861ec927a7' }))));
+        return (h(Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, h("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, h("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
     }
     static get is() { return "cura-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-radio/cura-radio.js

@@ -120,7 +120,7 @@ export class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: '015424d6821feeef090b0e064cf35eb39100f918' }, h("div", { key: '85b54a48eb2c75dd98df83f7ac7557162b036300', class: this.getClasses(), style: this.styles }, h("div", { key: '84f0b0a8f5e2698fc5fcc6941b6a8b369629d6c0', class: "info" }, h("div", { key: '94194138a25b71c7a6cd1b8c191662ebcbd16b71', class: "label-wrapper" }, h("cura-label", { key: 'cd5af14f2c174bf6a2e2715f32c3f97ed42dd05e', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '237bc98ab60ab07e917dcd99b1874bf6fd400ec6', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '88a3014b55f420ed7744090f1e54927f7f6ec767', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'b505727b192c807344f328c73c44f88b72314cb3' }))), h("input", { key: '6f324f596f24328d0829e1013bf78545dda17e4b', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (h(Host, { key: 'a0d89eeaf13690af56498ab584c22082b071b851' }, h("div", { key: '17a7ffae366d1942cdf8daccb0693434468040f8', class: this.getClasses(), style: this.styles }, h("div", { key: '2a03b1cc6eb6c26227bff90ec40f1f739e543613', class: "info" }, h("div", { key: '63a3f9a9f99504fc5f0e824a6398d502c2d7bec7', class: "label-wrapper" }, h("cura-label", { key: 'cddaf7347318cba1cd480352cde13321b44cc244', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'b2f5f549427841feb97ba43e26930e62e7d8f432', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '7d32540fd194b86224189d2ba3da8da4cae9d2a9', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c4e8fa9a1fb18040da0038aa5ea7e6bcb0ee17bc' }))), h("input", { key: 'eaebe407c25af0bc72df251451a652fc6376ef9a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get is() { return "cura-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select/cura-select.js

@@ -265,13 +265,13 @@ export class CuraSelect {
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: '69d335e3f52f520b2067033a3bd3cf5e854bb53e', style: this.styles }, h("div", { key: 'c058baef8309f53fbe15244f48e5233211c6b834', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '3dd4ae204d4d497c167a98bb978c268333c46d73', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '7aaeb56f48d4e5e3677218783bf67f27273b0cd9', class: 'required' }, "* "))), h("div", { key: 'b17d285023de7b91db356283fa7ed2d4ca47329c', class: {
+        return (h(Host, { key: '1f9549c90dbc1c5a958488fdaa7e6b320730691a', style: this.styles }, h("div", { key: '52f93a983269e95bf4e19b590c47a8de472f9cb1', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '1fbbdb175324020e975e515c07a7eb85e593eb19', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'b76d8b6fc6399af17f8345d097f70e29ef9a549e', class: 'required' }, "* "))), h("div", { key: '0f1484f9debd047eb99760adb2c2da6d124c39f0', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '9328823501e2a439efc2e73e01a018496c98346a', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: 'aa8b5271161e8bdbe6ab7234460f4208a030c18b', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'c4ddeead44a36fd2d072d33d9b97cc5367af66bc', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'a9fd3b810963a65a7ab1733f21864a18e7838bf1' })), this.isOpen && (h("div", { key: '8a9301c541bf7e72ee2e26c6ea48636982a52147', class: {
+            } }, this.renderIcon(), h("input", { key: '2b10751ad085669523eeaba20a9d8736b4332dc0', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: '965687e4884ab2da4de009ccee8a2607a80ca0d3', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ec844637fe1b96ac3719a53fc4753a66dde5710f', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fdc615752aad7bc80ba97a380c4086a3e81fad48' })), this.isOpen && (h("div", { key: 'cac6207d71dabbf2ad7d6dd0f5a152d23f64e554', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: '1ea4f761f96bd85021eefbf50280403ae4064317', name: 'option' }))))));
+            } }, h("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select-options/cura-select-option.js

@@ -33,7 +33,7 @@ export class CuraSelectOption {
         };
     }
     render() {
-        return (h(Host, { key: '9c6496e905c81df28315112ab5f12ff114c127dd', slot: "option" }, h("div", { key: '4e8fc83e9fc9f8ac7ecbb17887ed98c6ebc86457', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '818b5dae2fd6f2a907de9077e88999ae264df7e1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '1f295646eda004443b66005544ee514ce9e095d8' })), this.selected && h("cura-icon", { key: 'db126766232531ea18e28f10b77176e21268db1b', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: 'd65a51c56c05c15db545fa9dec1da8849e45235d', slot: "option" }, h("div", { key: '892175c91b317d015f13f9d5d9bc0a956272a49f', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'aaabd66fc3e8e6beb0d840e4b12dbcfb3282e392', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'a1570b98b56147b8cf8d0b01f504a19efbdf4749' })), this.selected && h("cura-icon", { key: 'fcd06691f5d18e460b14e5cd7ae99c06fec26e3f', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     static get is() { return "cura-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-switch/cura-switch.js

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: '6bbc037348270c69bfac13e7466c6fd19f4dc427' }, h("div", { key: '11ada01c69ff91815ba1b1f76a6e6b448e88a361', class: this.getClasses(), style: this.styles }, h("div", { key: '34992d3d6fbf3ca7782fa4502e297d508656c34c', class: "info" }, h("cura-label", { key: '0e6a178f1f74526962d588b1fad3024920bcf815', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '33e7c6d7aaabd9007b0a41fb966b41b0fd947bc8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '66dd525702f7d53c8167cfd2aa25552d1bd79837' }))), h("div", { key: 'a3828f2e511a7e23ad5d0e04319637e1aa256c96', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'afc664ab5563591ef201eee1ca0d33a48075ad04', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'e6b7f3b67e78421283426ce1c7679cbbf8f77f5e', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '019642743001393249cba0ac937b861a0b309af3' }, h("div", { key: '32d6358af066b24b60fb2967891b0eda03027a25', class: this.getClasses(), style: this.styles }, h("div", { key: 'c29681689cbf04ee89afa793dd84f1a3c1198fb7', class: "info" }, h("cura-label", { key: '0865c7e0c45843769046039981382e4f7a9cf8cf', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b1fff87c188c2a1f306630a692c254dcacc5b03b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '553757a5022374bd10af67f4a0c449511203e2e6' }))), h("div", { key: 'a8babf17cdd9c8bb95225fce8501015859122ec6', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '4828791117512af2526ed94b5981a0dab04b3e5c', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '30a712271bcee777e9a3c79d04a2038db5b84869', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'c98e1e2e370b5fadc87eb960d030324e36acd250' }, h("div", { key: '39dac6c361361e840305e15d6bf4ff09cfa3380e', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'b501bd4846993c62a246a5891b9650faaca89c32', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'af0397ee6a031081a84200da4863752ccbf937ce' }, h("div", { key: '5e054c2b571053bdb58b415a6ca642a8bc0385f3', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '2463789bf8737e13b6b5a49a1af4e51ce1637176', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: '2697e72f8af894a6bea7092d3f56de4855788ea1', style: this.getStyles() }, h("svg", { key: 'ef5ae4cb6f02d80a79be4d066714e5d658d48a31', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '476fb5af3fdd8f4002de31ac2282dfe0c3e94a0f' }, h("circle", { key: '937db497c08019f64fb38974ace4262c6bc29ebb', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'ee611cdaa0b77ba3ef3c4ef61580e5e176b650cf', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '86fe212f1d47f69c403e82360464fe2e344947cd' }, h("linearGradient", { key: '73399f5eda1ca0fb206bf5322417431add8cfec6', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'bb9f60898d5b63dd7841e2cd94137280a553176b' }), h("stop", { key: '1e1dda3b14f7c5c5cfef85dd39a43eb71048171e', offset: "1" }))))));
+        return (h(Host, { key: 'c7fb273559e35a8ac66c4a06e09150990dd62629', style: this.getStyles() }, h("svg", { key: '1ef6af84e79a0bf20c78d8f28129c890f990902f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '37718a9e3271cce4d939b9ee4ab7123f39d7de39' }, h("circle", { key: '50284396589d4165a5e222b6e7aa7d7eba7d1f72', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '1bd1557ecd739e50cacd67675d91aa56f63ec335', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6c68b50e1cce6210827f55ade5f822c0398ebfae' }, h("linearGradient", { key: '9d8f1a4955b753070618e0998205a8b48a83976a', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd81f6995a1de8007ede765a2f49d236f7fcff187' }), h("stop", { key: 'b88855e6b35f247fa1395c220e3c0ee76093a7d2', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,7 @@ export class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'b7f2ed980b7cedd3c9fbd60f14bf8785bb5c26cb', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,6 +113,10 @@
   text-underline-offset: 10%;
   cursor: default;
 }
-:host ::slotted(i), :host ::slotted(em) {
+:host ::slotted(i) {
   font-weight: var(--font-weight-medium);
+}
+:host ::slotted(em) {
+  color: var(--color-link);
+  font-style: normal;
 }

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

@@ -36,17 +36,18 @@ export class CuraHeading {
         };
     }
     hostCSSProperties() {
+        const fontColor = this.color
+            ? this.theme.colors.getColor(this.color)
+            : this.theme.fonts.getColor();
         return {
             '--margin-block': this.marginBlock,
             '--font-size-base': this.fontSizeBase,
-            '--line-height': this.lineHeight
+            '--line-height': this.lineHeight,
+            '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),
         };
     }
     setColors() {
-        const fontColor = this.color
-            ? this.theme.colors.getColor(this.color)
-            : this.theme.fonts.getColor();
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
     }
     getHeadingTag() {
         const tags = {
@@ -61,7 +62,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'd16fc33c4b20770439fd4d48f4eb099564668b1e', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

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, Watch, 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() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\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 = '130%';\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    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\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    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': 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()}>\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, Watch, 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() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\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 = '130%';\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    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\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    };\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-link': 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()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -45,7 +45,7 @@ export class CuraParagraph {
         };
     }
     render() {
-        return (h(Host, { key: '88f0638f1da31a7410e90bfd9fabc5e47036fbb4', style: this.hostCSSProperties() }, h("p", { key: 'e6c76e6a066ed9ca9f843ceff95c07472fd32824', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'e6266e05137adb1efc9a2acabab323a507cca9a9' }))));
+        return (h(Host, { key: '0ee9f41b45e758b509a18ab8ff216482d9c83af4', style: this.hostCSSProperties() }, h("p", { key: '02edfbf600b0cb372e49ee8b6fc7192f19108997', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '0b2bd3c94a190999cc8a8dec94b14aae2af2fa09' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,8 @@
 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';
 
-const curaAccordionItemCss = ":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-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}: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: 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 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(--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)}: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 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(--base-spacing) * 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 {
@@ -10,21 +11,16 @@ const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion
         this.__registerHost();
         this.__attachShadow();
         this.label = '';
-        this.iconSize = 32;
+        this.iconSize = 20;
+        this.labelIcon = '';
         this.openIcon = 'down';
         this.closeIcon = 'up';
         this.iconColor = '';
-        this.iconActiveColor = '';
         this.colorMode = 'dark';
+        this.level = 3;
         this.opened = false;
         this.styles = {};
     }
-    getIconColor() {
-        const inverted = this.colorMode === 'light';
-        const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
-        const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
-        return this.opened ? iconActiveColor : iconColor;
-    }
     getClasses() {
         const classes = {};
         classes['accordion-item'] = true;
@@ -35,18 +31,24 @@ const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion
     accordionItemClick(_) {
         this.opened = !this.opened;
     }
+    renderIcon() {
+        if (!this.labelIcon)
+            return '';
+        return h("cura-icon", { name: this.labelIcon, size: this.iconSize, color: "neutral-black" });
+    }
     render() {
-        return (h(Host, { key: '8d46e9fd7c698c049a9020375cd77b5ebb9d38fd', slot: "accordion-item" }, h("div", { key: 'fdc11f228f3051f2452b0beb56e232de836fa382', class: this.getClasses(), style: this.styles }, h("div", { key: '7507b6c72d3433550b1590530c8070fe07431389', class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { key: '8f6d6deb3fc2e864ac81abb744c5d4a32ad6b974', class: "label-container" }, h("span", { key: '7b1a4e96fa8c3dfdfffa7890c17ed8afacf3032f' }, this.label), h("cura-icon", { key: '0f9c6f9dc664ad96a7b02c084700fd8f75fbc677', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { key: 'fb1860aa74170ff18edc03b8171356cd1a1fd271', class: 'content' }, h("div", { key: '4d3c9252658e9c30521353579f0b3ef9bc8a3087', class: "content-wrapper" }, h("slot", { key: '067f12a534860a5942d01d5945d1e4d272e5a541' }))))));
+        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; }
 }, [1, "cura-accordion-item", {
         "label": [513],
         "iconSize": [514, "icon-size"],
+        "labelIcon": [513, "label-icon"],
         "openIcon": [513, "open-icon"],
         "closeIcon": [513, "close-icon"],
         "iconColor": [513, "icon-color"],
-        "iconActiveColor": [513, "icon-active-color"],
         "colorMode": [1, "color-mode"],
+        "level": [514],
         "opened": [1540],
         "styles": [32]
     }]);
@@ -54,13 +56,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cura-accordion-item", "cura-icon"];
+    const components = ["cura-accordion-item", "cura-heading", "cura-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "cura-accordion-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CuraAccordionItem$1);
             }
             break;
+        case "cura-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "cura-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

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

@@ -1 +1 @@
-{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,kmGAAkmG,CAAC;AAChoG,gCAAe,oBAAoB;;MCMtBA,mBAAiB;;;;;qBAKW,EAAE;wBAMP,EAAE;wBACF,MAAM;yBACL,IAAI;yBAMJ,EAAE;+BACI,EAAE;yBAKL,MAAM;sBAEc,KAAK;sBAE7C,EAAE;;IAEpB,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;QAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;QACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;KAClD;IAED,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,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,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,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\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !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: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\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 = 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   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\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  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              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></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":";;;;AAAA,MAAM,oBAAoB,GAAG,8iFAA8iF,CAAC;AAC5kF,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}

package/dist/components/cura-accordion.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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)}:host::after{content:\"\";display:block;border-bottom:solid 1px var(--neutral-base);width:100%}";
+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 {
@@ -30,14 +30,14 @@ const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion ext
         };
         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() {
@@ -46,8 +46,6 @@ const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion ext
     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();
@@ -69,38 +67,39 @@ const CuraAccordion$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordion ext
         // 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' })));
     }
     get host() { return this; }
     static get watchers() { return {
-        "color": ["handleChangeColor"],
-        "activeColor": ["handleChangeColor"]
+        "color": ["handleChangeColor"]
     }; }
     static get style() { return CuraAccordionStyle0; }
 }, [1, "cura-accordion", {
         "color": [513],
-        "activeColor": [513, "active-color"],
         "colorMode": [513, "color-mode"],
         "iconSize": [514, "icon-size"],
+        "labelIcon": [513, "label-icon"],
         "openIcon": [513, "open-icon"],
         "closeIcon": [513, "close-icon"],
         "iconColor": [513, "icon-color"],
-        "iconActiveColor": [513, "icon-active-color"],
         "behavior": [513],
+        "level": [514],
         "styles": [32]
     }, undefined, {
-        "color": ["handleChangeColor"],
-        "activeColor": ["handleChangeColor"]
+        "color": ["handleChangeColor"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"cura-accordion.js","mappings":"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","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  &::after {\n    content: \"\";\n    display: block;\n    border-bottom: solid 1px var(--neutral-base);\n    width: 100%;\n  }\n}\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  @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","mappings":"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","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: 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"],"version":3}

package/dist/components/cura-alert.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './cura-icon2.js';
 import { d as defineCustomElement$3 } from './cura-label2.js';
 import { d as defineCustomElement$2 } from './cura-paragraph2.js';
 
-const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:12px;gap:12px;flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .icon-left{margin-right:5px}:host .icon-right{margin-left:auto;cursor:pointer}:host .text{margin-top:3px}:host .actions{margin-top:5px}";
+const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:calc(var(--base-spacing) * 3px);gap:calc(var(--base-spacing) * 3px);flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .content{flex:1;flex-direction:column;display:flex;gap:calc(var(--base-spacing) * 1px)}:host .icon-right{cursor:pointer}";
 const CuraAlertStyle0 = curaAlertCss;
 
 const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTMLElement {
@@ -36,6 +36,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
         this.styles = Object.assign({}, this.styles);
     }
     connectedCallback() {
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
         this.setColors();
     }
     getClasses() {
@@ -54,7 +55,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: 'c5398d59da323dee68eed1cb7c27841df0e12d14' }, h("div", { key: 'd9bb0ab7a2106e710a113513e6eeb1297b9bd205', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '54665c81a59cbca3686abc6f5e388da32e2211ed', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '466f9f4aed5096658de1e19521cefe2915b095af', class: "content" }, h("cura-label", { key: '6b3d9cd0352b5d5254305baa5a71a1b1782f637f', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '5dbad5e65d88b59a81b7df97154071a607d73900', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'cb75d38c35d34a7bee4e187c640a1269bad192b0' })), h("div", { key: 'a6930bb463601a2ba429b23fad61847e8dee01f3', class: "actions" }, h("slot", { key: '7f4fc8b08a870f578d0b241df00650ebf3db83e0', name: "actions" }))), this.closeable ?
+        return (h(Host, { key: 'e8998ea87d6a1342f6907ac96d2ee73c9f2ef2ad' }, h("div", { key: '917a9c712631eb1f3af2caf3d9d1bbdb7390c239', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '406ec8e8ebbdcb7b634c26085785fb5e6943c23c', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: 'de416db715df6bf4335def85044564e51af97b2d', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: '7c759da9b461769f01facda7b52faac4fad4ff86', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f71f45289c632acbe25c19db15de07b09ec395fe' })), h("slot", { key: 'd46e508a7da7579fc4aed665c9606d1d7a93ceb4', name: "actions" })), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }