@rededor/cura 0.5.1 → 0.5.3

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 
-const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 1366px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
+const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
 
 const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordionItem extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6zGAA6zG;;MCO70GA,mBAAiB;;;;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;GAClD;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;GAChB;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,2zGAA2zG;;MCO30GA,mBAAiB;;;;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;GAClD;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;GAChB;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraAlert extends Components.CuraAlert, HTMLElement {}
+export const CuraAlert: {
+  prototype: CuraAlert;
+  new (): CuraAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-alert.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './cura-icon2.js';
+import { d as defineCustomElement$3 } from './cura-label2.js';
+import { d as defineCustomElement$2 } from './cura-paragraph2.js';
+
+const curaAlertCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}:host .conteiner{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;padding:12px;gap:12px;-ms-flex-negative:0;flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{-webkit-box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16);box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .icon-left{margin-right:5px}:host .icon-right{margin-left:auto;cursor:pointer}:host .text{margin-top:3px}:host .actions{margin-top:5px}";
+
+const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.handleClose = () => {
+      this.close.emit();
+      this.host.remove();
+    };
+    this.type = 'info';
+    this.floating = false;
+    this.label = undefined;
+    this.closeable = true;
+    this.styles = {};
+  }
+  setColors() {
+    const colors = [
+      { name: '--color-lighter', theme: `${this.type}-lighter` },
+      { name: '--neutral-black', theme: 'neutral-black' },
+      { name: '--color-light', theme: `${this.type}-light` },
+      { name: '--color-base', theme: `${this.type}-base` },
+    ];
+    colors.forEach(color => {
+      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
+    });
+    this.styles = Object.assign({}, this.styles);
+  }
+  connectedCallback() {
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes['conteiner'] = true;
+    classes['floating'] = this.floating;
+    return classes;
+  }
+  getNameIcon() {
+    const iconMapping = {
+      info: 'infoCircle',
+      success: 'checkCircle',
+      warning: 'alertCircle',
+      error: 'alertTriangle',
+    };
+    return iconMapping[this.type];
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("cura-icon", { name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { class: "content" }, h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), this.closeable ?
+      (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
+      : '')));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "type": ["setColors"]
+  }; }
+  static get style() { return curaAlertCss; }
+}, [1, "cura-alert", {
+    "type": [1],
+    "floating": [516],
+    "label": [513],
+    "closeable": [516],
+    "styles": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-alert", "cura-icon", "cura-label", "cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraAlert$1);
+      }
+      break;
+    case "cura-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "cura-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CuraAlert = CuraAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraAlert, defineCustomElement };
+
+//# sourceMappingURL=cura-alert.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-alert.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,slBAAslB;;MCM9lBA,WAAS;;;;;;IAgDpB,gBAAW,GAAG;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;KACpB,CAAC;gBAhDuD,MAAM;oBAC3B,KAAK;;qBAEN,IAAI;kBAE9B,EAAE;;EAKX,SAAS;IACP,MAAM,MAAM,GAAG;MACb,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,EAAE;MAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;MACnD,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE;MACtD,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAAE;KACrD,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,KAAK;MAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC7E,CAAC,CAAC;IACH,IAAI,CAAC,MAAM,qBAAO,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,OAAO,CAAC;GAChB;EAED,WAAW;IACT,MAAM,WAAW,GAAG;MAClB,IAAI,EAAE,YAAY;MAClB,OAAO,EAAE,aAAa;MACtB,OAAO,EAAE,aAAa;MACtB,KAAK,EAAE,eAAe;KACvB,CAAC;IACF,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC/B;EAOD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,GAAc,EACzG,WAAK,KAAK,EAAC,SAAS,IAClB,kBAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,EAAC,MAAM,EAAC,MAAM,IACxE,IAAI,CAAC,KAAK,CACA,EACb,sBAAgB,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,SAAS,IAC3G,eAAa,CACE,EACjB,WAAK,KAAK,EAAC,SAAS,IAClB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,EACJ,IAAI,CAAC,SAAS;OACf,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAc;QAC9G,EAAE,CACA,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAlert"],"sources":["./src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","./src/components/cura-alert/cura-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    padding: 12px;\n    gap: 12px;\n    flex-shrink: 0;\n    border: 1px solid var(--color-base);\n    border-radius: 4px;\n    background-color: var(--color-lighter);\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n\n  .icon-left {\n    margin-right: 5px;\n  }\n\n  .icon-right {\n    margin-left: auto;\n    cursor: pointer;\n  }\n\n  .text {\n    margin-top: 3px;\n  }\n\n  .actions {\n    margin-top: 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({reflect: true}) closeable = true;\n  @State()\n  styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-button-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraButtonSelect extends Components.CuraButtonSelect, HTMLElement {}
+export const CuraButtonSelect: {
+  prototype: CuraButtonSelect;
+  new (): CuraButtonSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-icon2.js';
+
+const curaButtonSelectCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--neutral-purewhite);border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-base);box-shadow:inset 0px 0px 0px 2px var(--primary-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base)}:host button:not(.disabled):hover .label,:host a:not(.disabled):hover .label{color:var(--neutral-purewhite-black)}:host button:focus,:host a:focus{-webkit-box-shadow:inset 0px 0px 0px 2px var(--info-base) !important;box-shadow:inset 0px 0px 0px 2px var(--info-base) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--primary-base)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;gap:5px}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-base);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-darker);box-shadow:inset 0px 0px 0px 2px var(--color-darker)}:host button.selected .label,:host a.selected .label{color:var(--neutral-purewhite-black)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base)}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-medium-primary-base)}";
+
+const CuraButtonOutline = /*@__PURE__*/ proxyCustomElement(class CuraButtonOutline extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onclick = createEvent(this, "onclick", 7);
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.disabled = false;
+    this.selected = false;
+    this.iconPosition = 'right';
+    this.color = 'accent';
+    this.background = 'light';
+    this.fontcolor = 'dark';
+    this.hovered = false;
+    this.styles = {};
+  }
+  setColors() {
+    const colors = [
+      { name: '--color-base', theme: `${this.color}-base` },
+      { name: '--color-darker', theme: `${this.color}-darker` },
+      { name: '--color-lighter', theme: `${this.color}-lighter` },
+      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },
+      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },
+      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },
+    ];
+    colors.forEach(color => {
+      this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) });
+    });
+  }
+  setStyles() {
+    this.weights = this.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+    this.styles['--font-size'] = this.theme.fonts.getSize();
+    this.styles['--font-family'] = this.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--neutral-purewhite'] = this.theme.colors.getColor("neutral-purewhite");
+    this.styles['--neutral-black'] = this.theme.colors.getColor("neutral-black");
+    this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
+    this.styles['--info-base'] = this.theme.colors.getColor("info-base");
+  }
+  connectedCallback() {
+    this.setStyles();
+    this.setColors();
+  }
+  handleMouseEnter() {
+    if (this.disabled)
+      return;
+    this.hovered = true;
+  }
+  handleMouseLeave() {
+    this.hovered = false;
+  }
+  getIcon() {
+    if (!this.selected)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
+    const fontcolor = this.disabled
+      ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
+      : this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
+    return h("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: fontcolor });
+  }
+  handleClick(e) {
+    if (this.disabled)
+      e.preventDefault();
+    this.selected = !this.selected;
+    this.onclick.emit({ selected: this.selected });
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes['disabled'] = this.disabled;
+    classes['selected'] = this.selected;
+    return classes;
+  }
+  render() {
+    return (h(Host, null, h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: "button-container" }, this.getIcon(), h("span", { class: "label" }, h("slot", null))))));
+  }
+  static get watchers() { return {
+    "background": ["setColors", "getIcon"],
+    "color": ["setColors"],
+    "fontcolor": ["setColors", "getIcon"]
+  }; }
+  static get style() { return curaButtonSelectCss; }
+}, [1, "cura-button-select", {
+    "size": [513],
+    "disabled": [516],
+    "selected": [516],
+    "iconPosition": [513, "icon-position"],
+    "color": [1],
+    "background": [1],
+    "fontcolor": [1],
+    "hovered": [32],
+    "styles": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-button-select", "cura-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-button-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraButtonOutline);
+      }
+      break;
+    case "cura-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CuraButtonSelect = CuraButtonOutline;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraButtonSelect, defineCustomElement };
+
+//# sourceMappingURL=cura-button-select.js.map

package/dist/components/cura-button-select.js.map

@@ -0,0 +1 @@
+{"file":"cura-button-select.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,y1GAAy1G;;MCQx2G,iBAAiB;;;;;;IAuC5B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;gBAnCkC,QAAQ;oBAIlC,KAAK;oBAIL,KAAK;wBAIiB,OAAO;iBAIjD,QAAQ;sBAIe,OAAO;qBAKR,MAAM;mBAIzB,KAAK;kBAEN,EAAE;;EAWpB,SAAS;IACP,MAAM,MAAM,GAAG;MACb,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;MACrD,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,SAAS,EAAE;MACzD,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,UAAU,EAAE;MAC3D,EAAE,IAAI,EAAE,2BAA2B,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,mBAAmB,GAAG,eAAe,EAAE;MAChH,EAAE,IAAI,EAAE,gCAAgC,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO,GAAG,eAAe,GAAG,gBAAgB,EAAE;MACnH,EAAE,IAAI,EAAE,+BAA+B,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO,GAAG,gBAAgB,GAAG,cAAc,EAAE;KAClH,CAAC;IAEF,MAAM,CAAC,OAAO,CAAC,KAAK;MAClB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,GACtD,CAAC;KACH,CAAC,CAAC;GACJ;EAED,SAAS;IACP,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;IAChE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACxD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5D,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC1D,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IACrF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC7E,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3E,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACtE;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAA;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAED,gBAAgB;IACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAID,OAAO;IACL,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,OAAO,EAAE,CAAC;IAE9B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAC/E,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,aAAa,CAAC;IAC9D,MAAM,SAAS,GACb,IAAI,CAAC,QAAQ;SACR,IAAI,CAAC,UAAU,KAAK,OAAO,GAAG,gBAAgB,GAAG,cAAc;QAChE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,eAAe,GAAG,mBAAmB,CAAC;IAEzF,OAAO,iBAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAc,CAAC;GACtG;EAGD,WAAW,CAAC,CAAQ;IAClB,IAAI,IAAI,CAAC,QAAQ;MAAE,CAAC,CAAC,cAAc,EAAE,CAAC;IACtC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;GAChD;EAGD,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7C,OAAO,CAAC,QAAQ,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1D,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IACpC,OAAO,OAAO,CAAC;GAChB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cAAQ,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAC9B,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACnC,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAC3C,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAC3C,WAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,OAAO,EAAE,EACf,YAAM,KAAK,EAAC,OAAO,IAAC,eAAa,CAAO,CACpC,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","./src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-lighter);\n        box-shadow: inset 0px 0px 0px 2px var(--color-base);\n        .label {\n          color: var(--neutral-purewhite-black);\n        }\n      }\n\n      &:focus {\n        box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label() {\n      color: var(--primary-base);\n    }\n\n    // Children Elements\n    @include button-container() {\n      gap: 5px;\n    }\n\n    @mixin button-icon() {\n      margin: 0;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-base);\n      box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n      .label {\n        color: var(--neutral-purewhite-black);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n      .label {\n        color: var(--neutral-medium-primary-base);\n      }\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  getIcon() {\n    if (!this.selected) return '';\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <span class=\"label\"><slot></slot></span>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraCheckbox extends Components.CuraCheckbox, HTMLElement {}
+export const CuraCheckbox: {
+  prototype: CuraCheckbox;
+  new (): CuraCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-checkbox.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formsSizes } from './cura-forms.definitions.js';
+import { d as defineCustomElement$4 } from './cura-icon2.js';
+import { d as defineCustomElement$3 } from './cura-label2.js';
+import { d as defineCustomElement$2 } from './cura-paragraph2.js';
+
+const 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 CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onchange = createEvent(this, "onchange", 7);
+    this.isDarkbackground = () => this.background === 'dark';
+    this.isDarkIconColor = () => this.iconColor === 'dark';
+    /**
+     * Handles click event on the checkbox.
+     * Emits onchange event with value, checked, and indeterminate states.
+     */
+    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['--size'] = `${formsSizes[this.size].size}px`;
+    this.styles['--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 this; }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["setColors"],
+    "background": ["setColors", "assignColor"],
+    "iconColor": ["assignColor"]
+  }; }
+  static get style() { return curaCheckboxCss; }
+}, [1, "cura-checkbox", {
+    "checked": [1540],
+    "indeterminate": [1540],
+    "status": [1537],
+    "disabled": [516],
+    "required": [516],
+    "label": [513],
+    "ontabindex": [514],
+    "position": [513],
+    "value": [513],
+    "name": [513],
+    "size": [513],
+    "background": [1],
+    "iconColor": [1, "icon-color"],
+    "color": [1],
+    "styles": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-checkbox", "cura-icon", "cura-label", "cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraCheckbox$1);
+      }
+      break;
+    case "cura-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "cura-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CuraCheckbox = CuraCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraCheckbox, defineCustomElement };
+
+//# sourceMappingURL=cura-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-checkbox.js","mappings":"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","names":["CuraCheckbox"],"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  @Watch('size')\n  sizeHandler() {\n    this.styles['--size'] = `${formsSizes[this.size].size}px`\n    this.styles['--gap'] = `${formsSizes[this.size].gap}px`\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 => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));\n    this.styles = { ...this.styles };\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}