tuix-webcomponents 0.2.0 → 0.4.0

package/dist/src/index.d.ts

@@ -1,3 +1,10 @@
+export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+export { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+export { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
+export { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
+export { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
+export { DetailValue } from './utils/interfaces/detail-value.interface.js';
 export { TuixText } from './tuix-text/TuixText.js';
 export { TuixIcon } from './tuix-icon/TuixIcon.js';
 export { TuixButton } from './tuix-button/TuixButton.js';
@@ -9,4 +16,15 @@ export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
 export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export declare function loadFonts(): void;

package/dist/src/index.js

@@ -9,6 +9,17 @@ export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
 export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export function loadFonts() {
     const link1 = document.createElement('link');
     link1.rel = 'preconnect';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\nexport { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';\nexport { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';\nexport { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,eAAe,GAChB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,SAAS,GACV,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAE1E,MAAM,UAAU,SAAS;IACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,8BAA8B,CAAC;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI,GAAG,2BAA2B,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,GAAG,GAAG,YAAY,CAAC;IACzB,KAAK,CAAC,IAAI;QACR,2JAA2J,CAAC;IAC9J,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC","sourcesContent":["export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';\nexport {\n  CustomEventTuixCheckbox,\n  DetailValueCheckbox,\n} from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';\nexport {\n  CustomEventTuixDropdownInput,\n  CustomEventTuixDropdownSelect,\n} from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';\nexport { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';\nexport { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';\nexport { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';\nexport { DetailValue } from './utils/interfaces/detail-value.interface.js';\nexport { TuixText } from './tuix-text/TuixText.js';\nexport { TuixIcon } from './tuix-icon/TuixIcon.js';\nexport { TuixButton } from './tuix-button/TuixButton.js';\nexport { TuixPaper } from './tuix-paper/TuixPaper.js';\nexport { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';\nexport { TuixLink } from './tuix-link/TuixLink.js';\nexport { TuixInput } from './tuix-input/TuixInput.js';\nexport { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';\nexport { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';\nexport { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';\nexport { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';\nexport { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';\nexport { MainVariant } from './utils/mainVariant.enum.js';\nexport { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';\nexport { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';\nexport { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';\nexport {\n  IconName,\n  IconSizeVariant,\n} from './tuix-icon/enums/tuix-icon.enums.js';\nexport {\n  DescriptionType,\n  InputType,\n} from './tuix-input/enums/tuix-input.enums.js';\nexport { Palette } from './utils/colors.js';\nexport { DarkPalette } from './utils/darkColors.js';\nexport { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';\nexport { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';\n\nexport function loadFonts() {\n  const link1 = document.createElement('link');\n  link1.rel = 'preconnect';\n  link1.href = 'https://fonts.googleapis.com';\n  const link2 = document.createElement('link');\n  link2.rel = 'preconnect';\n  link2.href = 'https://fonts.gstatic.com';\n  const link3 = document.createElement('link');\n  link3.rel = 'stylesheet';\n  link3.href =\n    'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';\n  document.head.appendChild(link1);\n  document.head.appendChild(link2);\n  document.head.appendChild(link3);\n}\n"]}

package/dist/src/tuix-button/TuixBaseButton.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import '../tuix-icon/TuixIcon.js';
+export declare abstract class TuixBaseButton extends LitElement {
+    variant: MainVariant;
+    disabled: boolean;
+    dark: boolean;
+    protected iconColor: string;
+    firstUpdated(changedProperties: Map<PropertyKey, unknown>): void;
+    protected _getTextColor(): string;
+    protected abstract _updateIconColor(): void;
+    protected _handleClick(): void;
+    protected _iconTemplate(iconName: IconName, iconSize: IconSizeVariant): TemplateResult;
+    protected abstract _buttonContent(): TemplateResult;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-button/TuixBaseButton.js

@@ -0,0 +1,63 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { property, state } from 'lit/decorators.js';
+import { buttonTextColor } from './enums/tuix-button.enums';
+import '../tuix-icon/TuixIcon.js';
+export class TuixBaseButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = MainVariant.PRIMARY;
+        this.disabled = false;
+        this.dark = false;
+        this.iconColor = '';
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._updateIconColor();
+    }
+    _getTextColor() {
+        var _a;
+        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
+        if (!element)
+            return buttonTextColor[this.variant];
+        const computedStyle = getComputedStyle(element);
+        return computedStyle.color;
+    }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));
+    }
+    _iconTemplate(iconName, iconSize) {
+        this._updateIconColor();
+        return html `<tuix-icon
+      size="${iconSize}"
+      name="${iconName}"
+      color="${this.iconColor}"
+    ></tuix-icon>`;
+    }
+    render() {
+        return html `<button
+      @click=${this._handleClick}
+      @mouseenter=${this._updateIconColor}
+      @mouseleave=${this._updateIconColor}
+      @blur=${this._updateIconColor}
+      ?disabled="${this.disabled}"
+      class="button"
+    >
+      ${this._buttonContent()}
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: MainVariant, reflect: true })
+], TuixBaseButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "dark", void 0);
+__decorate([
+    state()
+], TuixBaseButton.prototype, "iconColor", void 0);
+//# sourceMappingURL=TuixBaseButton.js.map

package/dist/src/tuix-button/TuixBaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixBaseButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixBaseButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,0BAA0B,CAAC;AAElC,MAAM,OAAgB,cAAe,SAAQ,UAAU;IAAvD;;QAEE,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGH,cAAS,GAAG,EAAE,CAAC;IA8C3B,CAAC;IA5CC,YAAY,CAAC,iBAA4C;QACvD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAES,aAAa;;QACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,OAAO,aAAa,CAAC,KAAK,CAAC;IAC7B,CAAC;IAIS,YAAY;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAES,aAAa,CACrB,QAAkB,EAClB,QAAyB;QAEzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAA;cACD,QAAQ;cACR,QAAQ;eACP,IAAI,CAAC,SAAS;kBACX,CAAC;IACjB,CAAC;IAIS,MAAM;QACd,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,YAAY;oBACZ,IAAI,CAAC,gBAAgB;oBACrB,IAAI,CAAC,gBAAgB;cAC3B,IAAI,CAAC,gBAAgB;mBAChB,IAAI,CAAC,QAAQ;;;QAGxB,IAAI,CAAC,cAAc,EAAE;cACf,CAAC;IACb,CAAC;CACF;AAvDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC9B;AAGH;IADT,KAAK,EAAE;iDACiB","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { property, state } from 'lit/decorators.js';\nimport { buttonTextColor } from './enums/tuix-button.enums';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport '../tuix-icon/TuixIcon.js';\n\nexport abstract class TuixBaseButton extends LitElement {\n  @property({ type: MainVariant, reflect: true })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @state()\n  protected iconColor = '';\n\n  firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    this._updateIconColor();\n  }\n\n  protected _getTextColor() {\n    const element = this.shadowRoot?.querySelector('.button');\n    if (!element) return buttonTextColor[this.variant];\n    const computedStyle = getComputedStyle(element);\n    return computedStyle.color;\n  }\n\n  protected abstract _updateIconColor(): void;\n\n  protected _handleClick() {\n    this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));\n  }\n\n  protected _iconTemplate(\n    iconName: IconName,\n    iconSize: IconSizeVariant\n  ): TemplateResult {\n    this._updateIconColor();\n    return html`<tuix-icon\n      size=\"${iconSize}\"\n      name=\"${iconName}\"\n      color=\"${this.iconColor}\"\n    ></tuix-icon>`;\n  }\n\n  protected abstract _buttonContent(): TemplateResult;\n\n  protected render(): TemplateResult {\n    return html`<button\n      @click=${this._handleClick}\n      @mouseenter=${this._updateIconColor}\n      @mouseleave=${this._updateIconColor}\n      @blur=${this._updateIconColor}\n      ?disabled=\"${this.disabled}\"\n      class=\"button\"\n    >\n      ${this._buttonContent()}\n    </button>`;\n  }\n}\n"]}

package/dist/src/tuix-button/TuixButton.d.ts

@@ -1,18 +1,10 @@
-import { LitElement, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import '../tuix-icon/TuixIcon.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-export declare class TuixButton extends LitElement {
+import { TuixBaseButton } from './TuixBaseButton';
+export declare class TuixButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
-    variant: MainVariant;
-    disabled: boolean;
     iconRight?: IconName;
     iconLeft?: IconName;
-    dark: boolean;
-    iconColor: string;
-    private _getTextColor;
-    private _updateIconColor;
-    private _handleClick;
-    private _iconTemplate;
-    protected render(): TemplateResult;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
 }

package/dist/src/tuix-button/TuixButton.js

@@ -1,63 +1,26 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
 import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
-import { customElement, property, state } from 'lit/decorators.js';
-import '../tuix-icon/TuixIcon.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { buttonTextColor } from './enums/tuix-button.enums';
+import { customElement, property } from 'lit/decorators.js';
 import { ScreenSizes } from '../utils/screenSizes.enum';
-let TuixButton = class TuixButton extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.variant = MainVariant.PRIMARY;
-        this.disabled = false;
-        this.dark = false;
-        this.iconColor = '';
-    }
-    _getTextColor() {
-        var _a;
-        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
-        if (!element)
-            return buttonTextColor[this.variant];
-        const computedStyle = getComputedStyle(element);
-        return computedStyle.color;
-    }
+import { TuixBaseButton } from './TuixBaseButton';
+let TuixButton = class TuixButton extends TuixBaseButton {
     _updateIconColor() {
         if (!this.iconLeft && !this.iconRight)
             return;
         this.iconColor = this._getTextColor();
     }
-    _handleClick() {
-        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-    }
-    _iconTemplate(iconName) {
+    _buttonContent() {
         let iconSize = IconSizeVariant.MEDIUM;
         if (screen.width <= ScreenSizes.TABLET) {
             iconSize = IconSizeVariant.SMALL;
         }
-        this._updateIconColor();
-        return html `<tuix-icon
-      size="${iconSize}"
-      name="${iconName}"
-      color="${this.iconColor}"
-    ></tuix-icon>`;
-    }
-    render() {
-        return html `<button
-      @click=${this._handleClick}
-      @mouseenter=${this._updateIconColor}
-      @mouseleave=${this._updateIconColor}
-      @blur=${this._updateIconColor}
-      ?disabled="${this.disabled}"
-      class="button"
-    >
-      <div class="container">
-        ${this.iconLeft ? this._iconTemplate(this.iconLeft) : nothing}
-        <slot></slot>
-        ${this.iconRight ? this._iconTemplate(this.iconRight) : nothing}
-      </div>
-    </button>`;
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
     }
 };
 TuixButton.styles = [
@@ -65,6 +28,7 @@ TuixButton.styles = [
       .button {
         padding: 16px 32px;
         border-radius: 4px;
+        border: none;
         font-family: 'rubik', sans-serif;
       }
 
@@ -98,24 +62,12 @@ TuixButton.styles = [
     buttonColorStyles,
     buttonSizeStyles,
 ];
-__decorate([
-    property({ type: MainVariant })
-], TuixButton.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixButton.prototype, "disabled", void 0);
 __decorate([
     property({ type: IconName })
 ], TuixButton.prototype, "iconRight", void 0);
 __decorate([
     property({ type: IconName })
 ], TuixButton.prototype, "iconLeft", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixButton.prototype, "dark", void 0);
-__decorate([
-    state()
-], TuixButton.prototype, "iconColor", void 0);
 TuixButton = __decorate([
     customElement('tuix-button')
 ], TuixButton);

package/dist/src/tuix-button/TuixButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  buttonSizeStyles,\n  buttonColorStyles,\n  hostButtonStyles,\n} from './TuixButton.styles';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { buttonTextColor } from './enums/tuix-button.enums';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\n@customElement('tuix-button')\nexport class TuixButton extends LitElement {\n  static styles = [\n    css`\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        font-family: 'rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  @state()\n  iconColor = '';\n\n  private _getTextColor() {\n    const element = this.shadowRoot?.querySelector('.button');\n    if (!element) return buttonTextColor[this.variant];\n    const computedStyle = getComputedStyle(element);\n    return computedStyle.color;\n  }\n\n  private _updateIconColor() {\n    if (!this.iconLeft && !this.iconRight) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n  }\n\n  private _iconTemplate(iconName: IconName): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n\n    this._updateIconColor();\n\n    return html`<tuix-icon\n      size=\"${iconSize}\"\n      name=\"${iconName as IconName}\"\n      color=\"${this.iconColor}\"\n    ></tuix-icon>`;\n  }\n\n  protected render(): TemplateResult {\n    return html`<button\n      @click=${this._handleClick}\n      @mouseenter=${this._updateIconColor}\n      @mouseleave=${this._updateIconColor}\n      @blur=${this._updateIconColor}\n      ?disabled=\"${this.disabled}\"\n      class=\"button\"\n    >\n      <div class=\"container\">\n        ${this.iconLeft ? this._iconTemplate(this.iconLeft) : nothing}\n        <slot></slot>\n        ${this.iconRight ? this._iconTemplate(this.iconRight) : nothing}\n      </div>\n    </button>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixButton.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,cAAc;IA+CzB,gBAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAEkB,cAAc;QAC/B,IAAI,QAAQ,GAAG,eAAe,CAAC,MAAM,CAAC;QAEtC,IAAI,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC;SAClC;QACD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;QAErE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;WACpE,CAAC;IACV,CAAC;;AA9DM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;2CAQoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;CACjB,AAtCY,CAsCX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AA7CT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgEtB;SAhEY,UAAU","sourcesContent":["import { TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  buttonSizeStyles,\n  buttonColorStyles,\n  hostButtonStyles,\n} from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { TuixBaseButton } from './TuixBaseButton';\n\n@customElement('tuix-button')\nexport class TuixButton extends TuixBaseButton {\n  static styles = [\n    css`\n      .button {\n        padding: 16px 32px;\n        border-radius: 4px;\n        border: none;\n        font-family: 'rubik', sans-serif;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n        .button {\n          padding: 14px 32px;\n        }\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .button {\n          padding: 12px 24px;\n        }\n      }\n\n      .container {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        gap: 8px;\n      }\n\n      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n        .container {\n          gap: 6px;\n        }\n      }\n    `,\n    hostButtonStyles,\n    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  @property({ type: IconName })\n  iconRight?: IconName;\n\n  @property({ type: IconName })\n  iconLeft?: IconName;\n\n  protected override _updateIconColor() {\n    if (!this.iconLeft && !this.iconRight) return;\n    this.iconColor = this._getTextColor();\n  }\n\n  protected override _buttonContent(): TemplateResult {\n    let iconSize = IconSizeVariant.MEDIUM;\n\n    if (screen.width <= ScreenSizes.TABLET) {\n      iconSize = IconSizeVariant.SMALL;\n    }\n    return html` <div class=\"container\">\n      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}\n      <slot></slot>\n      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-button/TuixButton.styles.js

@@ -1,59 +1,63 @@
 import { css, unsafeCSS } from 'lit';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
-import { darkPalette } from '../utils/darkColors';
+import { DarkPalette } from '../utils/darkColors';
 import { MainVariant } from '../utils/mainVariant.enum';
+import slottedClassName from '../utils/slottedClassName';
+import { TextSize } from '../tuix-text/enums/tuix-text.enums';
 export const hostButtonStyles = css `
   :host {
-    --t-button-primary-color: ${unsafeCSS(palette.main)};
-    --t-button-secondary-color: ${unsafeCSS(palette.white)};
-    --t-button-accent-color: ${unsafeCSS(palette.secondary)};
-    --t-button-text-color: ${unsafeCSS(palette.white)};
-    --t-button-text-secondary-color: ${unsafeCSS(palette.main)};
-    --t-button-text-muted-color: ${unsafeCSS(palette.primary_300)};
-    --t-button-disabled-bg-color: ${unsafeCSS(palette.primary_100)};
-    --t-button-hover-primary-color: ${unsafeCSS(palette.primary_600)};
-    --t-button-active-primary-color: ${unsafeCSS(palette.primary_800)};
-    --t-button-hover-secondary-color: ${unsafeCSS(palette.primary_100)};
-    --t-button-active-secondary-color: ${unsafeCSS(palette.primary_200)};
+    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};
+    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};
+    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};
+    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
+    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};
+    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};
   }
   :host([dark]) {
-    --t-button-primary-color: ${unsafeCSS(darkPalette.main)};
-    --t-button-text-color: ${unsafeCSS(darkPalette.white)};
-    --t-button-text-muted-color: ${unsafeCSS(palette.primary_800)};
-    --t-button-disabled-bg-color: ${unsafeCSS(palette.primary_950)};
-    --t-button-hover-primary-color: ${unsafeCSS(palette.main)};
-    --t-button-active-primary-color: ${unsafeCSS(palette.primary_800)};
-    --t-button-secondary-color: ${unsafeCSS(palette.black)};
-    --t-button-hover-secondary-color: ${unsafeCSS(palette.primary_950)};
-    --t-button-active-secondary-color: ${unsafeCSS(palette.primary_800)};
+    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};
+    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};
+    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};
+    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};
+    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};
+    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};
+    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};
+    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};
+    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};
   }
 `;
 export const buttonSizeStyles = css `
-  .button {
+  ${unsafeCSS(`
+  ${slottedClassName(TextSize.Button)} {
     font-size: 1.25rem;
     font-weight: 400;
     line-height: 1.5rem;
   }
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .button {
+    ${slottedClassName(TextSize.Button)} {
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.25rem;
     }
   }
   @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .button {
+    ${slottedClassName(TextSize.Button)} {
       font-size: 0.875rem;
       font-weight: 400;
       line-height: 1rem;
     }
   }
+`)}
 `;
 export const buttonColorStyles = css `
   :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {
     background-color: var(--t-button-primary-color);
-    border: none;
+    outline: none;
     color: var(--t-button-text-color);
   }
   :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {
@@ -62,36 +66,36 @@ export const buttonColorStyles = css `
   }
   :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {
     background-color: var(--t-button-hover-primary-color);
-    border: 2px solid var(--t-button-accent-color);
+    outline: 2px solid var(--t-button-accent-color);
   }
   :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {
     background-color: var(--t-button-active-primary-color);
-    border: none;
+    outline: none;
   }
 
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {
     background-color: var(--t-button-secondary-color);
-    border: 1px solid var(--t-button-hover-primary-color);
+    outline: 1px solid var(--t-button-hover-primary-color);
     color: var(--t-button-text-secondary-color);
   }
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {
     background-color: var(--t-button-hover-secondary-color);
-    border: 1px solid var(--t-button-primary-color);
+    outline: 1px solid var(--t-button-primary-color);
     color: var(--t-button-primary-color);
     cursor: pointer;
   }
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {
     background-color: var(--t-button-hover-secondary-color);
-    border: 2px solid var(--t-button-accent-color);
+    outline: 2px solid var(--t-button-accent-color);
     color: var(--t-button-primary-color);
   }
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {
     background-color: var(--t-button-active-secondary-color);
-    border: 1px solid var(--t-button-primary-color);
+    outline: 1px solid var(--t-button-primary-color);
     color: var(--t-button-primary-color);
   }
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {
-    border: 1px solid var(--t-button-text-muted-color);
+    outline: 1px solid var(--t-button-text-muted-color);
   }
 
   :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,

package/dist/src/tuix-button/TuixButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;gCAEH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;kCACrB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;+BAC3B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;uCACd,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAC3B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;uCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;gCAGvC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;6BAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;mCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;uCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;kCACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wCAClB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;uCAMI,WAAW,CAAC,MAAM;;;;;;;uCAOlB,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;oBAMhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;oBAIhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;oBAChC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;CAKjD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { darkPalette } from '../utils/darkColors';\nimport { MainVariant } from '../utils/mainVariant.enum';\n\nexport const hostButtonStyles = css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(palette.main)};\n    --t-button-secondary-color: ${unsafeCSS(palette.white)};\n    --t-button-accent-color: ${unsafeCSS(palette.secondary)};\n    --t-button-text-color: ${unsafeCSS(palette.white)};\n    --t-button-text-secondary-color: ${unsafeCSS(palette.main)};\n    --t-button-text-muted-color: ${unsafeCSS(palette.primary_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(palette.primary_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(palette.primary_600)};\n    --t-button-active-primary-color: ${unsafeCSS(palette.primary_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(palette.primary_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(palette.primary_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(darkPalette.main)};\n    --t-button-text-color: ${unsafeCSS(darkPalette.white)};\n    --t-button-text-muted-color: ${unsafeCSS(palette.primary_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(palette.primary_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(palette.main)};\n    --t-button-active-primary-color: ${unsafeCSS(palette.primary_800)};\n    --t-button-secondary-color: ${unsafeCSS(palette.black)};\n    --t-button-hover-secondary-color: ${unsafeCSS(palette.primary_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(palette.primary_800)};\n  }\n`;\n\nexport const buttonSizeStyles = css`\n  .button {\n    font-size: 1.25rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .button {\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .button {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const buttonColorStyles = css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    border: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    border: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    border: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    border: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    border: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    border: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    border: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    border: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`;\n"]}
+{"version":3,"file":"TuixButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-button/TuixButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;gCAEH,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;kCACrB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;+BAC3B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC9B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;uCACd,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAC3B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;uCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;gCAGvC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;6BAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;mCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;sCAC5B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;uCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;kCACnC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wCAClB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAEtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,SAAS,CAAC;IACV,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;uCAKE,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;uCAMA,WAAW,CAAC,MAAM;MACnD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC;;;;;;CAMtC,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;oBAI9B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;oBAK9B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;oBAMhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;oBAKhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;;;oBAIhC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;oBAChC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;CAKjD,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { DarkPalette } from '../utils/darkColors';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport slottedClassName from '../utils/slottedClassName';\nimport { TextSize } from '../tuix-text/enums/tuix-text.enums';\n\nexport const hostButtonStyles = css`\n  :host {\n    --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n    --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n    --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n  }\n  :host([dark]) {\n    --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n    --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n    --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n    --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n    --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n    --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n    --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n  }\n`;\n\nexport const buttonSizeStyles = css`\n  ${unsafeCSS(`\n  ${slottedClassName(TextSize.Button)} {\n    font-size: 1.25rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    ${slottedClassName(TextSize.Button)} {\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 1rem;\n    }\n  }\n`)}\n`;\n\nexport const buttonColorStyles = css`\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n    background-color: var(--t-button-primary-color);\n    outline: none;\n    color: var(--t-button-text-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n    background-color: var(--t-button-hover-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n    background-color: var(--t-button-hover-primary-color);\n    outline: 2px solid var(--t-button-accent-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n    background-color: var(--t-button-active-primary-color);\n    outline: none;\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n    background-color: var(--t-button-secondary-color);\n    outline: 1px solid var(--t-button-hover-primary-color);\n    color: var(--t-button-text-secondary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n    cursor: pointer;\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n    background-color: var(--t-button-hover-secondary-color);\n    outline: 2px solid var(--t-button-accent-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n    background-color: var(--t-button-active-secondary-color);\n    outline: 1px solid var(--t-button-primary-color);\n    color: var(--t-button-primary-color);\n  }\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n    outline: 1px solid var(--t-button-text-muted-color);\n  }\n\n  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n    background-color: var(--t-button-disabled-bg-color);\n    color: var(--t-button-text-muted-color);\n    cursor: not-allowed;\n  }\n`;\n"]}

package/dist/src/tuix-button/enums/tuix-button.enums.js

@@ -1,7 +1,7 @@
-import { palette } from '../../utils/colors';
+import { Palette } from '../../utils/colors';
 import { MainVariant } from '../../utils/mainVariant.enum';
 export const buttonTextColor = {
-    [MainVariant.PRIMARY]: palette.white,
-    [MainVariant.SECONDARY]: palette.main,
+    [MainVariant.PRIMARY]: Palette.WHITE,
+    [MainVariant.SECONDARY]: Palette.MAIN,
 };
 //# sourceMappingURL=tuix-button.enums.js.map

package/dist/src/tuix-button/enums/tuix-button.enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-button.enums.js","sourceRoot":"","sources":["../../../../src/tuix-button/enums/tuix-button.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAgC;IAC1D,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI;CACtC,CAAC","sourcesContent":["import { palette } from '../../utils/colors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport const buttonTextColor: Record<MainVariant, string> = {\n  [MainVariant.PRIMARY]: palette.white,\n  [MainVariant.SECONDARY]: palette.main,\n};\n"]}
+{"version":3,"file":"tuix-button.enums.js","sourceRoot":"","sources":["../../../../src/tuix-button/enums/tuix-button.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAgC;IAC1D,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI;CACtC,CAAC","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport const buttonTextColor: Record<MainVariant, string> = {\n  [MainVariant.PRIMARY]: Palette.WHITE,\n  [MainVariant.SECONDARY]: Palette.MAIN,\n};\n"]}

package/dist/src/tuix-button/interfaces/tuix-button.interface.d.ts

@@ -0,0 +1 @@
+export type CustomEventTuixButton = CustomEvent<undefined>;

package/dist/src/tuix-button/interfaces/tuix-button.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tuix-button.interface.js.map

package/dist/src/tuix-button/interfaces/tuix-button.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-button.interface.js","sourceRoot":"","sources":["../../../../src/tuix-button/interfaces/tuix-button.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type CustomEventTuixButton = CustomEvent<undefined>;\n"]}

package/dist/src/tuix-checkbox/TuixCheckbox.js

@@ -19,6 +19,7 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
                 value: event.target.checked,
+                label: this.label,
             },
             bubbles: true,
         }));
@@ -74,13 +75,13 @@ __decorate([
     property({ type: Boolean })
 ], TuixCheckbox.prototype, "checked", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixCheckbox.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixCheckbox.prototype, "dark", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixCheckbox.prototype, "error", void 0);
 __decorate([
     property({ type: String })

package/dist/src/tuix-checkbox/TuixCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixCheckbox.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  checkboxCheckmarkStyles,\n  checkboxContainerStyles,\n  checkboxLabelStyles,\n  hostStyles,\n} from './TuixCheckbox.styles';\nimport {\n  CheckboxIconColorDark,\n  CheckboxIconColorLight,\n  CheckboxIconMode,\n  CheckboxLabelSide,\n} from './enums/tuix-checkbox.enums';\n\n@customElement('tuix-checkbox')\nexport class TuixCheckbox extends LitElement {\n  static styles = [\n    hostStyles,\n    checkboxContainerStyles,\n    checkboxCheckmarkStyles,\n    checkboxLabelStyles,\n  ];\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  @property({ type: Boolean })\n  error = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onCheckboxChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).checked,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getIconMode() {\n    if (this.disabled) {\n      return CheckboxIconMode.DISABLED;\n    }\n    if (this.error) {\n      return CheckboxIconMode.ERROR;\n    }\n    return CheckboxIconMode.DEFAULT;\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-checkbox-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render(): TemplateResult {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-checkbox-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-checkbox\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onCheckboxChange}\"\n        />\n        <div class=\"t-checkbox-checkmark\">\n          <tuix-icon\n            size=\"${IconSizeVariant.SMALL}\"\n            name=\"${IconName.CHECK}\"\n            color=\"${this.dark\n              ? CheckboxIconColorDark[this._getIconMode()]\n              : CheckboxIconColorLight[this._getIconMode()]}\"\n          >\n          </tuix-icon>\n        </div>\n      </div>\n      <div class=\"t-checkbox-label\"><slot>${this.label}</slot></div>\n    </label>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixCheckbox.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport {\n  checkboxCheckmarkStyles,\n  checkboxContainerStyles,\n  checkboxLabelStyles,\n  hostStyles,\n} from './TuixCheckbox.styles';\nimport {\n  CheckboxIconColorDark,\n  CheckboxIconColorLight,\n  CheckboxIconMode,\n  CheckboxLabelSide,\n} from './enums/tuix-checkbox.enums';\n\n@customElement('tuix-checkbox')\nexport class TuixCheckbox extends LitElement {\n  static styles = [\n    hostStyles,\n    checkboxContainerStyles,\n    checkboxCheckmarkStyles,\n    checkboxLabelStyles,\n  ];\n\n  @property({ type: Boolean })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onCheckboxChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).checked,\n          label: this.label,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getIconMode() {\n    if (this.disabled) {\n      return CheckboxIconMode.DISABLED;\n    }\n    if (this.error) {\n      return CheckboxIconMode.ERROR;\n    }\n    return CheckboxIconMode.DEFAULT;\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-checkbox-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render(): TemplateResult {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-checkbox-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-checkbox\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onCheckboxChange}\"\n        />\n        <div class=\"t-checkbox-checkmark\">\n          <tuix-icon\n            size=\"${IconSizeVariant.SMALL}\"\n            name=\"${IconName.CHECK}\"\n            color=\"${this.dark\n              ? CheckboxIconColorDark[this._getIconMode()]\n              : CheckboxIconColorLight[this._getIconMode()]}\"\n          >\n          </tuix-icon>\n        </div>\n      </div>\n      <div class=\"t-checkbox-label\"><slot>${this.label}</slot></div>\n    </label>`;\n  }\n}\n"]}

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js

@@ -1,24 +1,24 @@
 import { css, unsafeCSS } from 'lit';
-import { palette } from '../utils/colors';
-import { darkPalette } from '../utils/darkColors';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
 export const hostStyles = css `
   :host {
-    --t-main-color-tuix: ${unsafeCSS(palette.main)};
-    --t-bg-color-primary: ${unsafeCSS(palette.white)};
-    --t-bg-color-disabled: ${unsafeCSS(palette.primary_100)};
-    --t-text-color-error: ${unsafeCSS(palette.error)};
-    --t-stroke-color-focus: ${unsafeCSS(palette.secondary)};
-    --t-stroke-color-grey: ${unsafeCSS(palette.primary_300)};
-    --t-text-color-label: ${unsafeCSS(palette.black)};
+    --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};
+    --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};
+    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-text-color-error: ${unsafeCSS(Palette.ERROR)};
+    --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};
+    --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-text-color-label: ${unsafeCSS(Palette.BLACK)};
   }
   :host([dark]) {
-    --t-main-color-tuix: ${unsafeCSS(darkPalette.main)};
-    --t-bg-color-primary: ${unsafeCSS(darkPalette.black)};
-    --t-bg-color-disabled: ${unsafeCSS(darkPalette.primary_800)};
-    --t-text-color-error: ${unsafeCSS(darkPalette.error)};
-    --t-stroke-color-focus: ${unsafeCSS(darkPalette.secondary)};
-    --t-stroke-color-grey: ${unsafeCSS(darkPalette.primary_100)};
-    --t-text-color-label: ${unsafeCSS(darkPalette.white)};
+    --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};
+    --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};
+    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};
+    --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
+    --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};
+    --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};
   }
 `;
 export const checkboxContainerStyles = css `