tuix-webcomponents 0.73.0 → 0.74.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-c1c2572@0.73.0.js  
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-c1c2572@0.73.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-fcb4c69@0.74.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-fcb4c69@0.74.0.css
 
 ### React .tsx with SSR
 

package/dist/assets/tuix-styles.css

@@ -27,20 +27,32 @@
   --tuix-light-color-section-bg: #FAFAFA;
   --tuix-light-color-shadow: rgba(66, 79, 101, 0.16);
   --tuix-dark-color-primary-50: #F5F5FA;
+  --tuix-dark-color-#f5f5fa: PRIMARY_50;
   --tuix-dark-color-primary-100: #EBEAF4;
+  --tuix-dark-color-#ebeaf4: PRIMARY_100;
   --tuix-dark-color-primary-200: #D1D1E6;
+  --tuix-dark-color-#d1d1e6: PRIMARY_200;
   --tuix-dark-color-primary-300: #A8A9D1;
+  --tuix-dark-color-#a8a9d1: PRIMARY_300;
   --tuix-dark-color-main: #7A7CB6;
   --tuix-dark-color-dark-main: #33355B;
+  --tuix-dark-color-#33355b: DARK_MAIN;
   --tuix-dark-color-primary-600: #454584;
+  --tuix-dark-color-#454584: PRIMARY_600;
   --tuix-dark-color-primary-700: #3A396B;
+  --tuix-dark-color-#3a396b: PRIMARY_700;
   --tuix-dark-color-primary-800: #32325A;
+  --tuix-dark-color-#32325a: PRIMARY_800;
   --tuix-dark-color-primary-900: #2E2D4D;
+  --tuix-dark-color-#2e2d4d: PRIMARY_900;
   --tuix-dark-color-primary-950: #1F1E33;
+  --tuix-dark-color-#1f1e33: PRIMARY_950;
   --tuix-dark-color-secondary: #BBADFF;
+  --tuix-dark-color-#bbadff: SECONDARY;
   --tuix-dark-color-white: rgba(255, 255, 255, 0.87);
   --tuix-dark-color-black: #121212;
   --tuix-dark-color-neutral-200: #C9C8D3;
+  --tuix-dark-color-#c9c8d3: NEUTRAL_200;
   --tuix-dark-color-neutral-600: rgba(255, 255, 255, 0.60);
   --tuix-dark-color-success: #82C5A9;
   --tuix-dark-color-success-50: rgba(241, 249, 245, 0.30);
@@ -50,6 +62,7 @@
   --tuix-dark-color-error: #FF8486;
   --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-elevation-1: #17171A;
   --tuix-dark-color-elevation-2: #1A1A1F;

package/dist/src/index.d.ts

@@ -1,10 +1,10 @@
-export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
-export { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
-export { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
-export { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
-export { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
-export { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
-export { DetailValue } from './utils/interfaces/detail-value.interface.js';
+export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+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 { 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';
 export { TuixIcon } from './tuix-icon/TuixIcon.js';
 export { TuixButton } from './tuix-button/TuixButton.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 { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export type { IDataTableHeader, 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/index.js

@@ -40,4 +40,3 @@ export function loadFonts() {
     document.head.appendChild(link2);
     document.head.appendChild(link3);
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+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 '../tuix-icon/TuixIcon.js';

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

@@ -16,8 +16,7 @@ export class TuixBaseButton extends LitElement {
         this._updateIconColor();
     }
     _getTextColor() {
-        var _a;
-        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
+        const element = this.shadowRoot?.querySelector('.button');
         if (!element)
             return buttonTextColor[this.variant];
         const computedStyle = getComputedStyle(element);
@@ -59,4 +58,3 @@ __decorate([
 __decorate([
     state()
 ], TuixBaseButton.prototype, "iconColor", void 0);
-//# sourceMappingURL=TuixBaseButton.js.map

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { TuixBaseButton } from './TuixBaseButton.js';
 export declare class TuixButton extends TuixBaseButton {

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

@@ -10,25 +10,8 @@ let TuixButton = class TuixButton extends TuixBaseButton {
         super(...arguments);
         this.full = false;
     }
-    _updateIconColor() {
-        if (!this.iconLeft && !this.iconRight)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        let iconSize = IconSizeVariant.MEDIUM;
-        if (screen.width <= ScreenSizes.TABLET) {
-            iconSize = IconSizeVariant.SMALL;
-        }
-        return html ` <div class="container">
-      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
-      <slot></slot>
-      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
-    </div>`;
-    }
-};
-TuixButton.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host([full]) .button {
         width: 100%;
       }
@@ -65,10 +48,27 @@ TuixButton.styles = [
         }
       }
     `,
-    hostButtonStyles,
-    buttonColorStyles,
-    buttonSizeStyles,
-];
+        hostButtonStyles,
+        buttonColorStyles,
+        buttonSizeStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
+    }
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixButton.prototype, "full", void 0);
@@ -82,4 +82,3 @@ TuixButton = __decorate([
     customElement('tuix-button')
 ], TuixButton);
 export { TuixButton };
-//# sourceMappingURL=TuixButton.js.map

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

@@ -105,4 +105,3 @@ export const buttonColorStyles = css `
     cursor: not-allowed;
   }
 `;
-//# sourceMappingURL=TuixButton.styles.js.map

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

@@ -4,4 +4,3 @@ export const buttonTextColor = {
     [MainVariant.PRIMARY]: Palette.WHITE,
     [MainVariant.SECONDARY]: Palette.MAIN,
 };
-//# sourceMappingURL=tuix-button.enums.js.map

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

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

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

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

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

@@ -16,6 +16,12 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
         this.label = '';
         this.labelSide = CheckboxLabelSide.RIGHT;
     }
+    static { this.styles = [
+        hostStyles,
+        checkboxContainerStyles,
+        checkboxCheckmarkStyles,
+        checkboxLabelStyles,
+    ]; }
     _onCheckboxChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -76,12 +82,6 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
     </label>`;
     }
 };
-TuixCheckbox.styles = [
-    hostStyles,
-    checkboxContainerStyles,
-    checkboxCheckmarkStyles,
-    checkboxLabelStyles,
-];
 __decorate([
     property({ type: Boolean })
 ], TuixCheckbox.prototype, "checked", void 0);
@@ -104,4 +104,3 @@ TuixCheckbox = __decorate([
     customElement('tuix-checkbox')
 ], TuixCheckbox);
 export { TuixCheckbox };
-//# sourceMappingURL=TuixCheckbox.js.map

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

@@ -130,4 +130,3 @@ export const checkboxLabelStyles = css `
     margin-left: 0;
   }
 `;
-//# sourceMappingURL=TuixCheckbox.styles.js.map

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

@@ -21,4 +21,3 @@ export const CheckboxIconColorDark = {
     [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,
     [CheckboxIconMode.ERROR]: DarkPalette.WHITE,
 };
-//# sourceMappingURL=tuix-checkbox.enums.js.map

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

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

package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.js

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

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

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
+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';
 export declare class TuixDropdown extends LitElement {

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+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';
@@ -29,6 +29,11 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             }
         };
     }
+    static { this.styles = [
+        dropdownHostStyles,
+        dropdownMainContainerStyles,
+        dropdownOptionStyles,
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('click', this._handleClickOutside);
@@ -90,9 +95,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _handleBlur() {
-        var _a;
         if (this.type === DropdownType.SEARCH && this._searchingOption) {
-            const optionIndex = (_a = this._previousSelectedOption) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value');
+            const optionIndex = this._previousSelectedOption?.getAttribute('data-value');
             const selectedValue = typeof optionIndex === 'string'
                 ? this.options[Number(optionIndex)]
                 : '';
@@ -101,7 +105,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _getOptionName(option) {
-        return String(typeof option === 'object' ? option === null || option === void 0 ? void 0 : option.name : option);
+        return String(typeof option === 'object' ? option?.name : option);
     }
     _getOptionValue(option) {
         return typeof option === 'object' ? option.value : option;
@@ -137,30 +141,28 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         });
     }
     _handleArrowDown() {
-        var _a;
-        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        const nextOption = this._previousFocusedOption
+            ?.nextElementSibling;
         if (nextOption) {
             this._focusTargetOption(nextOption);
         }
     }
     _handleArrowUp() {
-        var _a;
-        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+        const previousOption = this._previousFocusedOption
+            ?.previousElementSibling;
         if (previousOption) {
             this._focusTargetOption(previousOption);
         }
     }
     _focusTargetOption(targetOption, extrict = true) {
-        var _a, _b;
-        (_b = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('t-option-hover');
-        targetOption === null || targetOption === void 0 ? void 0 : targetOption.classList.add('t-option-hover');
+        this._previousFocusedOption?.classList?.remove('t-option-hover');
+        targetOption?.classList.add('t-option-hover');
         if (extrict) {
-            targetOption === null || targetOption === void 0 ? void 0 : targetOption.focus();
+            targetOption?.focus();
         }
         this._previousFocusedOption = targetOption;
     }
     _toggleOptions() {
-        var _a, _b, _c, _d;
         if (this.disabled) {
             return;
         }
@@ -168,15 +170,14 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         if (this._isOptionsVisible &&
             this.type === DropdownType.SEARCH &&
             this._previousSelectedOption) {
-            (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            this._optionsContainer?.scrollTo({
                 top: this._previousSelectedOption.offsetTop,
                 behavior: 'auto',
             });
-            (_d = (_c = (_b = this._inputDropdown) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input')) === null || _d === void 0 ? void 0 : _d.select();
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.select();
         }
     }
     _focusOptionsContainer() {
-        var _a, _b, _c;
         if (this.type === DropdownType.SEARCH) {
             if (this._previousSelectedOption) {
                 this._focusTargetOption(this._previousSelectedOption, false);
@@ -184,7 +185,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             return;
         }
         if (!this._isOptionsVisible || !this._optionsContainer) {
-            (_c = (_b = (_a = this._inputDropdown) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();
             return;
         }
         if (this._previousSelectedOption) {
@@ -199,9 +200,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _unselectPreviousOption() {
-        var _a;
         if (this._previousSelectedOption) {
-            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.remove('t-option-selected');
+            this._previousSelectedOption.classList?.remove('t-option-selected');
             this._previousSelectedOption = null;
         }
     }
@@ -220,7 +220,6 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         };
     }
     _triggerUpdateByExternalValueChange() {
-        var _a;
         this._unselectPreviousOption();
         if (!this.value) {
             this._value = '';
@@ -235,8 +234,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             this._value = '';
             return;
         }
-        const optionTarget = (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.children[index];
-        optionTarget === null || optionTarget === void 0 ? void 0 : optionTarget.classList.add('t-option-selected');
+        const optionTarget = this._optionsContainer?.children[index];
+        optionTarget?.classList.add('t-option-selected');
         this._previousSelectedOption = optionTarget || null;
         this._value = optionTarget ? this._getOptionName(this.options[index]) : '';
     }
@@ -245,11 +244,10 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         this._unselectPreviousOption();
     }
     _getOptionsTemplate() {
-        var _a;
         if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
             this._extendOptionsList();
         }
-        return (_a = this._extendedOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+        return this._extendedOptions?.map((option, index) => {
             return html `<div
         class="${classMap({
                 't-dropdown-option': true,
@@ -311,11 +309,6 @@ let TuixDropdown = class TuixDropdown extends LitElement {
     </div>`;
     }
 };
-TuixDropdown.styles = [
-    dropdownHostStyles,
-    dropdownMainContainerStyles,
-    dropdownOptionStyles,
-];
 __decorate([
     property({ type: Object })
 ], TuixDropdown.prototype, "value", void 0);
@@ -365,4 +358,3 @@ TuixDropdown = __decorate([
     customElement('tuix-dropdown')
 ], TuixDropdown);
 export { TuixDropdown };
-//# sourceMappingURL=TuixDropdown.js.map

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

@@ -123,4 +123,3 @@ export const dropdownOptionStyles = css `
     }
   }
 `;
-//# sourceMappingURL=TuixDropdown.styles.js.map

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

@@ -3,4 +3,3 @@ export var DropdownType;
     DropdownType["SINGLE"] = "single";
     DropdownType["SEARCH"] = "search";
 })(DropdownType || (DropdownType = {}));
-//# sourceMappingURL=tuix-dropdown.enums.js.map

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

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

package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js

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

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

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

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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export const iconTemplate = (name, color = Palette.BLACK, fill) => {
     const iconName = name || IconName.ARROW_DOWN;
     const iconContent = iconContentMap[iconName];
@@ -297,4 +297,3 @@ export const iconContentMap = {
   <path d="M12 5v14M19 12l-7 7-7-7" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
 };
-//# sourceMappingURL=TuixIcon.icons.js.map

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

@@ -13,6 +13,19 @@ let TuixIcon = class TuixIcon extends LitElement {
         this.size = IconSizeVariant.SMALL;
         this.dark = false;
     }
+    static { this.styles = css `
+    .icon-component {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `; }
     _getSelectedColor(color) {
         let selectedColor = color || this.color || TextVariant.PRIMARY;
         if (Object.values(TextVariant).includes(selectedColor)) {
@@ -33,8 +46,7 @@ let TuixIcon = class TuixIcon extends LitElement {
         return iconTemplate(this.name, this._getSelectedColor(), this._getSelectedFill());
     }
     render() {
-        var _a;
-        const selectedSize = (_a = iconSize[this.size]) !== null && _a !== void 0 ? _a : iconSize[IconSizeVariant.SMALL];
+        const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];
         const dynamicStyles = {
             width: selectedSize,
             height: selectedSize,
@@ -46,19 +58,6 @@ let TuixIcon = class TuixIcon extends LitElement {
     `;
     }
 };
-TuixIcon.styles = css `
-    .icon-component {
-      width: 24px;
-      height: 24px;
-      display: block;
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-  `;
 __decorate([
     property({ type: IconName })
 ], TuixIcon.prototype, "name", void 0);
@@ -78,4 +77,3 @@ TuixIcon = __decorate([
     customElement('tuix-icon')
 ], TuixIcon);
 export { TuixIcon };
-//# sourceMappingURL=TuixIcon.js.map

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

@@ -70,4 +70,3 @@ export var IconName;
     IconName["CHAT"] = "chat";
     IconName["SCROLL_DOWN"] = "scroll-down";
 })(IconName || (IconName = {}));
-//# sourceMappingURL=tuix-icon.enums.js.map

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
 export declare class TuixIconButton extends TuixBaseButton {

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

@@ -10,17 +10,8 @@ let TuixIconButton = class TuixIconButton extends TuixBaseButton {
         super(...arguments);
         this.icon = IconName.ARROW_DOWN;
     }
-    _updateIconColor() {
-        if (!this.icon)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
-    }
-};
-TuixIconButton.styles = [
-    css `
+    static { this.styles = [
+        css `
       .button {
         padding: 16px;
         border-radius: 4px;
@@ -39,9 +30,18 @@ TuixIconButton.styles = [
         }
       }
     `,
-    hostButtonStyles,
-    buttonColorStyles,
-];
+        hostButtonStyles,
+        buttonColorStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
+    }
+};
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
@@ -49,4 +49,3 @@ TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);
 export { TuixIconButton };
-//# sourceMappingURL=TuixIconButton.js.map

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

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, CSSResult, PropertyValueMap } from 'lit';
+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 { DescriptionType, InputType } from './enums/tuix-input.enums.js';