@rededor/cura 1.4.0-alpha.1 → 1.4.0

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-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;
+}

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

@@ -0,0 +1,219 @@
+import { Host, h } from "@stencil/core";
+export class CuraBadgePill {
+    constructor() {
+        this.theme = window.CuraAPI.theme;
+        this.type = 'solid';
+        this.color = 'primary';
+        this.iconName = undefined;
+        this.iconset = 'default';
+        this.disabled = false;
+        this.iconOnly = false;
+        this.borderRadius = "2px";
+        this.styles = {};
+    }
+    handleColorChange() {
+        this.setColors();
+    }
+    connectedCallback() {
+        this.setBaseStyles();
+        this.setColors();
+    }
+    setBaseStyles() {
+        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+        this.styles['--font-family'] = this.theme.fonts.getFamily();
+        this.styles['--font-size'] = this.theme.fonts.getSize();
+        this.styles = Object.assign({}, this.styles);
+    }
+    setColors() {
+        const colors = [
+            { name: '--color-background', theme: `${this.color}-lighter` },
+            { name: '--color-base', theme: `${this.color}-dark` },
+            { name: '--color-background-disabled', theme: 'neutral-pale' },
+            { name: '--color-outline-disabled', theme: 'neutral-medium' },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = this.theme.colors.getColor(color.theme);
+        });
+    }
+    hostCSSProperties() {
+        return {
+            '--border-radius': this.borderRadius || '2px',
+        };
+    }
+    getClasses() {
+        const classes = {};
+        classes['badge-container'] = true;
+        classes[`icon-only`] = this.iconOnly;
+        classes['disabled'] = this.disabled;
+        classes[`${this.type}`] = true;
+        return classes;
+    }
+    getSymbolColor() {
+        return this.disabled
+            ? 'neutral-medium'
+            : `${this.color}-dark`;
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: 'micro', color: this.getSymbolColor() });
+    }
+    render() {
+        const symbolColor = this.getSymbolColor();
+        return (h(Host, { key: 'b6870052543347fdc83a75629b30251ddab35e12', style: this.hostCSSProperties() }, h("div", { key: 'ae8b14c1c9c323b8387e7ed4e3a97bade9c712f4', class: this.getClasses(), style: this.styles }, this.getIcon(), h("cura-label", { key: 'd14ab9efd48f33c7b8153cf85699b2fc96ecd7af', size: 'xsmall', "line-height": "117%", color: symbolColor }, h("slot", { key: 'b684ca1b248d04700a2b8a7245c455fb9bdef474' })))));
+    }
+    static get is() { return "cura-badge-pill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-badge-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-badge-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outline' | 'transparent'",
+                    "resolved": "\"outline\" | \"solid\" | \"transparent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge type: solid | outline | transparent"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'solid'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'",
+                    "resolved": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color base from color scheme. Default: primary"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the icon to be used from iconset"
+                },
+                "attribute": "icon-name",
+                "reflect": true
+            },
+            "iconset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom iconset if needed"
+                },
+                "attribute": "iconset",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state. Boolean"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set badge to icon only. Boolean"
+                },
+                "attribute": "icon-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set border-radius."
+                },
+                "attribute": "border-radius",
+                "reflect": true,
+                "defaultValue": "\"2px\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "handleColorChange"
+            }];
+    }
+}
+//# sourceMappingURL=cura-badge-pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-pill.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-pill',\n  styleUrl: 'cura-badge-pill.scss',\n  shadow: true,\n})\nexport class CuraBadgePill {\n  @Element() host: HTMLElement;\n\n  /**\n   * Badge type: solid | outline | transparent\n   */\n  @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n  /**\n   * Color base from color scheme. Default: primary\n   */\n  @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n  /**\n   * Name of the icon to be used from iconset\n   */\n  @Prop({ reflect: true }) iconName: string;\n\n  /**\n   * Custom iconset if needed\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n\n  /**\n   * Disabled state. Boolean\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set badge to icon only. Boolean\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Set border-radius.\n   */\n  @Prop({ reflect: true }) borderRadius: string = \"2px\";\n\n  @State() styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('color')\n  handleColorChange() {\n    this.setColors();\n  }\n\n  connectedCallback() {\n    this.setBaseStyles();\n    this.setColors();\n  }\n\n  private setBaseStyles() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles = { ...this.styles };\n  }\n\n  private setColors() {\n    const colors = [\n      { name: '--color-background', theme: `${this.color}-lighter` },\n      { name: '--color-base', theme: `${this.color}-dark` },\n      { name: '--color-background-disabled', theme: 'neutral-pale' },\n      { name: '--color-outline-disabled', theme: 'neutral-medium' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = this.theme.colors.getColor(color.theme);\n    });\n  }\n\n  hostCSSProperties() {\n    return {\n      '--border-radius': this.borderRadius || '2px',\n    };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['badge-container'] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-medium'\n      : `${this.color}-dark`;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    return <cura-icon\n      name={this.iconName}\n      iconset={this.iconset}\n      size={'micro'}\n      color={this.getSymbolColor()}\n    />;\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <div class={this.getClasses()} style={this.styles}>\n          {this.getIcon()}\n          <cura-label size='xsmall' line-height=\"117%\" color={symbolColor}>\n            <slot></slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,126 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import iconNames from "../../../assets/icons/iconset-default-list";
+export default {
+    title: 'Componentes/Badges/Badge Pill',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return `<cura-badge-pill
+  type="${args.type}"
+  color="${args.color}"${args.iconName ? `
+  icon-name="${args.iconName}"` : ''} ${args.iconset ? `
+  iconset="${args.iconset}"` : ''} ${args.disabled ? `
+  disabled` : ''} ${args.iconOnly ? `
+  icon-only` : ''} ${args.borderRadius ? `
+  border-radius="${args.borderRadius}"` : ''}
+>
+  ${args.label}
+</cura-badge-pill>
+${args.cssBorderRadius ? `<style>
+  cura-badge-pill {
+    --border-radius: ${args.cssBorderRadius} !important;
+  }
+</style>` : ''}`;
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['solid', 'outline', 'transparent'],
+            description: 'Tipo do badge',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'solid' }
+            }
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+            description: 'Cor base do badge',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'primary' }
+            }
+        },
+        iconName: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone do iconset',
+            table: {
+                category: 'Icons'
+            }
+        },
+        iconset: {
+            control: { type: 'text' },
+            description: 'Conjunto de ícones personalizado',
+            table: {
+                category: 'Icons',
+                defaultValue: { summary: 'default' }
+            }
+        },
+        iconOnly: {
+            control: 'boolean',
+            description: 'Mostra apenas o ícone',
+            table: {
+                category: 'Icons',
+                defaultValue: { summary: false }
+            }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false }
+            }
+        },
+        label: {
+            control: 'text',
+            description: 'Label do badge',
+            table: {
+                category: 'Properties'
+            }
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius do badge',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '2px' }
+            }
+        },
+        cssBorderRadius: {
+            control: 'text',
+            name: '--border-radius',
+            description: 'É possível sobrescrever o border-radius do componente (Ex: 10px, 50%, etc.)',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: '' }
+            }
+        },
+    },
+};
+export const BadgePill = {
+    args: {
+        type: 'solid',
+        color: 'primary',
+        iconName: '',
+        iconset: '',
+        disabled: false,
+        iconOnly: false,
+        label: 'Badge Pill',
+        borderRadius: '',
+        cssBorderRadius: '',
+    },
+};
+//# sourceMappingURL=cura-badge-pill.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cura-badge-pill.stories.js","sourceRoot":"","sources":["../../../../src/components/badges/cura-badge-pill/cura-badge-pill.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nexport default {\n  title: 'Componentes/Badges/Badge Pill',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return `<cura-badge-pill\n  type=\"${args.type}\"\n  color=\"${args.color}\"${args.iconName ? `\n  icon-name=\"${args.iconName}\"` : ''} ${args.iconset ? `\n  iconset=\"${args.iconset}\"` : ''} ${args.disabled ? `\n  disabled` : ''} ${args.iconOnly ? `\n  icon-only` : ''} ${args.borderRadius ? `\n  border-radius=\"${args.borderRadius}\"` : ''}\n>\n  ${args.label}\n</cura-badge-pill>\n${args.cssBorderRadius ? `<style>\n  cura-badge-pill {\n    --border-radius: ${args.cssBorderRadius} !important;\n  }\n</style>` : ''}`;\n  },\n  argTypes: {\n    type: {\n      control: { type: 'select' },\n      options: ['solid', 'outline', 'transparent'],\n      description: 'Tipo do badge',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'solid' }\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],\n      description: 'Cor base do badge',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'primary' }\n      }\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone do iconset',\n      table: {\n        category: 'Icons'\n      }\n    },\n    iconset: {\n      control: { type: 'text' },\n      description: 'Conjunto de ícones personalizado',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: 'default' }\n      }\n    },\n    iconOnly: {\n      control: 'boolean',\n      description: 'Mostra apenas o ícone',\n      table: {\n        category: 'Icons',\n        defaultValue: { summary: false }\n      }\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: false }\n      }\n    },\n    label: {\n      control: 'text',\n      description: 'Label do badge',\n      table: {\n        category: 'Properties'\n      }\n    },\n    borderRadius: {\n      control: 'text',\n      description: 'Border radius do badge',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '2px' }\n      }\n    },\n    cssBorderRadius: {\n      control: 'text',\n      name: '--border-radius',\n      description: 'É possível sobrescrever o border-radius do componente (Ex: 10px, 50%, etc.)',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '' }\n      }\n    },\n  },\n};\n\nexport const BadgePill = {\n  args: {\n    type: 'solid',\n    color: 'primary',\n    iconName: '',\n    iconset: '',\n    disabled: false,\n    iconOnly: false,\n    label: 'Badge Pill',\n    borderRadius: '',\n    cssBorderRadius: '',\n  },\n};\n\n"]}

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -88,7 +88,7 @@ export class CuraButton {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '2831f74cc53bbadcaf1648c759090204cf3c20ea' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '27ce2e8e003caac05d652a9a25054f689d9e3841' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get is() { return "cura-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js

@@ -87,7 +87,7 @@ export class CuraButtonOutline {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '5adde27bc83165040d4279e4835646e13b08a412' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '8c7adeaec50deaf3829295d2231b390992064735' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get is() { return "cura-button-outline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/buttons/cura-button-select/cura-button-select.js

@@ -57,15 +57,6 @@ export class CuraButtonSelect {
             return this.selected ? 'neutral-white' : 'neutral-black';
         }
     }
-    getColorCounter() {
-        if (this.background === 'dark' && this.disabled) {
-            return !this.selected ? 'neutral-black' : 'neutral-dark';
-        }
-        if (this.background === 'light' && this.disabled) {
-            return 'neutral-pale';
-        }
-        return `${this.color}-lighter`;
-    }
     getColorBagdeNumber() {
         if (this.background === 'dark' && this.disabled) {
             return this.selected ? 'neutral-black' : 'neutral-dark';
@@ -83,7 +74,7 @@ export class CuraButtonSelect {
         return h("cura-icon", { name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
     }
     getCounter() {
-        return (h("cura-badge-number", { color: this.getColorCounter(), class: "badge-number" }, h("cura-label", { color: this.getColorBagdeNumber(), size: "small" }, this.counter)));
+        return (h("cura-badge-counter", { number: this.counter, color: this.color, disabled: this.disabled || null, class: "badge-number" }));
     }
     getCheckIconRight() {
         const iconSize = this.size === 'large' ? 20 : 16;
@@ -105,7 +96,7 @@ export class CuraButtonSelect {
     }
     render() {
         const labelSize = labelSizes[this.size] || labelSizes['default'];
-        return (h(Host, { key: '8b766a3e23c2af13a47d113884047d19717702f2' }, h("button", { key: '90b57f260baa61de7c73e09965e190cd13eb62e1', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'f318438fa59f43846ce5043e4ee290faf3cf05d4', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '2d069740c62b32dd3aa0fd74bdafb951d8deb73b', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'e71e072d1dd91bbbafa939181cc22ba7b7c6189e' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
+        return (h(Host, { key: '54bf5dc64b99128f839fdc22ff56dd709971fc8e' }, h("button", { key: '422e4d80d321fb9e4cddd165700220071012bea8', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '6c40080d1b8746e394539cf717d658e4d834c500', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: 'f2f9b54cbcd2c7a571d966ba20f344384ecaadc0', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'f5c471e0771c6c19685aa591461a73b1aaa83c47' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
     }
     static get is() { return "cura-button-select"; }
     static get encapsulation() { return "shadow"; }
@@ -175,11 +166,11 @@ export class CuraButtonSelect {
                 "defaultValue": "'medium'"
             },
             "counter": {
-                "type": "any",
+                "type": "number",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | number | null",
-                    "resolved": "number | string",
+                    "original": "number | null",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,