tuix-webcomponents 0.55.0 → 0.56.0

package/README.md

@@ -12,8 +12,8 @@ npm i tuix-webcomponents
 
 ### Webbundle version
 
-Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-a8dd45b@0.55.0.js  
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-a8dd45b@0.55.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-2b7cb3e@0.56.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-2b7cb3e@0.56.0.css
 
 ### React .tsx with SSR
 

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

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import '../tuix-icon/TuixIcon.js';
 export declare abstract class TuixBaseButton extends LitElement {
     variant: MainVariant;

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

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
 import { property, state } from 'lit/decorators.js';
-import { buttonTextColor } from './enums/tuix-button.enums';
+import { buttonTextColor } from './enums/tuix-button.enums.js';
 import '../tuix-icon/TuixIcon.js';
 export class TuixBaseButton extends LitElement {
     constructor() {

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

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import { TuixBaseButton } from './TuixBaseButton';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
 export declare class TuixButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
     full: boolean;

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

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html, nothing } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles.js';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { TuixBaseButton } from './TuixBaseButton';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
 let TuixButton = class TuixButton extends TuixBaseButton {
     constructor() {
         super(...arguments);

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

@@ -1,10 +1,10 @@
 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';
-import slottedClassName from '../utils/slottedClassName';
-import { TextSize } from '../tuix-text/enums/tuix-text.enums';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import slottedClassName from '../utils/slottedClassName.js';
+import { TextSize } from '../tuix-text/enums/tuix-text.enums.js';
 export const hostButtonStyles = css `
   :host {
     --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};

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

@@ -1,2 +1,2 @@
-import { MainVariant } from '../../utils/mainVariant.enum';
+import { MainVariant } from '../../utils/mainVariant.enum.js';
 export declare const buttonTextColor: Record<MainVariant, string>;

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { MainVariant } from '../../utils/mainVariant.enum';
+import { Palette } from '../../utils/colors.js';
+import { MainVariant } from '../../utils/mainVariant.enum.js';
 export const buttonTextColor = {
     [MainVariant.PRIMARY]: Palette.WHITE,
     [MainVariant.SECONDARY]: Palette.MAIN,

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

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
+import { CheckboxLabelSide } from './enums/tuix-checkbox.enums.js';
 export declare class TuixCheckbox extends LitElement {
     static styles: import("lit").CSSResult[];
     checked: boolean;

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

@@ -2,10 +2,10 @@ 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 { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
-import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles.js';
+import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums.js';
 let TuixCheckbox = class TuixCheckbox extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const hostStyles = css `
   :host {
     --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum CheckboxIconMode {
     DEFAULT = "default",
     DISABLED = "disabled",

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

@@ -1,5 +1,5 @@
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var CheckboxIconMode;
 (function (CheckboxIconMode) {
     CheckboxIconMode["DEFAULT"] = "default";

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

@@ -1,4 +1,4 @@
-import { DetailValue } from '../../utils/interfaces/detail-value.interface';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export interface DetailValueCheckbox extends DetailValue<boolean> {
     label?: string;
 }

package/dist/src/tuix-dropdown/TuixDropdown.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface';
-import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
-import { DropdownType } from './enums/tuix-dropdown.enums';
+import { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
+import { DropdownType } from './enums/tuix-dropdown.enums.js';
 export declare class TuixDropdown extends LitElement {
     static styles: import("lit").CSSResult[];
     value?: TuixDropdownOption;

package/dist/src/tuix-dropdown/TuixDropdown.js

@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles';
-import { DescriptionType } from '../tuix-input/enums/tuix-input.enums';
-import { DropdownType } from './enums/tuix-dropdown.enums';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { dropdownHostStyles, dropdownMainContainerStyles, dropdownOptionStyles, } from './TuixDropdown.styles.js';
+import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
+import { DropdownType } from './enums/tuix-dropdown.enums.js';
 let TuixDropdown = class TuixDropdown extends LitElement {
     constructor() {
         super(...arguments);

package/dist/src/tuix-dropdown/TuixDropdown.styles.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-input/TuixInput.styles';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { DarkPalette } from '../utils/darkColors';
+import { hostStyles } from '../tuix-input/TuixInput.styles.js';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { DarkPalette } from '../utils/darkColors.js';
 export const dropdownHostStyles = css `
   ${hostStyles}
   :host {

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

@@ -1,5 +1,5 @@
-import { CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface';
-import { DetailValue } from '../../utils/interfaces/detail-value.interface';
+import { CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export type TuixDropdownPlainOption = string | number | boolean;
 export interface TuixDropdownObjectOption {
     name: string;

package/dist/src/tuix-icon/TuixIcon.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { IconName, IconSizeVariant } from './enums/tuix-icon.enums';
-import { TextVariant } from '../tuix-text/enums/tuix-text.enums';
+import { IconName, IconSizeVariant } from './enums/tuix-icon.enums.js';
+import { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
 export declare class TuixIcon extends LitElement {
     static styles: import("lit").CSSResult;
     name: IconName;

package/dist/src/tuix-icon/TuixIcon.icons.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit';
-import { IconName } from './enums/tuix-icon.enums';
+import { IconName } from './enums/tuix-icon.enums.js';
 export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => TemplateResult;
 type IconContentMapType = Record<IconName, string>;
 export declare const iconContentMap: IconContentMapType;

package/dist/src/tuix-icon/TuixIcon.icons.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
-import { Palette } from '../utils/colors';
-import { IconName } from './enums/tuix-icon.enums';
+import { Palette } from '../utils/colors.js';
+import { IconName } from './enums/tuix-icon.enums.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export const iconTemplate = (name, color = Palette.BLACK, fill) => {
     const iconName = name || IconName.ARROW_DOWN;

package/dist/src/tuix-icon/TuixIcon.js

@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums';
-import { iconTemplate } from './TuixIcon.icons';
-import { Palette } from '../utils/colors';
-import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums';
+import { IconName, IconSizeVariant, iconSize } from './enums/tuix-icon.enums.js';
+import { iconTemplate } from './TuixIcon.icons.js';
+import { Palette } from '../utils/colors.js';
+import { TextVariant, colorText, colorTextDark, } from '../tuix-text/enums/tuix-text.enums.js';
 let TuixIcon = class TuixIcon extends LitElement {
     constructor() {
         super(...arguments);

package/dist/src/tuix-icon-button/TuixIconButton.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
 export declare class TuixIconButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
     icon: IconName;

package/dist/src/tuix-icon-button/TuixIconButton.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
 let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);

package/dist/src/tuix-input/TuixInput.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult, CSSResult, PropertyValueMap } from 'lit';
 import '../tuix-icon/TuixIcon.js';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { DescriptionType, InputType } from './enums/tuix-input.enums.js';
 export declare class TuixInput extends LitElement {
     _inputId: string;

package/dist/src/tuix-input/TuixInput.js

@@ -3,7 +3,7 @@ import { LitElement, html, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { Palette } from '../utils/colors.js';
 import { DarkPalette } from '../utils/darkColors.js';
 import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';

package/dist/src/tuix-input/TuixInput.styles.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { hexToRgb } from '../utils/hex-rgb';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { hexToRgb } from '../utils/hex-rgb.js';
 const inputVars = {
     gapX: '10px',
     iconDesktopSize: '1.5rem',

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum InputType {
     TEXT = "text",
     SEARCH = "search",

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";

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

@@ -1,8 +1,8 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { DetailValue } from '../../utils/interfaces/detail-value.interface';
-import { InputIconLocation } from '../enums/tuix-input.enums';
-import { DarkPalette } from '../../utils/darkColors';
-import { Palette } from '../../utils/colors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { InputIconLocation } from '../enums/tuix-input.enums.js';
+import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors.js';
 export declare enum InputState {
     INACTIVE = "inactive",
     ACTIVE = "active",

package/dist/src/tuix-link/TuixLink.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
 export declare class TuixLink extends LitElement {
     static styles: import("lit").CSSResult[];
     href?: string;

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

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { LinkTarget } from './enums/linkTarget.enum';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { LinkTarget } from './enums/linkTarget.enum.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { linkStyles } from './TuixLink.styles';
-import { linkFontStyles } from '../tuix-text/TuixText.styles';
+import { linkStyles } from './TuixLink.styles.js';
+import { linkFontStyles } from '../tuix-text/TuixText.styles.js';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
 export const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';
 export const linkStyles = css `
   ${unsafeCSS(`

package/dist/src/tuix-modal/TuixModal.styles.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors.js';
 export const commonModalStyles = css `
   :host {
     display: none;

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

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
 export declare class TuixPaper extends LitElement {
     static styles: import("lit").CSSResult[];
     elevation: PaperElevation;

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

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { paperStyles } from './TuixPaper.styles';
+import { paperStyles } from './TuixPaper.styles.js';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-import { PaperElevation } from './enums/tuix-paper.enum';
-import { Palette } from '../utils/colors';
+import { PaperElevation } from './enums/tuix-paper.enum.js';
+import { Palette } from '../utils/colors.js';
 const calculatedStyles = Object.values(PaperElevation)
     .slice(1, -1)
     .map((variant, index) => `

package/dist/src/tuix-radio-button/TuixRadioButton.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface.js';
 export declare class TuixRadioButton extends LitElement {
     static styles: import("lit").CSSResult[];
     disabled: boolean;

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

@@ -2,9 +2,9 @@ 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 { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles.js';
 let TuixRadioButton = class TuixRadioButton extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { Palette } from '../utils/colors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles.js';
+import { Palette } from '../utils/colors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const radioHostStyles = css `
   ${hostStyles}
   :host {

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

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

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { TextSize } from './enums/tuix-text.enums';
-import slottedClassName from '../utils/slottedClassName';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { TextSize } from './enums/tuix-text.enums.js';
+import slottedClassName from '../utils/slottedClassName.js';
 export const linkFontStyles = css `
   ${unsafeCSS(`
   ${slottedClassName(TextSize.Link)} {

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.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var TextSize;
 (function (TextSize) {
     TextSize["XL"] = "xl";

package/dist/src/tuix-toast/TuixToast.styles.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const commonToastStyles = css `
   :host {
     position: fixed;

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export declare enum ToastType {
     NONE = "none",
     TEXT = "text",

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../../utils/colors';
-import { DarkPalette } from '../../utils/darkColors';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
+import { Palette } from '../../utils/colors.js';
+import { DarkPalette } from '../../utils/darkColors.js';
 export var ToastType;
 (function (ToastType) {
     ToastType["NONE"] = "none";

package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
 export declare class TuixToggleButton extends LitElement {
     static styles: import("lit").CSSResult[];
     checked: boolean;

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

@@ -2,9 +2,9 @@ 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 { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
-import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums.js';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles.js';
 let TuixToggleButton = class TuixToggleButton extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { ScreenSizes } from '../utils/screenSizes.enum';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles.js';
+import { Palette } from '../utils/colors.js';
+import { DarkPalette } from '../utils/darkColors.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
 export const toggleButtonHostStyles = css `
   ${hostStyles}
   :host {

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

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tuix-webcomponents following open-wc recommendations",
   "license": "MIT",
   "author": "tuix-webcomponents",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -19,7 +19,7 @@
     "prepare": "husky install",
     "analyze": "cem analyze --litelement",
     "start": "rm -rf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist && npm run build:css",
+    "build": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist && npm run build:css && tsc-esm-fix dist",
     "build:css": "mkdir -p dist/assets && npm run compileStylesJss --silent > dist/assets/tuix-styles.css",
     "compileStylesJss": "ts-node --project tsconfig.scripts.json ./scripts/build-styles.ts",
     "createWebbundle": "ts-node --project tsconfig.scripts.json ./scripts/build-webbundle.ts",
@@ -59,6 +59,7 @@
     "lint-staged": "^13.2.1",
     "prettier": "^2.8.8",
     "semver": "^7.5.4",
+    "tsc-esm-fix": "^3.1.2",
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
     "uuid": "^10.0.0"