@rededor/cura 1.6.1-alpha.8 → 1.7.0

package/dist/components/cura-tabs-group.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const curaTabsGroupCss = ":host{display:flex;gap:var(--gap)}:host(.border-bottom){position:relative}:host(.border-bottom)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border-color);z-index:0}::slotted(cura-tabs),::slotted(cura-tabs-transparent){position:relative;z-index:1}";
+const CuraTabsGroupStyle0 = curaTabsGroupCss;
+
+const CuraTabsGroup$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabsGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabChange = createEvent(this, "tabChange", 7);
+        this.gap = 0;
+        this.borderBottom = true;
+        this.colorMode = 'light';
+        this.styles = {};
+    }
+    handleTabSelect(ev) {
+        this.updateSelectedTab(ev.detail.name);
+    }
+    updateSelectedTab(value) {
+        const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');
+        tabs.forEach((tab) => {
+            tab.selected = tab.name === value;
+        });
+    }
+    getClasses() {
+        return {
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'), '--gap': `${this.gap}px` });
+    }
+    render() {
+        return (h(Host, { key: 'fb6a6ae52fd5bdfb8c3978a75f26be87479ccafa', role: "tablist", style: this.styles, class: this.getClasses() }, h("slot", { key: 'afca97b27c8359f8236331257e4db41f1332e071' })));
+    }
+    get host() { return this; }
+    static get style() { return CuraTabsGroupStyle0; }
+}, [1, "cura-tabs-group", {
+        "gap": [514],
+        "borderBottom": [1540, "border-bottom"],
+        "colorMode": [1537, "color-mode"],
+        "styles": [32]
+    }, [[0, "tabSelect", "handleTabSelect"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabsGroup$1);
+            }
+            break;
+    } });
+}
+
+const CuraTabsGroup = CuraTabsGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabsGroup, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs-group.js.map

package/dist/components/cura-tabs-group.js.map

@@ -0,0 +1 @@
+{"file":"cura-tabs-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sSAAsS,CAAC;AAChU,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;mBACe,CAAC;4BACwB,IAAI;yBACE,OAAO;sBAEnC,EAAE;;IAO5C,eAAe,CAAC,EAAiC;QAC/C,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACxC;IAED,iBAAiB,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;QAE9F,IAAI,CAAC,OAAO,CAAC,CAAC,GAAwB;YACpC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC;SACnC,CAAC,CAAC;KACJ;IAED,UAAU;QACR,OAAO;YACL,eAAe,EAAE,IAAI,CAAC,YAAY;SACnC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,EACpH,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,GACzB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraTabsGroup"],"sources":["src/components/tabs/cura-tabs-group/cura-tabs-group.scss?tag=cura-tabs-group&encapsulation=shadow","src/components/tabs/cura-tabs-group/cura-tabs-group.tsx"],"sourcesContent":[":host {\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(.border-bottom) {\n  position: relative;\n}\n\n:host(.border-bottom)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--border-color);\n  z-index: 0;\n}\n\n::slotted(cura-tabs),\n::slotted(cura-tabs-transparent) {\n  position: relative;\n  z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-tabs-group',\n  styleUrl: 'cura-tabs-group.scss',\n  shadow: true,\n})\nexport class CuraTabsGroup {\n  @Prop({ reflect: true }) gap: number = 0;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() styles: Record<string, string> = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() tabChange: EventEmitter<string>;\n\n  @Listen('tabSelect')\n  handleTabSelect(ev: CustomEvent<{ name: string }>) {\n    this.updateSelectedTab(ev.detail.name);\n  }\n\n  updateSelectedTab(value: string) {\n    const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');\n\n    tabs.forEach((tab: HTMLCuraTabsElement) => {\n      tab.selected = tab.name === value;\n    });\n  }\n\n  getClasses() {\n    return {\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'),\n      '--gap': `${this.gap}px`,\n    };\n  }\n\n  render() {\n    return (\n      <Host role=\"tablist\" style={this.styles} class={this.getClasses()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-tabs-transparent.d.ts

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

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

@@ -0,0 +1,143 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as labelSizes } from './cura-tabs.definitions.js';
+import { d as defineCustomElement$3 } from './cura-icon2.js';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+
+const curaTabsTransparentCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;min-width:120px;width:fit-content;display:flex;align-items:center;justify-content:center}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button.border-bottom,:host a.border-bottom{border-bottom:1px solid var(--border-bottom-color)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:not(.selected),:host a:not(.selected){border-color:var(--border-color)}:host button:focus,:host a:focus{border-color:var(--primary-light)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-color:var(--neutral-purewhite)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer}:host button.selected:not(.disabled),:host a.selected:not(.disabled){border-bottom:1px solid var(--border-bottom-color-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}";
+const CuraTabsTransparentStyle0 = curaTabsTransparentCss;
+
+const CuraTabsTransparent$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabsTransparent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabSelect = createEvent(this, "tabSelect", 7);
+        this.name = undefined;
+        this.iconName = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.borderBottom = true;
+        this.size = 'large';
+        this.colorMode = 'light';
+        this.hovered = false;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            {
+                name: '--border-bottom-color',
+                theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',
+            },
+            {
+                name: '--border-bottom-color-selected',
+                theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',
+            },
+        ];
+        colors.forEach(c => {
+            if (c.theme)
+                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    computeContentColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.colorMode === 'dark') {
+            if (this.hovered && !this.selected) {
+                return 'neutral-purewhite';
+            }
+            return this.selected ? 'primary-lighter' : 'neutral-purewhite';
+        }
+        if (this.hovered && !this.selected) {
+            return 'primary-dark';
+        }
+        return this.selected ? 'primary-base' : 'neutral-black';
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        const iconSize = this.size === 'large' ? 20 : 16;
+        const iconColor = this.computeContentColor();
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
+    }
+    getClasses() {
+        return {
+            [this.size]: true,
+            [this.colorMode]: true,
+            'selected': this.selected,
+            'disabled': this.disabled,
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.selected = !this.selected;
+        this.tabSelect.emit({ name: this.name });
+    }
+    render() {
+        const labelSize = labelSizes[this.size] || labelSizes['default'];
+        const labelColor = this.computeContentColor();
+        return (h(Host, { key: 'd3c9e277a079381def09397dc922d697aa99d70a', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: 'ab4cac9782f48c367c4ada4e303f9422971dc38e', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'c6567bdf7b80efc3380a8a93bf52de966e1caa7d', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '93c392107790a2c0e3499e5b7bd742219203a980' })))));
+    }
+    static get watchers() { return {
+        "colorMode": ["setColors"]
+    }; }
+    static get style() { return CuraTabsTransparentStyle0; }
+}, [1, "cura-tabs-transparent", {
+        "name": [513],
+        "iconName": [513, "icon-name"],
+        "selected": [1540],
+        "disabled": [1540],
+        "borderBottom": [1540, "border-bottom"],
+        "size": [513],
+        "colorMode": [1537, "color-mode"],
+        "hovered": [32],
+        "styles": [32]
+    }, undefined, {
+        "colorMode": ["setColors"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs-transparent", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs-transparent":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabsTransparent$1);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraTabsTransparent = CuraTabsTransparent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabsTransparent, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs-transparent.js.map

package/dist/components/cura-tabs-transparent.js.map

@@ -0,0 +1 @@
+{"file":"cura-tabs-transparent.js","mappings":"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","names":["CuraTabsTransparent"],"sources":["src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.scss?tag=cura-tabs-transparent&encapsulation=shadow","src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      min-width: 120px;\n      width: fit-content;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &.border-bottom {\n        border-bottom: 1px solid var(--border-bottom-color);\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:not(.selected) {\n        border-color: var(--border-color);\n      }\n\n      &:focus {\n        border-color: var(--primary-light);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.dark {\n          border-color: var(--neutral-purewhite);\n        }\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        &:not(.disabled) {\n          border-bottom: 1px solid var(--border-bottom-color-selected);\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-transparent',\n  styleUrl: 'cura-tabs-transparent.scss',\n  shadow: true,\n})\nexport class CuraTabsTransparent {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      {\n        name: '--border-bottom-color',\n        theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',\n      },\n      {\n        name: '--border-bottom-color-selected',\n        theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'primary-lighter' : 'neutral-purewhite';\n    }\n\n    if (this.hovered && !this.selected) {\n      return 'primary-dark';\n    }\n\n    return this.selected ? 'primary-base' : 'neutral-black';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      'selected': this.selected,\n      'disabled': this.disabled,\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,10 @@
+const labelSizes = {
+    small: 'xsmall',
+    medium: 'small',
+    large: 'medium',
+    default: 'medium',
+};
+
+export { labelSizes as l };
+
+//# sourceMappingURL=cura-tabs.definitions.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-tabs.definitions.js","mappings":"MAAa,UAAU,GAAG;IACxB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;;;;;","names":[],"sources":["src/components/tabs/cura-tabs.definitions.tsx"],"sourcesContent":["export const labelSizes = {\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  default: 'medium',\n};\n"],"version":3}

package/dist/components/cura-tabs.js

@@ -0,0 +1,148 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as labelSizes } from './cura-tabs.definitions.js';
+import { d as defineCustomElement$3 } from './cura-icon2.js';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+
+const curaTabsCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;min-width:120px;width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button.border-bottom,:host a.border-bottom{border-bottom:1px solid var(--border-bottom-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.light,:host a:not(.disabled,.selected):hover.light{border-bottom-color:var(--primary-dark)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-bottom-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border:2px solid var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}";
+const CuraTabsStyle0 = curaTabsCss;
+
+const CuraTabs$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabSelect = createEvent(this, "tabSelect", 7);
+        this.name = undefined;
+        this.iconName = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.borderBottom = true;
+        this.size = 'large';
+        this.colorMode = 'light';
+        this.hovered = false;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-lighter' },
+            { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-lighter' : null },
+            {
+                name: '--background-disabled-selected',
+                theme: this.colorMode === 'light' ? 'neutral-pale' : 'neutral-black',
+            },
+            {
+                name: '--border-bottom-color',
+                theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',
+            },
+        ];
+        colors.forEach(c => {
+            if (c.theme)
+                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    computeContentColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.colorMode === 'dark') {
+            if (this.hovered && !this.selected) {
+                return 'neutral-purewhite';
+            }
+            return this.selected ? 'neutral-black' : 'primary-lighter';
+        }
+        return this.selected ? 'neutral-purewhite' : 'primary-dark';
+    }
+    updateDynamicStyles() {
+        if (this.colorMode === 'dark' && this.hovered && !this.selected) {
+            this.styles = Object.assign(Object.assign({}, this.styles), { '--border-bottom-color': window.CuraAPI.theme.colors.getColor('neutral-purewhite') });
+        }
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        const iconSize = this.size === 'large' ? 20 : 16;
+        const iconColor = this.computeContentColor();
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
+    }
+    getClasses() {
+        return {
+            [this.size]: true,
+            [this.colorMode]: true,
+            'selected': this.selected,
+            'disabled': this.disabled,
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.selected = !this.selected;
+        this.tabSelect.emit({ name: this.name });
+    }
+    render() {
+        const labelSize = labelSizes[this.size] || labelSizes['default'];
+        const labelColor = this.computeContentColor();
+        this.updateDynamicStyles();
+        return (h(Host, { key: '3966968b73a9a51ec26f3206cdb09fbfcb3d3daf', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: '00cc6382c635a05c52fd74b3e02e968c2d94cacb', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'e193500f156c10cf0442e6f504e19d552c19f849', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '8a0ac7c4b2ff4990093d13b4110e370616cf39f4' })))));
+    }
+    static get watchers() { return {
+        "colorMode": ["setColors"]
+    }; }
+    static get style() { return CuraTabsStyle0; }
+}, [1, "cura-tabs", {
+        "name": [513],
+        "iconName": [513, "icon-name"],
+        "selected": [1540],
+        "disabled": [1540],
+        "borderBottom": [1540, "border-bottom"],
+        "size": [513],
+        "colorMode": [1537, "color-mode"],
+        "hovered": [32],
+        "styles": [32]
+    }, undefined, {
+        "colorMode": ["setColors"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabs$1);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraTabs = CuraTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabs, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-tabs.js","mappings":"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","names":["CuraTabs"],"sources":["src/components/tabs/cura-tabs/cura-tabs.scss?tag=cura-tabs&encapsulation=shadow","src/components/tabs/cura-tabs/cura-tabs.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      min-width: 120px;\n      width: fit-content;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      border-radius: 4px 4px 0 0;\n\n      &.border-bottom {\n        border-bottom: 1px solid var(--border-bottom-color);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.light {\n          border-bottom-color: var(--primary-dark);\n        }\n        &.dark {\n          border-bottom-color: var(--neutral-purewhite);\n        }\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:focus {\n        border: 2px solid var(--primary-light);\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        background-color: var(--background-color-selected);\n\n        &.disabled {\n          background-color: var(--background-disabled-selected);\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs',\n  styleUrl: 'cura-tabs.scss',\n  shadow: true,\n})\nexport class CuraTabs {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-lighter' },\n      { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-lighter' : null },\n      {\n        name: '--background-disabled-selected',\n        theme: this.colorMode === 'light' ? 'neutral-pale' : 'neutral-black',\n      },\n      {\n        name: '--border-bottom-color',\n        theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'neutral-black' : 'primary-lighter';\n    }\n\n    return this.selected ? 'neutral-purewhite' : 'primary-dark';\n  }\n\n  private updateDynamicStyles() {\n    if (this.colorMode === 'dark' && this.hovered && !this.selected) {\n      this.styles = {\n        ...this.styles,\n        '--border-bottom-color': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      };\n    }\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      'selected': this.selected,\n      'disabled': this.disabled,\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n    this.updateDynamicStyles();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index.js

@@ -37,6 +37,10 @@ import { CuraSelectOption } from './cura-select-option.js';
 import { CuraStepper } from './cura-stepper.js';
 import { CuraStepperItem } from './cura-stepper-item.js';
 import { CuraSwitch } from './cura-switch.js';
+import { CuraTabs } from './cura-tabs.js';
+import { CuraTabsButton } from './cura-tabs-button.js';
+import { CuraTabsGroup } from './cura-tabs-group.js';
+import { CuraTabsTransparent } from './cura-tabs-transparent.js';
 import { CuraToast } from './cura-toast.js';
 import { CuraTooltip } from './cura-tooltip.js';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
@@ -216,6 +220,36 @@ const ThemeRichet = Object.assign(Object.assign({}, ThemeDefault), {
         }
     } });
 
+/**
+ * Perinatal temporary Theme
+ */
+const ThemePerinatalTemporary = Object.assign(Object.assign({}, ThemeDefault), { 
+    /* Custom */
+    /* Colors */
+    color: {
+        primary: {
+            '100': '239,226,228',
+            '300': '226,196,200',
+            '500': '199,134,141',
+            '700': '175,91,109',
+            '900': '147,58,77'
+        },
+        secondary: {
+            '100': '233,226,220',
+            '300': '211,196,186',
+            '500': '189,167,151',
+            '700': '95,84,76',
+            '900': '38,33,30'
+        },
+        accent: {
+            '100': '219,189,196',
+            '300': '183,124,136',
+            '500': '147,58,77',
+            '700': '74,29,39',
+            '900': '29,12,15'
+        }
+    } });
+
 /**
  * Legacy Default Theme
  */
@@ -267,6 +301,7 @@ const ThemePresets = {
     'maternidade': ThemeMaternity,
     'oncologia': ThemeOncology,
     'richet': ThemeRichet,
+    'perinatalTemp': ThemePerinatalTemporary,
     'legacyDefault': ThemeLegacyDefault
 };
 
@@ -605,6 +640,10 @@ const defineCustomElements = (opts) => {
             CuraStepper,
             CuraStepperItem,
             CuraSwitch,
+            CuraTabs,
+            CuraTabsButton,
+            CuraTabsGroup,
+            CuraTabsTransparent,
             CuraToast,
             CuraTooltip,
         ].forEach(cmp => {