@rededor/cura 1.4.0-alpha.1 → 1.5.0-alpha.0

package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.css

@@ -0,0 +1,51 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+:host {
+  width: fit-content;
+  display: inline-block;
+  height: calc(var(--base-spacing) * 4px);
+  position: relative;
+}
+:host .container {
+  display: flex;
+  min-width: calc(var(--base-spacing) * 4px);
+  width: fit-content;
+  height: calc(var(--base-spacing) * 4px);
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(calc(var(--base-spacing) * 4px) / 2);
+  background: var(--background-color);
+  box-sizing: border-box;
+  padding: 0 calc(var(--base-spacing) * 1px);
+  position: relative;
+}
+:host .container.outline, :host .container.transparent {
+  background: transparent !important;
+}
+:host .container.outline::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  box-sizing: border-box;
+  border: 1px solid var(--background-color);
+  border-radius: calc(calc(var(--base-spacing) * 4px) / 2);
+}

package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js

@@ -0,0 +1,149 @@
+import { Host, h } from "@stencil/core";
+export class CuraBadgeNumber {
+    constructor() {
+        this.theme = window.CuraAPI.theme;
+        this.labelColor = 'primary-darker';
+        this.bgColorName = 'primary-lighter';
+        this.number = undefined;
+        this.color = 'primary';
+        this.disabled = false;
+        this.type = 'solid';
+        this.styles = {};
+    }
+    handleColorChange() {
+        this.setColors();
+    }
+    setColors() {
+        const color = this.color.toLowerCase();
+        /** type outline and transparent */
+        if (this.type === 'outline' || this.type === 'transparent') {
+            this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;
+            this.labelColor = this.bgColorName;
+            /** type solid - default */
+        }
+        else {
+            this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;
+            this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;
+        }
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(`${this.bgColorName}`) });
+    }
+    connectedCallback() {
+        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+        this.setColors();
+    }
+    getClasses() {
+        const classes = {
+            'container': true
+        };
+        classes[this.type.toLowerCase()] = true;
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: '8b67f2b913a10de53a519cdafcfbcb140b2adda5' }, this.number && this.number <= 0 ? '' : (h("div", { class: this.getClasses(), style: this.styles }, h("cura-label", { size: "xsmall", "line-height": "none", color: this.labelColor }, this.number >= 100 ? '99+' : this.number)))));
+    }
+    static get is() { return "cura-badge-counter"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-badge-counter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-badge-counter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "number": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero a ser representado no badge.\nApresentar\u00E1 99+ para n\u00FAmeros acima desse valor."
+                },
+                "attribute": "number",
+                "reflect": true
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cor fundamental do design system sem profundidade.\nEx.: primary (padr\u00E3o)"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado do badge como desabilitado ou habilitado."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outline' | 'transparent' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estilo visual entre solid (default), outline ou transparent."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'solid'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleColorChange"
+            }, {
+                "propName": "color",
+                "methodName": "handleColorChange"
+            }, {
+                "propName": "type",
+                "methodName": "handleColorChange"
+            }];
+    }
+}
+//# sourceMappingURL=cura-badge-counter.js.map

package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-counter.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-counter/cura-badge-counter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,eAAe;;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAqB7B,eAAU,GAAG,gBAAgB,CAAC;QAC9B,gBAAW,GAAG,iBAAiB,CAAC;;qBAZR,SAAS;wBAIL,KAAK;oBAI4B,OAAO;sBAElD,EAAE;;IAOpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACvC,mCAAmC;QACnC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;YAC3D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YACrC,2BAA2B;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,UAAU,CAAC;YAC9F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC;QACvE,CAAC;QACD,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,GACxE,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;SAClB,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CACzC,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;YAC/C,kBAAY,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAC9B,CACT,CACL,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-counter',\n  styleUrl: 'cura-badge-counter.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  theme = window.CuraAPI.theme;\n\n  /** Número a ser representado no badge.\n   * Apresentará 99+ para números acima desse valor.\n   */\n  @Prop({ reflect: true }) number: number | null;\n  /**\n   * Cor fundamental do design system sem profundidade.\n   * Ex.: primary (padrão)\n   */\n  @Prop() color: string = 'primary';\n  /**\n   * Define o estado do badge como desabilitado ou habilitado.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Define o estilo visual entre solid (default), outline ou transparent.\n   */\n  @Prop() type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n  @State() styles = {};\n  labelColor = 'primary-darker';\n  bgColorName = 'primary-lighter';\n\n  @Watch(\"disabled\")\n  @Watch(\"color\")\n  @Watch(\"type\")\n  handleColorChange() {\n    this.setColors();\n  }\n\n  setColors() {\n    const color = this.color.toLowerCase();\n    /** type outline and transparent */\n    if (this.type === 'outline' || this.type === 'transparent') {\n      this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;\n      this.labelColor = this.bgColorName;\n    /** type solid - default */\n    } else {\n      this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;\n      this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;\n    }\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(`${this.bgColorName}`),\n    }\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {\n      'container': true\n    };\n    classes[this.type.toLowerCase()] = true;\n    return classes;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        { this.number && this.number <= 0 ? '' : (\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label size=\"xsmall\" line-height=\"none\" color={this.labelColor}>\n            {this.number >= 100 ? '99+' : this.number}\n          </cura-label>\n        </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/badges/{cura-badge-number/cura-badge-number.stories.js → cura-badge-counter/cura-badge-counter.stories.js}

@@ -10,22 +10,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorsWithDepths } from "../../../utils/utils";
-const renderCuraBadgeNumber = (args) => {
-    const block = `<cura-badge-number
-  color="${args.color}">
-  ${args.number}
-  </cura-badge-number>
+import { baseColors } from "../../../utils/utils";
+const renderCuraBadgeCounter = (args) => {
+    const block = `<cura-badge-counter${args.color && args.color !== 'primary' ? `
+  color="${args.color}"` : ''}${args.disabled ? `
+  disabled` : ''}${args.type && args.type !== 'solid' ? `
+  type="${args.type}"` : ''}
+  number="${args.number}">
+</cura-badge-counter>
   `;
     return `${block}`;
 };
-const colors = getColorsWithDepths();
 export default {
-    title: 'Componentes/Badges/Badge Number',
+    title: 'Componentes/Badges/Badge Counter',
     tags: ['autodocs'],
     render: (_a) => {
         var args = __rest(_a, []);
-        return renderCuraBadgeNumber(args);
+        return renderCuraBadgeCounter(args);
     },
     argTypes: {
         number: {
@@ -38,19 +39,38 @@ export default {
         },
         color: {
             control: { type: 'select' },
-            options: ['', ...colors],
+            options: ['', ...baseColors],
             description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
             table: {
                 category: 'Properties',
                 defaultValue: { summary: 'primary' },
             },
         },
+        type: {
+            control: { type: 'select' },
+            options: ['solid', 'outline', 'transparent'],
+            description: 'Estilo do badge. Valores válidos são solid (padrão), outline ou transparent.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'solid' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false }
+            }
+        },
     },
 };
-export const CuraBadgeNumber = {
+export const CuraBadgeCounter = {
     args: {
         number: 1,
         color: 'primary',
-    },
+        disabled: false,
+        type: 'solid'
+    }
 };
-//# sourceMappingURL=cura-badge-number.stories.js.map
+//# sourceMappingURL=cura-badge-counter.stories.js.map

package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-counter.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-counter/cura-badge-counter.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,sBAAsB,GAAG,CAAC,IAAS,EAAE,EAAE;IAC3C,MAAM,KAAK,GAAG,sBAAsB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC;WACpE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACrC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC;UAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,MAAM;;GAEpB,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,kCAAkC;IACzC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QACd,OAAO,sBAAsB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IACD,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACtC,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACJ;QACD,KAAK,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;YAC5B,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACvC;SACJ;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,OAAO,EAAC,SAAS,EAAC,aAAa,CAAC;YAC1C,WAAW,EAAE,8EAA8E;YAC3F,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACrC;SACJ;QACC,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,OAAO;KACd;CACJ,CAAC","sourcesContent":["import { baseColors } from \"../../../utils/utils\";\n\nconst renderCuraBadgeCounter = (args: any) => {\n  const block = `<cura-badge-counter${args.color && args.color !== 'primary' ? `\n  color=\"${args.color}\"` : ''}${args.disabled ? `\n  disabled` : ''}${args.type && args.type !== 'solid' ? `\n  type=\"${args.type}\"` : ''}\n  number=\"${args.number}\">\n</cura-badge-counter>\n  `;\n    return `${block}`;\n};\n\nexport default {\n    title: 'Componentes/Badges/Badge Counter',\n    tags: ['autodocs'],\n    render: ({ ...args }) => {\n        return renderCuraBadgeCounter(args);\n    },\n    argTypes: {\n        number: {\n            control: 'number',\n            description: 'Número que será exibido',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 1 },\n            },\n        },\n        color: {\n            control: { type: 'select' },\n            options: ['', ...baseColors],\n            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 'primary' },\n            },\n        },\n        type: {\n          control: { type: 'select' },\n          options: ['solid','outline','transparent'],\n          description: 'Estilo do badge. Valores válidos são solid (padrão), outline ou transparent.',\n          table: {\n              category: 'Properties',\n              defaultValue: { summary: 'solid' },\n          },\n      },\n        disabled: {\n          control: 'boolean',\n          description: 'Estado desabilitado.',\n          table: {\n            category: 'State',\n            defaultValue: { summary: false }\n          }\n        },\n    },\n};\n\nexport const CuraBadgeCounter = {\n    args: {\n      number: 1,\n      color: 'primary',\n      disabled: false,\n      type: 'solid'\n    }\n};\n"]}

package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js

@@ -18,7 +18,7 @@ export class CuraDistance {
         this.formatDistance();
     }
     render() {
-        return (h(Host, { key: '7027189b17f2ad1759f9d43bc5dbc9cbb1fe47cc' }, h("div", { key: 'bc57ac9c32c0651469d4bd6ee75d0f97408fde34', class: "container", style: this.styles }, h("cura-label", { key: '913db081273caf2e7d46d92b22e1988cf28ddeb3', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: '4c327bd9d55466bb2d9c614d9aa0420e42da23ce', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
+        return (h(Host, { key: 'cdc206deecbed2e069befda5d21ddcaf03049afc' }, h("div", { key: 'd22d2b5b97964281e8588fbc17a66f3fddcd875e', class: "container", style: this.styles }, h("cura-label", { key: '0d54ab1ad403ba23a57fb78a422ed8c577cd627e', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: 'd4929a67484bbfd6d6f3edce82414951ea4778c8', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
     }
     setCssProperties() {
         this.styles = {

package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.css

@@ -0,0 +1,61 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+:host {
+  display: block;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+}
+:host .container {
+  width: calc(var(--base-spacing) * 2px);
+  height: calc(var(--base-spacing) * 2px);
+  position: relative;
+  box-sizing: border-box;
+}
+:host .container::before {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "";
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 1px solid var(--color-dark);
+  background: var(--color);
+}
+:host .container.disabled::before {
+  background: var(--neutral-pale);
+  border: 1px solid var(--neutral-medium);
+}
+:host .container.outline::before {
+  background: transparent;
+  border: 2px solid var(--color);
+}
+:host .container.outline.disabled::before {
+  border: 2px solid var(--neutral-medium);
+}
+:host .container.transparent::before {
+  background: var(--color-dark);
+  border: none;
+}
+:host .container.transparent.disabled::before {
+  background: var(--neutral-medium);
+  border: none;
+}

package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.js

@@ -0,0 +1,108 @@
+import { Host, h } from "@stencil/core";
+export class CuraBadgeDot {
+    constructor() {
+        this.theme = window.CuraAPI.theme;
+        this.color = 'primary';
+        this.disabled = false;
+        this.type = 'solid';
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+        this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');
+        ;
+        this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');
+        ;
+        this.setColors();
+    }
+    setColors() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--color': this.theme.colors.getColor(`${this.color}`), '--color-dark': this.theme.colors.getColor(`${this.color}-dark`) });
+    }
+    getClasses() {
+        const classes = {
+            'container': true,
+            'disabled': this.disabled
+        };
+        classes[`${this.type}`] = true;
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: '00e335977fbb0677db9d95bab901a012ba8a5c06' }, h("div", { key: 'e828743793731c986f37dd6a9f7abdc78b63932b', class: this.getClasses(), style: this.styles })));
+    }
+    static get is() { return "cura-badge-dot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-badge-dot.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-badge-dot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cor fundamental do design system sem profundidade.\nEx.: primary (padr\u00E3o)"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estado do badge como desabilitado ou habilitado."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outline' | 'transparent' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o estilo visual entre solid (default), outline ou transparent."
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'solid'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+}
+//# sourceMappingURL=cura-badge-dot.js.map

package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-dot.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-dot/cura-badge-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,YAAY;;QAEvB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;qBAML,SAAS;wBAIU,KAAK;oBAI4B,OAAO;sBAEjE,EAAE;;IAGpB,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAAA,CAAC;QAC9E,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAAA,CAAC;QAC5E,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EACtD,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,GACjE,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QACF,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;QAC/B,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAQ,CACpD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-dot',\n  styleUrl: 'cura-badge-dot.scss',\n  shadow: true,\n})\nexport class CuraBadgeDot {\n\n  theme = window.CuraAPI.theme;\n\n  /**\n   * Cor fundamental do design system sem profundidade.\n   * Ex.: primary (padrão)\n   */\n  @Prop() color: string = 'primary';\n  /**\n   * Define o estado do badge como desabilitado ou habilitado.\n   */\n  @Prop({reflect: true}) disabled: boolean = false;\n  /**\n   * Define o estilo visual entre solid (default), outline ou transparent.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n  @State() styles = {};\n\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');;\n    this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');;\n    this.setColors();\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color': this.theme.colors.getColor(`${this.color}`),\n      '--color-dark': this.theme.colors.getColor(`${this.color}-dark`)\n    }\n  }\n\n  getClasses() {\n    const classes = {\n      'container': true,\n      'disabled': this.disabled\n    };\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.stories.js

@@ -0,0 +1,65 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { baseColors } from "../../../utils/utils";
+const renderCuraBadgeDot = (args) => {
+    const block = `<cura-badge-dot${args.color && args.color !== 'primary' ? `
+  color="${args.color}"` : ''}${args.disabled ? `
+  disabled` : ''}${args.type && args.type !== 'solid' ? `
+  type="${args.type}"` : ''}></cura-badge-dot>
+  `;
+    return `${block}`;
+};
+export default {
+    title: 'Componentes/Badges/Badge Dot',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraBadgeDot(args);
+    },
+    argTypes: {
+        color: {
+            control: { type: 'select' },
+            options: ['', ...baseColors],
+            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'primary' },
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['', 'solid', 'outline', 'transparent'],
+            description: 'Estilo do badge. Valores válidos são solid (padrão), outline ou transparent.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'solid' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false }
+            }
+        },
+    },
+};
+export const CuraBadgeDot = {
+    args: {
+        color: 'primary',
+        disabled: false,
+        type: ''
+    }
+};
+//# sourceMappingURL=cura-badge-dot.stories.js.map

package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-dot.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-dot/cura-badge-dot.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,kBAAkB,GAAE,CAAC,IAAS,EAAE,EAAE;IACtC,MAAM,KAAK,GAAG,kBAAkB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC;WAChE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACrC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC;UAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;GACxB,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QACd,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IACD,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;YAC5B,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACvC;SACJ;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,aAAa,CAAC;YAC7C,WAAW,EAAE,8EAA8E;YAC3F,KAAK,EAAE;gBACH,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACrC;SACJ;QACC,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,EAAE;KACT;CACJ,CAAC","sourcesContent":["import { baseColors } from \"../../../utils/utils\";\n\nconst renderCuraBadgeDot= (args: any) => {\n  const block = `<cura-badge-dot${args.color && args.color !== 'primary' ? `\n  color=\"${args.color}\"` : ''}${args.disabled ? `\n  disabled` : ''}${args.type && args.type !== 'solid' ? `\n  type=\"${args.type}\"` : ''}></cura-badge-dot>\n  `;\n    return `${block}`;\n};\n\nexport default {\n    title: 'Componentes/Badges/Badge Dot',\n    tags: ['autodocs'],\n    render: ({ ...args }) => {\n        return renderCuraBadgeDot(args);\n    },\n    argTypes: {\n        color: {\n            control: { type: 'select' },\n            options: ['', ...baseColors],\n            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 'primary' },\n            },\n        },\n        type: {\n          control: { type: 'select' },\n          options: ['','solid','outline','transparent'],\n          description: 'Estilo do badge. Valores válidos são solid (padrão), outline ou transparent.',\n          table: {\n              category: 'Properties',\n              defaultValue: { summary: 'solid' },\n          },\n      },\n        disabled: {\n          control: 'boolean',\n          description: 'Estado desabilitado.',\n          table: {\n            category: 'State',\n            defaultValue: { summary: false }\n          }\n        },\n    },\n};\n\nexport const CuraBadgeDot = {\n    args: {\n      color: 'primary',\n      disabled: false,\n      type: ''\n    }\n};\n"]}

package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.css

@@ -0,0 +1,73 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
+.badge-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--base-spacing) * 1px);
+  padding: calc(var(--base-spacing) * 1px);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  position: relative;
+  box-sizing: border-box;
+  width: fit-content;
+  height: calc(var(--base-spacing) * 5px);
+  min-width: calc(var(--base-spacing) * 5px);
+  background-color: var(--color-background);
+}
+.badge-container::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
+  pointer-events: none;
+}
+.badge-container.icon-only cura-label {
+  display: none !important;
+}
+.badge-container.disabled {
+  background-color: var(--color-background-disabled);
+}
+.badge-container.outline {
+  background-color: transparent;
+}
+.badge-container.outline::before {
+  border: 1px solid var(--color-base);
+}
+.badge-container.outline.disabled::before {
+  border: 1px solid var(--color-outline-disabled);
+}
+.badge-container.transparent {
+  background-color: transparent;
+}
+.badge-container.transparent::before {
+  border: 1px solid transparent;
+}
+.badge-container.transparent.disabled {
+  background-color: transparent;
+}
+.badge-container cura-icon {
+  display: flex;
+}