@rededor/cura 1.7.0 → 1.8.0

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

@@ -1 +1 @@
-{"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect"],"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,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: '';\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-border);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      flex-direction: row !important;\n\n      .badge-number {\n        margin-left: 10px;\n      }\n    }\n\n    @include button-icon();\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ reflect: true, mutable: true }) counter: number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light' = 'light';\n  @Prop() color: string = 'primary';\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n  @State() hovered = false;\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  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\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  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  getColorBagdeNumber() {\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium';\n    }\n\n    return `${this.color}-darker`;\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    if (this.iconPosition === 'right') {\n      return;\n    }\n\n    return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-counter\n        number={this.counter}\n        color={this.color}\n        disabled={this.disabled || null}\n        class=\"badge-number\">\n      </cura-badge-counter>\n    );\n  }\n\n  getCheckIconRight() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></cura-icon>;\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) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host role=\"button\"\n      aria-disabled={this.disabled}\n      aria-pressed={this.selected}>\n        <button\n          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        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n            {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect","__stencil_proxyCustomElement","HTMLElement"],"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,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: '';\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-border);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      flex-direction: row !important;\n\n      .badge-number {\n        margin-left: 10px;\n      }\n    }\n\n    @include button-icon();\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ reflect: true, mutable: true }) counter: number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light' = 'light';\n  @Prop() color: string = 'primary';\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n  @State() hovered = false;\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  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\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  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  getColorBagdeNumber() {\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium';\n    }\n\n    return `${this.color}-darker`;\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    if (this.iconPosition === 'right') {\n      return;\n    }\n\n    return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-counter\n        number={this.counter}\n        color={this.color}\n        disabled={this.disabled || null}\n        class=\"badge-number\">\n      </cura-badge-counter>\n    );\n  }\n\n  getCheckIconRight() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></cura-icon>;\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) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host role=\"button\"\n      aria-disabled={this.disabled}\n      aria-pressed={this.selected}>\n        <button\n          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        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n            {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,8 +1,9 @@
-import { C as CuraButtonTransparent$1, d as defineCustomElement$1 } from './cura-button-transparent2.js';
+import { C as CuraButtonTransparent$1, d as defineCustomElement$1 } from './p-BRDqwZ4N.js';
 
 const CuraButtonTransparent = CuraButtonTransparent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraButtonTransparent, defineCustomElement };
+//# sourceMappingURL=cura-button-transparent.js.map
 
 //# sourceMappingURL=cura-button-transparent.js.map

package/dist/components/cura-button.js

@@ -1,32 +1,70 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { l as labelSizes } from './cura-button.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-loader-circle2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
+import { l as labelSizes } from './p-BSI2FkNn.js';
+import { d as defineCustomElement$4 } from './p-B5aO1chh.js';
+import { d as defineCustomElement$3 } from './p-DR1RHrEX.js';
+import { d as defineCustomElement$2 } from './p-Dqm2sAwv.js';
 
 const curaButtonCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}: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:var(--color-base-neutral-purewhite);box-sizing:border-box;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button::before,:host a::before{content:\"\";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:2px solid transparent;border-radius:var(--border-radius)}:host button:not(.disabled):not(.isLoading)::before,:host a:not(.disabled):not(.isLoading)::before{border:2px solid var(--color-base-color-light)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background:var(--color-base-color-light);box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host button:not(.disabled):not(.isLoading):hover::before,:host a:not(.disabled):not(.isLoading):hover::before{border-color:var(--color-dark-color-base)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark-color-light)}:host button:not(.isLoading):not(.disabled):active::before,:host a:not(.isLoading):not(.disabled):active::before{border-color:var(--color-dark-color-light)}:host button:hover,:host a:hover{box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}:host button.medium:hover,:host a.medium:hover{box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}:host button.small:hover,:host a.small:hover{box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}:host button:active,:host button.disabled:hover,:host button.isLoading:hover,:host a:active,:host a.disabled:hover,:host a.isLoading:hover{box-shadow:none !important}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px);min-height:calc(var(--cura-spacing-base) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px);min-height:calc(var(--cura-spacing-base) * 10px)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px);min-height:calc(var(--cura-spacing-base) * 8px)}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--cura-spacing-base) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--cura-spacing-base) * 3px)}:host button.medium.icon-left cura-icon,:host button.small.icon-left cura-icon,:host a.medium.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.medium.icon-right cura-icon,:host button.small.icon-right cura-icon,:host a.medium.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--cura-spacing-base) * 2px)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-pale-neutral-black)}:host button.icon-only,:host a.icon-only{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.icon-only cura-label,:host a.icon-only cura-label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--cura-spacing-base) * 3px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--cura-spacing-base) * 2px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
-const CuraButtonStyle0 = curaButtonCss;
 
-const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends HTMLElement {
+const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.internals = this.attachInternals();
+        /**
+         * Button type: button (default) | submit | reset
+         */
         this.type = 'button';
+        /**
+         * Button size: small | medium | large (default)
+         */
         this.size = 'large';
+        /**
+         * Disabled state. Boolean.
+         */
         this.disabled = false;
+        /**
+         * Loading state. Boolean.
+         */
         this.isLoading = false;
-        this.iconName = undefined;
+        /**
+         * Custom iconset if needed.
+         */
         this.iconset = 'default';
+        /**
+         * Icon position: left (default) | right.
+         */
         this.iconPosition = 'left';
+        /**
+         * Set button to FAB/icon only.
+         */
         this.iconOnly = false;
-        this.href = undefined;
+        /**
+         * Set target if link.
+         */
         this.target = "_self";
+        /**
+         * Color base from color scheme. Default: accent.
+         */
         this.color = 'accent';
+        /**
+        * Set the background color to dark or light.
+        */
         this.background = 'light';
+        /**
+        * Set the font color to dark or light.
+        */
         this.fontColor = 'dark';
+        /**
+         * Set text aligment for the button label.
+         * Vales: left (default) | center | right.
+         */
         this.textAlign = 'left';
+        /**
+         * Justify icons and label inside the button.
+         * Vales: false (default) | true.
+         */
         this.justify = false;
         this.styles = {};
         this.hovered = false;
@@ -106,7 +144,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
         "background": ["setColors"],
         "color": ["setColors"]
     }; }
-    static get style() { return CuraButtonStyle0; }
+    static get style() { return curaButtonCss; }
 }, [65, "cura-button", {
         "type": [513],
         "size": [513],
@@ -162,5 +200,6 @@ const CuraButton = CuraButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraButton, defineCustomElement };
+//# sourceMappingURL=cura-button.js.map
 
 //# sourceMappingURL=cura-button.js.map

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

@@ -1 +1 @@
-{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--color-base-neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid transparent;\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled) {\n        &:not(.isLoading)::before {\n          border: 2px solid var(--color-base-color-light);\n        }\n\n        &:hover {\n          background: var(--color-base-color-light);\n          box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n        }\n        &:not(.isLoading):hover::before {\n          border-color: var(--color-dark-color-base);\n        }\n      }\n\n      &:not(.isLoading):not(.disabled):active {\n        background-color: var(--color-dark-color-light);\n      }\n      &:not(.isLoading):not(.disabled):active::before {\n        border-color: var(--color-dark-color-light);\n      }\n    }\n\n    @include button-shadow-behavior();\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-pale-neutral-black);\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\n\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host role={ this.href ? 'link' : this.type }\n        aria-disabled={this.disabled}>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button.js","mappings":"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","names":["CuraButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","src/components/buttons/cura-button/cura-button.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--color-base-neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid transparent;\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled) {\n        &:not(.isLoading)::before {\n          border: 2px solid var(--color-base-color-light);\n        }\n\n        &:hover {\n          background: var(--color-base-color-light);\n          box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n        }\n        &:not(.isLoading):hover::before {\n          border-color: var(--color-dark-color-base);\n        }\n      }\n\n      &:not(.isLoading):not(.disabled):active {\n        background-color: var(--color-dark-color-light);\n      }\n      &:not(.isLoading):not(.disabled):active::before {\n        border-color: var(--color-dark-color-light);\n      }\n    }\n\n    @include button-shadow-behavior();\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-pale-neutral-black);\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\n\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition?.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : 'neutral-black')\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host role={ this.href ? 'link' : this.type }\n        aria-disabled={this.disabled}>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label class=\"label\" size={labelSize} lineHeight='normal' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-calendar.js

@@ -1,8 +1,9 @@
-import { C as CuraCalendar$1, d as defineCustomElement$1 } from './cura-calendar2.js';
+import { C as CuraCalendar$1, d as defineCustomElement$1 } from './p-e-P5qR3J.js';
 
 const CuraCalendar = CuraCalendar$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraCalendar, defineCustomElement };
+//# sourceMappingURL=cura-calendar.js.map
 
 //# sourceMappingURL=cura-calendar.js.map

package/dist/components/cura-card.js

@@ -1,18 +1,46 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
 
 const curaCardCss = ":host{display:block;box-sizing:border-box;font-size:var(--font-size);font-family:var(--font-family)}:host ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--font-size);font-family:var(--font-family)}a{display:block;text-decoration:none !important;color:inherit}.solid{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-base);border-radius:12px;overflow:hidden;padding:0px;box-shadow:none}.solid ::slotted(*){border-radius:0}.solid.hasPadding{padding:20px}.solid.hasPadding ::slotted(*){border-radius:4px !important}.solid.hasShadow{border:2px solid var(--neutral-base);box-shadow:0px 1px 4px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base);border-radius:12px;padding:0px;box-shadow:none;cursor:pointer}.solid.cardLink ::slotted(*){border-radius:0px}.solid.cardLink:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasPadding{padding:20px}.solid.cardLink.hasPadding ::slotted(*){border-radius:4px !important}.solid.cardLink.hasPadding:hover{border:2px solid var(--primary-lighter) !important}.solid.cardLink.hasShadow{border:2px solid var(--primary-base);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}.solid.cardLink:not(.hasPadding).hasShadow ::slotted(*){border-radius:12px !important}.solid.cardLink.dark{background-color:var(--neutral-purewhite);border:2px solid var(--neutral-purewhite)}.solid.cardLink.dark:hover{border:2px solid var(--primary-lighter)}.transparent{background-color:transparent;border:0;border-radius:12px;padding:0px;overflow:hidden}.transparent ::slotted(*){border-radius:12px}.transparent.hasPadding{padding:20px}.transparent.hasPadding ::slotted(*){border-radius:4px}.transparent.cardLink{background-color:transparent;border:2px solid var(--primary-base);overflow:hidden;border-radius:12px;padding:0px;box-shadow:none}.transparent.cardLink ::slotted(*){border-radius:0px !important}.transparent.cardLink:hover{border:2px solid var(--primary-lighter) !important}.transparent.cardLink.light{background-color:var(--neutral-purewhite);border:2px solid var(--primary-base)}.transparent.cardLink.light ::slotted(*){border-radius:12px !important}.transparent.cardLink.light:hover{border-color:var(--primary-lighter) !important}.transparent.cardLink.dark{background-color:transparent;border:2px solid var(--neutral-purewhite)}.transparent.cardLink.dark:hover{border:0}.transparent.cardLink.hasPadding{padding:20px}.transparent.cardLink.hasPadding ::slotted(*){border-radius:4px !important}";
-const CuraCardStyle0 = curaCardCss;
 
-const CuraCard$1 = /*@__PURE__*/ proxyCustomElement(class CuraCard extends HTMLElement {
+const CuraCard$1 = /*@__PURE__*/ proxyCustomElement(class CuraCard extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Determines whether the card should have padding.
+         * @type {boolean}
+         * @default false
+         */
         this.hasPadding = true;
+        /**
+         * Determines whether the card should have a shadow effect.
+         * @type {boolean}
+         * @default false
+         */
         this.hasShadow = false;
+        /**
+         * Sets the type of the card background.
+         * - 'solid': A solid background.
+         * - 'transparent': A transparent background.
+         * @type {'solid' | 'transparent'}
+         * @default 'solid'
+         */
         this.type = 'solid';
+        /**
+         * Sets the color mode of the card.
+         * - 'light': Light mode for the card.
+         * - 'dark': Dark mode for the card.
+         * @type {'light' | 'dark'}
+         * @default 'light'
+         */
         this.colorMode = 'light';
-        this.href = undefined;
+        /**
+         * The target attribute for the link.
+         * Applicable only if `href` is set.
+         * @type {string}
+         * @default '_self'
+         */
         this.target = '_self';
         this.styles = {};
     }
@@ -43,7 +71,7 @@ const CuraCard$1 = /*@__PURE__*/ proxyCustomElement(class CuraCard extends HTMLE
     render() {
         return (h(Host, { key: '9478ce754c108db722dbc5bcbb00a0884b6c6f38', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
     }
-    static get style() { return CuraCardStyle0; }
+    static get style() { return curaCardCss; }
 }, [1, "cura-card", {
         "hasPadding": [1028, "has-padding"],
         "hasShadow": [1028, "has-shadow"],
@@ -71,5 +99,6 @@ const CuraCard = CuraCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraCard, defineCustomElement };
+//# sourceMappingURL=cura-card.js.map
 
 //# sourceMappingURL=cura-card.js.map

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

@@ -1 +1 @@
-{"file":"cura-card.js","mappings":"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","names":["CuraCard"],"sources":["src/components/cura-card/cura-card.scss?tag=cura-card&encapsulation=shadow","src/components/cura-card/cura-card.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  ::slotted(*) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n \n}\n\na {\n  display: block;\n  text-decoration: none !important;\n  color: inherit;\n}\n.solid {\n  background-color: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-base);\n  border-radius: 12px;\n  overflow: hidden;\n  padding: 0px;\n  box-shadow: none;\n\n  ::slotted(*) {\n   \n    border-radius: 0 ;\n  }\n  &.hasPadding {\n    padding: 20px;\n    ::slotted(*) {\n      border-radius: 4px !important;\n    }\n  }\n\n  &.hasShadow {\n    border: 2px solid var(--neutral-base);\n\n    @include shadow-level2(--neutral-black-shadow);\n  }\n\n  &.cardLink {\n    background-color: var(--neutral-purewhite);\n    border: 2px solid var(--primary-base);\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    cursor: pointer;\n\n    ::slotted(*) {\n      border-radius: 0px;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n    &.hasPadding {\n      padding: 20px;\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n      &:hover {\n        border: 2px solid var(--primary-lighter) !important;\n      }\n    }\n\n    &.hasShadow {\n      border: 2px solid var(--primary-base);\n\n      @include shadow-level3(--neutral-black-shadow);\n    }\n    &:not(.hasPadding).hasShadow {\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n    }\n\n    &.dark {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--neutral-purewhite);\n      &:hover {\n        border: 2px solid var(--primary-lighter);\n      }\n    }\n  }\n}\n\n.transparent {\n  background-color: transparent;\n  border: 0;\n  border-radius: 12px;\n  padding: 0px;\n  overflow: hidden;\n  ::slotted(*) {\n    border-radius: 12px;\n  }\n\n  &.hasPadding {\n    padding: 20px;\n\n    ::slotted(*) {\n      border-radius: 4px;\n    }\n  }\n\n  &.cardLink {\n    background-color: transparent;\n    border: 2px solid var(--primary-base);\n    overflow: hidden;\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    ::slotted(*) {\n      border-radius: 0px !important;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n\n    &.light {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--primary-base);\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n      &:hover {\n        border-color: var(--primary-lighter) !important;\n      }\n    }\n    &.dark {\n      background-color: transparent;\n\n      border: 2px solid var(--neutral-purewhite);\n\n      &:hover {\n        border: 0;\n      }\n    }\n    &.hasPadding {\n      padding: 20px;\n\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-card',\n  styleUrl: 'cura-card.scss',\n  shadow: true,\n})\nexport class CuraCard {\n  /**\n   * Determines whether the card should have padding.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasPadding: boolean = true;\n\n  /**\n   * Determines whether the card should have a shadow effect.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasShadow: boolean = false;\n\n  /**\n   * Sets the type of the card background.\n   * - 'solid': A solid background.\n   * - 'transparent': A transparent background.\n   * @type {'solid' | 'transparent'}\n   * @default 'solid'\n   */\n  @Prop({ mutable: true }) type: 'solid' | 'transparent' = 'solid';\n\n  /**\n   * Sets the color mode of the card.\n   * - 'light': Light mode for the card.\n   * - 'dark': Dark mode for the card.\n   * @type {'light' | 'dark'}\n   * @default 'light'\n   */\n  @Prop({ mutable: true }) colorMode: 'light' | 'dark' = 'light';\n\n  /**\n   * The URL that the card should link to (if set).\n   * If not set, the card acts as a normal card.\n   * @type {string | undefined}\n   */\n  @Prop({ mutable: true, reflect: true }) href?: string;\n\n  /**\n   * The target attribute for the link.\n   * Applicable only if `href` is set.\n   * @type {string}\n   * @default '_self'\n   */\n  @Prop({ reflect: true }) target: string = '_self';\n\n  @State() styles: any = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);\n    this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.type] = true;\n    classes[`cardLink`] = this.href;\n    classes[this.colorMode] = true;\n    classes[`hasPadding`] = this.hasPadding;\n    classes[`hasShadow`] = this.hasShadow;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host role={this.href ? 'link' : 'div'}>\n        {this.href ? (\n          <a class={this.getClasses()} target={this.target} style={this.styles} href={this.href}>\n            <slot></slot>\n          </a>\n        ) : (\n          <div class={this.getClasses()} style={this.styles}>\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-card.js","mappings":"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","names":["CuraCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/cura-card/cura-card.scss?tag=cura-card&encapsulation=shadow","src/components/cura-card/cura-card.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  ::slotted(*) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--font-size);\n    font-family: var(--font-family);\n  }\n \n}\n\na {\n  display: block;\n  text-decoration: none !important;\n  color: inherit;\n}\n.solid {\n  background-color: var(--neutral-purewhite);\n  border: 2px solid var(--neutral-base);\n  border-radius: 12px;\n  overflow: hidden;\n  padding: 0px;\n  box-shadow: none;\n\n  ::slotted(*) {\n   \n    border-radius: 0 ;\n  }\n  &.hasPadding {\n    padding: 20px;\n    ::slotted(*) {\n      border-radius: 4px !important;\n    }\n  }\n\n  &.hasShadow {\n    border: 2px solid var(--neutral-base);\n\n    @include shadow-level2(--neutral-black-shadow);\n  }\n\n  &.cardLink {\n    background-color: var(--neutral-purewhite);\n    border: 2px solid var(--primary-base);\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    cursor: pointer;\n\n    ::slotted(*) {\n      border-radius: 0px;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n    &.hasPadding {\n      padding: 20px;\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n      &:hover {\n        border: 2px solid var(--primary-lighter) !important;\n      }\n    }\n\n    &.hasShadow {\n      border: 2px solid var(--primary-base);\n\n      @include shadow-level3(--neutral-black-shadow);\n    }\n    &:not(.hasPadding).hasShadow {\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n    }\n\n    &.dark {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--neutral-purewhite);\n      &:hover {\n        border: 2px solid var(--primary-lighter);\n      }\n    }\n  }\n}\n\n.transparent {\n  background-color: transparent;\n  border: 0;\n  border-radius: 12px;\n  padding: 0px;\n  overflow: hidden;\n  ::slotted(*) {\n    border-radius: 12px;\n  }\n\n  &.hasPadding {\n    padding: 20px;\n\n    ::slotted(*) {\n      border-radius: 4px;\n    }\n  }\n\n  &.cardLink {\n    background-color: transparent;\n    border: 2px solid var(--primary-base);\n    overflow: hidden;\n    border-radius: 12px;\n    padding: 0px;\n    box-shadow: none;\n    ::slotted(*) {\n      border-radius: 0px !important;\n    }\n    &:hover {\n      border: 2px solid var(--primary-lighter) !important;\n    }\n\n    &.light {\n      background-color: var(--neutral-purewhite);\n      border: 2px solid var(--primary-base);\n      ::slotted(*) {\n        border-radius: 12px !important;\n      }\n      &:hover {\n        border-color: var(--primary-lighter) !important;\n      }\n    }\n    &.dark {\n      background-color: transparent;\n\n      border: 2px solid var(--neutral-purewhite);\n\n      &:hover {\n        border: 0;\n      }\n    }\n    &.hasPadding {\n      padding: 20px;\n\n      ::slotted(*) {\n        border-radius: 4px !important;\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-card',\n  styleUrl: 'cura-card.scss',\n  shadow: true,\n})\nexport class CuraCard {\n  /**\n   * Determines whether the card should have padding.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasPadding: boolean = true;\n\n  /**\n   * Determines whether the card should have a shadow effect.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop({ mutable: true }) hasShadow: boolean = false;\n\n  /**\n   * Sets the type of the card background.\n   * - 'solid': A solid background.\n   * - 'transparent': A transparent background.\n   * @type {'solid' | 'transparent'}\n   * @default 'solid'\n   */\n  @Prop({ mutable: true }) type: 'solid' | 'transparent' = 'solid';\n\n  /**\n   * Sets the color mode of the card.\n   * - 'light': Light mode for the card.\n   * - 'dark': Dark mode for the card.\n   * @type {'light' | 'dark'}\n   * @default 'light'\n   */\n  @Prop({ mutable: true }) colorMode: 'light' | 'dark' = 'light';\n\n  /**\n   * The URL that the card should link to (if set).\n   * If not set, the card acts as a normal card.\n   * @type {string | undefined}\n   */\n  @Prop({ mutable: true, reflect: true }) href?: string;\n\n  /**\n   * The target attribute for the link.\n   * Applicable only if `href` is set.\n   * @type {string}\n   * @default '_self'\n   */\n  @Prop({ reflect: true }) target: string = '_self';\n\n  @State() styles: any = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`);\n    this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.type] = true;\n    classes[`cardLink`] = this.href;\n    classes[this.colorMode] = true;\n    classes[`hasPadding`] = this.hasPadding;\n    classes[`hasShadow`] = this.hasShadow;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host role={this.href ? 'link' : 'div'}>\n        {this.href ? (\n          <a class={this.getClasses()} target={this.target} style={this.styles} href={this.href}>\n            <slot></slot>\n          </a>\n        ) : (\n          <div class={this.getClasses()} style={this.styles}>\n            <slot></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-checkbox.js

@@ -1,46 +1,98 @@
-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';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
+import { f as formsSizes } from './p-Dot54hbB.js';
+import { d as defineCustomElement$4 } from './p-B5aO1chh.js';
+import { d as defineCustomElement$3 } from './p-DR1RHrEX.js';
+import { d as defineCustomElement$2 } from './p-DI4g-ZH4.js';
 
 const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;box-sizing:border-box;min-width:0}.container{display:flex;align-items:center;flex-direction:row-reverse;justify-content:start;gap:var(--gap);cursor:pointer}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column;overflow:hidden}.label.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;min-width:0;max-width:100%}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
-const CuraCheckboxStyle0 = curaCheckboxCss;
 
-const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends HTMLElement {
+const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.onchange = createEvent(this, "onchange", 7);
+        this.onchange = createEvent(this, "onchange");
         this.internals = this.attachInternals();
-        this.isDarkBackground = () => this.background === 'dark';
-        this.isDarkIconColor = () => this.iconColor === 'dark';
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            this.indeterminate = false;
-            this.checked = !this.checked;
-            this.internals.setFormValue(this.value);
-            this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
-        };
+        /**
+         * Reflects the checked state of the checkbox.
+         * Mutable property allowing state change.
+         */
         this.checked = false;
+        /**
+         * Reflects the indeterminate state of the checkbox.
+         * Mutable property allowing state change.
+         */
         this.indeterminate = false;
+        /**
+         * Status of the checkbox.
+         * Can be 'error', 'success', or 'default'.
+         */
         this.status = 'default';
+        /**
+         * Reflects the disabled state of the checkbox.
+         */
         this.disabled = false;
+        /**
+         * Reflects the required state of the checkbox.
+         */
         this.required = false;
-        this.label = undefined;
+        /**
+         * Specifies the tabindex of the checkbox.
+         */
         this.ontabindex = 0;
+        /**
+         * Position of the label relative to the checkbox.
+         * Can be 'left' or 'right'.
+         */
         this.position = 'left';
-        this.value = undefined;
-        this.name = undefined;
+        /**
+         * Size of the checkbox.
+         * Can be 'small', 'medium', or 'large'.
+         */
         this.size = 'medium';
+        /**
+         * Background theme of the checkbox.
+         * Can be 'dark' or 'light'.
+         */
         this.background = 'light';
+        /**
+         * iconColor theme of the checkbox.
+         * Can be 'dark' or 'light'.
+         */
         this.iconColor = 'dark';
+        /**
+         * Color theme of the checkbox.
+         */
         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.isDarkBackground = () => this.background === 'dark';
+        this.isDarkIconColor = () => this.iconColor === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.indeterminate = false;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
+        };
     }
     sizeHandler() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
@@ -171,7 +223,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         "background": ["setColors", "assignColor"],
         "iconColor": ["assignColor"]
     }; }
-    static get style() { return CuraCheckboxStyle0; }
+    static get style() { return curaCheckboxCss; }
 }, [65, "cura-checkbox", {
         "checked": [1540],
         "indeterminate": [1540],
@@ -229,5 +281,6 @@ const CuraCheckbox = CuraCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CuraCheckbox, defineCustomElement };
+//# sourceMappingURL=cura-checkbox.js.map
 
 //# sourceMappingURL=cura-checkbox.js.map