@rededor/cura 1.6.1-alpha.8 → 1.6.1-alpha.9

package/dist/collection/components/forms/cura-radio/cura-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAQvD,MAAM,OAAO,SAAS;;QAqEpB,UAAK,GAAG;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACpB,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;SACpB,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;QAgFpD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;uBA5JyD,KAAK;sBAKkB,SAAS;wBAI9C,KAAK;wBAIL,KAAK;qBAIT,EAAE;;wBASW,MAAM;qBAInB,EAAE;oBAIH,EAAE;0BAKH,OAAO;oBAKD,QAAQ;qBAIrC,QAAQ;4BAM4C,MAAM;sBAExD,EAAE;;IAiBpB,WAAW;QACT,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EACjD,QAAQ,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAC3C,OAAO,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAC1C,CAAC;IACJ,CAAC;IAID,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;YAChD,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE;YAC5D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,EAAE;YAChE,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE;YAC5D,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE;YACtD,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE;YACxD,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE;YAClD,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,8BAA8B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE;YAChH,EAAE,IAAI,EAAE,gCAAgC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,EAAE;YACpH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EAAE;YAClH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YAC9G,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YAC9G,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YACtG,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE;SACjG,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnF,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,sBAAsB,CAAC,IAA2B;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,wBAAwB,CAAC,KAA0C;QACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAUD,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;QAChD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;QAE5B,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,WAAW,CAAC,IAAyB;QACnC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAExF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB;gBACrE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;aACnE;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;gBACnE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;aAC/D;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;gBAClE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc;aACtE;SACF,CAAC;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,kBAAe,IAAI,CAAC,OAAO,mBAAiB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,QAAQ,kBAAgB,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9I,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;gBAC1E,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC/E,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;wBACxF,mEAAY,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAC3I,IAAI,CAAC,KAAK,CACA;wBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,uEAAgB,UAAU,EAAC,IAAI,EAAC,WAAW,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY;;4BAC9D,GAAG,CACU,CAClB,CACG;oBACN,mEAAY,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS;wBAC5G,8DAAa,CACF,CACT;gBACN,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\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 radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Reflects the required state of the radio button.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({ reflect: true }) textOverflow: 'none' | 'single' | string = 'none';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string; checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    large: { size: 20 },\n    medium: { size: 14 },\n    small: { size: 10 },\n  };\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\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-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\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   * 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 }) {\n    this.value = state.value;\n    this.checked = state.checked;\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.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  connectedCallback() {\n    this.sizeHandler();\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message') {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark',\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark',\n      },\n      default: {\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  render() {\n    return (\n      <Host role=\"radio\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class={`info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n            <div class={`label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n              <cura-label textOverflow={this.textOverflow} class=\"label\" size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && (\n                <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n                  *{' '}\n                </cura-paragraph>\n              )}\n            </div>\n            <cura-label textOverflow={this.textOverflow} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-radio.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-radio/cura-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAQvD,MAAM,OAAO,SAAS;;QAmFpB,UAAK,GAAG;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACpB,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;SACpB,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;QAgFpD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;uBA1KyD,KAAK;sBAKkB,SAAS;wBAI9C,KAAK;wBAIL,KAAK;qBAIT,EAAE;;wBASW,MAAM;qBAInB,EAAE;oBAIH,EAAE;0BAKH,OAAO;oBAKD,QAAQ;qBAIrC,QAAQ;6BAU6C,MAAM;8BAUL,MAAM;sBAE1D,EAAE;;IAiBpB,WAAW;QACT,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EACjD,QAAQ,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,EAC3C,OAAO,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAC1C,CAAC;IACJ,CAAC;IAID,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE;YAChD,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,QAAQ,EAAE;YAC5D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,OAAO,EAAE;YAC1D,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,mBAAmB,EAAE;YAChE,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE;YAC5D,EAAE,IAAI,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,EAAE;YACtD,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE;YACxD,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE;YAClD,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,8BAA8B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE;YAChH,EAAE,IAAI,EAAE,gCAAgC,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,EAAE;YACpH,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,EAAE;YAClH,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YAC9G,EAAE,IAAI,EAAE,6BAA6B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YAC9G,EAAE,IAAI,EAAE,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,EAAE;YAClH,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE;YACtG,EAAE,IAAI,EAAE,mBAAmB,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE;SACjG,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnF,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,sBAAsB,CAAC,IAA2B;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,wBAAwB,CAAC,KAA0C;QACjE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED;;OAEG;IACH,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAUD,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC;QAChD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;QAE5B,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,WAAW,CAAC,IAAyB;QACnC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAExF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB;gBACrE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;aACnE;YACD,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB;gBACnE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;aAC/D;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;gBAClE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,cAAc;aACtE;SACF,CAAC;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,kBAAe,IAAI,CAAC,OAAO,mBAAiB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,QAAQ,kBAAgB,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9I,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;gBAC1E,4DAAK,KAAK,EAAC,MAAM;oBACf,4DAAK,KAAK,EAAC,eAAe;wBACxB,mEACE,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,KAAK,EAAE,QAAQ,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9E,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACjD,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAE/B,IAAI,CAAC,KAAK,CACA;wBACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,uEAAgB,UAAU,EAAC,IAAI,EAAC,WAAW,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY;;4BAC9D,GAAG,CACU,CAClB,CACG;oBACN,mEAAY,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS;wBAC9G,8DAAa,CACF,CACT;gBACN,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\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 radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Reflects the required state of the radio button.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Controls how the label text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n  /**\n   * Controls how the helper text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\n\n  @State() styles = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string; checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    large: { size: 20 },\n    medium: { size: 14 },\n    small: { size: 10 },\n  };\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\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-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\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   * 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 }) {\n    this.value = state.value;\n    this.checked = state.checked;\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.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  connectedCallback() {\n    this.sizeHandler();\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message') {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark',\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark',\n      },\n      default: {\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  render() {\n    return (\n      <Host role=\"radio\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                textOverflow={this.overflowLabel}\n                class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}\n              >\n                {this.label}\n              </cura-label>\n              {this.required && (\n                <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n                  *{' '}\n                </cura-paragraph>\n              )}\n            </div>\n            <cura-label textOverflow={this.overflowHelper} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-switch/cura-switch.css

@@ -66,11 +66,8 @@
   flex-direction: row;
 }
 
-.info.textoverflow-single {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.info {
   overflow: hidden;
-  display: block;
 }
 
 .label,

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

@@ -23,7 +23,8 @@ export class CuraSwitch {
         this.size = 'medium';
         this.background = 'light';
         this.color = 'accent';
-        this.textOverflow = 'none';
+        this.overflowLabel = 'none';
+        this.overflowHelper = 'none';
         this.styles = {};
     }
     sizeHandler() {
@@ -90,11 +91,10 @@ export class CuraSwitch {
         classes['checked'] = this.checked;
         classes['disabled'] = this.disabled;
         classes['position'] = this.position === 'right';
-        classes['textoverflow-single'] = this.textOverflow === 'single';
         return classes;
     }
     render() {
-        return (h(Host, { key: '774e59c0c00a11d231e30d032d7872d99eb3b8d1', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: 'e2bd25d79535f61b586fbf8a43915b5fccc308a2', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: 'e68b9fac16600090db42037c507c2af81c1be0f3', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: '70a99aa8a108b00d46bb0354785b601e393d6cc1', textOverflow: this.textOverflow, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '09b1ae5f5a3b4062b473dec49bd68583d24ce2c0', textOverflow: this.textOverflow, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '380a487d0387fc5934413f558e5f6f2558cb19de' }))), h("div", { key: '3a1ebdc9faf0c34e5b2e1b1e55b1a57161e14cb5', class: "control" }, h("div", { key: 'bd027689060ae72fce3e77ef739822ccb4f16b49', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '918744f9117e5f7ddcc0e9c9cdbf7735b396dc87', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '39e910a3c68672eb23a123529a77f8ee0d1093aa', role: "switch", "aria-checked": this.checked, "aria-disabled": this.disabled }, h("div", { key: '649b89d2709b8afa30cfc1ba549d45ac3c9c04a1', class: this.getClasses(), style: this.styles, onClick: this.toggleSwitch }, h("div", { key: '4b1c7d704f0db997a4738abbd248c3a0bbcfdfcd', class: "info" }, h("cura-label", { key: 'b225b06ed00144348d08bb95c8a5bf2f1f48e610', textOverflow: this.overflowLabel, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '22f5e79e0b2e98867663a9a60436d11bc2ce236e', textOverflow: this.overflowHelper, style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'd9ed12c05133baeec10aa149f26d6dc01b2e3cd8' }))), h("div", { key: 'd51364956de2b53735285109dd457cbff9500eb7', class: "control" }, h("div", { key: '5f1ce68eba5430eac69d670a72c4abd48a79a90d', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '5077af32559bc7eb183745544844d01a6078ee1d', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +255,7 @@ export class CuraSwitch {
                 "reflect": false,
                 "defaultValue": "'accent'"
             },
-            "textOverflow": {
+            "overflowLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -266,10 +266,34 @@ export class CuraSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Apply text-overflow ellipsis definitions.\nDefault to none"
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "Controls how the label text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
+                },
+                "attribute": "overflow-label",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "overflowHelper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'single' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "Controls how the helper text should handle overflow.\n- `'none'`: No overflow handling; the label displays normally.\n- `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n- `string`: Custom overflow handling mode."
                 },
-                "attribute": "text-overflow",
+                "attribute": "overflow-helper",
                 "reflect": true,
                 "defaultValue": "'none'"
             }

package/dist/collection/components/forms/cura-switch/cura-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-switch',\n  styleUrl: 'cura-switch.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSwitch {\n  /**\n   * Indicates whether the switch is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Indicates whether the switch is disabled or not.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * The label text to display next to the switch.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Tab index for the switch element.\n   * Reflects as an HTML attribute.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the switch.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Size of the switch.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background style of the switch.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Accent color of the switch.\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({ reflect: true }) textOverflow: 'none' | 'single' | string = 'none';\n\n  @State() styles = {};\n\n  @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    large: { size: 64 },\n    medium: { size: 48 },\n    small: { size: 40 },\n  };\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-track': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--neutral-medium', background: 'neutral-medium' },\n      { name: '--neutral-pale', background: 'neutral-pale' },\n      { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n      { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n      { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n      { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n      { name: '--color-base-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\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 }) {\n    this.checked = state.value === 'true';\n    this.internals.setFormValue(this.checked.toString());\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.checked = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.checked.toString());\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  toggleSwitch = () => {\n    if (this.disabled) return null;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.checked.toString());\n    this.onchange.emit({ checked: this.checked });\n  };\n\n  assignColor(colorDark: string, colorLight: string) {\n    if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n    return this.isDarkbackground() ? colorDark : colorLight;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes['textoverflow-single'] = this.textOverflow === 'single';\n\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n          <div class={`info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n            <cura-label\n              textOverflow={this.textOverflow}\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              class=\"label\"\n              weight=\"bold\"\n              size={this.size === 'large' ? 'medium' : 'xsmall'}\n              lineHeight=\"125%\"\n              color={this.assignColor('neutral-white', 'neutral-black')}\n            >\n              {this.label}\n            </cura-label>\n            <cura-label\n              textOverflow={this.textOverflow}\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              color={this.assignColor('primary-lighter', 'neutral-dark')}\n              size=\"xsmall\"\n              class=\"message\"\n            >\n              <slot></slot>\n            </cura-label>\n          </div>\n\n          <div class=\"control\">\n            <div class={`track ${this.size.toLowerCase()}`}>\n              <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-switch.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-switch/cura-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-switch',\n  styleUrl: 'cura-switch.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSwitch {\n  /**\n   * Indicates whether the switch is checked or not.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Indicates whether the switch is disabled or not.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * The label text to display next to the switch.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Tab index for the switch element.\n   * Reflects as an HTML attribute.\n   */\n  @Prop({ reflect: true }) ontabindex: number = 0;\n  /**\n   * Position of the label relative to the switch.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: 'left' | 'right' = 'left';\n  /**\n   * Size of the switch.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Background style of the switch.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Accent color of the switch.\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Controls how the label text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n  /**\n   * Controls how the helper text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\n\n  @State() styles = {};\n\n  @Event({ eventName: 'onchange', composed: true, cancelable: true, bubbles: true }) onchange: EventEmitter<{ checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    large: { size: 64 },\n    medium: { size: 48 },\n    small: { size: 40 },\n  };\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-track': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`,\n    };\n  }\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--neutral-medium', background: 'neutral-medium' },\n      { name: '--neutral-pale', background: 'neutral-pale' },\n      { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },\n      { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },\n      { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },\n      { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },\n      { name: '--color-base-light', background: `${this.color}-light` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color?.opacity);\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 }) {\n    this.checked = state.value === 'true';\n    this.internals.setFormValue(this.checked.toString());\n  }\n\n  /**\n   * Callback to reset the switch state when the form is reset.\n   */\n  formResetCallback() {\n    this.checked = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.checked.toString());\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  toggleSwitch = () => {\n    if (this.disabled) return null;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.checked.toString());\n    this.onchange.emit({ checked: this.checked });\n  };\n\n  assignColor(colorDark: string, colorLight: string) {\n    if (this.disabled) return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';\n    return this.isDarkbackground() ? colorDark : colorLight;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host role=\"switch\" aria-checked={this.checked} aria-disabled={this.disabled}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.toggleSwitch}>\n          <div class=\"info\">\n            <cura-label\n              textOverflow={this.overflowLabel}\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              class=\"label\"\n              weight=\"bold\"\n              size={this.size === 'large' ? 'medium' : 'xsmall'}\n              lineHeight=\"125%\"\n              color={this.assignColor('neutral-white', 'neutral-black')}\n            >\n              {this.label}\n            </cura-label>\n            <cura-label\n              textOverflow={this.overflowHelper}\n              style={{ textAlign: this.position === 'right' ? 'right' : 'left' }}\n              color={this.assignColor('primary-lighter', 'neutral-dark')}\n              size=\"xsmall\"\n              class=\"message\"\n            >\n              <slot></slot>\n            </cura-label>\n          </div>\n\n          <div class=\"control\">\n            <div class={`track ${this.size.toLowerCase()}`}>\n              <div class={`thumb ${this.size.toLowerCase()}`} tabIndex={this.ontabindex}></div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/components/cura-avatar.js

@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '4e81726b8f163587f37fc80a537470147ca0b8f8', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '0e844cd40171f401e51fef97a434e4ffbad1c946', class: this.getClasses(), style: this.styles }, h("img", { key: '92e0ecfb0996f822b53bcb41e91b92f619e1fbf6', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '51683368cca9bff9bdf3a8e835990c89df3cd4be', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '84196bf4ed6914904f14f8ec0d07b40ceace5ebf', class: this.getClasses(), style: this.styles }, h("img", { key: '8968215d670f9cd5a042dd66e6dc15a75d07c68e', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAGqB,IAAI;+BACK,mBAAmB;;4BAEtB,KAAK;sBACV,KAAK;oBACQ,SAAS;;;;sBAK/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"sourcesContent":["export const avatarSizes = {\n  '80': { border: 2.5 },\n  '40': { border: 2.25 },\n  '32': { border: 2 },\n  '24': { border: 1.75 },\n};\n",":host {\n  display: inline-flex;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    justify-content: center;\n    align-items: center;\n    width: var(--size);\n    height: var(--size);\n    border: var(--border) solid var(--border-color);\n    border-radius: var(--border-radius);\n    background: var(--background-color);\n    overflow: hidden;\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n  .conteiner img {\n    outline: none;\n    object-fit: contain;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  @Prop({ reflect: true }) borderColor: string;\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  @Prop({ reflect: true }) border: boolean = false;\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-avatar.js","mappings":";;AAAO,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;IACrB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;IACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;IACnB,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB;;ACLD,MAAM,aAAa,GAAG,4bAA4b,CAAC;AACnd,yBAAe,aAAa;;MCMfA,YAAU;;;;;oBAOqB,IAAI;+BAMK,mBAAmB;;4BAUtB,KAAK;sBAKV,KAAK;oBAKQ,SAAS;;;;sBAiB/C,EAAE;;IAGpB,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,QAAQ,EAAE,GAAG,IAAI,IAAI,GACtB,CAAC;KACH;IAID,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,iBAAiB;QACf,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO;YACL,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;YACxE,iBAAiB,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;YACzC,UAAU,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,IAAI,GAAG,GAAG;SACzD,CAAC;KACH;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,CAAC;KAChG;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,KAAK,IAC/C,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,GAAG,IAAI,CAAC,UAAU,oCAAoC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAQ,CAC/I,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAvatar"],"sources":["src/components/cura-avatar/cura-avatar.definitions.tsx","src/components/cura-avatar/cura-avatar.scss?tag=cura-avatar&encapsulation=shadow","src/components/cura-avatar/cura-avatar.tsx"],"sourcesContent":["export const avatarSizes = {\n  '80': { border: 2.5 },\n  '40': { border: 2.25 },\n  '32': { border: 2 },\n  '24': { border: 1.75 },\n};\n",":host {\n  display: inline-flex;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    justify-content: center;\n    align-items: center;\n    width: var(--size);\n    height: var(--size);\n    border: var(--border) solid var(--border-color);\n    border-radius: var(--border-radius);\n    background: var(--background-color);\n    overflow: hidden;\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n  .conteiner img {\n    outline: none;\n    object-fit: contain;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { avatarSizes } from './cura-avatar.definitions';\n@Component({\n  tag: 'cura-avatar',\n  styleUrl: 'cura-avatar.scss',\n  shadow: true,\n})\nexport class CuraAvatar {\n  @Element() host: HTMLElement;\n\n  /**\n   * Size of the avatar. Values: 80, 40, 32, 24.\n   * @default 80\n   */\n  @Prop() size: '80' | '40' | '32' | '24' = '80';\n  /**\n   * Background color of the avatar.\n   * Accepts any color from the theme.\n   * @default neutral-purewhite\n   */\n  @Prop({ reflect: true }) backgroundColor: string = 'neutral-purewhite';\n  /**\n   * Border color of the avatar.\n   * Accepts any color from the theme.\n   */\n  @Prop({ reflect: true }) borderColor: string;\n  /**\n   * Border radius of the avatar.\n   * @default 50%\n   */\n  @Prop({ reflect: true }) borderRadius: string = '50%';\n  /**\n   * Show border of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) border: boolean = false;\n  /**\n   * Type of the avatar.\n   * @default default\n   */\n  @Prop({ reflect: true }) type: 'default' | 'branding' = 'default';\n  /**\n   * Image source of the avatar.\n   * Accepts any image source. If not provided, the default image will be used.\n   */\n  @Prop({ reflect: true, mutable: true }) imageSrc: string;\n  /**\n   * Default image source of the avatar.\n   * Some predefined images are available in the design system assets folder.\n   */\n  @Prop({ reflect: true }) imageSrcDefault: string;\n  /**\n   * Floating state of the avatar.\n   * @default false\n   */\n  @Prop({ reflect: true }) floating: boolean;\n\n  @State() styles = {};\n\n  @Watch('size')\n  sizeHandler(size: string) {\n    this.styles = {\n      ...this.styles,\n      '--size': `${size}px`,\n    };\n  }\n\n  assetsPath: string;\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n  }\n\n  hostCSSProperties() {\n    const avatarSize = avatarSizes[this.size];\n\n    return {\n      '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),\n      '--border-radius': `${this.borderRadius}`,\n      '--border': this.border ? `${avatarSize.border}px` : '0',\n    };\n  }\n\n  onSrcError() {\n    this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()} role=\"img\">\n        <div class={this.getClasses()} style={this.styles}>\n          <img src={this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`} onError={() => this.onSrcError()}></img>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-checkbox.js

@@ -4,7 +4,7 @@ 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;box-sizing:border-box;min-width:0}.container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}.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}.info.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.label-wrapper.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.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{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.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 curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;box-sizing:border-box;min-width:0}.container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}.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;overflow:hidden}.label.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;min-width:0;max-width:100%}.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{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.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$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends HTMLElement {
@@ -38,7 +38,8 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         this.background = 'light';
         this.iconColor = 'dark';
         this.color = 'accent';
-        this.textOverflow = 'none';
+        this.overflowLabel = 'none';
+        this.overflowHelper = 'none';
         this.styles = {};
     }
     sizeHandler() {
@@ -160,7 +161,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'e21d722715810f05cf3e466e9be5bfd336612b16', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '2395e186f4ec1af0618bc887d0c363b8f48a4ae1', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '8448200d67bdc09dddab7c9c2f5da5cb894ff010', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("div", { key: '8b53feb54371634444781ce5d7bc9b62398ec373', class: `label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: '554e0e9d53a28d43b308f7f65555bd691958401a', textOverflow: this.textOverflow, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: 'b1fb3b2604b9012adb03a582f38eeaa46c144017', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: 'abd1d31bc14d10c624833f298b2d34f80a99d412', textOverflow: this.textOverflow, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2ffd772eb62811f918e47dbbd5248339b8bbab8f' }))), h("div", { key: 'ccb93d0dcbc7c4eba7df0c63e7654eb2a9c4bdf1', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '93c5fc6e54828a9691b73a85eff57120aeb39e29', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '2e951be46f80c67ea87aaf1c613e29ae7a1cc856', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '341a30934dd6660b03e6be161999fad24fb005ef', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '58f32f6b047d19b8af2468b6007cf2dfb1297476', class: "info" }, h("div", { key: 'e23407390368c638e4e8cd9119ad3ccd1767d861', class: "label-wrapper" }, h("cura-label", { key: 'd7ce7b39441203e9058b0227edbfc75dd320806f', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '0684b9ab1f517083bc681bd0731aedf6d38c9873', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '499419ee720a7c7ba7e42fc8fcebccfb4e0b0c42', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '7c9637fa4a8082f6451851452db1b751218a20ec' }))), h("div", { key: '91b0a1f42d65d72aca24ff8a852d3c6f461a9cb7', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '4f1db30730b2d68d3d0f3036fd5924a9da1b541b', 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 this; }
@@ -186,7 +187,8 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         "background": [1],
         "iconColor": [1, "icon-color"],
         "color": [1],
-        "textOverflow": [513, "text-overflow"],
+        "overflowLabel": [513, "overflow-label"],
+        "overflowHelper": [513, "overflow-helper"],
         "styles": [32]
     }, undefined, {
         "size": ["sizeHandler"],

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

@@ -1 +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":["@import '../../../scss/mixins/text.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  min-width: 0;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  justify-content: start;\n  gap: var(--gap);\n\n  cursor: pointer;\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  &.textoverflow-single {\n    @include truncate-single();\n  }\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n\n  &.textoverflow-single {\n    @include truncate-single();\n  }\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  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-base) !important;\n    background: var(--color-light);\n  }\n}\n\n/* Estado Indeterminate */\n.indeterminate .checkbox {\n  border-color: var(--color-base);\n  background: var(--color-light);\n\n  &:hover {\n    border-color: var(--color-dark) !important;\n    background: var(--color-base);\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  /**\n   * Apply text-overflow ellipsis definitions.\n   * Default to none\n   */\n  @Prop({ reflect: true }) textOverflow: 'none' | 'single' | string = 'none';\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 role=\"checkbox\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class={`info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n            <div class={`label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}`}>\n              <cura-label textOverflow={this.textOverflow} class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'medium' : 'xsmall'} color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && (\n                <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n                  *{' '}\n                </cura-paragraph>\n              )}\n            </div>\n            <cura-label textOverflow={this.textOverflow} 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}
+{"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":["@import '../../../scss/mixins/text.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  min-width: 0;\n}\n\n/* Container e Layout */\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  justify-content: start;\n  gap: var(--gap);\n\n  cursor: pointer;\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  overflow: hidden;\n}\n\n.label.textoverflow-single {\n  @include truncate-single();\n  min-width: 0;\n  max-width: 100%;\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  border-color: var(--color-dark);\n  background: var(--color-base);\n\n  &:hover {\n    border-color: var(--color-base) !important;\n    background: var(--color-light);\n  }\n}\n\n/* Estado Indeterminate */\n.indeterminate .checkbox {\n  border-color: var(--color-base);\n  background: var(--color-light);\n\n  &:hover {\n    border-color: var(--color-dark) !important;\n    background: var(--color-base);\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  /**\n   * Controls how the label text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowLabel: 'none' | 'single' | string = 'none';\n\n  /**\n   * Controls how the helper text should handle overflow.\n   * - `'none'`: No overflow handling; the label displays normally.\n   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n   * - `string`: Custom overflow handling mode.\n   *\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) overflowHelper: 'none' | 'single' | string = 'none';\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 role=\"checkbox\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n        <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                textOverflow={this.overflowLabel}\n                class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n                weight=\"bold\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}\n              >\n                {this.label}\n              </cura-label>\n              {this.required && (\n                <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n                  *{' '}\n                </cura-paragraph>\n              )}\n            </div>\n            <cura-label textOverflow={this.overflowHelper} 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}

package/dist/components/cura-radio.js

@@ -3,7 +3,7 @@ import { f as formsSizes } from './cura-forms.definitions.js';
 import { d as defineCustomElement$3 } from './cura-label2.js';
 import { d as defineCustomElement$2 } from './cura-paragraph2.js';
 
-const curaRadioCss = "@charset \"UTF-8\";:host{display:block;box-sizing:border-box;min-width:0;}:host .container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}:host .position.container{flex-direction:row}:host .position .label-wrapper{justify-content:end}:host .position .message{text-align:right}:host .position .label{order:1}:host .info{display:flex;flex-direction:column}:host .info.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}:host .label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}:host .label-wrapper.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}:host .control{width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);box-sizing:border-box;transition:border-color 0.3s;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);flex:0 0 var(--size)}:host .radio::after{content:\"\";background:var(--color-base-light);border-radius:50%;opacity:0;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}";
+const curaRadioCss = "@charset \"UTF-8\";:host{display:block;box-sizing:border-box;min-width:0;}:host .container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}:host .position.container{flex-direction:row}:host .position .label-wrapper{justify-content:end}:host .position .message{text-align:right}:host .position .label{order:1}:host .label.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;min-width:0;max-width:100%}:host .info{display:flex;flex-direction:column;overflow:hidden}:host .label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}:host .control{width:fit-content;cursor:pointer;position:relative}:host .radio{margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--primary-base-neutral-medium);background:var(--neutral-purewhite);box-sizing:border-box;transition:border-color 0.3s;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;width:var(--size);height:var(--size);flex:0 0 var(--size)}:host .radio::after{content:\"\";background:var(--color-base-light);border-radius:50%;opacity:0;transition:opacity 0.3s;width:var(--size-after);height:var(--size-after)}:host .radio:focus{border-color:var(--info-base) !important}:host .success .radio{border-color:var(--success-base);background:var(--success-lighter)}:host .success .radio:hover{border-color:var(--success-base) !important}:host .success.checked .radio{border-color:var(--success-base)}:host .success.checked .radio::after{background:var(--success-base)}:host .success.checked .radio:hover{background:var(--success-lighter) !important;border-color:var(--success-base) !important}:host .success.checked .radio:hover::after{background:var(--success-base) !important}:host .error .radio{border-color:var(--error-base);background:var(--error-lighter)}:host .error .radio:hover{border-color:var(--error-base) !important}:host .error.checked .radio{border-color:var(--error-base)}:host .error.checked .radio::after{background:var(--error-base)}:host .error.checked .radio:hover{background:var(--error-lighter) !important;border-color:var(--error-base) !important}:host .error.checked .radio:hover::after{background:var(--error-base) !important}:host .checked .radio::after{opacity:1;background:var(--color-base)}:host .checked .radio{border-color:var(--color-dark)}:host .checked .radio:hover{border-color:var(--color-light) !important}:host .checked .radio:hover::after{background:var(--color-light)}:host .disabled .radio{background:var(--primary-base-neutral-white);border-color:var(--primary-darker-neutral-base);cursor:not-allowed}:host .disabled .radio::after{background:var(--neutral-lighter)}:host .disabled.checked .radio{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-darker-neutral-white) !important}:host .disabled.checked .radio::after{background:var(--primary-base-neutral-base) !important}:host :not(.disabled):not(.checked) .radio:hover{border-color:var(--primary-base-neutral-dark)}";
 const CuraRadioStyle0 = curaRadioCss;
 
 const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTMLElement {
@@ -38,7 +38,8 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
         this.background = 'light';
         this.size = 'medium';
         this.color = 'accent';
-        this.textOverflow = 'none';
+        this.overflowLabel = 'none';
+        this.overflowHelper = 'none';
         this.styles = {};
     }
     sizeHandler() {
@@ -132,7 +133,7 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: 'b8145fc2c19d08429b06a91784884336345e0bc6', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '8bd6457e269d1126dea7cc5bf8b4b29951632bbd', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '183084f6b59f734254b5d80deffc9ad9af435484', class: `info ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("div", { key: '54be186791a8897c95259187f8c4014f9341968a', class: `label-wrapper ${this.textOverflow === 'single' ? 'textoverflow-single' : ''}` }, h("cura-label", { key: 'bb16cb0151075f0bea7b7e3684aec2d8cbc30976', textOverflow: this.textOverflow, class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '3acc3e5284d13eb805c98c01c65bbd8e27ca3091', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '3773f9a5eed424fa9456efc773f332d903bb8a68', textOverflow: this.textOverflow, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '4329dd946e70d299038f524ba4ec4e12fa12f3f0' }))), h("input", { key: '1851ed2d83ba7d39173bce9566f91d70b98da64b', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked }))));
+        return (h(Host, { key: '550e164f2be33f4fdad6c194302723a00e51843c', role: "radio", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: 'ebcfef353b7dd4655b1d809025060db952927521', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '436ecc0f4fd72ff6a00a2a47f494e08aae65b3d6', class: "info" }, h("div", { key: '4836e4ce83d1fc3b338cfd216b46a7791ba6dc90', class: "label-wrapper" }, h("cura-label", { key: '434f0b816eee11b7da0b44f37880e31c52e2f853', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '1d06464488947f469abd5c3d1c25ebb2ed63a5bd', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '508bb787d2da5d25de48516ed64d6b02c94d8546', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'f35d5c895f74ec02987474e71df9a5067ea51e70' }))), h("input", { key: 'fbd6ba47d6e8a9c812ad986964749507f9d33d62', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -155,7 +156,8 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
         "background": [1],
         "size": [1],
         "color": [1],
-        "textOverflow": [513, "text-overflow"],
+        "overflowLabel": [513, "overflow-label"],
+        "overflowHelper": [513, "overflow-helper"],
         "styles": [32]
     }, undefined, {
         "size": ["sizeHandler"],