@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/esm/cura-card.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, H as Host } from './index-b6c443d5.js';
+
+const curaCardCss = ":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none !important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0px;box-shadow:none}.solid ::slotted(*){border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::slotted(*){border-radius:4px !important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0px 1px 4px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0px;box-shadow:none;cursor:pointer}.solid.cardLink ::slotted(*){border-radius:0px}.solid.cardLink:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::slotted(*){border-radius:4px !important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink:not(.hasPadding).hasShadow ::slotted(*){border-radius:12px !important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0px;overflow:hidden}.transparent ::slotted(*){border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::slotted(*){border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0px;box-shadow:none}.transparent.cardLink ::slotted(*){border-radius:0px !important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter) !important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::slotted(*){border-radius:12px !important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter) !important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::slotted(*){border-radius:4px !important}";
+const CuraCardStyle0 = curaCardCss;
+
+const CuraCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasPadding = true;
+        this.hasShadow = false;
+        this.type = 'solid';
+        this.colorMode = 'light';
+        this.href = undefined;
+        this.target = '_self';
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+        this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+        this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+        this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+        this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);
+        this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);
+        this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-weight-medium'] = this.weights.medium;
+    }
+    getClasses() {
+        const classes = {};
+        classes[this.type] = true;
+        classes[`cardLink`] = this.href;
+        classes[this.colorMode] = true;
+        classes[`hasPadding`] = this.hasPadding;
+        classes[`hasShadow`] = this.hasShadow;
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: 'e158f46384cc9fddf84ad55aed0f945283339d38', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
+    }
+};
+CuraCard.style = CuraCardStyle0;
+
+export { CuraCard as cura_card };
+
+//# sourceMappingURL=cura-card.entry.js.map

package/dist/esm/cura-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gkFAAgkF,CAAC;AACrlF,uBAAe,WAAW;;MCMb,QAAQ;;;0BAM4B,IAAI;yBAOL,KAAK;oBASM,OAAO;yBAST,OAAO;;sBAepB,OAAO;sBAE1B,EAAE;;IAIzB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QACpG,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAC3F,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;KAC3D;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC1B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;QAC/B,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;QACxC,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,IACR,SAAG,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACnF,eAAa,CACX,KAEJ,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,eAAa,CACT,CACP,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/cura-card/cura-card.scss?tag=cura-card&encapsulation=shadow","src/components/cura-card/cura-card.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  ::slotted(*) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n \n}\n\na {\n  display: block;\n  text-decoration: none !important;\n  color: inherit;\n}\n.solid {\n  background-color: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-base);\n  border-radius: 12px;\n  overflow: hidden;\n  padding: 0px;\n  box-shadow: none;\n\n  ::slotted(*) {\n   \n    border-radius: 0 ;\n  }\n  &.hasPadding {\n    padding: 20px;\n    ::slotted(*) {\n      border-radius: 4px !important;\n    }\n  }\n\n  &.hasShadow {\n    border: 2px solid var(--neutral-base);\n\n    @include shadow-level2(--neutral-black-shadow);\n  }\n\n  &.cardLink {\n    background-color: var(--neutral-purewhite);\n    border: 2px solid var(--primary-base);\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    cursor: pointer;\n\n    ::slotted(*) {\n      border-radius: 0px;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n    &.hasPadding {\n      padding: 20px;\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n      &:hover {\n        border: 2px solid var(--primary-lighter) !important;\n      }\n    }\n\n    &.hasShadow {\n      border: 2px solid var(--primary-base);\n\n      @include shadow-level3(--neutral-black-shadow);\n    }\n    &:not(.hasPadding).hasShadow {\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n    }\n\n    &.dark {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--neutral-purewhite);\n      &:hover {\n        border: 2px solid var(--primary-lighter);\n      }\n    }\n  }\n}\n\n.transparent {\n  background-color: transparent;\n  border: 0;\n  border-radius: 12px;\n  padding: 0px;\n  overflow: hidden;\n  ::slotted(*) {\n    border-radius: 12px;\n  }\n\n  &.hasPadding {\n    padding: 20px;\n\n    ::slotted(*) {\n      border-radius: 4px;\n    }\n  }\n\n  &.cardLink {\n    background-color: transparent;\n    border: 2px solid var(--primary-base);\n    overflow: hidden;\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    ::slotted(*) {\n      border-radius: 0px !important;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n\n    &.light {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--primary-base);\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n      &:hover {\n        border-color: var(--primary-lighter) !important;\n      }\n    }\n    &.dark {\n      background-color: transparent;\n\n      border: 2px solid var(--neutral-purewhite);\n\n      &:hover {\n        border: 0;\n      }\n    }\n    &.hasPadding {\n      padding: 20px;\n\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-card',\n  styleUrl: 'cura-card.scss',\n  shadow: true,\n})\nexport class CuraCard {\n  /**\n   * Determines whether the card should have padding.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasPadding: boolean = true;\n\n  /**\n   * Determines whether the card should have a shadow effect.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasShadow: boolean = false;\n\n  /**\n   * Sets the type of the card background.\n   * - 'solid': A solid background.\n   * - 'transparent': A transparent background.\n   * @type {'solid' | 'transparent'}\n   * @default 'solid'\n   */\n  @Prop({ mutable: true }) type: 'solid' | 'transparent' = 'solid';\n\n  /**\n   * Sets the color mode of the card.\n   * - 'light': Light mode for the card.\n   * - 'dark': Dark mode for the card.\n   * @type {'light' | 'dark'}\n   * @default 'light'\n   */\n  @Prop({ mutable: true }) colorMode: 'light' | 'dark' = 'light';\n\n  /**\n   * The URL that the card should link to (if set).\n   * If not set, the card acts as a normal card.\n   * @type {string | undefined}\n   */\n  @Prop({ mutable: true, reflect: true }) href?: string;\n\n  /**\n   * The target attribute for the link.\n   * Applicable only if `href` is set.\n   * @type {string}\n   * @default '_self'\n   */\n  @Prop({ reflect: true }) target: string = '_self';\n\n  @State() styles: any = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);\n    this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.type] = true;\n    classes[`cardLink`] = this.href;\n    classes[this.colorMode] = true;\n    classes[`hasPadding`] = this.hasPadding;\n    classes[`hasShadow`] = this.hasShadow;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host role={this.href ? 'link' : 'div'}>\n        {this.href ? (\n          <a class={this.getClasses()} target={this.target} style={this.styles} href={this.href}>\n            <slot></slot>\n          </a>\n        ) : (\n          <div class={this.getClasses()} style={this.styles}>\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/cura-checkbox.entry.js

@@ -1,140 +1,177 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-81f1a268.js';
-import { f as formsSizes } from './cura-forms.definitions-0f774253.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6c443d5.js';
+import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
 
-const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label-wrapper{-ms-flex-pack:end;justify-content:end}.position .message{text-align:right}.position .label{-ms-flex-order:1;order:1}.info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-base-neutral-medium);border-radius:4px;background:var(--neutral-lighter-neutral-purewhite);-ms-flex:1 0;flex:1 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:-ms-flexbox;display:flex;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--primary-darker-neutral-white);border-color:var(--primary-base-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--primary-base-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--primary-base-neutral-white);border-color:var(--primary-base-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--primary-base-neutral-base)}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--primary-base-neutral-dark)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
+const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
+const CuraCheckboxStyle0 = curaCheckboxCss;
 
 const CuraCheckbox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onchange = createEvent(this, "onchange", 7);
-    this.isDarkbackground = () => this.background === 'dark';
-    this.isDarkIconColor = () => this.iconColor === 'dark';
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onchange = createEvent(this, "onchange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.isDarkBackground = () => this.background === 'dark';
+        this.isDarkIconColor = () => this.iconColor === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.indeterminate = false;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
+        };
+        this.checked = false;
+        this.indeterminate = false;
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.label = undefined;
+        this.ontabindex = 0;
+        this.position = 'left';
+        this.value = undefined;
+        this.name = undefined;
+        this.size = 'medium';
+        this.background = 'light';
+        this.iconColor = 'dark';
+        this.color = 'accent';
+        this.styles = {};
+    }
+    sizeHandler() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
+    }
     /**
-     * Handles click event on the checkbox.
-     * Emits onchange event with value, checked, and indeterminate states.
+     * Watches changes in color and background properties to update styles.
      */
-    this.handleClick = () => {
-      if (this.disabled)
-        return;
-      this.indeterminate = false;
-      this.checked = !this.checked;
-      this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
-    };
-    this.checked = false;
-    this.indeterminate = false;
-    this.status = 'default';
-    this.disabled = false;
-    this.required = false;
-    this.label = undefined;
-    this.ontabindex = 0;
-    this.position = 'left';
-    this.value = undefined;
-    this.name = undefined;
-    this.size = 'medium';
-    this.background = 'light';
-    this.iconColor = 'dark';
-    this.color = 'accent';
-    this.styles = {};
-  }
-  sizeHandler() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
-  }
-  /**
-   * Watches changes in color and background properties to update styles.
-   */
-  setColors() {
-    const colors = [
-      { name: '--color-base', background: `${this.color}-base` },
-      { name: '--color-lighter', background: `${this.color}-lighter` },
-      { name: '--color-light', background: `${this.color}-light` },
-      { name: '--color-dark', background: `${this.color}-dark` },
-      { name: '--info-base', background: 'info-base' },
-      { name: '--error-base', background: 'error-base' },
-      { name: '--success-lighter', background: 'success-lighter' },
-      { name: '--success-base', background: 'success-base' },
-      { name: '--success-dark', background: 'success-dark' },
-      { name: '--error-lighter', background: 'error-lighter' },
-      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },
-      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
-      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
-      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },
-      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },
-      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
-      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
-    ];
-    colors.forEach(color => {
-      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
-    });
-    this.styles = Object.assign({}, this.styles);
-  }
-  connectedCallback() {
-    this.sizeHandler();
-    this.setColors();
-  }
-  /**
-   * Retrieves classes based on component state for conditional styling.
-   */
-  getClasses() {
-    const classes = {};
-    classes['container'] = true;
-    classes['checked'] = this.checked;
-    classes['disabled'] = this.disabled;
-    classes['indeterminate'] = this.indeterminate;
-    classes['position'] = this.position === 'right';
-    classes[this.status] = true;
-    return classes;
-  }
-  /**
- * Assigns color based on status and background theme.
- * @param defaultColor Default color.
- */
-  assignColor(type) {
-    if (this.disabled)
-      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
-    const statusColors = {
-      success: {
-        icon: 'success-dark',
-        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
-        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
-      },
-      error: {
-        icon: 'error-dark',
-        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
-        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
-      },
-      default: {
-        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',
-        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
-        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
-      }
-    };
-    return statusColors[this.status][type];
-  }
-  /**
-   * Retrieves icon element based on checkbox state.
-   */
-  getIcon() {
-    const iconName = this.indeterminate ? 'minus' : "check";
-    const iconColor = this.assignColor('icon');
-    const iconSize = this.size === 'large' ? 20 : "micro";
-    return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("div", { class: "checkbox", onClick: this.handleClick, tabIndex: this.ontabindex }, h("input", { type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "size": ["sizeHandler"],
-    "color": ["setColors"],
-    "background": ["setColors", "assignColor"],
-    "iconColor": ["assignColor"]
-  }; }
+    setColors() {
+        const colors = [
+            { name: '--color-base', background: `${this.color}-base` },
+            { name: '--color-lighter', background: `${this.color}-lighter` },
+            { name: '--color-light', background: `${this.color}-light` },
+            { name: '--color-dark', background: `${this.color}-dark` },
+            { name: '--info-base', background: 'info-base' },
+            { name: '--error-base', background: 'error-base' },
+            { name: '--success-lighter', background: 'success-lighter' },
+            { name: '--success-base', background: 'success-base' },
+            { name: '--success-dark', background: 'success-dark' },
+            { name: '--error-lighter', background: 'error-lighter' },
+            { name: '--neutral-black', background: 'neutral-black' },
+            { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },
+            { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },
+            { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },
+            { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },
+            { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },
+            { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },
+            { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },
+            { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },
+            { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },
+            { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },
+            { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },
+            { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    connectedCallback() {
+        this.sizeHandler();
+        this.setColors();
+    }
+    /**
+     * Callback for form association.
+     */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+     * Callback to restore the switch state from the form.
+     */
+    formStateRestoreCallback(state) {
+        this.value = state.value;
+        this.checked = state.checked;
+        this.indeterminate = state.indeterminate;
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Callback to reset the switch state when the form is reset.
+     */
+    formResetCallback() {
+        this.value = '';
+        this.checked = false;
+        this.indeterminate = false;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Callback to update the switch's disabled state when the form's disabled state changes.
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    getClasses() {
+        const classes = {};
+        classes['container'] = true;
+        classes['checked'] = this.checked;
+        classes['disabled'] = this.disabled;
+        classes[this.background] = true;
+        classes['indeterminate'] = this.indeterminate;
+        classes['position'] = this.position === 'right';
+        classes[this.status] = true;
+        return classes;
+    }
+    /**
+     * Assigns color based on status and background theme.
+     * @param defaultColor Default color.
+     */
+    assignColor(type) {
+        if (this.disabled)
+            return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';
+        const statusColors = {
+            success: {
+                icon: 'success-dark',
+                label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',
+                message: this.isDarkBackground() ? 'success-base' : 'success-dark',
+            },
+            error: {
+                icon: 'error-dark',
+                label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',
+                message: this.isDarkBackground() ? 'error-base' : 'error-dark',
+            },
+            default: {
+                icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',
+                label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',
+                message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',
+            },
+        };
+        return statusColors[this.status][type];
+    }
+    /**
+     * Retrieves icon element based on checkbox state.
+     */
+    getIcon() {
+        const iconName = this.indeterminate ? 'minus' : 'check';
+        const iconColor = this.assignColor('icon');
+        const iconSize = this.size === 'large' ? 20 : 'micro';
+        return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
+    }
+    render() {
+        return (h(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, h("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, h("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, h("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), h("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "size": ["sizeHandler"],
+        "color": ["setColors"],
+        "background": ["setColors", "assignColor"],
+        "iconColor": ["assignColor"]
+    }; }
 };
-CuraCheckbox.style = curaCheckboxCss;
+CuraCheckbox.style = CuraCheckboxStyle0;
 
 export { CuraCheckbox as cura_checkbox };
 

package/dist/esm/cura-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"cura-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","./src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n/* Control e Checkbox */\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n.checkbox {\n  appearance: none;\n  border: 2px solid var(--primary-base-neutral-medium);\n  border-radius: 4px;\n  background: var(--neutral-lighter-neutral-purewhite);\n  flex: 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n}\n\n.icon {\n  position: absolute;\n  display: flex;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n  border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n  background: var(--primary-darker-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n  cursor: not-allowed;\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n  }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-base-neutral-base);\n\n  &:hover {\n    border-color: var(--primary-base-neutral-base) !important;\n    background: var(--primary-base-neutral-white);\n\n  }\n}\n\n.disabled .checkbox:focus {\n  border-color: var(--primary-base-neutral-base);\n}\n\n/* Estado Checked */\n.checked .checkbox,\n.indeterminate .checkbox {\n  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-light) !important;\n    background: var(--color-lighter);\n  }\n}\n\n.checked .icon,\n.indeterminate .icon {\n  opacity: 1;\n}\n\n/* Hover para não disabled, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n/* Estado Success */\n.success .checkbox {\n  border-color: var(--success-base)  ;\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base)  !important;\n  }\n}\n\n.success.checked .checkbox {\n  border-color: var(--success-dark-base);\n  background: var(--success-base-lighter);\n\n  &:hover {\n    border-color: var(--success-dark-base);\n  }\n}\n\n/* Estado Error */\n.error .checkbox {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover {\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .checkbox {\n  border-color: var(--error-dark-base);\n  background: var(--error-base-lighter);\n\n  &:hover {\n    border-color: var(--error-dark-base);\n  }\n}\n\n/* Input */\ninput {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n})\n\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n  * Status of the checkbox.\n  * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n  * Reflects the required state of the checkbox.\n  */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * iconColor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean, indeterminate: boolean }>;\n\n  isDarkbackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  /**\n   * Watches changes in color and background properties to update styles.\n   */\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--info-base', background: 'info-base' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--success-dark', background: 'success-dark' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },\n      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },\n      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },\n      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  /**\n   * Handles click event on the checkbox.\n   * Emits onchange event with value, checked, and indeterminate states.\n   */\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n  };\n\n  /**\n   * Retrieves classes based on component state for conditional styling.\n   */\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['indeterminate'] = this.indeterminate;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  /**\n * Assigns color based on status and background theme.\n * @param defaultColor Default color.\n */\n\n  @Watch('background')\n  @Watch('iconColor')\n  assignColor(type: 'icon' | 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        icon: 'success-dark',\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        icon: 'error-dark',\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  /**\n   * Retrieves icon element based on checkbox state.\n   */\n  getIcon() {\n    const iconName = this.indeterminate ? 'minus' : \"check\"\n    const iconColor = this.assignColor('icon');\n    const iconSize = this.size === 'large' ? 20 : \"micro\"\n\n    return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <div class={\"checkbox\"} onClick={this.handleClick} tabIndex={this.ontabindex}>\n            <input\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              required={this.required}\n              checked={this.checked}\n              indeterminate={this.indeterminate}\n            />\n            {this.getIcon()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n}\n\n.position {\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order: 1;\n  }\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n/* Control e Checkbox */\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n.checkbox {\n  appearance: none;\n  border: 2px solid var(--neutral-base-neutral-medium);\n  border-radius: 4px;\n  background: var(--neutral-black-neutral-purewhite);\n  flex: 1 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n}\n\n.icon {\n  position: absolute;\n  display: flex;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n/* Estados de Foco */\n.checkbox:focus {\n  border-color: var(--info-base) !important;\n}\n\n/* Estado Disabled */\n.disabled .checkbox {\n  background: var(--neutral-black-neutral-white);\n  border-color: var(--neutral-darker-neutral-base);\n  cursor: not-allowed;\n\n  &:hover {\n    border-color: var(--neutral-darker-neutral-base) !important;\n  }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n  background: var(--neutral-black-neutral-white);\n  border-color: var(--neutral-darker-neutral-base);\n\n  &:hover {\n    border-color: var(--neutral-base-neutral-white);\n    background: var(--primary-base-neutral-white);\n  }\n}\n\n.disabled .checkbox:focus {\n  border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/* Estado Checked */\n.checked .checkbox,\n.indeterminate .checkbox {\n  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-light) !important;\n    background: var(--color-lighter);\n  }\n}\n\n.checked .icon,\n.indeterminate .icon {\n  opacity: 1;\n}\n\n/* Hover para não disabled, default, checked, indeterminate */\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n  border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/* Estado Success */\n\n.success.dark .checkbox {\n  background: var(--neutral-black) ;\n}\n\n.success .checkbox {\n  border-color: var(--success-base);\n  background: var(--success-lighter);\n\n  &:hover {\n    border-color: var(--success-base) !important;\n  }\n}\n\n.success.checked .checkbox {\n  border-color: var(--success-dark-base);\n  background: var(--success-base-lighter);\n\n  &:hover {\n    border-color: var(--success-dark-base);\n  }\n}\n\n/* Estado Error */\n\n.error.dark .checkbox {\n  background: var(--neutral-black) ;\n}\n\n.error .checkbox {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover {\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .checkbox {\n  border-color: var(--error-dark-base);\n  background: var(--error-base-lighter);\n\n  &:hover {\n    border-color: var(--error-dark-base);\n  }\n}\n\n/* Input */\ninput {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-checkbox',\n  styleUrl: 'cura-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraCheckbox {\n  /**\n   * Reflects the checked state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Reflects the indeterminate state of the checkbox.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /**\n   * Status of the checkbox.\n   * Can be 'error', 'success', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Reflects the required state of the checkbox.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the checkbox.\n   */\n  @Prop({ reflect: true }) label: string;\n  /**\n   * Specifies the tabindex of the checkbox.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the checkbox.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the checkbox.\n   */\n  @Prop({ reflect: true }) value: string;\n  /**\n   * Name attribute of the checkbox.\n   */\n  @Prop({ reflect: true }) name: string;\n  /**\n   * Size of the checkbox.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * iconColor theme of the checkbox.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() iconColor: 'dark' | 'light' = 'dark';\n  /**\n   * Color theme of the checkbox.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  isDarkBackground = () => this.background === 'dark';\n\n  isDarkIconColor = () => this.iconColor === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  /**\n   * Watches changes in color and background properties to update styles.\n   */\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-lighter', background: `${this.color}-lighter` },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--info-base', background: 'info-base' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--success-dark', background: 'success-dark' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--neutral-black', background: 'neutral-black' },\n      { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n      { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n      { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n      { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n      { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n      { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n      { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n      { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n  }\n\n  connectedCallback() {\n    this.sizeHandler();\n    this.setColors();\n  }\n\n  /**\n   * Callback for form association.\n   */\n  formAssociatedCallback(form: { ariaLabel: string }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n   * Callback to restore the switch state from the form.\n   */\n  formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n    this.value = state.value;\n    this.checked = state.checked;\n    this.indeterminate = state.indeterminate;\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.value = '';\n    this.checked = false;\n    this.indeterminate = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n   * Callback to update the switch's disabled state when the form's disabled state changes.\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes[this.background] = true;\n    classes['indeterminate'] = this.indeterminate;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  /**\n   * Assigns color based on status and background theme.\n   * @param defaultColor Default color.\n   */\n  @Watch('background')\n  @Watch('iconColor')\n  assignColor(type: 'icon' | 'label' | 'message') {\n    if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n    const statusColors = {\n      success: {\n        icon: 'success-dark',\n        label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n      },\n      error: {\n        icon: 'error-dark',\n        label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n      },\n      default: {\n        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n        label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n      },\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  /**\n   * Retrieves icon element based on checkbox state.\n   */\n  getIcon() {\n    const iconName = this.indeterminate ? 'minus' : 'check';\n    const iconColor = this.assignColor('icon');\n    const iconSize = this.size === 'large' ? 20 : 'micro';\n\n    return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label class=\"label\" weight='bold' size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <div class={'checkbox'} tabIndex={this.ontabindex}>\n            <input\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              required={this.required}\n              checked={this.checked}\n              indeterminate={this.indeterminate}\n            />\n            {this.getIcon()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}