tuix-webcomponents 0.1.0 → 0.2.0

package/dist/src/index.d.ts

@@ -6,4 +6,7 @@ export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
 export { TuixLink } from './tuix-link/TuixLink.js';
 export { TuixInput } from './tuix-input/TuixInput.js';
 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 declare function loadFonts(): void;

package/dist/src/index.js

@@ -6,6 +6,9 @@ export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
 export { TuixLink } from './tuix-link/TuixLink.js';
 export { TuixInput } from './tuix-input/TuixInput.js';
 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 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;AAE/D,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';\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;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"]}

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

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

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

@@ -1,25 +1,32 @@
 import { __decorate } from "tslib";
 import { LitElement, css, html, nothing } from 'lit';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { buttonSizeStyles, buttonColorStyles } from './TuixButton.styles';
-import { customElement, property } from 'lit/decorators.js';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
+import { customElement, property, state } from 'lit/decorators.js';
 import '../tuix-icon/TuixIcon.js';
-import { palette } from '../utils/colors';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { buttonTextColor } from './enums/tuix-button.enums';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 let TuixButton = class TuixButton extends LitElement {
     constructor() {
         super(...arguments);
-        this.iconColor = '';
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
+        this.dark = false;
+        this.iconColor = '';
     }
-    _getIconColor() {
-        this.iconColor = buttonTextColor[this.variant];
-        if (this.disabled)
-            this.iconColor = palette.primary_300;
-        return 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;
+    }
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
     }
     _handleClick() {
         this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
@@ -29,20 +36,21 @@ let TuixButton = class TuixButton extends LitElement {
         if (screen.width <= ScreenSizes.TABLET) {
             iconSize = IconSizeVariant.SMALL;
         }
+        this._updateIconColor();
         return html `<tuix-icon
       size="${iconSize}"
       name="${iconName}"
-      color="${this._getIconColor()}"
+      color="${this.iconColor}"
     ></tuix-icon>`;
     }
-    getButtonStyles() {
-        return `${this.variant}`;
-    }
     render() {
         return html `<button
       @click=${this._handleClick}
-      class="button ${this.getButtonStyles()}"
+      @mouseenter=${this._updateIconColor}
+      @mouseleave=${this._updateIconColor}
+      @blur=${this._updateIconColor}
       ?disabled="${this.disabled}"
+      class="button"
     >
       <div class="container">
         ${this.iconLeft ? this._iconTemplate(this.iconLeft) : nothing}
@@ -86,6 +94,7 @@ TuixButton.styles = [
         }
       }
     `,
+    hostButtonStyles,
     buttonColorStyles,
     buttonSizeStyles,
 ];
@@ -101,6 +110,12 @@ __decorate([
 __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":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAuCE,cAAS,GAAG,EAAE,CAAC;QAGf,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAkDnB,CAAC;IA1CS,aAAa;QACnB,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC;QAExD,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClE,CAAC;IAEO,aAAa,CAAC,QAAkB;QACtC,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;QAED,OAAO,IAAI,CAAA;cACD,QAAQ;cACR,QAAoB;eACnB,IAAI,CAAC,aAAa,EAAE;kBACjB,CAAC;IACjB,CAAC;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;eACA,IAAI,CAAC,YAAY;sBACV,IAAI,CAAC,eAAe,EAAE;mBACzB,IAAI,CAAC,QAAQ;;;UAGtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;UAE3D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;;cAEzD,CAAC;IACb,CAAC;;AA7FM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;2CAOoC,WAAW,CAAC,MAAM;;;;;;2CAMlB,WAAW,CAAC,MAAM;;;;;;;;;;;;;;2CAclB,WAAW,CAAC,MAAM;;;;;KAKxD;IACD,iBAAiB;IACjB,gBAAgB;CACjB,AApCY,CAoCX;AAKF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;2CACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;6CACR;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;4CACT;AAnDT,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA+FtB;SA/FY,UAAU","sourcesContent":["import { LitElement, TemplateResult, css, html, nothing } from 'lit';\nimport { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';\nimport { buttonSizeStyles, buttonColorStyles } from './TuixButton.styles';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../tuix-icon/TuixIcon.js';\nimport { palette } from '../utils/colors';\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    buttonColorStyles,\n    buttonSizeStyles,\n  ];\n\n  iconColor = '';\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  private _getIconColor(): string {\n    this.iconColor = buttonTextColor[this.variant];\n    if (this.disabled) this.iconColor = palette.primary_300;\n\n    return this.iconColor;\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    return html`<tuix-icon\n      size=\"${iconSize}\"\n      name=\"${iconName as IconName}\"\n      color=\"${this._getIconColor()}\"\n    ></tuix-icon>`;\n  }\n\n  getButtonStyles(): string {\n    return `${this.variant}`;\n  }\n\n  protected render(): TemplateResult {\n    return html`<button\n      @click=${this._handleClick}\n      class=\"button ${this.getButtonStyles()}\"\n      ?disabled=\"${this.disabled}\"\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":"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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"]}

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

@@ -1,2 +1,3 @@
+export declare const hostButtonStyles: import("lit").CSSResult;
 export declare const buttonSizeStyles: import("lit").CSSResult;
 export declare const buttonColorStyles: import("lit").CSSResult;

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

@@ -1,6 +1,34 @@
 import { css, unsafeCSS } from 'lit';
 import { palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
+import { darkPalette } from '../utils/darkColors';
+import { MainVariant } from '../utils/mainVariant.enum';
+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)};
+  }
+  :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)};
+  }
+`;
 export const buttonSizeStyles = css `
   .button {
     font-size: 1.25rem;
@@ -23,51 +51,53 @@ export const buttonSizeStyles = css `
   }
 `;
 export const buttonColorStyles = css `
-  .button.primary {
-    background-color: ${unsafeCSS(palette.main)};
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {
+    background-color: var(--t-button-primary-color);
     border: none;
-    color: ${unsafeCSS(palette.white)};
+    color: var(--t-button-text-color);
   }
-  .button.primary:hover {
-    background-color: ${unsafeCSS(palette.primary_600)};
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {
+    background-color: var(--t-button-hover-primary-color);
     cursor: pointer;
   }
-  .button.primary:focus {
-    background-color: ${unsafeCSS(palette.primary_600)};
-    border: 2px solid ${unsafeCSS(palette.secondary)};
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {
+    background-color: var(--t-button-hover-primary-color);
+    border: 2px solid var(--t-button-accent-color);
   }
-  .button.primary:active {
-    background-color: ${unsafeCSS(palette.primary_800)};
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {
+    background-color: var(--t-button-active-primary-color);
     border: none;
   }
-  .button.primary:disabled {
-    background-color: ${unsafeCSS(palette.primary_100)};
-    color: ${unsafeCSS(palette.primary_300)};
-    cursor: not-allowed;
-  }
-  .button.secondary {
-    background-color: ${unsafeCSS(palette.white)};
-    border: 2px solid ${unsafeCSS(palette.main)};
-    color: ${unsafeCSS(palette.main)};
+
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {
+    background-color: var(--t-button-secondary-color);
+    border: 1px solid var(--t-button-hover-primary-color);
+    color: var(--t-button-text-secondary-color);
   }
-  .button.secondary:hover {
-    background-color: ${unsafeCSS(palette.primary_100)};
-    border: 2px solid ${unsafeCSS(palette.main)};
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {
+    background-color: var(--t-button-hover-secondary-color);
+    border: 1px solid var(--t-button-primary-color);
+    color: var(--t-button-primary-color);
     cursor: pointer;
   }
-  .button.secondary:focus {
-    background-color: ${unsafeCSS(palette.primary_100)};
-    border: 2px solid ${unsafeCSS(palette.secondary)};
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {
+    background-color: var(--t-button-hover-secondary-color);
+    border: 2px solid var(--t-button-accent-color);
+    color: var(--t-button-primary-color);
   }
-  .button.secondary:active {
-    background-color: ${unsafeCSS(palette.primary_200)};
-    border: none;
-    color: ${unsafeCSS(palette.main)};
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {
+    background-color: var(--t-button-active-secondary-color);
+    border: 1px solid var(--t-button-primary-color);
+    color: var(--t-button-primary-color);
   }
-  .button.secondary:disabled {
-    background-color: ${unsafeCSS(palette.primary_100)};
-    border: none;
-    color: ${unsafeCSS(palette.primary_300)};
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {
+    border: 1px solid var(--t-button-text-muted-color);
+  }
+
+  :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,
+  :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {
+    background-color: var(--t-button-disabled-bg-color);
+    color: var(--t-button-text-muted-color);
     cursor: not-allowed;
   }
 `;

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;AAExD,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;;wBAEZ,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;aAElC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;wBAGb,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAI9B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;wBAG5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAI9B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;aACzC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;wBAInB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;wBACxB,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;aAClC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;wBAGZ,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;wBAIvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;wBAC9B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;wBAG5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;aAEzC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;wBAGZ,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;aAEzC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;CAG1C,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\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  .button.primary {\n    background-color: ${unsafeCSS(palette.main)};\n    border: none;\n    color: ${unsafeCSS(palette.white)};\n  }\n  .button.primary:hover {\n    background-color: ${unsafeCSS(palette.primary_600)};\n    cursor: pointer;\n  }\n  .button.primary:focus {\n    background-color: ${unsafeCSS(palette.primary_600)};\n    border: 2px solid ${unsafeCSS(palette.secondary)};\n  }\n  .button.primary:active {\n    background-color: ${unsafeCSS(palette.primary_800)};\n    border: none;\n  }\n  .button.primary:disabled {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    color: ${unsafeCSS(palette.primary_300)};\n    cursor: not-allowed;\n  }\n  .button.secondary {\n    background-color: ${unsafeCSS(palette.white)};\n    border: 2px solid ${unsafeCSS(palette.main)};\n    color: ${unsafeCSS(palette.main)};\n  }\n  .button.secondary:hover {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: 2px solid ${unsafeCSS(palette.main)};\n    cursor: pointer;\n  }\n  .button.secondary:focus {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: 2px solid ${unsafeCSS(palette.secondary)};\n  }\n  .button.secondary:active {\n    background-color: ${unsafeCSS(palette.primary_200)};\n    border: none;\n    color: ${unsafeCSS(palette.main)};\n  }\n  .button.secondary:disabled {\n    background-color: ${unsafeCSS(palette.primary_100)};\n    border: none;\n    color: ${unsafeCSS(palette.primary_300)};\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;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"]}

package/dist/src/tuix-checkbox/TuixCheckbox.d.ts

@@ -0,0 +1,15 @@
+import { LitElement, TemplateResult } from 'lit';
+import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
+export declare class TuixCheckbox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    dark: boolean;
+    error: boolean;
+    label: string;
+    labelSide: CheckboxLabelSide;
+    private _onCheckboxChange;
+    private _getIconMode;
+    private _getFullContainerClasses;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,95 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
+import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
+let TuixCheckbox = class TuixCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.dark = false;
+        this.error = false;
+        this.label = '';
+        this.labelSide = CheckboxLabelSide.RIGHT;
+    }
+    _onCheckboxChange(event) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: event.target.checked,
+            },
+            bubbles: true,
+        }));
+    }
+    _getIconMode() {
+        if (this.disabled) {
+            return CheckboxIconMode.DISABLED;
+        }
+        if (this.error) {
+            return CheckboxIconMode.ERROR;
+        }
+        return CheckboxIconMode.DEFAULT;
+    }
+    _getFullContainerClasses() {
+        return {
+            't-checkbox-full-container': true,
+            't-with-error': this.error && !this.disabled,
+            't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
+        };
+    }
+    render() {
+        return html `<label class="${classMap(this._getFullContainerClasses())}">
+      <div class="t-checkbox-container">
+        <input
+          type="checkbox"
+          class="t-checkbox"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._onCheckboxChange}"
+        />
+        <div class="t-checkbox-checkmark">
+          <tuix-icon
+            size="${IconSizeVariant.SMALL}"
+            name="${IconName.CHECK}"
+            color="${this.dark
+            ? CheckboxIconColorDark[this._getIconMode()]
+            : CheckboxIconColorLight[this._getIconMode()]}"
+          >
+          </tuix-icon>
+        </div>
+      </div>
+      <div class="t-checkbox-label"><slot>${this.label}</slot></div>
+    </label>`;
+    }
+};
+TuixCheckbox.styles = [
+    hostStyles,
+    checkboxContainerStyles,
+    checkboxCheckmarkStyles,
+    checkboxLabelStyles,
+];
+__decorate([
+    property({ type: Boolean })
+], TuixCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixCheckbox.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean })
+], TuixCheckbox.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], TuixCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TuixCheckbox.prototype, "labelSide", void 0);
+TuixCheckbox = __decorate([
+    customElement('tuix-checkbox')
+], TuixCheckbox);
+export { TuixCheckbox };
+//# sourceMappingURL=TuixCheckbox.js.map

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

@@ -0,0 +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"]}

package/dist/src/tuix-checkbox/TuixCheckbox.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const hostStyles: import("lit").CSSResult;
+export declare const checkboxContainerStyles: import("lit").CSSResult;
+export declare const checkboxCheckmarkStyles: import("lit").CSSResult;
+export declare const checkboxLabelStyles: import("lit").CSSResult;

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

@@ -0,0 +1,117 @@
+import { css, unsafeCSS } from 'lit';
+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)};
+  }
+  :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)};
+  }
+`;
+export const checkboxContainerStyles = css `
+  .t-checkbox-full-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  :host([disabled]) .t-checkbox-full-container {
+    cursor: not-allowed;
+  }
+  .t-checkbox-container {
+    display: block;
+    position: relative;
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+  .t-checkbox-container .t-checkbox {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+`;
+export const checkboxCheckmarkStyles = css `
+  .t-checkbox-container .t-checkbox-checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--t-bg-color-primary);
+    border: 2px solid var(--t-stroke-color-grey);
+    box-sizing: border-box;
+  }
+  .t-checkbox-container .t-checkbox-checkmark tuix-icon {
+    margin: auto;
+    display: none;
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {
+    background-color: var(--t-main-color-tuix);
+    border: none;
+  }
+  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {
+    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);
+    border: 2px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {
+    display: block;
+  }
+  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {
+    border: 2px solid var(--t-main-color-tuix);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox-checkmark {
+    border: 2px solid var(--t-text-color-error);
+  }
+  .t-checkbox-full-container.t-with-error
+    .t-checkbox-container
+    .t-checkbox:checked
+    ~ .t-checkbox-checkmark {
+    background-color: var(--t-text-color-error);
+    border: none;
+  }
+  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {
+    background-color: var(--t-bg-color-disabled);
+    border: none;
+    box-shadow: none;
+  }
+`;
+export const checkboxLabelStyles = css `
+  .t-checkbox-label {
+    display: block;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 300;
+    font-family: 'rubik', sans-serif;
+    color: var(--t-text-color-label);
+    margin-left: 0.625rem;
+  }
+  .t-checkbox-full-container.t-with-label-left {
+    flex-direction: row-reverse;
+  }
+  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {
+    margin-right: 0.625rem;
+    margin-left: 0;
+  }
+`;
+//# sourceMappingURL=TuixCheckbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TuixCheckbox.styles.js","sourceRoot":"","sources":["../../../src/tuix-checkbox/TuixCheckbox.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,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;2BAEF,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;4BACtB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;6BACvB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;8BACtB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;2BAGzB,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;6BAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;8BAC1B,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BACnC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;CAEvD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDzC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBrC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\n\nexport const hostStyles = css`\n  :host {\n    --t-main-color-tuix: ${unsafeCSS(palette.main)};\n    --t-bg-color-primary: ${unsafeCSS(palette.white)};\n    --t-bg-color-disabled: ${unsafeCSS(palette.primary_100)};\n    --t-text-color-error: ${unsafeCSS(palette.error)};\n    --t-stroke-color-focus: ${unsafeCSS(palette.secondary)};\n    --t-stroke-color-grey: ${unsafeCSS(palette.primary_300)};\n    --t-text-color-label: ${unsafeCSS(palette.black)};\n  }\n  :host([dark]) {\n    --t-main-color-tuix: ${unsafeCSS(darkPalette.main)};\n    --t-bg-color-primary: ${unsafeCSS(darkPalette.black)};\n    --t-bg-color-disabled: ${unsafeCSS(darkPalette.primary_800)};\n    --t-text-color-error: ${unsafeCSS(darkPalette.error)};\n    --t-stroke-color-focus: ${unsafeCSS(darkPalette.secondary)};\n    --t-stroke-color-grey: ${unsafeCSS(darkPalette.primary_100)};\n    --t-text-color-label: ${unsafeCSS(darkPalette.white)};\n  }\n`;\n\nexport const checkboxContainerStyles = css`\n  .t-checkbox-full-container {\n    display: flex;\n    justify-content: space-between;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  :host([disabled]) .t-checkbox-full-container {\n    cursor: not-allowed;\n  }\n  .t-checkbox-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-checkbox-container .t-checkbox {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const checkboxCheckmarkStyles = css`\n  .t-checkbox-container .t-checkbox-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 1.5rem;\n    border-radius: 0.25rem;\n    background-color: var(--t-bg-color-primary);\n    border: 2px solid var(--t-stroke-color-grey);\n    box-sizing: border-box;\n  }\n  .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n    margin: auto;\n    display: none;\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n    background-color: var(--t-main-color-tuix);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n    display: block;\n  }\n  .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-checkbox-full-container.t-with-error\n    .t-checkbox-container\n    .t-checkbox:checked\n    ~ .t-checkbox-checkmark {\n    background-color: var(--t-text-color-error);\n    border: none;\n  }\n  .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const checkboxLabelStyles = css`\n  .t-checkbox-label {\n    display: block;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 300;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-text-color-label);\n    margin-left: 0.625rem;\n  }\n  .t-checkbox-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.d.ts

@@ -0,0 +1,19 @@
+export declare enum CheckboxIconMode {
+    DEFAULT = "default",
+    DISABLED = "disabled",
+    ERROR = "error"
+}
+export declare enum CheckboxLabelSide {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare const CheckboxIconColorLight: {
+    default: string;
+    disabled: string;
+    error: string;
+};
+export declare const CheckboxIconColorDark: {
+    default: string;
+    disabled: string;
+    error: string;
+};

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

@@ -0,0 +1,24 @@
+import { palette } from '../../utils/colors';
+import { darkPalette } from '../../utils/darkColors';
+export var CheckboxIconMode;
+(function (CheckboxIconMode) {
+    CheckboxIconMode["DEFAULT"] = "default";
+    CheckboxIconMode["DISABLED"] = "disabled";
+    CheckboxIconMode["ERROR"] = "error";
+})(CheckboxIconMode || (CheckboxIconMode = {}));
+export var CheckboxLabelSide;
+(function (CheckboxLabelSide) {
+    CheckboxLabelSide["LEFT"] = "left";
+    CheckboxLabelSide["RIGHT"] = "right";
+})(CheckboxLabelSide || (CheckboxLabelSide = {}));
+export const CheckboxIconColorLight = {
+    [CheckboxIconMode.DEFAULT]: palette.white,
+    [CheckboxIconMode.DISABLED]: palette.primary_300,
+    [CheckboxIconMode.ERROR]: palette.white,
+};
+export const CheckboxIconColorDark = {
+    [CheckboxIconMode.DEFAULT]: darkPalette.white,
+    [CheckboxIconMode.DISABLED]: darkPalette.primary_100,
+    [CheckboxIconMode.ERROR]: darkPalette.white,
+};
+//# sourceMappingURL=tuix-checkbox.enums.js.map