@rededor/cura 0.5.2 → 0.5.3

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

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

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

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

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

@@ -0,0 +1 @@
+{"file":"cura-button-select.js","mappings":"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","names":[],"sources":["./src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","./src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-lighter);\n        box-shadow: inset 0px 0px 0px 2px var(--color-base);\n        .label {\n          color: var(--neutral-purewhite-black);\n        }\n      }\n\n      &:focus {\n        box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label() {\n      color: var(--primary-base);\n    }\n\n    // Children Elements\n    @include button-container() {\n      gap: 5px;\n    }\n\n    @mixin button-icon() {\n      margin: 0;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-base);\n      box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n      .label {\n        color: var(--neutral-purewhite-black);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n      .label {\n        color: var(--neutral-medium-primary-base);\n      }\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  getIcon() {\n    if (!this.selected) return '';\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <span class=\"label\"><slot></slot></span>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

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

package/dist/components/cura-checkbox.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formsSizes } from './cura-forms.definitions.js';
+import { d as defineCustomElement$4 } from './cura-icon2.js';
+import { d as defineCustomElement$3 } from './cura-label2.js';
+import { d as defineCustomElement$2 } from './cura-paragraph2.js';
+
+const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label-wrapper{-ms-flex-pack:end;justify-content:end}.position .message{text-align:right}.position .label{-ms-flex-order:1;order:1}.info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.label-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;gap:5px}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-base-neutral-medium);border-radius:4px;background:var(--neutral-lighter-neutral-purewhite);-ms-flex:1 0;flex:1 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size);-ms-flex:0 0 var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:-ms-flexbox;display:flex;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--primary-darker-neutral-white);border-color:var(--primary-base-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--primary-base-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--primary-base-neutral-white);border-color:var(--primary-base-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--primary-base-neutral-base) !important;background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--primary-base-neutral-base)}.checked .checkbox,.indeterminate .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover,.indeterminate .checkbox:hover{border-color:var(--color-light) !important;background:var(--color-lighter)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--primary-base-neutral-dark)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
+
+const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onchange = createEvent(this, "onchange", 7);
+    this.isDarkbackground = () => this.background === 'dark';
+    this.isDarkIconColor = () => this.iconColor === 'dark';
+    /**
+     * Handles click event on the checkbox.
+     * Emits onchange event with value, checked, and indeterminate states.
+     */
+    this.handleClick = () => {
+      if (this.disabled)
+        return;
+      this.indeterminate = false;
+      this.checked = !this.checked;
+      this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
+    };
+    this.checked = false;
+    this.indeterminate = false;
+    this.status = 'default';
+    this.disabled = false;
+    this.required = false;
+    this.label = undefined;
+    this.ontabindex = 0;
+    this.position = 'left';
+    this.value = undefined;
+    this.name = undefined;
+    this.size = 'medium';
+    this.background = 'light';
+    this.iconColor = 'dark';
+    this.color = 'accent';
+    this.styles = {};
+  }
+  sizeHandler() {
+    this.styles['--size'] = `${formsSizes[this.size].size}px`;
+    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+  }
+  /**
+   * Watches changes in color and background properties to update styles.
+   */
+  setColors() {
+    const colors = [
+      { name: '--color-base', background: `${this.color}-base` },
+      { name: '--color-lighter', background: `${this.color}-lighter` },
+      { name: '--color-light', background: `${this.color}-light` },
+      { name: '--color-dark', background: `${this.color}-dark` },
+      { name: '--info-base', background: 'info-base' },
+      { name: '--error-base', background: 'error-base' },
+      { name: '--success-lighter', background: 'success-lighter' },
+      { name: '--success-base', background: 'success-base' },
+      { name: '--success-dark', background: 'success-dark' },
+      { name: '--error-lighter', background: 'error-lighter' },
+      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },
+      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
+      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
+      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },
+      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },
+      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
+      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
+    ];
+    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));
+    this.styles = Object.assign({}, this.styles);
+  }
+  connectedCallback() {
+    this.sizeHandler();
+    this.setColors();
+  }
+  /**
+   * Retrieves classes based on component state for conditional styling.
+   */
+  getClasses() {
+    const classes = {};
+    classes['container'] = true;
+    classes['checked'] = this.checked;
+    classes['disabled'] = this.disabled;
+    classes['indeterminate'] = this.indeterminate;
+    classes['position'] = this.position === 'right';
+    classes[this.status] = true;
+    return classes;
+  }
+  /**
+ * Assigns color based on status and background theme.
+ * @param defaultColor Default color.
+ */
+  assignColor(type) {
+    if (this.disabled)
+      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
+    const statusColors = {
+      success: {
+        icon: 'success-dark',
+        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
+        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
+      },
+      error: {
+        icon: 'error-dark',
+        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
+        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
+      },
+      default: {
+        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',
+        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
+        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
+      }
+    };
+    return statusColors[this.status][type];
+  }
+  /**
+   * Retrieves icon element based on checkbox state.
+   */
+  getIcon() {
+    const iconName = this.indeterminate ? 'minus' : "check";
+    const iconColor = this.assignColor('icon');
+    const iconSize = this.size === 'large' ? 20 : "micro";
+    return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("div", { class: "checkbox", onClick: this.handleClick, tabIndex: this.ontabindex }, h("input", { type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["setColors"],
+    "background": ["setColors", "assignColor"],
+    "iconColor": ["assignColor"]
+  }; }
+  static get style() { return curaCheckboxCss; }
+}, [1, "cura-checkbox", {
+    "checked": [1540],
+    "indeterminate": [1540],
+    "status": [1537],
+    "disabled": [516],
+    "required": [516],
+    "label": [513],
+    "ontabindex": [514],
+    "position": [513],
+    "value": [513],
+    "name": [513],
+    "size": [513],
+    "background": [1],
+    "iconColor": [1, "icon-color"],
+    "color": [1],
+    "styles": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cura-checkbox", "cura-icon", "cura-label", "cura-paragraph"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cura-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CuraCheckbox$1);
+      }
+      break;
+    case "cura-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "cura-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "cura-paragraph":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CuraCheckbox = CuraCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraCheckbox, defineCustomElement };
+
+//# sourceMappingURL=cura-checkbox.js.map

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

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

package/dist/components/cura-forms.definitions.js

@@ -0,0 +1,18 @@
+const formsSizes = {
+  "large": {
+    size: 32,
+    gap: 16,
+  },
+  "medium": {
+    size: 24,
+    gap: 12,
+  },
+  "small": {
+    size: 20,
+    gap: 8,
+  },
+};
+
+export { formsSizes as f };
+
+//# sourceMappingURL=cura-forms.definitions.js.map

package/dist/components/cura-forms.definitions.js.map

@@ -0,0 +1 @@
+{"file":"cura-forms.definitions.js","mappings":"MAAa,UAAU,GAAG;EACxB,OAAO,EAAE;IACP,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,EAAE;GACR;EACD,QAAQ,EAAE;IACR,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,EAAE;GACR;EACD,OAAO,EAAE;IACP,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,CAAC;GACP;;;;;","names":[],"sources":["./src/components/forms/cura-forms.definitions.tsx"],"sourcesContent":["export const formsSizes = {\n  \"large\": {\n    size: 32,\n    gap: 16,\n  },\n  \"medium\": {\n    size: 24,\n    gap: 12,\n  },\n  \"small\": {\n    size: 20,\n    gap: 8,\n  },\n};\n"],"version":3}

package/dist/components/cura-heading.js

@@ -1,103 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i),:host ::slotted(em){font-weight:var(--font-weight-medium)}";
-
-const CuraHeading$1 = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.theme = window.CuraAPI.theme;
-    this.level = 1;
-    this.size = 'medium';
-    this.weight = 'regular';
-    this.spotColor = 'accent-dark';
-    this.color = undefined;
-    this.marginBlock = '1.25em';
-    this.lineHeight = '130%';
-    this.styles = {};
-  }
-  handleChangeColor() {
-    this.setColors();
-  }
-  connectedCallback() {
-    this.setFontProperties();
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    classes[`${this.weight.toLowerCase()}-weight`] = true;
-    return classes;
-  }
-  setFontProperties() {
-    this.weights = this.theme.fonts.getWeights();
-    this.fontSizeBase = this.theme.fonts.getSize();
-    this.styles = {
-      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
-      '--font-weight-regular': this.weights.regular,
-      '--font-weight-medium': this.weights.medium,
-      '--font-weight-bold': this.weights.bold,
-      '--font-weight-black': this.weights.black
-    };
-  }
-  hostCSSProperties() {
-    return {
-      '--margin-block': this.marginBlock,
-      '--font-size-base': this.fontSizeBase,
-      '--line-height': this.lineHeight
-    };
-  }
-  setColors() {
-    const fontColor = this.color
-      ? this.theme.colors.getColor(this.color)
-      : this.theme.fonts.getColor();
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
-  }
-  getHeadingTag() {
-    const tags = {
-      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
-    };
-    return tags[`${this.level}`] || tags['default'];
-  }
-  render() {
-    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "color": ["handleChangeColor"],
-    "spotColor": ["handleChangeColor"]
-  }; }
-  static get style() { return curaHeadingCss; }
-}, [1, "cura-heading", {
-    "level": [514],
-    "size": [513],
-    "weight": [513],
-    "spotColor": [513, "spot-color"],
-    "color": [1],
-    "marginBlock": [513, "margin-block"],
-    "lineHeight": [513, "line-height"],
-    "styles": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-heading"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-heading":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraHeading$1);
-      }
-      break;
-  } });
-}
+import { C as CuraHeading$1, d as defineCustomElement$1 } from './cura-heading2.js';
 
 const CuraHeading = CuraHeading$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"cura-heading.js","mappings":"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","names":["CuraHeading"],"sources":["./src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","./src/components/text/cura-heading/cura-heading.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  h1, h2, h3, h4, h5, h6 {\n    font-family: var(--font-family);\n    font-size: 1.714em;\n    font-weight: var(--font-weight-regular);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0px;\n\n    &.bold-weight {\n      font-weight: var(--font-weight-medium);\n    }\n\n    &.large {\n      font-size: 2.071em;\n      letter-spacing: -0.58px;\n    }\n\n    &.small {\n      font-size: 1.214em;\n      line-height: calc(var(--line-height) + 20%);\n\n      &.bold-weight, ::slotted(b), ::slotted(strong) {\n        font-weight: var(--font-weight-bold);\n      }\n    }\n\n    &.xsmall {\n      font-size: 0.714em;\n      font-weight: var(--font-weight-medium);\n      letter-spacing: 0.6px;\n\n      &.bold-weight, ::slotted(b), ::slotted(strong) {\n        font-weight: var(--font-weight-bold);\n      }\n    }\n\n  }\n\n  @include medium-large() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 2em;\n\n      &.large {\n        font-size: 2.357em;\n        letter-spacing: -0.66px;\n      }\n\n      &.small {\n        font-size: 1.357em;\n      }\n\n      &.xsmall {\n        font-size: 0.857em;\n        line-height: calc(var(--line-height) + 3%);\n        letter-spacing: 0.72px;\n      }\n\n    }\n  }\n\n  @include xlarge-only() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 2.5em;\n      line-height: calc(var(--line-height) + 5%);\n      letter-spacing: -0.82px;\n\n      &.large {\n        font-size: 2.929em;\n      }\n\n      &.small {\n        font-size: 1.714em;\n        line-height: calc(var(--line-height) + 30%);\n        letter-spacing: 0%;\n      }\n\n      &.xsmall {\n        font-size: 1em;\n        line-height: calc(var(--line-height) + 12.857%);\n        letter-spacing: 0.28px;\n      }\n    }\n  }\n\n  ::slotted(b), ::slotted(strong) {\n    font-weight: var(--font-weight-medium);\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n    cursor: pointer;\n  }\n\n  ::slotted(u) {\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(abbr) {\n    color: var(--color-link);\n    text-decoration: underline dashed 1px var(--color-link);\n    text-underline-offset: 10%;\n    cursor: default;\n  }\n\n  ::slotted(i), ::slotted(em) {\n    font-weight: var(--font-weight-medium);\n  }\n\n}\n","import { Component, Host, h, Prop, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6  = 1;\n\n  /**\n   * Heading style size.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n  /**\n   * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '130%';\n\n  /**\n   * Host element <cura-heading>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.size.toLowerCase()] =  true;\n    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-heading.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}