@rededor/cura 1.5.0 → 1.6.0-alpha.0

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.js

@@ -0,0 +1,183 @@
+import { Host, h } from "@stencil/core";
+export class CuraDropdownSearchOptionNew {
+    constructor() {
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
+        this.value = undefined;
+        this.optionid = undefined;
+        this.selectable = true;
+        this.selected = false;
+        this.highlighted = false;
+    }
+    connectedCallback() {
+        this.styles = {
+            '--neutral-light': this.theme.colors.getColor('neutral-light'),
+            '--neutral-white': this.theme.colors.getColor('neutral-white'),
+            '--neutral-dark': this.theme.colors.getColor('neutral-dark'),
+            '--neutral-black': this.theme.colors.getColor('neutral-black'),
+            '--primary-lighter-50': this.theme.colors.getColor('primary-lighter', .5),
+            '--primary-light': this.theme.colors.getColor('primary-light'),
+            '--primary': this.theme.colors.getColor('primary-base')
+        };
+    }
+    handleSelect() {
+        if (this.selectable) {
+            this.selectoption.emit(this.optionid);
+        }
+        else {
+            this.actionclick.emit();
+        }
+    }
+    handleActionsClick() {
+        this.actionclick.emit();
+    }
+    getClasses() {
+        return {
+            'component-container': true,
+            'selected': this.selected,
+            'highlighted': this.highlighted,
+            'not-selectable': !this.selectable
+        };
+    }
+    render() {
+        return (h(Host, { key: '270721328007e38163582a288da503001dfd28f7' }, h("div", { key: 'bbcfeca78e0cfb86d3bdcf5d23a25c27ba2bd0ed', class: this.getClasses(), style: this.styles }, h("div", { key: '86774ca830346536a6591310c42c3806abed7273', class: "selectable-container", onClick: () => this.handleSelect() }, h("slot", { key: '2fe370d3a1cd2df9226634cc0a6812b4131de60e', name: 'image' }), h("div", { key: 'ebafc4dcffdc7bf44414605424b4e86400f87602', class: "content" }, h("slot", { key: '2666ee970d53d21dd04c58fea2725163e936d96d' }))), h("div", { key: '55f0cdbd76d03921722796e1b261500dce39ada5', class: "actions-container", onClick: () => this.handleActionsClick() }, h("slot", { key: '34528c19855eca4ecd151310959d8a496deb152b', name: 'actions' })))));
+    }
+    static get is() { return "cura-dropdown-search-option-new"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option-new.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option-new.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required. The value for item term reference.\nThis will set the value of the seaarch field when the option is selected."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "optionid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required. The unique identifier for the option.\nThis will reference the option element for the parent."
+                },
+                "attribute": "optionid",
+                "reflect": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable selection for this option.\nDefault is true."
+                },
+                "attribute": "selectable",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected state.\nThis will be managed by the parent component.\nDefault is false."
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "highlighted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Highlighted state.\nThis will be managed by the parent component.\nDefault is false."
+                },
+                "attribute": "highlighted",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionclick",
+                "name": "actionclick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "selectoption",
+                "name": "selectoption",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-option-new.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-option-new.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,2BAA2B;;QAiCtC,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;0BAlBgB,IAAI;wBAMN,KAAK;2BAMF,KAAK;;IAQnD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,sBAAsB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACzE,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;SACxD,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,UAAU,EAAG,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU;QACR,OAAO;YACL,qBAAqB,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,aAAa,EAAE,IAAI,CAAC,WAAW;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,UAAU;SACnC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;oBACnE,6DAAM,IAAI,EAAC,OAAO,GAAQ;oBAC1B,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT,CACF;gBACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE;oBACtE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-option-new',\n  styleUrl: 'cura-dropdown-search-option-new.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchOptionNew {\n\n  /**\n   * Required. The value for item term reference.\n   * This will set the value of the seaarch field when the option is selected.\n   */\n  @Prop() value!: string;\n  /**\n   * Required. The unique identifier for the option.\n   * This will reference the option element for the parent.\n   */\n  @Prop() optionid!: string;\n  /**\n   * Enable selection for this option.\n   * Default is true.\n   */\n  @Prop({reflect: true}) selectable: boolean = true;\n  /**\n   * Selected state.\n   * This will be managed by the parent component.\n   * Default is false.\n   */\n  @Prop({reflect: true}) selected: boolean = false;\n  /**\n   * Highlighted state.\n   * This will be managed by the parent component.\n   * Default is false.\n   */\n  @Prop({reflect: true}) highlighted: boolean = false;\n\n  @Event() actionclick: EventEmitter<any>;\n  @Event() selectoption: EventEmitter<string>;\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light'),\n      '--neutral-white': this.theme.colors.getColor('neutral-white'),\n      '--neutral-dark': this.theme.colors.getColor('neutral-dark'),\n      '--neutral-black': this.theme.colors.getColor('neutral-black'),\n      '--primary-lighter-50': this.theme.colors.getColor('primary-lighter', .5),\n      '--primary-light': this.theme.colors.getColor('primary-light'),\n      '--primary': this.theme.colors.getColor('primary-base')\n    };\n  }\n\n  handleSelect() {\n    if( this.selectable ) {\n      this.selectoption.emit(this.optionid);\n    } else {\n      this.actionclick.emit();\n    }\n  }\n\n  handleActionsClick() {\n    this.actionclick.emit();\n  }\n\n  getClasses() {\n    return {\n      'component-container': true,\n      'selected': this.selected,\n      'highlighted': this.highlighted,\n      'not-selectable': !this.selectable\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"selectable-container\" onClick={ () => this.handleSelect() }>\n            <slot name='image'></slot>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"actions-container\" onClick={ () => this.handleActionsClick() }>\n            <slot name='actions'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.stories.js

@@ -0,0 +1,85 @@
+const renderCuraDropdownSearchOption = (args) => {
+    return `<cura-dropdown-search-option-new${args.value ? `
+  value="${args.value}"` : ''}${args.optionid ? `
+  optionid="${args.optionid}"` : ''}${args.selectable === false ? `
+  selectable="false"` : ''}>${args.image ? `
+  ${args.image}` : ''}${args.default ? `
+  ${args.default}` : ''}${args.actions ? `
+  ${args.actions}` : ''}
+</cura-dropdown-search-option-new>`;
+};
+export default {
+    title: 'Componentes/DropdownSearchNew/Options/Option',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `<cura-paragraph size="small">
+        Representa uma opção de seleção para o componente dropdown-search.
+      </cura-paragraph>`,
+            },
+        },
+    },
+    render: args => {
+        return renderCuraDropdownSearchOption(args);
+    },
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Representa o texto a ser aplicado no campo quando a opção é selecionada.<br/><b>É uma propriedade obrigatória.</b>',
+            required: true,
+            table: {
+                category: 'Properties',
+            },
+        },
+        optionid: {
+            control: 'text',
+            description: 'Identificador único para a opção.<br/><b>É uma propriedade obrigatória.</b>',
+            required: true,
+            table: {
+                category: 'Properties',
+            },
+        },
+        selectable: {
+            control: 'boolean',
+            description: 'Habilita ou desabilita seleção da opção.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
+        image: {
+            control: 'text',
+            description: 'Slot para aplicação de ícones, indicadores, avatares e demais imagens.',
+            table: {
+                category: 'Slots'
+            },
+        },
+        default: {
+            control: 'text',
+            description: 'Slot padrão para o conteúdo da opção.<br/>Não é necessário nomear o slot.<br/>Recebe, geralmente, elementos como títulos e parágrafos, os quais formata automaticamente.',
+            table: {
+                category: 'Slots'
+            },
+        },
+        actions: {
+            control: 'text',
+            description: 'Slot para componentes de ação secundária da opção, como botões e links.',
+            table: {
+                category: 'Slots'
+            },
+        },
+    }
+};
+export const DropdownSearchOptionNew = {
+    args: {
+        value: 'Opção 1',
+        optionid: 'opt1',
+        selectable: true,
+        default: `<cura-heading size="xsmall" weight="bold">Título da <em>Opção</em>.</cura-heading>
+  <cura-paragraph size="xsmall">Descrição da <em>opção</em>.</cura-paragraph>`,
+        image: '<cura-icon slot="image" name="unity" size="20"></cura-icon>',
+        actions: '<cura-button-transparent slot="actions" icon-only="true" icon-name="delete"></cura-button-transparent>'
+    }
+};
+//# sourceMappingURL=cura-dropdown-search-option-new.stories.js.map

package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-option-new.stories.js","sourceRoot":"","sources":["../../../../src/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.stories.ts"],"names":[],"mappings":"AAAA,MAAM,8BAA8B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC9C,OAAO,mCAAoC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAC/C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;cACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC;qBAC9C,CAAC,CAAC,CAAC,EAAE,IAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,IAAI,CAAC,KAAM,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,IAAI,CAAC,OAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,CAAC,OAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;mCACU,CAAA;AACnC,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,8CAA8C;IACrD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;wBAEK;aACjB;SACF;KACF;IACD,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oHAAoH;YACjI,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6EAA6E;YAC1F,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wEAAwE;YACrF,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0KAA0K;YACvL,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yEAAyE;YACtF,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE;8EACiE;QAC1E,KAAK,EAAE,6DAA6D;QACpE,OAAO,EAAE,wGAAwG;KAClH;CACF,CAAA","sourcesContent":["const renderCuraDropdownSearchOption = (args) => {\n  return `<cura-dropdown-search-option-new${ args.value ? `\n  value=\"${args.value}\"` : ''}${ args.optionid ? `\n  optionid=\"${args.optionid}\"` : ''}${ args.selectable === false ? `\n  selectable=\"false\"` : ''}>${ args.image ? `\n  ${ args.image }` : ''}${ args.default ? `\n  ${ args.default }` : ''}${ args.actions ? `\n  ${ args.actions }` : ''}\n</cura-dropdown-search-option-new>`\n}\n\nexport default {\n  title: 'Componentes/DropdownSearchNew/Options/Option',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `<cura-paragraph size=\"small\">\n        Representa uma opção de seleção para o componente dropdown-search.\n      </cura-paragraph>`,\n      },\n    },\n  },\n  render: args => {\n    return renderCuraDropdownSearchOption(args);\n  },\n  argTypes: {\n    value: {\n      control: 'text',\n      description: 'Representa o texto a ser aplicado no campo quando a opção é selecionada.<br/><b>É uma propriedade obrigatória.</b>',\n      required: true,\n      table: {\n        category: 'Properties',\n      },\n    },\n    optionid: {\n      control: 'text',\n      description: 'Identificador único para a opção.<br/><b>É uma propriedade obrigatória.</b>',\n      required: true,\n      table: {\n        category: 'Properties',\n      },\n    },\n    selectable: {\n      control: 'boolean',\n      description: 'Habilita ou desabilita seleção da opção.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    image: {\n      control: 'text',\n      description: 'Slot para aplicação de ícones, indicadores, avatares e demais imagens.',\n      table: {\n        category: 'Slots'\n      },\n    },\n    default: {\n      control: 'text',\n      description: 'Slot padrão para o conteúdo da opção.<br/>Não é necessário nomear o slot.<br/>Recebe, geralmente, elementos como títulos e parágrafos, os quais formata automaticamente.',\n      table: {\n        category: 'Slots'\n      },\n    },\n    actions: {\n      control: 'text',\n      description: 'Slot para componentes de ação secundária da opção, como botões e links.',\n      table: {\n        category: 'Slots'\n      },\n    },\n  }\n}\n\nexport const DropdownSearchOptionNew = {\n  args: {\n    value: 'Opção 1',\n    optionid: 'opt1',\n    selectable: true,\n    default: `<cura-heading size=\"xsmall\" weight=\"bold\">Título da <em>Opção</em>.</cura-heading>\n  <cura-paragraph size=\"xsmall\">Descrição da <em>opção</em>.</cura-paragraph>`,\n    image: '<cura-icon slot=\"image\" name=\"unity\" size=\"20\"></cura-icon>',\n    actions: '<cura-button-transparent slot=\"actions\" icon-only=\"true\" icon-name=\"delete\"></cura-button-transparent>'\n  }\n}\n"]}

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

@@ -27,7 +27,7 @@ export class CuraIcon {
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: '09f68d2b455427bf45dca2e6b30e993ebfa6b3a0' }, h("svg", { key: 'f15fea7564efac510263f06f8d15288fec004f66', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: 'b88136d10453dc9e1d2c41ceb10676b348430ae3', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: 'd2c7487f9fadebc1da94bc4b8cd661a75e0d93ef' }, h("svg", { key: 'd8d0a70bf11cce073da95cce58c2fca4705b4b9f', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '10f2f6c34ce7cc782de70d9e9cdd22f54e08acc9', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     static get is() { return "cura-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -14,7 +14,7 @@ export class CuraIconsView {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '4918bc5d13f24f3133af45ce5991b3f3f43e99cf' }, h("div", { key: '837d47976a39702b13ceb5a7c5ac8ae097d34988', class: "iconDetail" }, h("cura-heading", { key: 'de4c75c4652b464991aa173cf7243db65f9ba2ba', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '77591ce199e5140ddcde3d7b956586d27fe6bc05' }, this.selected)), h("div", { key: '6da36b174603d48ab3b11a8490c424f164855147', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '4920c8010e0a55f80bb557f4ba0e537b7861ae36', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '99739b351fb25036efd4b55774c0f077058be8fc', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
+        return (h(Host, { key: '08ac6235b9218c2202cd4957bb78100216b5b680' }, h("div", { key: '71856330d5f050d46b83c06125d29a235532bf98', class: "iconDetail" }, h("cura-heading", { key: '2520247cde8d71b1a31ce028c4525b04e6302bf1', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '5cf48d96ed36dd5514357c65b0ec8c9f137bb1e4' }, this.selected)), h("div", { key: '7eda1e7db5efc89abb583631a5e959e31397684f', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'f443dab7e85fe89a207da8fbefb024b0c22fa084', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '5ea3b71259ae5454297a94aef4ce1e154c968512', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
     }
     static get is() { return "cura-icons-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-modal/cura-modal.css

@@ -1,7 +1,7 @@
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -132,10 +132,10 @@
   position: fixed;
   background-color: var(--neutral-white);
   border: 2px solid var(--neutral-light);
-  border-radius: calc(var(--base-spacing) * 3px);
+  border-radius: calc(var(--cura-spacing-base) * 3px);
   max-width: 600px;
   min-width: 200px;
-  padding: 0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);
+  padding: 0px calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px);
   z-index: var(--zIndex);
   box-shadow: 0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));
   transform: scale(0.95);
@@ -144,7 +144,7 @@
 .wrapper ::slotted(*) {
   max-height: 80vh;
   overflow: auto;
-  padding-right: calc(var(--base-spacing) * 5px);
+  padding-right: calc(var(--cura-spacing-base) * 5px);
 }
 
 .modal.open .wrapper {
@@ -155,7 +155,7 @@
 
 .close {
   justify-self: flex-end;
-  padding-top: calc(var(--base-spacing) * 4px);
+  padding-top: calc(var(--cura-spacing-base) * 4px);
   background: none;
   border: none;
   cursor: pointer;
@@ -172,23 +172,23 @@
     position: fixed;
     bottom: 0px;
     width: 80%;
-    padding-top: calc(var(--base-spacing) * 4px);
+    padding-top: calc(var(--cura-spacing-base) * 4px);
     padding-bottom: 0px;
-    border-radius: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;
+    border-radius: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0px 0px;
     border-bottom: none;
   }
 
   .close {
     align-items: center;
     border-top: 1px dashed var(--neutral-light);
-    margin-top: calc(var(--base-spacing) * 4px);
-    padding: calc(var(--base-spacing) * 4px) 0px;
+    margin-top: calc(var(--cura-spacing-base) * 4px);
+    padding: calc(var(--cura-spacing-base) * 4px) 0px;
     justify-content: center;
     width: 100%;
   }
   .close.mobile {
     display: flex;
-    gap: calc(var(--base-spacing) * 2px);
+    gap: calc(var(--cura-spacing-base) * 2px);
   }
   .close.desktop {
     display: none;

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

@@ -46,7 +46,7 @@ export class CuraModal {
         this.setRight();
     }
     render() {
-        return (h(Host, { key: '50f4146aed5392ae16803fb060d4921a5e8a3271', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '149e99a4b8b479515ed3d67c5c8aea08d4d96d1c', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'f32f7f7e16475c51babf95e1ca5f4fea449c1bb0', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '183f7ab8f2cee8106795f6104c38a2c93272387f', class: "wrapper" }, h("button", { key: '28778c8120c92dfcae0443dccd21f55a204bd82e', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'a847de5c1314ea1460673870334f3f98e98f1cf9', name: "close", color: "error-dark", size: "small" })), h("slot", { key: 'e08b556b7232425c2b83a21dac75d30fb4361a83' }), h("button", { key: 'e736a95f878ff5a2ad6897d9140fd74b26939445', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9eaeaca6f4ea9d3cde5fd44e108de389c727f991', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '2476b85e5dd7d6092d3d1d1714ee4a79b73b12d0', color: "error-dark", size: "small", marginBlock: "0" }, this.mobileCloseLabel))))));
+        return (h(Host, { key: 'cec1266a4daaac89f69e4f08c94574db9cd970f8', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '5b330fb69c2360e9c6053d2650c43cbf643eb751', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '8187dd2df05750a19f85e156059b66d8d56c8b00', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '6a34bc7d67fa48c86d2ada7c167a834c09713ad7', class: "wrapper" }, h("button", { key: '6e268d5260404b51dd8779007725c19635066881', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: '7b5644d466b0b9282b6b9d484ea1c0f4384e2aef', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '890dc7befdbd96fc8d5cc62a4ad856631b6a7f1e' }), h("button", { key: '5f7610ea323e3cad1e12acac7cb66345c8eacf98', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: 'e9e82d2d4fe0b181131bd0bd7fae8feebaabfd9c', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: 'b9930dd44ca205ec4747c62c005beb36e974698b', color: "error-dark", size: "small", marginBlock: "0" }, this.mobileCloseLabel))))));
     }
     static get is() { return "cura-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -14,7 +14,7 @@ export class CuraPageTemplate {
         return classes;
     }
     render() {
-        return (h(Host, { key: '9f26fb8ceb8b22ed9223bd215c07b6a19f6d78f1' }, h("div", { key: '38541ca9be4feecb9911c96cc954ba7501dc9b5e', style: this.styles, class: "grid-template" }, h("div", { key: 'daf436a589d75bb270f4b16230d1db1d7365c47e', id: "sub-header" }, h("slot", { key: '547c858a5913c600c1b745f400319d207a04c7ce', name: 'sub-header' })), h("div", { key: 'ba69ae91e87af01a8001a347f6de7d8ba7088619', id: "header" }, h("slot", { key: '6f72885d42d005f234942f2cbf8eefd98f4d0241', name: 'header' })), h("div", { key: 'd21dbb37e236b1b22e886a036a37fb2e65e538f3', id: "pre-content" }, h("slot", { key: '31b14b314d1ee2672f15883ea4bcc3c542520558', name: 'pre-content' })), h("div", { key: 'a1297f482f15b4947043401b25e2c4ecbedd31fd', id: "content-container", class: this.getClasses() }, h("div", { key: '9c0c466a46c5fc81c64663dd0aff4e073cc6cb72', id: "sidebar-left" }, h("slot", { key: '10364527d218b1c05064095a5a69a411cb23322a', name: 'sidebar-left' })), h("div", { key: '23029f84833a0959f43f30b4dcc5d8bc08a0bf05', id: "content" }, h("slot", { key: '8dbcf34f4808d0983df99c77b52f927b8f1a69d7', name: "content" }), h("slot", { key: '6a235586dfb316c6449d531a566940d8de4e4a40' })), h("div", { key: 'b88f94db774c17aaa312ca55c9e67d611cabace3', id: "sidebar-right" }, h("slot", { key: '5efbbf777d7acb28e91f4dace10558926dafef60', name: 'sidebar-right' }))), h("div", { key: 'f40b983f2266e565faba96e8906cd69073b6598c', id: "post-body" }, h("slot", { key: 'd0f047c73b5b777f1eb9d61191bf172473c100cf', name: 'post-body' })), h("div", { key: 'b54482672a8017036b060203b5426bb2897c75fa', id: "footer" }, h("slot", { key: '4c65d471dcd2dfabc32e163cb9575f3d05fb2cda', name: 'footer' })), h("div", { key: '24c5d5a19e6d3fb943a1e99a7dfcfe9ad7cbb283', id: "sub-footer" }, h("slot", { key: '6f595500cac9906db6902685f172feaa7ee9e711', name: 'sub-footer' })))));
+        return (h(Host, { key: '23b61f04dccd33e0abd6ac08f6521f5a9ec8bbd4' }, h("div", { key: 'd1e86808dab1b1c46b2d6b6b8093420dae7e27fb', style: this.styles, class: "grid-template" }, h("div", { key: 'e84d57b008abe440e59aa3734568b530a7440bdd', id: "sub-header" }, h("slot", { key: '0e9942affc593384ec18a47b93a7aaba703ce62a', name: 'sub-header' })), h("div", { key: 'a5ebc56a9ac49acdfebc7f83560c8a51b63619b0', id: "header" }, h("slot", { key: '5957130f5f0df86ca0b3e915d48ac1b6973be2d5', name: 'header' })), h("div", { key: '54c62c8f7bb9e774d1e9b2213db30da5cdd630a7', id: "pre-content" }, h("slot", { key: '160871f4ceede7169d77e2d2bcba5b415ac33c44', name: 'pre-content' })), h("div", { key: '1c69ecfcd2c605bc1024714b00854f072b3c3d2d', id: "content-container", class: this.getClasses() }, h("div", { key: '6d3102743e3e602edb04d461e4604e0a60df350f', id: "sidebar-left" }, h("slot", { key: '07f0c274f6fe9ec703ea5a11833bb5ae02a2db73', name: 'sidebar-left' })), h("div", { key: '3d4a8dff0a572edc9bbeef15bed2f7de45b8e1c1', id: "content" }, h("slot", { key: '5ca4395665823640d9c94dd71c3f746d413e0fb9', name: "content" }), h("slot", { key: '49e69afad551228a6b9602457f7811a625b943ec' })), h("div", { key: '43455d2bae0ffde066b6c31b3ff6ee4c3fe96723', id: "sidebar-right" }, h("slot", { key: '6b047fcc8249614710886954f082910b14e91608', name: 'sidebar-right' }))), h("div", { key: '49001b8066d664a180e9211cff345037f39a726d', id: "post-body" }, h("slot", { key: '8dde2d8f83c93e8b7b2a74086678ba98e54cb9f6', name: 'post-body' })), h("div", { key: '1091ad3443a6897ae879b31fead876ab891bb2d6', id: "footer" }, h("slot", { key: '49d1a5efdf5c0ffd29b7469bef9a36db8fe9d3f0', name: 'footer' })), h("div", { key: '8d20703614c90d4f2aabd0cef201a4850239b6e8', id: "sub-footer" }, h("slot", { key: 'b9c393c804a563b34a1c55f33789b047c1bff095', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js

@@ -12,7 +12,7 @@ export class CuraProgressBar {
         const circumference = radius * Math.PI * 2;
         const dash = (this.progress * circumference) / 100;
         const viewBox = `0 0 ${this.size} ${this.size}`;
-        return (h(Host, { key: 'e0da7ede087161c67c9dd0371d15030dd5107a19' }, h("div", { key: 'ebe68fb426b46e94b7d03ded4e8aaed852337f30', class: "progress-bar" }, h("svg", { key: 'ace46878d45bfbe51dae29c3020d74f43c2f5147', width: this.size, height: this.size, viewBox: viewBox }, h("circle", { key: 'dbbde61a95a7f13dc14a72fe538da43953852d7b', fill: "none", stroke: "#ccc", cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px` }), this.active && (h("circle", { key: '272c197451a47c73cfa91d7f7578a50b26958732', fill: "none", stroke: this.progressColor, cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px`, transform: `rotate(-90 ${this.size / 2} ${this.size / 2})`, "stroke-dasharray": `${dash}px ${circumference - dash}px`, "stroke-linecap": "round", style: { transition: 'all 0.5s' } }))), h("span", { key: 'a80f024e09fb54218fe97039459472855226c063' }, h("slot", { key: '5683f5edd5b54bd852fc1036b284656bfda066c4' })))));
+        return (h(Host, { key: '9453ea7e8d763048b3a789ca720ed1fea987cd71' }, h("div", { key: 'cf9624ef2a367e6d246a488af50e7a5534864dce', class: "progress-bar" }, h("svg", { key: '54f0788b7d9cd26baebd3fa07a573f3cca9071c7', width: this.size, height: this.size, viewBox: viewBox }, h("circle", { key: '3eb559fbde401961eb14e38113d38a32dd947165', fill: "none", stroke: "#ccc", cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px` }), this.active && (h("circle", { key: '838fcf3567ff35a23a361ba1999e5c83f751179a', fill: "none", stroke: this.progressColor, cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px`, transform: `rotate(-90 ${this.size / 2} ${this.size / 2})`, "stroke-dasharray": `${dash}px ${circumference - dash}px`, "stroke-linecap": "round", style: { transition: 'all 0.5s' } }))), h("span", { key: '1cc5c38639225399117c7ad34095a44dfe5093f4' }, h("slot", { key: 'be0129c555a7e6a2901857e70a5540b087c04a81' })))));
     }
     static get is() { return "cura-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js

@@ -55,7 +55,7 @@ export class CuraStepperItem {
     }
     render() {
         const { badgeColor, textColor, icon, iconOnly } = this.getStatusProperties();
-        return (h(Host, { key: 'c226daf451d9c861d5303474ef0fc31c1602371b' }, h("div", { key: '7aece988946e4bef02c597a80ea1a505c201e188', class: "item-container", style: this.styles }, h("cura-badge-pill", { key: 'd0362b4a4ee3c047173399ea5f7c912a5a0f7810', type: "solid", color: badgeColor, "icon-name": icon, "icon-only": iconOnly, "border-radius": "50%" }, this.label), this.displayHeading && this.heading && (h("cura-paragraph", { key: '015effecdb26be22386363e77bd5a0e671701d60', marginBlock: "0", size: "xsmall", color: textColor }, this.heading)))));
+        return (h(Host, { key: '779f6c1eb875477b8ceb8ed223e8432081f67bc9' }, h("div", { key: '14f773ffa6d576f2894fa0515f878eddf48205fb', class: "item-container", style: this.styles }, h("cura-badge-pill", { key: '492f9988b7f7f6f4fc0838a99a015da3411017fe', type: "solid", color: badgeColor, "icon-name": icon, "icon-only": iconOnly, "border-radius": "50%" }, this.label), this.displayHeading && this.heading && (h("cura-paragraph", { key: 'b0d3cafa0bfddd990ee745b3b82b44df9daaca71', marginBlock: "0", size: "xsmall", color: textColor }, this.heading)))));
     }
     static get is() { return "cura-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -103,7 +103,7 @@ export class CuraStepper {
         return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
     }
     render() {
-        return h(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
+        return h(Host, { key: '55bff7769007721f0c0366d1a6a9b197bbaebfbd' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
     }
     static get is() { return "cura-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '4dc290042792d96f31c2e63936d70a77bc37917d' }, h("div", { key: '668c102d3a31d0a0e39c390546fcf5422e954246', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '502b24915e1000877ccd4ae25806b152b4a72948', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'd7afe4d1a9740d3bd1bce04858f6e71e0c857da2', class: "content" }, h("cura-heading", { key: '419e0d64e12e828efa2fecebe0eb86c74ff86dda', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bc6f5c120f0b32858cbda9ebf16c5d79366452bb', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9cc8ba28b3e5ee5d8137351cfbb5dc07b417b7e9' })), h("slot", { key: 'f260ca44fa6cc515a1bda3ecb94dd1ac90f880d7', name: "actions" })), this.closeButton && h("cura-icon", { key: '7db6c2e5c3c66ab0b12822fc8099e17b77ed2c39', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'd0a6f1e838ec98f6dac5773214e1e5cf501e3e2e', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: 'cccef02cf7786461ab403fecd52476a42bb98374' }, h("div", { key: '64385fa4aab3d08e0815276e0bde817b1f3c09f4', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '0d759de0780902eec4276adfa3f758c1f2b0b53c', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '2c4baf72eb99c8d400eb704879febe1a57167373', class: "content" }, h("cura-heading", { key: '771e4762bb36bf47064ed90a98f7786973093e8c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a8ef8dca7e4ddfac612bd48f19688fae8c0a015e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '86408523353f831f6ede1acaf0214a00f5fac8a5' })), h("slot", { key: 'c69f99edb9577df1a6ce9b6667c719df740daa49', name: "actions" })), this.closeButton && h("cura-icon", { key: 'cacd29615f1dbff708ed10811c4e94c0b120c325', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '65a88d82da0ad2a9c987e26c2ffba983ff1c60b6', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

package/dist/collection/components/cura-tooltip/cura-tooltip.css

@@ -68,8 +68,8 @@
  */
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -102,9 +102,9 @@
   box-sizing: border-box;
   max-width: var(--max-width);
   height: auto;
-  padding: calc(var(--base-spacing) * 2px);
+  padding: calc(var(--cura-spacing-base) * 2px);
   border: 1px solid var(--neutral-light);
-  border-radius: calc(var(--base-spacing) * 1px);
+  border-radius: calc(var(--cura-spacing-base) * 1px);
   background-color: var(--neutral-purewhite);
   box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
 }
@@ -112,10 +112,10 @@
   :host .container {
     max-width: 90%;
     height: fit-content;
-    padding: calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) 0 calc(var(--base-spacing) * 4px);
+    padding: calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) 0 calc(var(--cura-spacing-base) * 4px);
     margin: 0 auto;
     border: 2px solid;
-    border-radius: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0 0;
+    border-radius: calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0 0;
     border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);
   }
 }
@@ -123,8 +123,8 @@
   content: "";
   position: absolute;
   z-index: 99999;
-  width: calc(var(--base-spacing) * 2.5px);
-  height: calc(var(--base-spacing) * 2.5px);
+  width: calc(var(--cura-spacing-base) * 2.5px);
+  height: calc(var(--cura-spacing-base) * 2.5px);
   border: 1px solid;
   border-radius: 2px;
   background-color: var(--neutral-purewhite);
@@ -142,18 +142,18 @@
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
-  gap: calc(var(--base-spacing) * 1px);
+  gap: calc(var(--cura-spacing-base) * 1px);
 }
 @media (max-width: 768px) {
   :host .container .content {
-    padding-bottom: calc(var(--base-spacing) * 4px);
+    padding-bottom: calc(var(--cura-spacing-base) * 4px);
     border-bottom: 1px dashed var(--neutral-light);
   }
 }
 :host .container .close-icon {
-  margin-left: calc(var(--base-spacing) * 3px);
+  margin-left: calc(var(--cura-spacing-base) * 3px);
   cursor: pointer;
 }
 :host .container .close-button {
-  padding: calc(var(--base-spacing) * 2px) 0;
+  padding: calc(var(--cura-spacing-base) * 2px) 0;
 }

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

@@ -25,7 +25,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '3fe89da4d5b3a2830d4ab6a88e705b4cf2433289', role: "tooltip", id: this.elementId }, h("div", { key: '6cece3dcbf275a851e0d53cb154b9dcf50a76948', class: "container", style: this.styles }, h("div", { key: '802840b89feb6c4d89303da156f6f130e552a83b', class: "content" }, h("cura-heading", { key: 'ea98692d4fc34f05dcf8fcd5c325b8a1cd408226', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '38bb7bf9f0a837813b490062ba5645f7148ac74b', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '960b6b6d8ee4636a31c2058aa4779050973e143e' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'd0bf72702fa8d24d1f5fac6fa473747bdaadcdaf', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '2213a6353b3d326ecde2e9eefe84811bd3161727', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '8d60e1300b236087fdb740e018c1c0537cae8d14', role: "tooltip", id: this.elementId }, h("div", { key: '1ee4abd823d291a62a0890f15e6dcf7de93d27ce', class: "container", style: this.styles }, h("div", { key: '5b77522f5bfa31f0c57d1461c4fe74bb28056853', class: "content" }, h("cura-heading", { key: '1829def9107ea1a6d4c26a7529f6342b9d1c3a4e', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'd7ef9857d141ef5aea60b1d9d1d79f47ebe1f6f8', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f2dc8c8e8142205d0553af200875131a0cc09111' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'e7666bb54a3366f8c2ab3b0429237f7b5307b36a', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'cc64d822bf10b1d7788fd2df85a6b97287b7f7ee', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
         var _a, _b, _c, _d, _e;

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

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'c589b642a730e09b8d5ba60b69b45f131560ffda' }, h("div", { key: '85ee55dc52042e513e070d68af348dc78d1990e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '59e78d3b717b0bbd77d98da09ab7f1da30d02f14', class: "info" }, h("div", { key: '64d683966633a625e7e477fcf1b00364d5fd3fa7', class: "label-wrapper" }, h("cura-label", { key: '76d34006ffd837285cb899278f759d95862097c5', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '01394587736d7402d5c6729e9f7e93f7b08ad742', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'fcbbea9a05b9299a814111ea36d7412df6f54e92', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '99c46ed2eb8492cbebb114d828935f1ec0bf7796' }))), h("div", { key: '6291780f613af4e320c486b46697df6f19bdce0e', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'b922e6498ecfd28391843cdfa45c850f045f3ab6', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '8c4fdab5276ff9eb200299a5584ac8e96ef11974' }, h("div", { key: '3074370b481f50e7c3b8183e1aa643a37992f05b', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'adb656d2d5dc3212735c427e08c7d03d8c94f83e', class: "info" }, h("div", { key: '55747701dd4ed57a6ed3132d996639219ba950e1', class: "label-wrapper" }, h("cura-label", { key: 'b5224ec0a274789c03f6b8e0a5c5ed7fda911c58', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '188a2ed6c915cec53d495edd77ec2dd88fafe714', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '6b63e628f4aeb066dc73feaca720edb12dc207f1', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '880c28c63878169f84a14c96d12c925edc3611bb' }))), h("div", { key: '01dd5e638a5043c4349193c97dd7acfe57dc4498', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '5ff82da2b58e7bd88f2866a2677151fb49814b3c', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css

@@ -1,7 +1,7 @@
 /**
  * Global Spacing Definitions.
- * Required CSS Properties:
- * --base-spacing
+ * Required CSS Properties from Cura:
+ * --cura-spacing-base
  */
 /* None: 0px */
 /* Tiny default: 4px */
@@ -44,7 +44,7 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  padding: calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);
+  padding: calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 1px);
   background-color: var(--neutral-purewhite);
   border-bottom: 1px solid var(--neutral-light);
 }
@@ -59,7 +59,7 @@
   align-items: center;
   align-content: center;
   justify-content: center;
-  gap: calc(var(--base-spacing) * 2px);
+  gap: calc(var(--cura-spacing-base) * 2px);
   flex-direction: row;
   box-sizing: border-box;
   cursor: pointer;
@@ -69,7 +69,7 @@
   margin-block: 0px;
 }
 .option-info ::slotted(div[slot=image]) {
-  min-width: calc(var(--base-spacing) * 8px);
+  min-width: calc(var(--cura-spacing-base) * 8px);
   display: flex;
   justify-content: center;
   align-items: center;