tuix-webcomponents 0.91.1 → 0.92.0

package/dist/assets/tuix-styles.css

@@ -1,3 +1,5 @@
+@import url('https://hccdn.tuix.ch/rubik_d444e2375d.css');
+
 :root {
   --tuix-light-color-primary-50: #F2F3FA;
   --tuix-light-color-primary-100: #E3E5F4;
@@ -70,4 +72,8 @@
   --tuix-dark-color-elevation-2: #181C29;
   --tuix-dark-color-elevation-3: #1D2131;
   --tuix-dark-color-elevation-4: #23273A;
+  --tuix-dark-color-toast-success: #3C4046;
+  --tuix-dark-color-toast-warning: #3F382D;
+  --tuix-dark-color-toast-text: #181A32;
+  --tuix-dark-color-toast-error: #3F282D;
 }

package/dist/src/index.d.ts

@@ -2,7 +2,7 @@ export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button
 export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
 export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
 export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
-export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export type { CustomEventTuixRadioButton, TuixRadioButtonOption, } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
 export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
 export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
 export { TuixText } from './tuix-text/TuixText.js';
@@ -17,7 +17,7 @@ export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TuixTable } from './tuix-table/TuixTable.js';
-export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export type { IDataTableHeader, PaginationEventDetail, ThreeDotsLoaderConfig, TuixPaginationEvent, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
 export { TuixToast } from './tuix-toast/TuixToast.js';
 export { TuixModal } from './tuix-modal/TuixModal.js';
 export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
@@ -33,4 +33,3 @@ export { DarkPalette } from './utils/darkColors.js';
 export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
 export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export { ScreenSizes } from './utils/screenSizes.enum.js';
-export declare function loadFonts(): void;

package/dist/src/index.js

@@ -25,13 +25,3 @@ export { DarkPalette } from './utils/darkColors.js';
 export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
 export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
 export { ScreenSizes } from './utils/screenSizes.enum.js';
-export function loadFonts() {
-    const link1 = document.createElement('link');
-    link1.rel = 'preconnect';
-    link1.href = 'https://hccdn.tuix.ch';
-    const link3 = document.createElement('link');
-    link3.rel = 'stylesheet';
-    link3.href = 'https://hccdn.tuix.ch/rubik_d444e2375d.css';
-    document.head.appendChild(link1);
-    document.head.appendChild(link3);
-}

package/dist/src/react/index.d.ts

@@ -0,0 +1,42 @@
+import { type EventName } from '@lit/react';
+import { TuixText as WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal } from '../index.js';
+import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, TuixDropdownPlainOption } from '../index.js';
+export declare const TuixText: import("@lit/react").ReactWebComponent<WrappedTuixText, {}>;
+export declare const TuixIcon: import("@lit/react").ReactWebComponent<WrappedTuixIcon, {}>;
+export declare const TuixButton: import("@lit/react").ReactWebComponent<WrappedTuixButton, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixPaper: import("@lit/react").ReactWebComponent<WrappedTuixPaper, {}>;
+export declare const TuixIconButton: import("@lit/react").ReactWebComponent<WrappedTuixIconButton, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixLink: import("@lit/react").ReactWebComponent<WrappedTuixLink, {}>;
+export declare const TuixInput: import("@lit/react").ReactWebComponent<WrappedTuixInput, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+    onBlur: EventName<CustomEvent<DetailValue<string>>>;
+    onClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixDropdown: import("@lit/react").ReactWebComponent<WrappedTuixDropdown, {
+    onSelect: EventName<CustomEvent<DetailValue<TuixDropdownPlainOption>>>;
+    onInputSingle: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixCheckbox: import("@lit/react").ReactWebComponent<WrappedTuixCheckbox, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixRadioButton: import("@lit/react").ReactWebComponent<WrappedTuixRadioButton, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixToggleButton: import("@lit/react").ReactWebComponent<WrappedTuixToggleButton, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixTable: import("@lit/react").ReactWebComponent<WrappedTuixTable, {
+    onNextPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPreviousPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPageSizeChange: EventName<CustomEvent<PaginationEventDetail>>;
+}>;
+export declare const TuixToast: import("@lit/react").ReactWebComponent<WrappedTuixToast, {
+    onClose: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixModal: import("@lit/react").ReactWebComponent<WrappedTuixModal, {
+    onClose: EventName<CustomEvent<undefined>>;
+}>;

package/dist/src/react/index.js

@@ -0,0 +1,114 @@
+// Generated by scripts/build-react.ts. Do not edit by hand.
+//
+// React wrappers for every element, built with @lit/react: the props are the
+// element's own properties, so objects and arrays pass through untouched, and
+// each custom event arrives as an `on*` prop instead of an addEventListener
+// call. Importing from here registers the custom elements.
+import { createComponent } from '@lit/react';
+import * as React from 'react';
+import { TuixText as WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal, } from '../index.js';
+export const TuixText = createComponent({
+    tagName: 'tuix-text',
+    elementClass: WrappedTuixText,
+    react: React,
+});
+export const TuixIcon = createComponent({
+    tagName: 'tuix-icon',
+    elementClass: WrappedTuixIcon,
+    react: React,
+});
+export const TuixButton = createComponent({
+    tagName: 'tuix-button',
+    elementClass: WrappedTuixButton,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixPaper = createComponent({
+    tagName: 'tuix-paper',
+    elementClass: WrappedTuixPaper,
+    react: React,
+});
+export const TuixIconButton = createComponent({
+    tagName: 'tuix-icon-button',
+    elementClass: WrappedTuixIconButton,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixLink = createComponent({
+    tagName: 'tuix-link',
+    elementClass: WrappedTuixLink,
+    react: React,
+});
+export const TuixInput = createComponent({
+    tagName: 'tuix-input',
+    elementClass: WrappedTuixInput,
+    react: React,
+    events: {
+        onChange: 'on-change',
+        onBlur: 'on-blur',
+        onClick: 'on-click',
+    },
+});
+export const TuixDropdown = createComponent({
+    tagName: 'tuix-dropdown',
+    elementClass: WrappedTuixDropdown,
+    react: React,
+    events: {
+        onSelect: 'select',
+        onInputSingle: 'input-single',
+    },
+});
+export const TuixCheckbox = createComponent({
+    tagName: 'tuix-checkbox',
+    elementClass: WrappedTuixCheckbox,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixRadioButton = createComponent({
+    tagName: 'tuix-radio-button',
+    elementClass: WrappedTuixRadioButton,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixToggleButton = createComponent({
+    tagName: 'tuix-toggle-button',
+    elementClass: WrappedTuixToggleButton,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixTable = createComponent({
+    tagName: 'tuix-table',
+    elementClass: WrappedTuixTable,
+    react: React,
+    events: {
+        onNextPage: 'next-page',
+        onPreviousPage: 'previous-page',
+        onPageSizeChange: 'page-size-change',
+    },
+});
+export const TuixToast = createComponent({
+    tagName: 'tuix-toast',
+    elementClass: WrappedTuixToast,
+    react: React,
+    events: {
+        onClose: 'on-close',
+    },
+});
+export const TuixModal = createComponent({
+    tagName: 'tuix-modal',
+    elementClass: WrappedTuixModal,
+    react: React,
+    events: {
+        onClose: 'on-close',
+    },
+});

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

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

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.js';
+import { MainVariant } from '../utils/mainVariant.enum';
 import { property, state } from 'lit/decorators.js';
-import { buttonTextColor } from './enums/tuix-button.enums.js';
+import { buttonTextColor } from './enums/tuix-button.enums';
 import '../tuix-icon/TuixIcon.js';
 export class TuixBaseButton extends LitElement {
     constructor() {

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

@@ -1,6 +1,6 @@
 import { type TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
-import { TuixBaseButton } from './TuixBaseButton.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { TuixBaseButton } from './TuixBaseButton';
 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.js';
-import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-import { TuixBaseButton } from './TuixBaseButton.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { TuixBaseButton } from './TuixBaseButton';
 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.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';
+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';
 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.js';
+import { MainVariant } from '../../utils/mainVariant.enum';
 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.js';
-import { MainVariant } from '../../utils/mainVariant.enum.js';
+import { Palette } from '../../utils/colors';
+import { MainVariant } from '../../utils/mainVariant.enum';
 export const buttonTextColor = {
     [MainVariant.PRIMARY]: Palette.WHITE,
     [MainVariant.SECONDARY]: Palette.MAIN,

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

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

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

@@ -2,10 +2,12 @@ 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.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';
+import '../tuix-icon/TuixIcon.js';
+import '../tuix-text/TuixText.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';
 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.js';
-import { DarkPalette } from '../utils/darkColors.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 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.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 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.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var CheckboxIconMode;
 (function (CheckboxIconMode) {
     CheckboxIconMode["DEFAULT"] = "default";

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

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

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

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

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

@@ -2,10 +2,11 @@ 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.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';
+import '../tuix-input/TuixInput.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';
 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.js';
-import { Palette } from '../utils/colors.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-import { DarkPalette } from '../utils/darkColors.js';
+import { hostStyles } from '../tuix-input/TuixInput.styles';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { DarkPalette } from '../utils/darkColors';
 export const dropdownHostStyles = css `
   ${hostStyles}
   :host {

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

@@ -1,5 +1,5 @@
-import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
-import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
 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.js';
-import { TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { IconName, IconSizeVariant } from './enums/tuix-icon.enums';
+import { TextVariant } from '../tuix-text/enums/tuix-text.enums';
 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 { html } from 'lit';
-import { IconName } from './enums/tuix-icon.enums.js';
+import { IconName } from './enums/tuix-icon.enums';
 export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => ReturnType<typeof html>;
 type IconContentMapType = Record<IconName, string>;
 export declare const iconContentMap: IconContentMapType;

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

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

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.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';
+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';
 let TuixIcon = class TuixIcon extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1,6 +1,6 @@
 import { type TemplateResult } from 'lit';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
 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.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
 import { customElement, property } from 'lit/decorators.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles.js';
-import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { buttonColorStyles, hostButtonStyles, } from '../tuix-button/TuixButton.styles';
+import { TuixBaseButton } from '../tuix-button/TuixBaseButton';
 let TuixIconButton = class TuixIconButton extends TuixBaseButton {
     constructor() {
         super(...arguments);

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

@@ -1,6 +1,6 @@
 import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } from 'lit';
 import '../tuix-icon/TuixIcon.js';
-import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
 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.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
 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';
@@ -51,9 +51,10 @@ let TuixInput = class TuixInput extends LitElement {
     _handleInputBase(e, eventName) {
         this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
-                value: (e.target instanceof HTMLInputElement ||
-                    e.target instanceof HTMLTextAreaElement) &&
-                    e.target.value,
+                value: e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement
+                    ? e.target.value
+                    : '',
             },
             bubbles: true,
         }));

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

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
-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';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { hexToRgb } from '../utils/hex-rgb';
 const inputVars = {
     gapX: '10px',
     iconDesktopSize: '1.5rem',
@@ -39,6 +39,7 @@ export const hostStyles = css `
   }
   :host([dark]) {
     --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};
+    --t-field-color-title: ${unsafeCSS(DarkPalette.PRIMARY_400)};
     --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};
     --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};
     --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};

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

@@ -1,6 +1,6 @@
-import { IconName } from '../../tuix-icon/enums/tuix-icon.enums.js';
-import { Palette } from '../../utils/colors.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 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.js';
-import { Palette } from '../../utils/colors.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 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.js';
-import { type 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';
+import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface';
+import { InputIconLocation } from '../enums/tuix-input.enums';
+import { DarkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors';
 export declare const InputState: {
     INACTIVE: string;
     ACTIVE: string;

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

@@ -1,6 +1,6 @@
 import { LitElement, type TemplateResult } from 'lit';
-import { MainVariant } from '../utils/mainVariant.enum.js';
-import { LinkTarget } from './enums/linkTarget.enum.js';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { LinkTarget } from './enums/linkTarget.enum';
 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.js';
-import { LinkTarget } from './enums/linkTarget.enum.js';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { LinkTarget } from './enums/linkTarget.enum';
 import { classMap } from 'lit/directives/class-map.js';
-import { linkStyles } from './TuixLink.styles.js';
-import { linkFontStyles } from '../tuix-text/TuixText.styles.js';
+import { linkStyles } from './TuixLink.styles';
+import { linkFontStyles } from '../tuix-text/TuixText.styles';
 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.js';
-import { Palette } from '../utils/colors.js';
-import { DarkPalette } from '../utils/darkColors.js';
+import { MainVariant } from '../utils/mainVariant.enum';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
 export const LINK_TEXT_COLOR_VAR_NAME = '--t-link-text-color';
 export const linkStyles = css `
   ${unsafeCSS(`