tuix-webcomponents 0.0.24 → 0.0.26

package/dist/assets/tuix-styles.css

@@ -28,6 +28,7 @@
   --tuix-light-color-error-200: #FFD8D8;
   --tuix-light-color-section-bg: #FAFAFA;
   --tuix-light-color-disabled-bg: #EBEAF4;
+  --tuix-light-color-stroke-grey: #E1E0E7;
   --tuix-light-color-shadow: rgba(66, 79, 101, 0.16);
   --tuix-dark-color-primary-50: #F4F5FB;
   --tuix-dark-color-primary-100: #E3E5F4;
@@ -53,18 +54,18 @@
   --tuix-dark-color-black: #0F1117;
   --tuix-dark-color-neutral-200: #C9C8D3;
   --tuix-dark-color-neutral-600: #8A8894;
-  --tuix-dark-color-success: #439F6E;
-  --tuix-dark-color-#439f6e: SUCCESS;
+  --tuix-dark-color-success: #6BC49D;
   --tuix-dark-color-success-50: rgba(241, 249, 245, 0.30);
-  --tuix-dark-color-validation: #FFD489;
+  --tuix-dark-color-validation: #F5C66A;
   --tuix-dark-color-validation-50: rgba(255, 212, 137, 0.20);
   --tuix-dark-color-validation-200: #FFEAC1;
   --tuix-dark-color-#ffeac1: VALIDATION_200;
-  --tuix-dark-color-error: #FF8486;
+  --tuix-dark-color-error: #FF7A7A;
   --tuix-dark-color-error-50: rgba(255, 132, 134, 0.20);
   --tuix-dark-color-error-200: #FFD8D8;
   --tuix-dark-color-#ffd8d8: ERROR_200;
   --tuix-dark-color-section-bg: #0E0E0E;
+  --tuix-dark-color-stroke-grey: #32355F;
   --tuix-dark-color-elevation-1: #141722;
   --tuix-dark-color-elevation-2: #181C29;
   --tuix-dark-color-elevation-3: #1D2131;

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, PaginationEventDetail, 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';

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

@@ -1,42 +1,42 @@
 import { type EventName } from '@lit/react';
-import { TuixText as TuixTextElement, TuixIcon as TuixIconElement, TuixButton as TuixButtonElement, TuixPaper as TuixPaperElement, TuixIconButton as TuixIconButtonElement, TuixLink as TuixLinkElement, TuixInput as TuixInputElement, TuixDropdown as TuixDropdownElement, TuixCheckbox as TuixCheckboxElement, TuixRadioButton as TuixRadioButtonElement, TuixToggleButton as TuixToggleButtonElement, TuixTable as TuixTableElement, TuixToast as TuixToastElement, TuixModal as TuixModalElement } from '../index.js';
+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<TuixTextElement, {}>;
-export declare const TuixIcon: import("@lit/react").ReactWebComponent<TuixIconElement, {}>;
-export declare const TuixButton: import("@lit/react").ReactWebComponent<TuixButtonElement, {
+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<TuixPaperElement, {}>;
-export declare const TuixIconButton: import("@lit/react").ReactWebComponent<TuixIconButtonElement, {
+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<TuixLinkElement, {}>;
-export declare const TuixInput: import("@lit/react").ReactWebComponent<TuixInputElement, {
+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<TuixDropdownElement, {
+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<TuixCheckboxElement, {
+export declare const TuixCheckbox: import("@lit/react").ReactWebComponent<WrappedTuixCheckbox, {
     onChange: EventName<CustomEvent<DetailValueCheckbox>>;
 }>;
-export declare const TuixRadioButton: import("@lit/react").ReactWebComponent<TuixRadioButtonElement, {
+export declare const TuixRadioButton: import("@lit/react").ReactWebComponent<WrappedTuixRadioButton, {
     onChange: EventName<CustomEvent<DetailValue<string>>>;
 }>;
-export declare const TuixToggleButton: import("@lit/react").ReactWebComponent<TuixToggleButtonElement, {
+export declare const TuixToggleButton: import("@lit/react").ReactWebComponent<WrappedTuixToggleButton, {
     onChange: EventName<CustomEvent<DetailValueCheckbox>>;
 }>;
-export declare const TuixTable: import("@lit/react").ReactWebComponent<TuixTableElement, {
+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<TuixToastElement, {
+export declare const TuixToast: import("@lit/react").ReactWebComponent<WrappedTuixToast, {
     onClose: EventName<CustomEvent<undefined>>;
 }>;
-export declare const TuixModal: import("@lit/react").ReactWebComponent<TuixModalElement, {
+export declare const TuixModal: import("@lit/react").ReactWebComponent<WrappedTuixModal, {
     onClose: EventName<CustomEvent<undefined>>;
 }>;

package/dist/src/react/index.js

@@ -6,20 +6,20 @@
 // call. Importing from here registers the custom elements.
 import { createComponent } from '@lit/react';
 import * as React from 'react';
-import { TuixText as TuixTextElement, TuixIcon as TuixIconElement, TuixButton as TuixButtonElement, TuixPaper as TuixPaperElement, TuixIconButton as TuixIconButtonElement, TuixLink as TuixLinkElement, TuixInput as TuixInputElement, TuixDropdown as TuixDropdownElement, TuixCheckbox as TuixCheckboxElement, TuixRadioButton as TuixRadioButtonElement, TuixToggleButton as TuixToggleButtonElement, TuixTable as TuixTableElement, TuixToast as TuixToastElement, TuixModal as TuixModalElement, } from '../index.js';
+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: TuixTextElement,
+    elementClass: WrappedTuixText,
     react: React,
 });
 export const TuixIcon = createComponent({
     tagName: 'tuix-icon',
-    elementClass: TuixIconElement,
+    elementClass: WrappedTuixIcon,
     react: React,
 });
 export const TuixButton = createComponent({
     tagName: 'tuix-button',
-    elementClass: TuixButtonElement,
+    elementClass: WrappedTuixButton,
     react: React,
     events: {
         onCustomClick: 'customClick',
@@ -27,12 +27,12 @@ export const TuixButton = createComponent({
 });
 export const TuixPaper = createComponent({
     tagName: 'tuix-paper',
-    elementClass: TuixPaperElement,
+    elementClass: WrappedTuixPaper,
     react: React,
 });
 export const TuixIconButton = createComponent({
     tagName: 'tuix-icon-button',
-    elementClass: TuixIconButtonElement,
+    elementClass: WrappedTuixIconButton,
     react: React,
     events: {
         onCustomClick: 'customClick',
@@ -40,12 +40,12 @@ export const TuixIconButton = createComponent({
 });
 export const TuixLink = createComponent({
     tagName: 'tuix-link',
-    elementClass: TuixLinkElement,
+    elementClass: WrappedTuixLink,
     react: React,
 });
 export const TuixInput = createComponent({
     tagName: 'tuix-input',
-    elementClass: TuixInputElement,
+    elementClass: WrappedTuixInput,
     react: React,
     events: {
         onChange: 'on-change',
@@ -55,7 +55,7 @@ export const TuixInput = createComponent({
 });
 export const TuixDropdown = createComponent({
     tagName: 'tuix-dropdown',
-    elementClass: TuixDropdownElement,
+    elementClass: WrappedTuixDropdown,
     react: React,
     events: {
         onSelect: 'select',
@@ -64,7 +64,7 @@ export const TuixDropdown = createComponent({
 });
 export const TuixCheckbox = createComponent({
     tagName: 'tuix-checkbox',
-    elementClass: TuixCheckboxElement,
+    elementClass: WrappedTuixCheckbox,
     react: React,
     events: {
         onChange: 'change',
@@ -72,7 +72,7 @@ export const TuixCheckbox = createComponent({
 });
 export const TuixRadioButton = createComponent({
     tagName: 'tuix-radio-button',
-    elementClass: TuixRadioButtonElement,
+    elementClass: WrappedTuixRadioButton,
     react: React,
     events: {
         onChange: 'change',
@@ -80,7 +80,7 @@ export const TuixRadioButton = createComponent({
 });
 export const TuixToggleButton = createComponent({
     tagName: 'tuix-toggle-button',
-    elementClass: TuixToggleButtonElement,
+    elementClass: WrappedTuixToggleButton,
     react: React,
     events: {
         onChange: 'change',
@@ -88,7 +88,7 @@ export const TuixToggleButton = createComponent({
 });
 export const TuixTable = createComponent({
     tagName: 'tuix-table',
-    elementClass: TuixTableElement,
+    elementClass: WrappedTuixTable,
     react: React,
     events: {
         onNextPage: 'next-page',
@@ -98,7 +98,7 @@ export const TuixTable = createComponent({
 });
 export const TuixToast = createComponent({
     tagName: 'tuix-toast',
-    elementClass: TuixToastElement,
+    elementClass: WrappedTuixToast,
     react: React,
     events: {
         onClose: 'on-close',
@@ -106,7 +106,7 @@ export const TuixToast = createComponent({
 });
 export const TuixModal = createComponent({
     tagName: 'tuix-modal',
-    elementClass: TuixModalElement,
+    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,7 +1,7 @@
 import { LitElement, type TemplateResult } from 'lit';
 import '../tuix-icon/TuixIcon.js';
 import '../tuix-text/TuixText.js';
-import { CheckboxLabelSide } from './enums/tuix-checkbox.enums.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

@@ -4,10 +4,10 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-icon/TuixIcon.js';
 import '../tuix-text/TuixText.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 { 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,8 +1,8 @@
 import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import '../tuix-input/TuixInput.js';
-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 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

@@ -3,10 +3,10 @@ import { LitElement, html, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-input/TuixInput.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 { 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];
@@ -392,4 +392,12 @@ export const iconContentMap = {
     <path d="M12 20H21" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M16.5 3.50023C16.8978 3.1024 17.4374 2.87891 18 2.87891C18.2786 2.87891 18.5544 2.93378 18.8118 3.04038C19.0692 3.14699 19.303 3.30324 19.5 3.50023C19.697 3.69721 19.8532 3.93106 19.9598 4.18843C20.0665 4.4458 20.1213 4.72165 20.1213 5.00023C20.1213 5.2788 20.0665 5.55465 19.9598 5.81202C19.8532 6.06939 19.697 6.30324 19.5 6.50023L7 19.0002L3 20.0002L4 16.0002L16.5 3.50023Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`,
+    [IconName.MCP_LOGO]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m21.835 11.813-.083.081-8.706 8.537a.274.274 0 0 0-.004.388l.004.005 1.788 1.755a.825.825 0 0 1 .017 1.164l-.015.015a.86.86 0 0 1-1.205 0l-1.788-1.752a1.92 1.92 0 0 1 0-2.754l8.708-8.538a2.47 2.47 0 0 0 .046-3.492l-.046-.048-.051-.048a2.587 2.587 0 0 0-3.608-.003l-7.171 7.035h-.003l-.098.097a.863.863 0 0 1-1.204 0 .825.825 0 0 1-.015-1.164l.015-.015 7.273-7.135a2.47 2.47 0 0 0 .04-3.494l-.043-.045a2.587 2.587 0 0 0-3.61 0l-9.624 9.443a.86.86 0 0 1-1.203 0 .825.825 0 0 1-.017-1.164l.017-.015 9.625-9.444a4.313 4.313 0 0 1 6.015 0 4.12 4.12 0 0 1 1.205 3.54 4.3 4.3 0 0 1 3.609 1.18l.05.05a4.115 4.115 0 0 1 .08 5.82m-2.536-2.33a.825.825 0 0 0 .015-1.164l-.015-.015a.86.86 0 0 0-1.205 0l-7.117 6.983a2.587 2.587 0 0 1-3.61 0 2.47 2.47 0 0 1-.046-3.495l.047-.047 7.12-6.982a.825.825 0 0 0 .017-1.164l-.017-.015a.86.86 0 0 0-1.204 0l-7.12 6.98a4.114 4.114 0 0 0 0 5.9 4.314 4.314 0 0 0 6.016 0z" fill="#121212"/>
+  </svg>`,
+    [IconName.ENDPOINTS]: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M17 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6M7 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M21 7a3 3 0 1 0-6 0 3 3 0 0 0 6 0M10.5 10.5l4 4" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect width="8" height="8" x="3" y="3" rx="2" stroke="#121212" stroke-width="2"/>
+  <path d="M7 12v3M12 7h3" stroke="#121212" stroke-width="2" stroke-linecap="round"/>
+  </svg>`,
 };

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/enums/tuix-icon.enums.d.ts

@@ -85,5 +85,7 @@ export declare enum IconName {
     TRIANGLE_RIGHT = "triangle-right",
     FILE_PLUS = "file-plus",
     FILE_TEXT = "file-text",
-    HIGHLIGHT = "highlight"
+    HIGHLIGHT = "highlight",
+    MCP_LOGO = "mcp-logo",
+    ENDPOINTS = "endpoints"
 }

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

@@ -93,4 +93,6 @@ export var IconName;
     IconName["FILE_PLUS"] = "file-plus";
     IconName["FILE_TEXT"] = "file-text";
     IconName["HIGHLIGHT"] = "highlight";
+    IconName["MCP_LOGO"] = "mcp-logo";
+    IconName["ENDPOINTS"] = "endpoints";
 })(IconName || (IconName = {}));

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,6 @@ let TuixInput = class TuixInput extends LitElement {
     _handleInputBase(e, eventName) {
         this.dispatchEvent(new CustomEvent(eventName, {
             detail: {
-                // The listener is on the input itself, so the target is always one
-                // of the two; the fallback keeps the detail a string, which is what
-                // `CustomEventTuixInput` promises, rather than `false`.
                 value: e.target instanceof HTMLInputElement ||
                     e.target instanceof HTMLTextAreaElement
                     ? e.target.value

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',
@@ -34,6 +34,8 @@ export const hostStyles = css `
     --t-field-padding-top: 1.625rem;
     --t-field-padding-bottom: 0.625rem;
     --t-field-title-left-position: 1.25rem;
+    --t-field-title-font-size: 0.75rem;
+    --t-field-title-line-height: 0.875rem;
   }
   :host([dark]) {
     --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};
@@ -184,18 +186,27 @@ export const inputTitleStyles = css `
     -ms-user-select: none;
     user-select: none;
   }
+  .t-input.with-title:not(.t-textarea):focus + .t-title,
+  .t-input.with-title:not(.t-textarea):not(:placeholder-shown) + .t-title,
   .t-textarea-container .t-title {
-    top: 1rem;
-    transform: none;
+    font-size: var(--t-field-title-font-size);
+    line-height: var(--t-field-title-line-height);
   }
-  .t-input.with-title:focus + .t-title,
-  .t-input.with-title:not(:placeholder-shown) + .t-title {
-    font-size: 0.75rem;
-    font-weight: 300;
-    line-height: 0.875rem;
+  .t-input.with-title:not(.t-textarea):focus + .t-title,
+  .t-input.with-title:not(.t-textarea):not(:placeholder-shown) + .t-title {
     transform: translateY(0);
     top: 0.5rem;
   }
+  .t-textarea-container .t-title {
+    inset: var(--t-border-size) var(--t-border-size) auto;
+    padding: calc(
+        var(--t-field-padding-top) - var(--t-field-title-line-height) - 4px
+      )
+      var(--t-field-padding-x) 4px;
+    background-color: var(--t-field-color-form);
+    border-radius: 4px 4px 0 0;
+    transform: none;
+  }
 `;
 export const inputIconStyles = css `
   .t-input-container .t-icon-set-container {