tuix-webcomponents 0.2.0 → 0.3.0

package/dist/src/tuix-link/TuixLink.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { LinkTarget } from './enums/linkTarget.enum';
@@ -10,24 +10,22 @@ let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
         this.href = '';
-        this.target = LinkTarget.Blank;
+        this.target = LinkTarget.BLANK;
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
         this.dark = false;
     }
     _getOptionalClasses() {
-        const variantClass = `${this.variant}`;
         return {
             link: true,
             disabled: this.disabled,
-            [variantClass]: true,
-            [MainVariant.SECONDARY]: this.dark,
+            [MainVariant.SECONDARY]: this.dark || this.variant === MainVariant.SECONDARY,
         };
     }
     render() {
         return html `
       <a
-        target="${this.disabled ? LinkTarget.Self : this.target}"
+        target="${this.disabled ? LinkTarget.SELF : this.target}"
         class="${classMap(this._getOptionalClasses())}"
         href="${this.disabled ? 'javascript:void(0)' : this.href}"
       >
@@ -43,13 +41,13 @@ TuixLink.styles = css `
       font-weight: 400;
       line-height: 1.25rem;
       text-decoration: none;
-      color: ${unsafeCSS(palette.main)};
+      color: ${unsafeCSS(Palette.MAIN)};
     }
     a.link:hover {
       text-decoration: underline;
     }
     a.link.secondary {
-      color: ${unsafeCSS(palette.white)};
+      color: ${unsafeCSS(Palette.WHITE)};
     }
     @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
       a.link {
@@ -60,7 +58,7 @@ TuixLink.styles = css `
     }
     a.link.disabled {
       text-decoration: underline;
-      color: ${unsafeCSS(palette.primary_300)};
+      color: ${unsafeCSS(Palette.PRIMARY_300)};
       cursor: not-allowed;
     }
   `;
@@ -74,10 +72,10 @@ __decorate([
     property({ type: MainVariant })
 ], TuixLink.prototype, "variant", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixLink.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixLink.prototype, "dark", void 0);
 TuixLink = __decorate([
     customElement('tuix-link')

package/dist/src/tuix-link/TuixLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAuBf,CAAC;IArBS,mBAAmB;QACzB,MAAM,YAAY,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QACvC,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,YAAY,CAAC,EAAE,IAAI;YACpB,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACnC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AAhEM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AA3CF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkEpB;SAlEY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(palette.main)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(palette.white)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(palette.primary_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.Blank;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    const variantClass = `${this.variant}`;\n    return {\n      link: true,\n      disabled: this.disabled,\n      [variantClass]: true,\n      [MainVariant.SECONDARY]: this.dark,\n    };\n  }\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.Self : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAsBf,CAAC;IApBS,mBAAmB;QACzB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,SAAS;SACtD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AA/DM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AA3CF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiEpB;SAjEY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(Palette.MAIN)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(Palette.WHITE)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(Palette.PRIMARY_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.BLANK;\n\n  @property({ type: MainVariant })\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  private _getOptionalClasses(): ClassInfo {\n    return {\n      link: true,\n      disabled: this.disabled,\n      [MainVariant.SECONDARY]:\n        this.dark || this.variant === MainVariant.SECONDARY,\n    };\n  }\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.SELF : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-link/enums/linkTarget.enum.d.ts

@@ -1,6 +1,6 @@
 export declare enum LinkTarget {
-    Blank = "_blank",
-    Self = "_self",
-    Parent = "_parent",
-    Top = "_top"
+    BLANK = "_blank",
+    SELF = "_self",
+    PARENT = "_parent",
+    TOP = "_top"
 }

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -1,8 +1,8 @@
 export var LinkTarget;
 (function (LinkTarget) {
-    LinkTarget["Blank"] = "_blank";
-    LinkTarget["Self"] = "_self";
-    LinkTarget["Parent"] = "_parent";
-    LinkTarget["Top"] = "_top";
+    LinkTarget["BLANK"] = "_blank";
+    LinkTarget["SELF"] = "_self";
+    LinkTarget["PARENT"] = "_parent";
+    LinkTarget["TOP"] = "_top";
 })(LinkTarget || (LinkTarget = {}));
 //# sourceMappingURL=linkTarget.enum.js.map

package/dist/src/tuix-link/enums/linkTarget.enum.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top',\n}\n"]}
+{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n"]}

package/dist/src/tuix-paper/TuixPaper.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult } from 'lit';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { PaperVariant } from './enums/tuix-paper.enum';
 export declare class TuixPaper extends LitElement {
-    elevation: ShadowVariants;
+    elevation: PaperVariant;
     dark: boolean;
     static styles: import("lit").CSSResult;
     private _getOptionalClasses;

package/dist/src/tuix-paper/TuixPaper.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import { LitElement, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { PaperVariant } from './enums/tuix-paper.enum';
 import { classMap } from 'lit/directives/class-map.js';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);
-        this.elevation = ShadowVariants.Variant_1;
+        this.elevation = PaperVariant.VARIANT_1;
         this.dark = false;
     }
     _getOptionalClasses() {
@@ -29,10 +29,9 @@ let TuixPaper = class TuixPaper extends LitElement {
 TuixPaper.styles = css `
     .elevation {
       border-radius: 20px;
-      padding: 16px 32px;
     }
 
-    ${unsafeCSS(Object.values(ShadowVariants).slice(1)
+    ${unsafeCSS(Object.values(PaperVariant).slice(1)
     .map((variant, index) => {
     return `
             .elevation.variant_${variant} {
@@ -46,10 +45,10 @@ TuixPaper.styles = css `
     .join('\n'))}
   `;
 __decorate([
-    property({ type: ShadowVariants })
+    property({ type: PaperVariant })
 ], TuixPaper.prototype, "elevation", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixPaper.prototype, "dark", void 0);
 TuixPaper = __decorate([
     customElement('tuix-paper')

package/dist/src/tuix-paper/TuixPaper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAmB,cAAc,CAAC,SAAS,CAAC;QAGrD,SAAI,GAAG,KAAK,CAAC;IAyCf,CAAC;IAhBS,mBAAmB;QACzB,MAAM,cAAc,GAAG,YAAY,CAAC;QACpC,MAAM,YAAY,GAAG,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO;YACL,CAAC,cAAc,CAAC,EAAE,IAAI;YACtB,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI;YAC1B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;;WAExD,CAAC;IACV,CAAC;;AAtCD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;;MAMf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACnC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;8BAElD,OAAO;kCACH,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;WAEhG,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AApBY,CAoBX;AA1BF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACkB;AAGrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACf;AALF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA8CrB;SA9CY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ShadowVariants } from './enums/tuix-paper.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: ShadowVariants })\n  elevation: ShadowVariants = ShadowVariants.Variant_1;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n      padding: 16px 32px;\n    }\n\n    ${unsafeCSS(\n      Object.values(ShadowVariants).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n            .elevation.dark_${variant} {\n              background-color: ${unsafeCSS(`rgb(${23 + 3*(index)}, ${23 + 3*(index)}, ${26 + 5*(index)})`)};\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  private _getOptionalClasses(): ClassInfo {\n    const elevationClass = `elevation `;\n    const variantClass = `variant_${this.elevation}`;\n    const darkClass = `dark_${this.elevation}`;\n    return {\n      [elevationClass]: true,\n      [variantClass]: !this.dark,\n      [darkClass]: this.dark,\n    };\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"${classMap(this._getOptionalClasses())}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAG,YAAY,CAAC,SAAS,CAAC;QAGnC,SAAI,GAAG,KAAK,CAAC;IAwCf,CAAC;IAhBS,mBAAmB;QACzB,MAAM,cAAc,GAAG,YAAY,CAAC;QACpC,MAAM,YAAY,GAAG,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO;YACL,CAAC,cAAc,CAAC,EAAE,IAAI;YACtB,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI;YAC1B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;;WAExD,CAAC;IACV,CAAC;;AArCD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;MAKf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACjC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;8BAElD,OAAO;kCACH,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;WAEhG,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AAnBY,CAmBX;AAzBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;4CACE;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AALF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6CrB;SA7CY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PaperVariant } from './enums/tuix-paper.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: PaperVariant })\n  elevation = PaperVariant.VARIANT_1;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n    }\n\n    ${unsafeCSS(\n      Object.values(PaperVariant).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n            .elevation.dark_${variant} {\n              background-color: ${unsafeCSS(`rgb(${23 + 3*(index)}, ${23 + 3*(index)}, ${26 + 5*(index)})`)};\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  private _getOptionalClasses(): ClassInfo {\n    const elevationClass = `elevation `;\n    const variantClass = `variant_${this.elevation}`;\n    const darkClass = `dark_${this.elevation}`;\n    return {\n      [elevationClass]: true,\n      [variantClass]: !this.dark,\n      [darkClass]: this.dark,\n    };\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"${classMap(this._getOptionalClasses())}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts

@@ -1,7 +1,7 @@
-export declare enum ShadowVariants {
-    Variant_0 = "0",
-    Variant_1 = "1",
-    Variant_2 = "2",
-    Variant_3 = "3",
-    Variant_4 = "4"
+export declare enum PaperVariant {
+    VARIANT_0 = "0",
+    VARIANT_1 = "1",
+    VARIANT_2 = "2",
+    VARIANT_3 = "3",
+    VARIANT_4 = "4"
 }

package/dist/src/tuix-paper/enums/tuix-paper.enum.js

@@ -1,9 +1,9 @@
-export var ShadowVariants;
-(function (ShadowVariants) {
-    ShadowVariants["Variant_0"] = "0";
-    ShadowVariants["Variant_1"] = "1";
-    ShadowVariants["Variant_2"] = "2";
-    ShadowVariants["Variant_3"] = "3";
-    ShadowVariants["Variant_4"] = "4";
-})(ShadowVariants || (ShadowVariants = {}));
+export var PaperVariant;
+(function (PaperVariant) {
+    PaperVariant["VARIANT_0"] = "0";
+    PaperVariant["VARIANT_1"] = "1";
+    PaperVariant["VARIANT_2"] = "2";
+    PaperVariant["VARIANT_3"] = "3";
+    PaperVariant["VARIANT_4"] = "4";
+})(PaperVariant || (PaperVariant = {}));
 //# sourceMappingURL=tuix-paper.enum.js.map

package/dist/src/tuix-paper/enums/tuix-paper.enum.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;AACjB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB","sourcesContent":["export enum ShadowVariants {\n  Variant_0 = '0',\n  Variant_1 = '1',\n  Variant_2 = '2',\n  Variant_3 = '3',\n  Variant_4 = '4',\n}\n"]}
+{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAMX;AAND,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EANW,YAAY,KAAZ,YAAY,QAMvB","sourcesContent":["export enum PaperVariant {\n  VARIANT_0 = '0',\n  VARIANT_1 = '1',\n  VARIANT_2 = '2',\n  VARIANT_3 = '3',\n  VARIANT_4 = '4',\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.js

@@ -63,13 +63,13 @@ TuixRadioButton.styles = [
     radioButtonLabelStyles,
 ];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixRadioButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixRadioButton.prototype, "dark", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixRadioButton.prototype, "error", void 0);
 __decorate([
     property({ type: Array })

package/dist/src/tuix-radio-button/TuixRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAIlC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAUE,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAA4B,EAAE,CAAC;QAGtC,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;QAGpC,mBAAc,GAAiC,IAAI,CAAC;IAiDtD,CAAC;IA/CS,oBAAoB,CAAC,KAAiB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK;aAChD;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,+BAA+B,EAAE,IAAI;YACrC,cAAc,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;YAC9D,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;SAC9C,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,MAA6B,EAAE,KAAa;QAClE,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;uBAKlD,IAAI,CAAC,QAAQ;oBAChB,MAAM;;sBAEJ,IAAI,CAAC,cAAc,KAAK,MAAM;qBAC/B,IAAI,CAAC,oBAAoB;;;;;;;4BAOlB,KAAK,KAAK,MAAM;;aAE/B,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAC/C,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC,EAAE,CAAC;IACN,CAAC;;AAxEM,sBAAM,GAAG;IACd,eAAe;IACf,0BAA0B;IAC1B,iBAAiB;IACjB,sBAAsB;IACtB,sBAAsB;CACvB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACY;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACyB;AAzBzC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0E3B;SA1EY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport {\n  radioButtonContainerStyles,\n  radioButtonInnerStyles,\n  radioButtonLabelStyles,\n  radioButtonStyles,\n  radioHostStyles,\n} from './TuixRadioButton.styles';\nimport { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';\n\n@customElement('tuix-radio-button')\nexport class TuixRadioButton extends LitElement {\n  static styles = [\n    radioHostStyles,\n    radioButtonContainerStyles,\n    radioButtonStyles,\n    radioButtonInnerStyles,\n    radioButtonLabelStyles,\n  ];\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: Array })\n  options: TuixRadioButtonOption[] = [];\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  @property({ type: String })\n  selectedOption: TuixRadioButtonOption | null = null;\n\n  private _onRadioButtonChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-radio-button-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n      't-multiple-options': this.options.length > 1,\n    };\n  }\n\n  private _formatTemplate(option: TuixRadioButtonOption, index: number) {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-radio-button-container\">\n        <input\n          type=\"radio\"\n          class=\"t-radio-button\"\n          ?disabled=\"${this.disabled}\"\n          .value=\"${option}\"\n          name=\"tuix-radio-button\"\n          ?checked=\"${this.selectedOption === option}\"\n          @change=\"${this._onRadioButtonChange}\"\n        />\n        <div class=\"t-radio-button-checkmark\">\n          <div class=\"t-radio-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-radio-button-label\">\n        <slot name=\"label-${index}\">${option}</slot>\n      </div>\n    </label>`;\n  }\n\n  render() {\n    return html`${this.options.map((option, index) =>\n      this._formatTemplate(option, index)\n    )}`;\n  }\n}\n"]}
+{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAIlC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAUE,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAA4B,EAAE,CAAC;QAGtC,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;QAGpC,mBAAc,GAAiC,IAAI,CAAC;IAiDtD,CAAC;IA/CS,oBAAoB,CAAC,KAAiB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK;aAChD;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,+BAA+B,EAAE,IAAI;YACrC,cAAc,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;YAC9D,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;SAC9C,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,MAA6B,EAAE,KAAa;QAClE,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;uBAKlD,IAAI,CAAC,QAAQ;oBAChB,MAAM;;sBAEJ,IAAI,CAAC,cAAc,KAAK,MAAM;qBAC/B,IAAI,CAAC,oBAAoB;;;;;;;4BAOlB,KAAK,KAAK,MAAM;;aAE/B,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAC/C,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC,EAAE,CAAC;IACN,CAAC;;AAxEM,sBAAM,GAAG;IACd,eAAe;IACf,0BAA0B;IAC1B,iBAAiB;IACjB,sBAAsB;IACtB,sBAAsB;CACvB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACY;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACyB;AAzBzC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0E3B;SA1EY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport {\n  radioButtonContainerStyles,\n  radioButtonInnerStyles,\n  radioButtonLabelStyles,\n  radioButtonStyles,\n  radioHostStyles,\n} from './TuixRadioButton.styles';\nimport { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';\n\n@customElement('tuix-radio-button')\nexport class TuixRadioButton extends LitElement {\n  static styles = [\n    radioHostStyles,\n    radioButtonContainerStyles,\n    radioButtonStyles,\n    radioButtonInnerStyles,\n    radioButtonLabelStyles,\n  ];\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: Array })\n  options: TuixRadioButtonOption[] = [];\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  @property({ type: String })\n  selectedOption: TuixRadioButtonOption | null = null;\n\n  private _onRadioButtonChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-radio-button-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n      't-multiple-options': this.options.length > 1,\n    };\n  }\n\n  private _formatTemplate(option: TuixRadioButtonOption, index: number) {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-radio-button-container\">\n        <input\n          type=\"radio\"\n          class=\"t-radio-button\"\n          ?disabled=\"${this.disabled}\"\n          .value=\"${option}\"\n          name=\"tuix-radio-button\"\n          ?checked=\"${this.selectedOption === option}\"\n          @change=\"${this._onRadioButtonChange}\"\n        />\n        <div class=\"t-radio-button-checkmark\">\n          <div class=\"t-radio-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-radio-button-label\">\n        <slot name=\"label-${index}\">${option}</slot>\n      </div>\n    </label>`;\n  }\n\n  render() {\n    return html`${this.options.map((option, index) =>\n      this._formatTemplate(option, index)\n    )}`;\n  }\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js

@@ -1,11 +1,11 @@
 import { css, unsafeCSS } from 'lit';
 import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 export const radioHostStyles = css `
   ${hostStyles}
   :host {
     --t-margin-between-radio-buttons: 1rem;
-    --t-radio-button-inner-color-disabled: ${unsafeCSS(palette.primary_300)};
+    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};
   }
 `;
 export const radioButtonContainerStyles = css `

package/dist/src/tuix-radio-button/TuixRadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixRadioButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;IAC9B,UAAU;;;6CAG+B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAE1E,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB5C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CnC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { palette } from '../utils/colors';\n\nexport const radioHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-margin-between-radio-buttons: 1rem;\n    --t-radio-button-inner-color-disabled: ${unsafeCSS(palette.primary_300)};\n  }\n`;\n\nexport const radioButtonContainerStyles = css`\n  .t-radio-button-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-radio-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-radio-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-radio-button-container .t-radio-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const radioButtonStyles = css`\n  .t-radio-button-full-container.t-multiple-options {\n    margin-bottom: var(--t-margin-between-radio-buttons);\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n  .t-radio-button-container .t-radio-button-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    border-radius: 50%;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-radio-button-full-container:hover\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-full-container.t-with-error\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-radio-button-container\n    .t-radio-button:disabled\n    ~ .t-radio-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const radioButtonInnerStyles = css`\n  .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {\n    background-color: var(--t-main-color-tuix);\n    margin: auto;\n    height: 0.625rem;\n    width: 0.625rem;\n    border-radius: 50%;\n    display: none;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark\n    .t-radio-button-inner {\n    display: block;\n  }\n  :host([error])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-text-color-error);\n  }\n  :host([disabled])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-radio-button-inner-color-disabled);\n    cursor: not-allowed;\n  }\n`;\n\nexport const radioButtonLabelStyles = css`\n  .t-radio-button-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-radio-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-radio-button-full-container.t-with-label-left .t-radio-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}
+{"version":3,"file":"TuixRadioButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;IAC9B,UAAU;;;6CAG+B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAE1E,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB5C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CnC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\n\nexport const radioHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-margin-between-radio-buttons: 1rem;\n    --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n  }\n`;\n\nexport const radioButtonContainerStyles = css`\n  .t-radio-button-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-radio-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-radio-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n  .t-radio-button-container .t-radio-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n`;\n\nexport const radioButtonStyles = css`\n  .t-radio-button-full-container.t-multiple-options {\n    margin-bottom: var(--t-margin-between-radio-buttons);\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n  .t-radio-button-container .t-radio-button-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    border-radius: 50%;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-radio-button-full-container:hover\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 2px solid var(--t-main-color-tuix);\n  }\n  .t-radio-button-full-container.t-with-error\n    .t-radio-button-container\n    .t-radio-button-checkmark {\n    border: 2px solid var(--t-text-color-error);\n  }\n  .t-radio-button-container\n    .t-radio-button:disabled\n    ~ .t-radio-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    border: none;\n    box-shadow: none;\n  }\n`;\n\nexport const radioButtonInnerStyles = css`\n  .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {\n    background-color: var(--t-main-color-tuix);\n    margin: auto;\n    height: 0.625rem;\n    width: 0.625rem;\n    border-radius: 50%;\n    display: none;\n  }\n  .t-radio-button-container\n    .t-radio-button:checked\n    ~ .t-radio-button-checkmark\n    .t-radio-button-inner {\n    display: block;\n  }\n  :host([error])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-text-color-error);\n  }\n  :host([disabled])\n    .t-radio-button-container\n    .t-radio-button-checkmark\n    .t-radio-button-inner {\n    background-color: var(--t-radio-button-inner-color-disabled);\n    cursor: not-allowed;\n  }\n`;\n\nexport const radioButtonLabelStyles = css`\n  .t-radio-button-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-radio-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-radio-button-full-container.t-with-label-left .t-radio-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

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

@@ -1 +1,3 @@
+import { DetailValue } from '../../utils/interfaces/detail-value.interface';
 export type TuixRadioButtonOption = string | number;
+export type CustomEventTuixRadioButton<T extends TuixRadioButtonOption = TuixRadioButtonOption> = CustomEvent<DetailValue<T>>;

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

@@ -1 +1 @@
-{"version":3,"file":"tuix-radio-button.interface.js","sourceRoot":"","sources":["../../../../src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type TuixRadioButtonOption = string | number;\n"]}
+{"version":3,"file":"tuix-radio-button.interface.js","sourceRoot":"","sources":["../../../../src/tuix-radio-button/interfaces/tuix-radio-button.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { DetailValue } from '../../utils/interfaces/detail-value.interface';\n\nexport type TuixRadioButtonOption = string | number;\n\nexport type CustomEventTuixRadioButton<\n  T extends TuixRadioButtonOption = TuixRadioButtonOption\n> = CustomEvent<DetailValue<T>>;\n"]}

package/dist/src/tuix-text/TuixText.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { TextSize, TextVariant } from './enums/tuix-text.enums.js';
 export declare class TuixText extends LitElement {
-    size?: TextSize;
+    size: TextSize;
     color?: TextVariant;
     dark: boolean;
     static styles: import("lit").CSSResult[];

package/dist/src/tuix-text/TuixText.js

@@ -8,6 +8,7 @@ import { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';
 let TuixText = class TuixText extends LitElement {
     constructor() {
         super(...arguments);
+        this.size = TextSize.Body1;
         this.dark = false;
     }
     _getTextColor() {
@@ -44,7 +45,7 @@ __decorate([
     property({ type: TextVariant })
 ], TuixText.prototype, "color", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixText.prototype, "dark", void 0);
 TuixText = __decorate([
     customElement('tuix-text')

package/dist/src/tuix-text/TuixText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGvE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAQE,SAAI,GAAG,KAAK,CAAC;IA8Bf,CAAC;IAlBS,aAAa;QACnB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI;YAC5B,CAAC,CAAC,WAAW,CAAC,SAAS;YACvB,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,IAAI;eACd,QAAQ,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;SAC5B,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA3BM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;IACD,UAAU;IACV,gBAAgB;CACjB,AARY,CAQX;AAhBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACb;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACZ;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AARF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsCpB;SAtCY,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  TextSize,\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from './enums/tuix-text.enums.js';\nimport { textStyles } from './TuixText.styles.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size?: TextSize;\n\n  @property({ type: TextVariant })\n  color?: TextVariant;\n\n  @property({ type: Boolean })\n  dark = false;\n\n  static styles = [\n    css`\n      .text {\n        font-family: 'Rubik', sans-serif;\n      }\n    `,\n    textStyles,\n    buttonSizeStyles,\n  ];\n\n  private _getTextColor() {\n    const defaultColor = this.dark\n      ? TextVariant.SECONDARY\n      : TextVariant.PRIMARY;\n    const colorMap = this.dark ? colorTextDark : colorText;\n    return colorMap[this.color || defaultColor];\n  }\n\n  render() {\n    return html` <div\n      class=\"text ${this.size}\"\n      style=\"${styleMap({\n        color: this._getTextColor(),\n      })}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGvE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAEE,SAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;QAMtB,SAAI,GAAG,KAAK,CAAC;IA8Bf,CAAC;IAlBS,aAAa;QACnB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI;YAC5B,CAAC,CAAC,WAAW,CAAC,SAAS;YACvB,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,IAAI;eACd,QAAQ,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;SAC5B,CAAC;;;WAGG,CAAC;IACV,CAAC;;AA3BM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;IACD,UAAU;IACV,gBAAgB;CACjB,AARY,CAQX;AAhBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACP;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACZ;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AARF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsCpB;SAtCY,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  TextSize,\n  TextVariant,\n  colorText,\n  colorTextDark,\n} from './enums/tuix-text.enums.js';\nimport { textStyles } from './TuixText.styles.js';\nimport { buttonSizeStyles } from '../tuix-button/TuixButton.styles.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n  @property({ type: TextSize })\n  size = TextSize.Body1;\n\n  @property({ type: TextVariant })\n  color?: TextVariant;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  static styles = [\n    css`\n      .text {\n        font-family: 'Rubik', sans-serif;\n      }\n    `,\n    textStyles,\n    buttonSizeStyles,\n  ];\n\n  private _getTextColor() {\n    const defaultColor = this.dark\n      ? TextVariant.SECONDARY\n      : TextVariant.PRIMARY;\n    const colorMap = this.dark ? colorTextDark : colorText;\n    return colorMap[this.color || defaultColor];\n  }\n\n  render() {\n    return html` <div\n      class=\"text ${this.size}\"\n      style=\"${styleMap({\n        color: this._getTextColor(),\n      })}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
-import { palette } from '../../utils/colors';
-import { darkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var TextSize;
 (function (TextSize) {
     TextSize["XL"] = "xl";
@@ -25,19 +25,19 @@ export var TextVariant;
     TextVariant["SUCCESS"] = "success";
 })(TextVariant || (TextVariant = {}));
 export const colorText = {
-    [TextVariant.PRIMARY]: palette.black,
-    [TextVariant.SECONDARY]: palette.white,
-    [TextVariant.GREY]: palette.neutral_600,
-    [TextVariant.LIGHT_GREY]: palette.neutral_200,
-    [TextVariant.DISABLED]: palette.primary_200,
-    [TextVariant.VALIDATION]: palette.validation,
-    [TextVariant.ERROR]: palette.error,
-    [TextVariant.SUCCESS]: palette.success,
+    [TextVariant.PRIMARY]: Palette.BLACK,
+    [TextVariant.SECONDARY]: Palette.WHITE,
+    [TextVariant.GREY]: Palette.NEUTRAL_600,
+    [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,
+    [TextVariant.DISABLED]: Palette.PRIMARY_200,
+    [TextVariant.VALIDATION]: Palette.VALIDATION,
+    [TextVariant.ERROR]: Palette.ERROR,
+    [TextVariant.SUCCESS]: Palette.SUCCESS,
 };
 export const colorTextDark = {
     ...colorText,
-    [TextVariant.VALIDATION]: darkPalette.validation,
-    [TextVariant.ERROR]: darkPalette.error,
-    [TextVariant.SUCCESS]: darkPalette.success,
+    [TextVariant.VALIDATION]: DarkPalette.VALIDATION,
+    [TextVariant.ERROR]: DarkPalette.ERROR,
+    [TextVariant.SUCCESS]: DarkPalette.SUCCESS,
 };
 //# sourceMappingURL=tuix-text.enums.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,CAAN,IAAY,QAWX;AAXD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,qBAAS,CAAA;IACT,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;AACnB,CAAC,EAXW,QAAQ,KAAR,QAAQ,QAWnB;AAED,MAAM,CAAN,IAAY,WASX;AATD,WAAY,WAAW;IACrB,kCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,4BAAa,CAAA;IACb,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;IACrB,wCAAyB,CAAA;IACzB,8BAAe,CAAA;IACf,kCAAmB,CAAA;AACrB,CAAC,EATW,WAAW,KAAX,WAAW,QAStB;AAED,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW;IACvC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW;IAC7C,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU;IAC5C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC;IACxD,GAAG,SAAS;IACZ,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU;IAChD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;CAC3C,CAAC","sourcesContent":["import { palette } from '../../utils/colors';\nimport { darkPalette } from '../../utils/darkColors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport enum TextSize {\n  XL = 'xl',\n  L = 'l',\n  M = 'm',\n  S = 's',\n  XS = 'xs',\n  Body1 = 'body1',\n  Body2 = 'body2',\n  Button = 'button',\n  Field1 = 'field1',\n  Field2 = 'field2',\n}\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n}\n\nexport const colorText: Record<TextVariant, string> = {\n  [TextVariant.PRIMARY]: palette.black,\n  [TextVariant.SECONDARY]: palette.white,\n  [TextVariant.GREY]: palette.neutral_600,\n  [TextVariant.LIGHT_GREY]: palette.neutral_200,\n  [TextVariant.DISABLED]: palette.primary_200,\n  [TextVariant.VALIDATION]: palette.validation,\n  [TextVariant.ERROR]: palette.error,\n  [TextVariant.SUCCESS]: palette.success,\n};\n\nexport const colorTextDark: Record<TextVariant, string> = {\n  ...colorText,\n  [TextVariant.VALIDATION]: darkPalette.validation,\n  [TextVariant.ERROR]: darkPalette.error,\n  [TextVariant.SUCCESS]: darkPalette.success,\n};\n"]}
+{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../../src/tuix-text/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,MAAM,CAAN,IAAY,QAWX;AAXD,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,qBAAS,CAAA;IACT,2BAAe,CAAA;IACf,2BAAe,CAAA;IACf,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;IACjB,6BAAiB,CAAA;AACnB,CAAC,EAXW,QAAQ,KAAR,QAAQ,QAWnB;AAED,MAAM,CAAN,IAAY,WASX;AATD,WAAY,WAAW;IACrB,kCAA6B,CAAA;IAC7B,sCAAiC,CAAA;IACjC,4BAAa,CAAA;IACb,wCAAyB,CAAA;IACzB,oCAAqB,CAAA;IACrB,wCAAyB,CAAA;IACzB,8BAAe,CAAA;IACf,kCAAmB,CAAA;AACrB,CAAC,EATW,WAAW,KAAX,WAAW,QAStB;AAED,MAAM,CAAC,MAAM,SAAS,GAAgC;IACpD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK;IACpC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW;IACvC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW;IAC7C,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW;IAC3C,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU;IAC5C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IAClC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAgC;IACxD,GAAG,SAAS;IACZ,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU;IAChD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IACtC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;CAC3C,CAAC","sourcesContent":["import { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\nimport { MainVariant } from '../../utils/mainVariant.enum';\n\nexport enum TextSize {\n  XL = 'xl',\n  L = 'l',\n  M = 'm',\n  S = 's',\n  XS = 'xs',\n  Body1 = 'body1',\n  Body2 = 'body2',\n  Button = 'button',\n  Field1 = 'field1',\n  Field2 = 'field2',\n}\n\nexport enum TextVariant {\n  PRIMARY = MainVariant.PRIMARY,\n  SECONDARY = MainVariant.SECONDARY,\n  GREY = 'grey',\n  LIGHT_GREY = 'light_grey',\n  DISABLED = 'disabled',\n  VALIDATION = 'validation',\n  ERROR = 'error',\n  SUCCESS = 'success',\n}\n\nexport const colorText: Record<TextVariant, string> = {\n  [TextVariant.PRIMARY]: Palette.BLACK,\n  [TextVariant.SECONDARY]: Palette.WHITE,\n  [TextVariant.GREY]: Palette.NEUTRAL_600,\n  [TextVariant.LIGHT_GREY]: Palette.NEUTRAL_200,\n  [TextVariant.DISABLED]: Palette.PRIMARY_200,\n  [TextVariant.VALIDATION]: Palette.VALIDATION,\n  [TextVariant.ERROR]: Palette.ERROR,\n  [TextVariant.SUCCESS]: Palette.SUCCESS,\n};\n\nexport const colorTextDark: Record<TextVariant, string> = {\n  ...colorText,\n  [TextVariant.VALIDATION]: DarkPalette.VALIDATION,\n  [TextVariant.ERROR]: DarkPalette.ERROR,\n  [TextVariant.SUCCESS]: DarkPalette.SUCCESS,\n};\n"]}

package/dist/src/tuix-toggle-button/TuixToggleButton.js

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

package/dist/src/tuix-toggle-button/TuixToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixToggleButton.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAUE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAuCtC,CAAC;IArCS,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,OAAO;aAClD;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,gCAAgC,EAAE,IAAI;YACtC,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;SAC/D,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;sBAKnD,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,qBAAqB;;;;;;;gBAO/B,IAAI,CAAC,KAAK;;aAEb,CAAC;IACZ,CAAC;;AA3DM,uBAAM,GAAG;IACd,sBAAsB;IACtB,2BAA2B;IAC3B,2BAA2B;IAC3B,uBAAuB;IACvB,uBAAuB;CACxB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACS;AAtBzB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6D5B;SA7DY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport {\n  toggleButtonCheckmarkStyles,\n  toggleButtonContainerStyles,\n  toggleButtonHostStyles,\n  toggleButtonInnerStyles,\n  toggleButtonLabelStyles,\n} from './TuixToggleButton.styles';\n\n@customElement('tuix-toggle-button')\nexport class TuixToggleButton extends LitElement {\n  static styles = [\n    toggleButtonHostStyles,\n    toggleButtonContainerStyles,\n    toggleButtonCheckmarkStyles,\n    toggleButtonInnerStyles,\n    toggleButtonLabelStyles,\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: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onToggleButtonChange(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 _getFullContainerClasses(): ClassInfo {\n    return {\n      't-toggle-button-full-container': true,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render() {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-toggle-button-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-toggle-button\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onToggleButtonChange}\"\n        />\n        <div class=\"t-toggle-button-checkmark\">\n          <div class=\"t-toggle-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-toggle-button-label\">\n        <slot>${this.label}</slot>\n      </div>\n    </label>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixToggleButton.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAUE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAwCtC,CAAC;IAtCS,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,OAAO;gBACjD,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,gCAAgC,EAAE,IAAI;YACtC,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;SAC/D,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;sBAKnD,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,qBAAqB;;;;;;;gBAO/B,IAAI,CAAC,KAAK;;aAEb,CAAC;IACZ,CAAC;;AA5DM,uBAAM,GAAG;IACd,sBAAsB;IACtB,2BAA2B;IAC3B,2BAA2B;IAC3B,uBAAuB;IACvB,uBAAuB;CACxB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACS;AAtBzB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA8D5B;SA9DY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport {\n  toggleButtonCheckmarkStyles,\n  toggleButtonContainerStyles,\n  toggleButtonHostStyles,\n  toggleButtonInnerStyles,\n  toggleButtonLabelStyles,\n} from './TuixToggleButton.styles';\n\n@customElement('tuix-toggle-button')\nexport class TuixToggleButton extends LitElement {\n  static styles = [\n    toggleButtonHostStyles,\n    toggleButtonContainerStyles,\n    toggleButtonCheckmarkStyles,\n    toggleButtonInnerStyles,\n    toggleButtonLabelStyles,\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: String })\n  label = '';\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  private _onToggleButtonChange(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 _getFullContainerClasses(): ClassInfo {\n    return {\n      't-toggle-button-full-container': true,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n    };\n  }\n\n  protected render() {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-toggle-button-container\">\n        <input\n          type=\"checkbox\"\n          class=\"t-toggle-button\"\n          .checked=\"${this.checked}\"\n          ?disabled=\"${this.disabled}\"\n          @change=\"${this._onToggleButtonChange}\"\n        />\n        <div class=\"t-toggle-button-checkmark\">\n          <div class=\"t-toggle-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-toggle-button-label\">\n        <slot>${this.label}</slot>\n      </div>\n    </label>`;\n  }\n}\n"]}

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js

@@ -1,18 +1,18 @@
 import { css, unsafeCSS } from 'lit';
 import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { palette } from '../utils/colors';
-import { darkPalette } from '../utils/darkColors';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
 export const toggleButtonHostStyles = css `
   ${hostStyles}
   :host {
-    --t-bg-color-primary: ${unsafeCSS(palette.primary_300)};
-    --t-bg-color-disabled: ${unsafeCSS(palette.primary_100)};
+    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};
+    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
     --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);
     --t-toggle-inner-radio: 1rem;
   }
   :host([dark]) {
-    --t-bg-color-primary: ${unsafeCSS(darkPalette.primary_800)};
-    --t-bg-color-disabled: ${unsafeCSS(darkPalette.neutral_200)};
+    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.NEUTRAL_200)};
   }
 `;
 export const toggleButtonContainerStyles = css `
@@ -80,7 +80,7 @@ export const toggleButtonCheckmarkStyles = css `
 `;
 export const toggleButtonInnerStyles = css `
   .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {
-    background-color: ${unsafeCSS(palette.white)};
+    background-color: ${unsafeCSS(Palette.WHITE)};
     margin: auto auto auto 0.25rem;
     height: var(--t-toggle-inner-radio);
     width: var(--t-toggle-inner-radio);

package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;4BAK/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B7C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;wBAElB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;CAc/C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBzC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\n\nexport const toggleButtonHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(palette.primary_300)};\n    --t-bg-color-disabled: ${unsafeCSS(palette.primary_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n    --t-toggle-inner-radio: 1rem;\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(darkPalette.primary_800)};\n    --t-bg-color-disabled: ${unsafeCSS(darkPalette.neutral_200)};\n  }\n`;\n\nexport const toggleButtonContainerStyles = css`\n  .t-toggle-button-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-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 3rem;\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 3rem;\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`;\n\nexport const toggleButtonInnerStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: ${unsafeCSS(palette.white)};\n    margin: auto auto auto 0.25rem;\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(calc(3rem - var(--t-toggle-inner-radio) - 0.5rem));\n  }\n`;\n\nexport const toggleButtonLabelStyles = css`\n  .t-toggle-button-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-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}
+{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;4BAK/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;;CAE9D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B7C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;wBAElB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;CAc/C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBzC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\n\nexport const toggleButtonHostStyles = css`\n  ${hostStyles}\n  :host {\n    --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n    --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n    --t-toggle-inner-radio: 1rem;\n  }\n  :host([dark]) {\n    --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-bg-color-disabled: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n  }\n`;\n\nexport const toggleButtonContainerStyles = css`\n  .t-toggle-button-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-toggle-button-full-container {\n    cursor: not-allowed;\n  }\n  .t-toggle-button-container {\n    display: block;\n    position: relative;\n    height: 1.5rem;\n    width: 3rem;\n  }\n  .t-toggle-button-container .t-toggle-button {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  .t-radio-button-full-container:not(.t-with-label-left) {\n    justify-content: flex-start;\n  }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: 1.5rem;\n    width: 3rem;\n    border-radius: 0.75rem;\n    background-color: var(--t-bg-color-primary);\n    box-sizing: border-box;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-main-color-tuix);\n  }\n  .t-toggle-button-full-container:hover\n    .t-toggle-button-container\n    .t-toggle-button-checkmark {\n    box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:focus\n    ~ .t-toggle-button-checkmark {\n    box-shadow: 0 0 0px 2px var(--t-stroke-color-focus);\n  }\n  .t-toggle-button-container\n    .t-toggle-button:disabled\n    ~ .t-toggle-button-checkmark {\n    background-color: var(--t-bg-color-disabled);\n    box-shadow: none;\n  }\n`;\n\nexport const toggleButtonInnerStyles = css`\n  .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n    background-color: ${unsafeCSS(Palette.WHITE)};\n    margin: auto auto auto 0.25rem;\n    height: var(--t-toggle-inner-radio);\n    width: var(--t-toggle-inner-radio);\n    border-radius: 50%;\n    display: block;\n    transition: 0.3s;\n  }\n  .t-toggle-button-container\n    .t-toggle-button:checked\n    ~ .t-toggle-button-checkmark\n    .t-toggle-button-inner {\n    transform: translateX(calc(3rem - var(--t-toggle-inner-radio) - 0.5rem));\n  }\n`;\n\nexport const toggleButtonLabelStyles = css`\n  .t-toggle-button-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-toggle-button-full-container.t-with-label-left {\n    flex-direction: row-reverse;\n  }\n  .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n    margin-right: 0.625rem;\n    margin-left: 0;\n  }\n`;\n"]}

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

@@ -0,0 +1,2 @@
+import { CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface';
+export type CustomEventTuixToggle = CustomEventTuixCheckbox;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tuix-toggle.interface.js","sourceRoot":"","sources":["../../../../src/tuix-toggle-button/interfaces/tuix-toggle.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { CustomEventTuixCheckbox } from '../../tuix-checkbox/interfaces/tuix-checkbox.interface';\n\nexport type CustomEventTuixToggle = CustomEventTuixCheckbox;\n"]}

package/dist/src/utils/colors.d.ts

@@ -1 +1,24 @@
-export declare const palette: Record<string, string>;
+export declare enum Palette {
+    PRIMARY_50 = "#F5F5FA",
+    PRIMARY_100 = "#EBEAF4",
+    PRIMARY_200 = "#D1D1E6",
+    PRIMARY_300 = "#A8A9D1",
+    MAIN = "#585A9D",
+    PRIMARY_600 = "#454584",
+    PRIMARY_700 = "#3A396B",
+    PRIMARY_800 = "#32325A",
+    PRIMARY_900 = "#2E2D4D",
+    PRIMARY_950 = "#1F1E33",
+    SECONDARY = "#BBADFF",
+    WHITE = "#FFFFFF",
+    BLACK = "#121212",
+    NEUTRAL_200 = "#C9C8D3",
+    NEUTRAL_600 = "#8A8894",
+    SUCCESS = "#439F6E",
+    VALIDATION = "#FFB82E",
+    VALIDATION_50 = "#FFFBF4",
+    VALIDATION_200 = "#FFEAC1",
+    ERROR = "#F93232",
+    ERROR_50 = "#FFF5F5",
+    ERROR_200 = "#FFD8D8"
+}