@rededor/cura 1.7.0 → 1.8.0

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-21683715.js';
-import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-OdKytJIH.js';
+import { f as formsSizes } from './cura-forms.definitions-Dot54hbB.js';
+import './cura-theme-module-BPKQjAwN.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 .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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onchange = createEvent(this, "onchange", 7);
+        this.onchange = createEvent(this, "onchange");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -15,34 +15,87 @@ const CuraRadio = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.sizes = {
-            large: { size: 20 },
-            medium: { size: 14 },
-            small: { size: 10 },
-        };
-        this.isDarkbackground = () => this.background === 'dark';
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            this.checked = !this.checked;
-            this.internals.setFormValue(this.value);
-            this.onchange.emit({ value: this.value, checked: this.checked });
-        };
+        /**
+         * Reflects the checked state of the radio button.
+         * Mutable property allowing state change.
+         */
         this.checked = false;
+        /**
+         * Status of the radio button.
+         * Can be 'error', 'success', or 'default'.
+         */
         this.status = 'default';
+        /**
+         * Reflects the disabled state of the radio button.
+         */
         this.disabled = false;
+        /**
+         * Reflects the required state of the radio button.
+         */
         this.required = false;
+        /**
+         * Text label associated with the radio button.
+         */
         this.label = '';
-        this.ontabindex = undefined;
+        /**
+         * Position of the label relative to the radio button.
+         * Can be 'left' or 'right'.
+         */
         this.position = 'left';
+        /**
+         * Value associated with the radio button.
+         */
         this.value = '';
+        /**
+         * Name attribute of the radio button.
+         */
         this.name = '';
+        /**
+         * Background theme of the radio button.
+         * Can be 'dark' or 'light'.
+         */
         this.background = 'light';
+        /**
+         * Size of the radio button.
+         * Can be 'small', 'medium', or 'large'.
+         */
         this.size = 'medium';
+        /**
+         * Color theme of the radio button.
+         */
         this.color = 'accent';
+        /**
+         * Controls how the label text should handle overflow.
+         * - `'none'`: No overflow handling; the label displays normally.
+         * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+         * - `string`: Custom overflow handling mode.
+         *
+         * @default 'none'
+         */
         this.overflowLabel = 'none';
+        /**
+         * Controls how the helper text should handle overflow.
+         * - `'none'`: No overflow handling; the label displays normally.
+         * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+         * - `string`: Custom overflow handling mode.
+         *
+         * @default 'none'
+         */
         this.overflowHelper = 'none';
         this.styles = {};
+        this.sizes = {
+            large: { size: 20 },
+            medium: { size: 14 },
+            small: { size: 10 },
+        };
+        this.isDarkbackground = () => this.background === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked });
+        };
     }
     sizeHandler() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
@@ -145,8 +198,9 @@ const CuraRadio = class {
         "background": ["setColors", "assignColor"]
     }; }
 };
-CuraRadio.style = CuraRadioStyle0;
+CuraRadio.style = curaRadioCss;
 
 export { CuraRadio as cura_radio };
+//# sourceMappingURL=cura-radio.entry.js.map
 
 //# sourceMappingURL=cura-radio.entry.js.map

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

@@ -1 +1 @@
-{"file":"cura-radio.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","src/components/forms/cura-radio/cura-radio.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  .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  .label.textoverflow-single {\n    @include truncate-single();\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .info {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n  }\n\n  .label-wrapper {\n    display: flex;\n    justify-content: start;\n    align-items: center;\n    gap: 5px;\n  }\n\n  .control {\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n  }\n\n  .radio {\n    margin: 0;\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    border-radius: 50%;\n    border: 2px solid var(--primary-base-neutral-medium);\n    background: var(--neutral-purewhite);\n    box-sizing: border-box;\n    transition: border-color 0.3s;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    width: var(--size);\n    height: var(--size);\n    flex: 0 0 var(--size);\n\n    &::after {\n      content: '';\n      background: var(--color-base-light);\n      border-radius: 50%;\n      opacity: 0;\n      transition: opacity 0.3s;\n      width: var(--size-after);\n      height: var(--size-after);\n    }\n\n    &:focus {\n      border-color: var(--info-base) !important;\n    }\n  }\n\n  /* Estado Success */\n  .success .radio {\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 .radio {\n    border-color: var(--success-base);\n\n    &::after {\n      background: var(--success-base);\n    }\n\n    &:hover {\n      background: var(--success-lighter) !important;\n      border-color: var(--success-base) !important;\n\n      &::after {\n        background: var(--success-base) !important;\n      }\n    }\n  }\n\n  /* Estado Error */\n  .error .radio {\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 .radio {\n    border-color: var(--error-base);\n\n    &::after {\n      background: var(--error-base);\n    }\n\n    &:hover {\n      background: var(--error-lighter) !important;\n      border-color: var(--error-base) !important;\n\n      &::after {\n        background: var(--error-base) !important;\n      }\n    }\n  }\n\n  /* Estado checked */\n  .checked .radio::after {\n    opacity: 1;\n    background: var(--color-base);\n  }\n\n  .checked .radio {\n    border-color: var(--color-dark);\n  }\n\n  .checked .radio:hover {\n    border-color: var(--color-light) !important;\n  }\n\n  .checked .radio:hover::after {\n    background: var(--color-light);\n  }\n\n  /* Estado disabled */\n  .disabled .radio {\n    background: var(--primary-base-neutral-white);\n    border-color: var(--primary-darker-neutral-base);\n    cursor: not-allowed;\n  }\n\n  .disabled .radio::after {\n    background: var(--neutral-lighter);\n  }\n\n  .disabled.checked .radio {\n    border-color: var(--primary-base-neutral-base) !important;\n    background: var(--primary-darker-neutral-white) !important;\n  }\n\n  .disabled.checked .radio::after {\n    background: var(--primary-base-neutral-base) !important;\n  }\n\n  /* Estado hover para não disabled e não checked */\n  :not(.disabled):not(.checked) .radio:hover {\n    border-color: var(--primary-base-neutral-dark);\n  }\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-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"],"version":3}
+{"version":3,"file":"cura-radio.entry.js","sources":["src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","src/components/forms/cura-radio/cura-radio.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  .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  .label.textoverflow-single {\n    @include truncate-single();\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .info {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n  }\n\n  .label-wrapper {\n    display: flex;\n    justify-content: start;\n    align-items: center;\n    gap: 5px;\n  }\n\n  .control {\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n  }\n\n  .radio {\n    margin: 0;\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    border-radius: 50%;\n    border: 2px solid var(--primary-base-neutral-medium);\n    background: var(--neutral-purewhite);\n    box-sizing: border-box;\n    transition: border-color 0.3s;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    width: var(--size);\n    height: var(--size);\n    flex: 0 0 var(--size);\n\n    &::after {\n      content: '';\n      background: var(--color-base-light);\n      border-radius: 50%;\n      opacity: 0;\n      transition: opacity 0.3s;\n      width: var(--size-after);\n      height: var(--size-after);\n    }\n\n    &:focus {\n      border-color: var(--info-base) !important;\n    }\n  }\n\n  /* Estado Success */\n  .success .radio {\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 .radio {\n    border-color: var(--success-base);\n\n    &::after {\n      background: var(--success-base);\n    }\n\n    &:hover {\n      background: var(--success-lighter) !important;\n      border-color: var(--success-base) !important;\n\n      &::after {\n        background: var(--success-base) !important;\n      }\n    }\n  }\n\n  /* Estado Error */\n  .error .radio {\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 .radio {\n    border-color: var(--error-base);\n\n    &::after {\n      background: var(--error-base);\n    }\n\n    &:hover {\n      background: var(--error-lighter) !important;\n      border-color: var(--error-base) !important;\n\n      &::after {\n        background: var(--error-base) !important;\n      }\n    }\n  }\n\n  /* Estado checked */\n  .checked .radio::after {\n    opacity: 1;\n    background: var(--color-base);\n  }\n\n  .checked .radio {\n    border-color: var(--color-dark);\n  }\n\n  .checked .radio:hover {\n    border-color: var(--color-light) !important;\n  }\n\n  .checked .radio:hover::after {\n    background: var(--color-light);\n  }\n\n  /* Estado disabled */\n  .disabled .radio {\n    background: var(--primary-base-neutral-white);\n    border-color: var(--primary-darker-neutral-base);\n    cursor: not-allowed;\n  }\n\n  .disabled .radio::after {\n    background: var(--neutral-lighter);\n  }\n\n  .disabled.checked .radio {\n    border-color: var(--primary-base-neutral-base) !important;\n    background: var(--primary-darker-neutral-white) !important;\n  }\n\n  .disabled.checked .radio::after {\n    background: var(--primary-base-neutral-base) !important;\n  }\n\n  /* Estado hover para não disabled e não checked */\n  :not(.disabled):not(.checked) .radio:hover {\n    border-color: var(--primary-base-neutral-dark);\n  }\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-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"],"names":[],"mappings":"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"}

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

@@ -1,17 +1,35 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-21683715.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-OdKytJIH.js';
+import './cura-theme-module-BPKQjAwN.js';
 
 const curaStepperCss = ":host{display:block;box-sizing:border-box;width:100%}cura-heading{--margin-block:0 !important}.container{display:flex}.compact{display:flex;padding:0px;justify-content:space-between;align-items:center}.compact .heading{text-align:right}.stepper-list{gap:4px;display:flex;flex-shrink:0;align-items:center;padding:0;flex:1;width:100%;justify-content:space-between}.step{display:flex;align-items:center;flex-direction:row;flex:1;gap:4px}.step .wrapper{flex:1;position:relative}.step .divider{background-color:var(--neutral-light);height:2px;flex:1;transition:all 1s}.step .animation{position:absolute;top:0;left:0;right:0;width:var(--progress-width)}.step .done{background-color:var(--success-light)}.step .stop{background-color:var(--error-light)}.step .active{background-color:var(--info-light)}.last{flex:0}";
-const CuraStepperStyle0 = curaStepperCss;
 
 const CuraStepper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.activeStepIndex = undefined;
+        /**
+         * Indicates if a step has encountered an error
+         * If `true`, the current step will be marked as 'stop'
+         */
         this.errorInCurrentStep = false;
+        /**
+         * Whether to display the title (default: false)
+         */
         this.displayHeading = false;
+        /**
+         * Allows you to set the appearance of the component (default: default)
+         */
         this.variant = 'default';
+        /**
+         * List of steps in the stepper.
+         */
         this.steps = [];
         this.styles = {};
+        /**
+         * Array of steps in the stepper.
+         *
+         * @type {Date[]}
+         * @default []
+         */
         this.stepList = [];
     }
     connectedCallback() {
@@ -112,8 +130,9 @@ const CuraStepper = class {
     }
     get host() { return getElement(this); }
 };
-CuraStepper.style = CuraStepperStyle0;
+CuraStepper.style = curaStepperCss;
 
 export { CuraStepper as cura_stepper };
+//# sourceMappingURL=cura-stepper.entry.js.map
 
 //# sourceMappingURL=cura-stepper.entry.js.map

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

@@ -1 +1 @@
-{"file":"cura-stepper.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,yyBAAyyB,CAAC;AACj0B,0BAAe,cAAc;;MCOhB,WAAW;;;;kCAUiC,KAAK;8BAKT,KAAK;uBAKE,SAAS;qBAKlC,EAAE;sBAMjB,EAAE;wBAQQ,EAAE;;IAE9B,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QACxD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;KACpE;IAED,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;QAC5C,OAAO;YACL,gBAAgB,EAAE,OAAO,CAAC,UAAU,EAAE;YACtC,qBAAqB,EAAE,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC;YAC3D,mBAAmB,EAAE,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YACvD,gBAAgB,EAAE,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YACjD,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnD,iBAAiB,EAAE,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YACnD,cAAc,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC;YAC7C,eAAe,EAAE,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC;YAC/C,aAAa,EAAE,KAAK,CAAC,OAAO,EAAE;YAC9B,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE;YAChC,eAAe,EAAE,KAAK,CAAC,SAAS,EAAE;YAClC,uBAAuB,EAAE,OAAO,CAAC,OAAO;SACzC,CAAC;KACH;IAED,eAAe;QACb,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;SAChD;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;SAC5B;KACF;IAED,aAAa,CAAC,IAAY;QACxB,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB;YAAE,OAAO,MAAM,CAAC;QAC5E,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI;YAAE,OAAO,QAAQ,CAAC;QACpF,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QAEhD,OAAO,SAAS,CAAC;KAClB;IAED,iBAAiB;QACf,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE;gBACP,aAAa,EAAE,mBAAmB;gBAClC,mBAAmB,EAAE,aAAa;gBAClC,iBAAiB,EAAE,WAAW;aAC/B;YACD,SAAS,EAAE;gBACT,aAAa,EAAE,mBAAmB;gBAClC,mBAAmB,EAAE,cAAc;gBACnC,iBAAiB,EAAE,gBAAgB;aACpC;YACD,SAAS,EAAE;gBACT,aAAa,EAAE,sBAAsB;gBACrC,mBAAmB,EAAE,gBAAgB;gBACrC,iBAAiB,EAAE,cAAc;aAClC;YACD,KAAK,EAAE;gBACL,aAAa,EAAE,oBAAoB;gBACnC,mBAAmB,EAAE,cAAc;gBACnC,iBAAiB,EAAE,YAAY;aAChC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,OAAO,cAAc,CAAC,KAAK,CAAC;SAC7B;QAED,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE;YAC9B,OAAO,cAAc,CAAC,SAAS,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACjD,OAAO,cAAc,CAAC,SAAS,CAAC;SACjC;QAED,OAAO,cAAc,CAAC,OAAO,CAAC;KAC/B;IAED,oBAAoB;;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QACrI,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,0CAAE,KAAK,CAAC;QACzI,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAChE,MAAM,UAAU,GAAG,EAAE,SAAS,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC3D,MAAM,EAAE,aAAa,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;;QAG3F,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,eAAe,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAErE,QACE,WAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,yBAAmB,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,KAAK,CAAC,IACpG,CAAC,UAAU,IACV,iBAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,GAAG,aAAa,GAAG,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,kBAAkB,GAAG,YAAY,GAAG,cAAc,EAAE,IAAI,EAAC,IAAI,GAAa,KAEhK,oBAAc,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,eAAe,OAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAC/B,CAChB,CACiB,EACnB,IAAI,CAAC,cAAc,KAClB,WAAK,KAAK,EAAC,SAAS,IAClB,oBAAc,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAE,mBAAmB,IAChE,KAAK,CACO,EACd,CAAC,SAAS,KACT,oBAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,KAAK,EAAE,iBAAiB,sBACzD,QAAQ,CACL,CAChB,CACG,CACP,CACG,EACN;KACH;IAED,UAAU,CAAC,IAAU,EAAE,SAAiB;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QACxD,MAAM,aAAa,GAAG,UAAU,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC;QAE9D,QACE,WAAK,KAAK,EAAE,QAAQ,QAAQ,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAC3D,yBAAmB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,UAAU,GAAsB,EACvI,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACnC,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,SAAS,GAAG,EACvB,WAAK,KAAK,EAAE,WAAW,UAAU,YAAY,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAI,CAC3F,CACP,CACG,EACN;KACH;IACD,aAAa;QACX,QACE,WAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAO,CACtG,EACN;KACH;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,uDAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAQ,CAAC;KACvG;;;;;;;","names":[],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\ncura-heading { \n  --margin-block: 0 !important;\n}\n\n.container {\n  display: flex;\n}\n\n.compact {\n  display: flex;\n  padding: 0px;\n  justify-content: space-between;\n  align-items: center;\n\n  .heading{\n    text-align: right;\n  }\n}\n\n.stepper-list {\n  gap: 4px;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 0;\n  flex: 1;\n  width: 100%;\n  justify-content: space-between;\n}\n\n.step{\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n  gap: 4px;\n\n  .wrapper {\n    flex: 1;\n    position: relative;\n  }\n\n  .divider{\n    background-color: var(--neutral-light);\n    height: 2px;\n    flex: 1;\n\n    transition: all 1s;\n  }\n\n  .animation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: var(--progress-width);\n  }\n\n  .done{\n    background-color: var(--success-light);\n  }\n\n  .stop{\n    background-color: var(--error-light);\n  }\n\n  .active{\n    background-color: var(--info-light);\n  }\n}\n\n.last{\n  flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus}></cura-stepper-item>\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"],"version":3}
+{"version":3,"file":"cura-stepper.entry.js","sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\ncura-heading { \n  --margin-block: 0 !important;\n}\n\n.container {\n  display: flex;\n}\n\n.compact {\n  display: flex;\n  padding: 0px;\n  justify-content: space-between;\n  align-items: center;\n\n  .heading{\n    text-align: right;\n  }\n}\n\n.stepper-list {\n  gap: 4px;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  padding: 0;\n  flex: 1;\n  width: 100%;\n  justify-content: space-between;\n}\n\n.step{\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex: 1;\n  gap: 4px;\n\n  .wrapper {\n    flex: 1;\n    position: relative;\n  }\n\n  .divider{\n    background-color: var(--neutral-light);\n    height: 2px;\n    flex: 1;\n\n    transition: all 1s;\n  }\n\n  .animation {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: var(--progress-width);\n  }\n\n  .done{\n    background-color: var(--success-light);\n  }\n\n  .stop{\n    background-color: var(--error-light);\n  }\n\n  .active{\n    background-color: var(--info-light);\n  }\n}\n\n.last{\n  flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n  tag: 'cura-stepper',\n  styleUrl: 'cura-stepper.scss',\n  shadow: true,\n})\nexport class CuraStepper {\n  /**\n   * The current active step index\n   */\n  @Prop({ reflect: true }) activeStepIndex: number;\n\n  /**\n   * Indicates if a step has encountered an error\n   * If `true`, the current step will be marked as 'stop'\n   */\n  @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n  /**\n   * Whether to display the title (default: false)\n   */\n  @Prop({ reflect: true }) displayHeading: boolean = false;\n\n  /**\n   * Allows you to set the appearance of the component (default: default)\n   */\n  @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n  /**\n   * List of steps in the stepper.\n   */\n  @Prop() steps: Step[] | string = [];\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  @State() styles = {};\n\n  /**\n   * Array of steps in the stepper.\n   *\n   * @type {Date[]}\n   * @default []\n   */\n  @State() stepList: Step[] = [];\n\n  connectedCallback() {\n    this.initializeSteps();\n\n    const { fonts, colors, spacing } = window.CuraAPI.theme;\n    const weights = fonts.getWeights();\n\n    this.styles = this.generateStyles(colors, fonts, spacing, weights);\n  }\n\n  generateStyles(colors, fonts, spacing, weights) {\n    return {\n      '--base-spacing': spacing.getSpacing(),\n      '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n      '--neutral-lighter': colors.getColor('neutral-lighter'),\n      '--neutral-base': colors.getColor('neutral-base'),\n      '--neutral-light': colors.getColor('neutral-light'),\n      '--success-light': colors.getColor('success-light'),\n      '--info-light': colors.getColor('info-light'),\n      '--error-light': colors.getColor('error-light'),\n      '--font-size': fonts.getSize(),\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-weight-regular': weights.regular,\n    };\n  }\n\n  initializeSteps() {\n    if (typeof this.steps === 'string') {\n      this.stepList = JSON.parse(this.steps || '[]');\n    } else {\n      this.stepList = this.steps;\n    }\n  }\n\n  getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n    if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n    if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n    if (this.activeStepIndex >= step) return 'done';\n\n    return 'default';\n  }\n\n  getProgressStyles() {\n    const progressStyles = {\n      default: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'info-darker',\n        nextStepTextColor: 'info-dark',\n      },\n      firstStep: {\n        progressColor: 'var(--info-light)',\n        activeStepTextColor: 'neutral-dark',\n        nextStepTextColor: 'neutral-medium',\n      },\n      completed: {\n        progressColor: 'var(--success-light)',\n        activeStepTextColor: 'success-darker',\n        nextStepTextColor: 'success-dark',\n      },\n      error: {\n        progressColor: 'var(--error-light)',\n        activeStepTextColor: 'error-darker',\n        nextStepTextColor: 'error-dark',\n      },\n    };\n\n    if (this.errorInCurrentStep) {\n      return progressStyles.error;\n    }\n\n    if (this.activeStepIndex === 0) {\n      return progressStyles.firstStep;\n    }\n\n    if (this.activeStepIndex === this.stepList.length) {\n      return progressStyles.completed;\n    }\n\n    return progressStyles.default;\n  }\n\n  renderCompactStepper() {\n    const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n    const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n    const completed = this.activeStepIndex === this.stepList.length;\n    const inProgress = !(completed || this.errorInCurrentStep);\n    const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n    // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n    const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n    return (\n      <div class=\"container compact\" style={this.styles}>\n        <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n          {!inProgress ? (\n            <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n          ) : (\n            <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n              {this.activeStepIndex}/{this.stepList.length}\n            </cura-heading>\n          )}\n        </cura-progress-bar>\n        {this.displayHeading && (\n          <div class=\"heading\">\n            <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n              {title}\n            </cura-heading>\n            {!completed && (\n              <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n                Próximo: {subtitle}\n              </cura-heading>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderStep(step: Step, stepIndex: number) {\n    const stepStatus = this.getStepStatus(stepIndex + 1);\n    const lastStep = stepIndex === this.stepList.length - 1;\n    const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n    return (\n      <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n        <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus}></cura-stepper-item>\n        {stepIndex < this.stepList.length - 1 && (\n          <div class=\"wrapper\">\n            <div class=\"divider\" />\n            <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n          </div>\n        )}\n      </div>\n    );\n  }\n  renderStepper() {\n    return (\n      <div class=\"container\" style={this.styles}>\n        <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n      </div>\n    );\n  }\n\n  render() {\n    return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-21683715.js';
-import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-OdKytJIH.js';
+import { f as formsSizes } from './cura-forms.definitions-Dot54hbB.js';
+import './cura-theme-module-BPKQjAwN.js';
 
 const curaSwitchCss = "@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);text-align:left;cursor:pointer}.position{flex-direction:row}.info{overflow:hidden}.label,.message{text-align:left}.control{width:fit-content}.track{background:var(--neutral-dark-base);border-radius:16px;transition:background-color 0.3s;align-items:flex-start;flex-shrink:0;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background:var(--neutral-purewhite);border:2px solid var(--neutral-darker-medium);border-radius:50%;position:absolute;transition:transform 0.3s, outline 0.3s;display:inline-block;cursor:pointer;user-select:none;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));background:var(--neutral-purewhite);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-pale) !important;border-color:var(--neutral-darker-medium) !important}.checked .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}.checked .track{background:var(--color-base-light)}.disabled .track{background:var(--neutral-black-neutral-pale)}.disabled .thumb{background:var(--neutral-black-neutral-base) !important;border-color:var(--neutral-black-neutral-pale) !important;cursor:not-allowed}.disabled.checked .track{background:var(--neutral-black-neutral-pale)}.container.disabled .thumb:focus{outline:none !important;border-color:var(--neutral-black-neutral-pale) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled):not(.checked) .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled) .thumb:focus{outline:2px solid var(--info-base) !important;border:2px solid var(--neutral-darker-medium);z-index:1}:not(.disabled) .checked .thumb:focus{outline:2px solid var(--info-base) !important;border-color:var(--color-dark)}";
-const CuraSwitchStyle0 = curaSwitchCss;
 
 const CuraSwitch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onchange = createEvent(this, "onchange", 7);
+        this.onchange = createEvent(this, "onchange");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -15,6 +15,61 @@ const CuraSwitch = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
+        /**
+         * Indicates whether the switch is checked or not.
+         */
+        this.checked = false;
+        /**
+         * Indicates whether the switch is disabled or not.
+         */
+        this.disabled = false;
+        /**
+         * The label text to display next to the switch.
+         */
+        this.label = '';
+        /**
+         * Tab index for the switch element.
+         * Reflects as an HTML attribute.
+         */
+        this.ontabindex = 0;
+        /**
+         * Position of the label relative to the switch.
+         * Can be 'left' or 'right'.
+         */
+        this.position = 'left';
+        /**
+         * Size of the switch.
+         * Can be 'small', 'medium', or 'large'.
+         */
+        this.size = 'medium';
+        /**
+         * Background style of the switch.
+         * Can be 'dark' or 'light'.
+         */
+        this.background = 'light';
+        /**
+         * Accent color of the switch.
+         */
+        this.color = 'accent';
+        /**
+         * Controls how the label text should handle overflow.
+         * - `'none'`: No overflow handling; the label displays normally.
+         * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+         * - `string`: Custom overflow handling mode.
+         *
+         * @default 'none'
+         */
+        this.overflowLabel = 'none';
+        /**
+         * Controls how the helper text should handle overflow.
+         * - `'none'`: No overflow handling; the label displays normally.
+         * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+         * - `string`: Custom overflow handling mode.
+         *
+         * @default 'none'
+         */
+        this.overflowHelper = 'none';
+        this.styles = {};
         this.sizes = {
             large: { size: 64 },
             medium: { size: 48 },
@@ -28,17 +83,6 @@ const CuraSwitch = class {
             this.internals.setFormValue(this.checked.toString());
             this.onchange.emit({ checked: this.checked });
         };
-        this.checked = false;
-        this.disabled = false;
-        this.label = '';
-        this.ontabindex = 0;
-        this.position = 'left';
-        this.size = 'medium';
-        this.background = 'light';
-        this.color = 'accent';
-        this.overflowLabel = 'none';
-        this.overflowHelper = 'none';
-        this.styles = {};
     }
     sizeHandler() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--size-track': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
@@ -116,8 +160,9 @@ const CuraSwitch = class {
         "background": ["setColors"]
     }; }
 };
-CuraSwitch.style = CuraSwitchStyle0;
+CuraSwitch.style = curaSwitchCss;
 
 export { CuraSwitch as cura_switch };
+//# sourceMappingURL=cura-switch.entry.js.map
 
 //# sourceMappingURL=cura-switch.entry.js.map

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

@@ -1 +1 @@
-{"file":"cura-switch.entry.js","mappings":"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","names":[],"sources":["src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":["@import '../../../../src/scss/mixins/shadows.scss';\n@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 {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  justify-content: start;\n  gap: var(--gap);\n  text-align: left;\n\n  cursor: pointer;\n}\n\n.position {\n  flex-direction: row;\n}\n\n.info {\n  overflow: hidden;\n}\n\n.label,\n.message {\n  text-align: left;\n}\n\n.control {\n  width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n  background: var(--neutral-dark-base);\n  border-radius: 16px;\n  transition: background-color 0.3s;\n  align-items: flex-start;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: var(--size-track);\n  height: var(--size);\n  position: relative;\n}\n\n.thumb {\n  background: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-darker-medium);\n  border-radius: 50%;\n\n  position: absolute;\n  transition: transform 0.3s, outline 0.3s;\n  display: inline-block;\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n  border-color: var(--color-dark);\n  @include shadow-level3(--neutral-black-shadow);\n  background: var(--neutral-purewhite);\n  transform: translateX(var(--size)) translateY(-50%);\n}\n\n.checked .thumb:hover {\n  background: var(--neutral-pale) !important;\n  border-color: var(--neutral-darker-medium) !important;\n}\n\n.checked .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n.checked .track {\n  background: var(--color-base-light);\n}\n\n/* Estado \"disabled\" */\n.disabled .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.disabled .thumb {\n  background: var(--neutral-black-neutral-base) !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n  cursor: not-allowed;\n}\n\n.disabled.checked .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.container.disabled .thumb:focus {\n  outline: none !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n:not(.disabled):not(.checked) .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border: 2px solid var(--neutral-darker-medium);\n  z-index: 1;\n}\n\n:not(.disabled) .checked .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border-color: var(--color-dark);\n}\n","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"],"version":3}
+{"version":3,"file":"cura-switch.entry.js","sources":["src/components/forms/cura-switch/cura-switch.scss?tag=cura-switch&encapsulation=shadow","src/components/forms/cura-switch/cura-switch.tsx"],"sourcesContent":["@import '../../../../src/scss/mixins/shadows.scss';\n@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 {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  justify-content: start;\n  gap: var(--gap);\n  text-align: left;\n\n  cursor: pointer;\n}\n\n.position {\n  flex-direction: row;\n}\n\n.info {\n  overflow: hidden;\n}\n\n.label,\n.message {\n  text-align: left;\n}\n\n.control {\n  width: fit-content;\n}\n\n/* Estilos para o controle de switch */\n.track {\n  background: var(--neutral-dark-base);\n  border-radius: 16px;\n  transition: background-color 0.3s;\n  align-items: flex-start;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: var(--size-track);\n  height: var(--size);\n  position: relative;\n}\n\n.thumb {\n  background: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-darker-medium);\n  border-radius: 50%;\n\n  position: absolute;\n  transition: transform 0.3s, outline 0.3s;\n  display: inline-block;\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n  width: var(--size);\n  height: var(--size);\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Estado \"checked\" */\n.checked .thumb {\n  border-color: var(--color-dark);\n  @include shadow-level3(--neutral-black-shadow);\n  background: var(--neutral-purewhite);\n  transform: translateX(var(--size)) translateY(-50%);\n}\n\n.checked .thumb:hover {\n  background: var(--neutral-pale) !important;\n  border-color: var(--neutral-darker-medium) !important;\n}\n\n.checked .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n.checked .track {\n  background: var(--color-base-light);\n}\n\n/* Estado \"disabled\" */\n.disabled .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.disabled .thumb {\n  background: var(--neutral-black-neutral-base) !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n  cursor: not-allowed;\n}\n\n.disabled.checked .track {\n  background: var(--neutral-black-neutral-pale);\n}\n\n.container.disabled .thumb:focus {\n  outline: none !important;\n  border-color: var(--neutral-black-neutral-pale) !important;\n}\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .thumb:hover {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n:not(.disabled):not(.checked) .thumb:active {\n  border-color: var(--color-dark);\n  background: var(--neutral-pale);\n}\n\n/* Estado hover para não disabled */\n:not(.disabled) .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border: 2px solid var(--neutral-darker-medium);\n  z-index: 1;\n}\n\n:not(.disabled) .checked .thumb:focus {\n  outline: 2px solid var(--info-base) !important;\n  border-color: var(--color-dark);\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/cura-tabs-button.entry.js

@@ -1,15 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-21683715.js';
-import { l as labelSizes } from './cura-tabs.definitions-a017126e.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-OdKytJIH.js';
+import { l as labelSizes } from './cura-tabs.definitions-CHcd-uKK.js';
+import './cura-theme-module-BPKQjAwN.js';
 
 const curaTabsButtonCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;display:flex;align-items:center;justify-content:center;min-width:120px;width:fit-content;border:2px solid var(--border-color);border-radius:4px}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.selected),:host a:not(.selected){border:2px solid var(--border-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border-color:var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button cura-badge-counter,:host a cura-badge-counter{margin-left:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{border-color:transparent;background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled:not(.selected),:host a.disabled:not(.selected){border-color:var(--neutral-dark)}";
-const CuraTabsButtonStyle0 = curaTabsButtonCss;
 
 const CuraTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tabSelect = createEvent(this, "tabSelect", 7);
-        this.name = undefined;
-        this.iconName = undefined;
+        this.tabSelect = createEvent(this, "tabSelect");
         this.counter = 1;
         this.selected = false;
         this.disabled = false;
@@ -95,8 +93,9 @@ const CuraTabs = class {
         "colorMode": ["setColors"]
     }; }
 };
-CuraTabs.style = CuraTabsButtonStyle0;
+CuraTabs.style = curaTabsButtonCss;
 
 export { CuraTabs as cura_tabs_button };
+//# sourceMappingURL=cura-tabs-button.entry.js.map
 
 //# sourceMappingURL=cura-tabs-button.entry.js.map

package/dist/esm/cura-tabs-button.entry.js.map

@@ -1 +1 @@
-{"file":"cura-tabs-button.entry.js","mappings":"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","names":[],"sources":["src/components/tabs/cura-tabs-button/cura-tabs-button.scss?tag=cura-tabs-button&encapsulation=shadow","src/components/tabs/cura-tabs-button/cura-tabs-button.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-width: 120px;\n      width: fit-content;\n\n      border: 2px solid var(--border-color);\n      border-radius: 4px;\n\n      &:not(.selected) {\n        border: 2px solid var(--border-color);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.dark {\n          border-color: var(--neutral-purewhite);\n        }\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:focus {\n        border-color: var(--primary-light);\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      cura-badge-counter {\n        margin-left: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        background-color: var(--background-color-selected);\n\n        &.disabled {\n          border-color: transparent;\n          background-color: var(--background-disabled-selected);\n        }\n      }\n\n      &.disabled {\n        &:not(.selected) {\n          border-color: var(--neutral-dark);\n        }\n\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-button',\n  styleUrl: 'cura-tabs-button.scss',\n  shadow: true,\n})\nexport class CuraTabs {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) counter?: number = 1;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },\n      { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },\n      {\n        name: '--background-disabled-selected',\n        theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',\n      },\n      {\n        name: '--border-color',\n        theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'neutral-black' : 'primary-lighter';\n    }\n\n    return this.selected ? 'neutral-purewhite' : 'primary-dark';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      selected: this.selected,\n      disabled: this.disabled,\n    };\n  }\n\n  getCounter() {\n    return <cura-badge-counter number={this.counter} color=\"primary\" disabled={this.disabled} class=\"badge-number\"></cura-badge-counter>;\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.counter > 0 && this.getCounter()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"cura-tabs-button.entry.js","sources":["src/components/tabs/cura-tabs-button/cura-tabs-button.scss?tag=cura-tabs-button&encapsulation=shadow","src/components/tabs/cura-tabs-button/cura-tabs-button.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-width: 120px;\n      width: fit-content;\n\n      border: 2px solid var(--border-color);\n      border-radius: 4px;\n\n      &:not(.selected) {\n        border: 2px solid var(--border-color);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.dark {\n          border-color: var(--neutral-purewhite);\n        }\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:focus {\n        border-color: var(--primary-light);\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      cura-badge-counter {\n        margin-left: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        background-color: var(--background-color-selected);\n\n        &.disabled {\n          border-color: transparent;\n          background-color: var(--background-disabled-selected);\n        }\n      }\n\n      &.disabled {\n        &:not(.selected) {\n          border-color: var(--neutral-dark);\n        }\n\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-button',\n  styleUrl: 'cura-tabs-button.scss',\n  shadow: true,\n})\nexport class CuraTabs {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) counter?: number = 1;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },\n      { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },\n      {\n        name: '--background-disabled-selected',\n        theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',\n      },\n      {\n        name: '--border-color',\n        theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'neutral-black' : 'primary-lighter';\n    }\n\n    return this.selected ? 'neutral-purewhite' : 'primary-dark';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      selected: this.selected,\n      disabled: this.disabled,\n    };\n  }\n\n  getCounter() {\n    return <cura-badge-counter number={this.counter} color=\"primary\" disabled={this.disabled} class=\"badge-number\"></cura-badge-counter>;\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.counter > 0 && this.getCounter()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,m8DAAm8D;;MCQh9D,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQ0C,QAAA,IAAO,CAAA,OAAA,GAAY,CAAC;AACpB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACxC,QAAA,IAAI,CAAA,IAAA,GAAiC,OAAO;AAC7B,QAAA,IAAS,CAAA,SAAA,GAAqB,OAAO;AAEpE,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAM,CAAA,MAAA,GAA2B,EAAE;AAkH7C;IA7GC,SAAS,GAAA;AACP,QAAA,MAAM,MAAM,GAAG;AACb,YAAA,EAAE,IAAI,EAAE,6BAA6B,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,eAAe,EAAE;AAC7G,YAAA,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,eAAe,GAAG,IAAI,EAAE;AAChG,YAAA;AACE,gBAAA,IAAI,EAAE,gCAAgC;AACtC,gBAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,eAAe,GAAG,eAAe;AACtE,aAAA;AACD,YAAA;AACE,gBAAA,IAAI,EAAE,gBAAgB;AACtB,gBAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,eAAe;AACrE,aAAA;SACF;AAED,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,IAAG;YACjB,IAAI,CAAC,CAAC,KAAK;gBAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;AAClF,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,IAAI,CAAC,MAAM,CAAE;;IAGlC,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,cAAc;AAExC,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE;YAC7B,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClC,gBAAA,OAAO,mBAAmB;;YAE5B,OAAO,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,iBAAiB;;QAG5D,OAAO,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,cAAc;;IAG7D,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,EAAE;AAC7B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;AAChD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAE5C,OAAO,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAc;;IAGvF,UAAU,GAAA;QACR,OAAO;AACL,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,UAAU,GAAA;QACR,OAAO,CAAA,CAAA,oBAAA,EAAA,EAAoB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,cAAc,EAAA,CAAsB;;IAGtI,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,GACN,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAC,MAAM,CACd,EAAA,EAAA,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EACtE,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EACtE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D;QAED,IAAI,CAAC,SAAS,EAAE;;IAGlB,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;IAGrB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAGtB,IAAA,WAAW,CAAC,CAAQ,EAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE;YAClB;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;IAG1C,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC;AAChE,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE;AAE7C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAe,cAAA,EAAA,IAAI,CAAC,QAAQ,EAAiB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAAA,EAC3E,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAE7C,IAAI,CAAC,OAAO,EAAE,EACf,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAA,EAC5E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACF,EACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAC/B,CACJ;;;;;;;;;;"}