tuix-webcomponents 0.0.24 → 0.0.26

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(`

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

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

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

@@ -1,5 +1,5 @@
 import { LitElement, type TemplateResult } from 'lit';
-import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum.js';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
 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.js';
+import { BorderRadiusPaper, PaperElevation } from './enums/tuix-paper.enum';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { paperStyles } from './TuixPaper.styles.js';
+import { paperStyles } from './TuixPaper.styles';
 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.js';
-import { Palette } from '../utils/colors.js';
+import { PaperElevation } from './enums/tuix-paper.enum';
+import { Palette } from '../utils/colors';
 const calculatedStyles = Object.values(PaperElevation)
     .slice(1, -1)
     .map((variant, index) => `

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

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

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

@@ -3,9 +3,9 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-text/TuixText.js';
-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';
+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';
 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.js';
-import { Palette } from '../utils/colors.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 export const radioHostStyles = css `
   ${hostStyles}
   :host {

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

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

package/dist/src/tuix-table/TuixTable.js

@@ -5,11 +5,11 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import '../tuix-icon/TuixIcon.js';
 import '../tuix-text/TuixText.js';
-import { tableStyles, threeDots } from './TuixTable.styles.js';
-import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums.js';
+import { tableStyles, threeDots } from './TuixTable.styles';
+import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
-import { Palette } from '../utils/colors.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { Palette } from '../utils/colors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 let TuixTable = class TuixTable extends LitElement {
     constructor() {
         super(...arguments);

package/dist/src/tuix-table/TuixTable.styles.js

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

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

@@ -1,7 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
-import { TextSize } from './enums/tuix-text.enums.js';
-import slottedClassName from '../utils/slottedClassName.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
+import { TextSize } from './enums/tuix-text.enums';
+import slottedClassName from '../utils/slottedClassName';
 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.js';
-import { DarkPalette } from '../../utils/darkColors.js';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var TextSize;
 (function (TextSize) {
     TextSize["XXL"] = "xxl";

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

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 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.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 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.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 ToastType;
 (function (ToastType) {
     ToastType["NONE"] = "none";

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

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

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

@@ -3,9 +3,9 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../tuix-text/TuixText.js';
-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';
+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';
 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.js';
-import { Palette } from '../utils/colors.js';
-import { DarkPalette } from '../utils/darkColors.js';
-import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { ScreenSizes } from '../utils/screenSizes.enum';
 export const toggleButtonHostStyles = css `
   ${hostStyles}
   :host {

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

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

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

@@ -26,5 +26,6 @@ export declare enum Palette {
     ERROR_200 = "#FFD8D8",
     SECTION_BG = "#FAFAFA",
     DISABLED_BG = "#EBEAF4",
+    STROKE_GREY = "#E1E0E7",
     SHADOW = "rgba(66, 79, 101, 0.16)"
 }

package/dist/src/utils/colors.js

@@ -27,5 +27,6 @@ export var Palette;
     Palette["ERROR_200"] = "#FFD8D8";
     Palette["SECTION_BG"] = "#FAFAFA";
     Palette["DISABLED_BG"] = "#EBEAF4";
+    Palette["STROKE_GREY"] = "#E1E0E7";
     Palette["SHADOW"] = "rgba(66, 79, 101, 0.16)";
 })(Palette || (Palette = {}));

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

@@ -16,15 +16,16 @@ export declare enum DarkPalette {
     BLACK = "#0F1117",
     NEUTRAL_200 = "#C9C8D3",
     NEUTRAL_600 = "#8A8894",
-    SUCCESS = "#439F6E",
+    SUCCESS = "#6BC49D",
     SUCCESS_50 = "rgba(241, 249, 245, 0.30)",
-    VALIDATION = "#FFD489",
+    VALIDATION = "#F5C66A",
     VALIDATION_50 = "rgba(255, 212, 137, 0.20)",
     VALIDATION_200 = "#FFEAC1",
-    ERROR = "#FF8486",
+    ERROR = "#FF7A7A",
     ERROR_50 = "rgba(255, 132, 134, 0.20)",
     ERROR_200 = "#FFD8D8",
     SECTION_BG = "#0E0E0E",
+    STROKE_GREY = "#32355F",
     ELEVATION_1 = "#141722",
     ELEVATION_2 = "#181C29",
     ELEVATION_3 = "#1D2131",

package/dist/src/utils/darkColors.js

@@ -17,15 +17,16 @@ export var DarkPalette;
     DarkPalette["BLACK"] = "#0F1117";
     DarkPalette["NEUTRAL_200"] = "#C9C8D3";
     DarkPalette["NEUTRAL_600"] = "#8A8894";
-    DarkPalette["SUCCESS"] = "#439F6E";
+    DarkPalette["SUCCESS"] = "#6BC49D";
     DarkPalette["SUCCESS_50"] = "rgba(241, 249, 245, 0.30)";
-    DarkPalette["VALIDATION"] = "#FFD489";
+    DarkPalette["VALIDATION"] = "#F5C66A";
     DarkPalette["VALIDATION_50"] = "rgba(255, 212, 137, 0.20)";
     DarkPalette["VALIDATION_200"] = "#FFEAC1";
-    DarkPalette["ERROR"] = "#FF8486";
+    DarkPalette["ERROR"] = "#FF7A7A";
     DarkPalette["ERROR_50"] = "rgba(255, 132, 134, 0.20)";
     DarkPalette["ERROR_200"] = "#FFD8D8";
     DarkPalette["SECTION_BG"] = "#0E0E0E";
+    DarkPalette["STROKE_GREY"] = "#32355F";
     DarkPalette["ELEVATION_1"] = "#141722";
     DarkPalette["ELEVATION_2"] = "#181C29";
     DarkPalette["ELEVATION_3"] = "#1D2131";

package/package.json

@@ -7,7 +7,6 @@
   },
   "customElements": "custom-elements.json",
   "dependencies": {
-    "countries-list": "^3.0.6",
     "lit": "^2.7.2"
   },
   "peerDependencies": {
@@ -33,7 +32,6 @@
     "@lit/react": "^1.0.8",
     "@storybook/addon-a11y": "^9.1.10",
     "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-vitest": "^9.1.10",
     "@storybook/web-components-vite": "^9.1.10",
     "@types/debug": "^4.1.12",
     "@types/react": "^18.3.31",
@@ -41,9 +39,8 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
     "commitlint": "^17.6.1",
+    "countries-list": "^3.0.6",
     "esbuild": "0.19.6",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
@@ -57,7 +54,6 @@
     "jss": "^10.10.0",
     "jss-plugin-global": "^10.10.0",
     "lint-staged": "^13.2.1",
-    "playwright": "^1.55.1",
     "prettier": "^2.8.8",
     "react": "^18.3.1",
     "semver": "^7.5.4",
@@ -69,8 +65,7 @@
     "tsx": "^4.20.6",
     "typescript": "~5.9.3",
     "uuid": "^10.0.0",
-    "vite": "^7.1.7",
-    "vitest": "^3.2.4"
+    "vite": "^7.1.7"
   },
   "exports": {
     ".": {
@@ -85,6 +80,7 @@
     "./tuix-webcomponents.js": "./dist/src/index.js"
   },
   "files": [
+    "custom-elements.json",
     "dist"
   ],
   "husky": {
@@ -99,11 +95,14 @@
       "prettier --write"
     ],
     "src/**/*.{gql,graphql,mjs,js,jsx,ts,tsx,json}": [
+      "prettier --write",
       "eslint --quiet --fix"
     ],
-    "src/**/*.{ts,tsx}": [
-      "npm run format",
-      "npm run lint"
+    "scripts/**/*.{mjs,js,ts}": [
+      "prettier --write"
+    ],
+    "docs/**/*.{mjs,js,ts,tsx,css,mdx}": [
+      "docs/node_modules/.bin/prettier --write --ignore-path docs/.gitignore"
     ],
     "*.{tf,tfvars,tftest.hcl}": [
       "terraform fmt -recursive"
@@ -118,8 +117,8 @@
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "build": "rm -rf dist && npm run analyze -- --exclude dist && npm run generate:react && tsc -p tsconfig.publish.json --outDir dist && npm run build:css && tsc-esm-fix dist",
-    "build:css": "mkdir -p dist/assets && npm run compileStylesJss --silent > dist/assets/tuix-styles.css",
+    "build": "rm -rf package-build && npm run analyze && npm run generate:react && tsc -p tsconfig.publish.json && npm run build:css && tsc-esm-fix package-build",
+    "build:css": "mkdir -p package-build/assets && npm run compileStylesJss --silent > package-build/assets/tuix-styles.css",
     "calculateNextVersion": "tsx ./scripts/detect-changes.ts",
     "compileStylesJss": "tsx ./scripts/build-styles.ts",
     "createWebbundle": "tsx ./scripts/build-webbundle.ts",
@@ -132,14 +131,13 @@
     "format:check": "prettier --check \"**/**/*.ts\" ",
     "lint": "eslint './src/**/*.{ts,tsx}' --fix",
     "prepare": "husky install",
-    "preview": "node ./scripts/preview.mjs",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run stage:package",
     "publish:local": "./scripts/publish-local-npm.sh",
-    "start": "rm -rf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "storybook": "rm -rf build && npm run analyze -- --exclude dist && storybook dev -p 6006",
-    "storybook:build": "rm -rf dist/storybook && npm run analyze -- --exclude dist && storybook build -o dist/storybook",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "stage:package": "rm -rf dist && mkdir dist && cp -a package-build/. dist/",
+    "storybook": "npm run analyze && storybook dev -p 6006",
+    "storybook:build": "rm -rf dist/storybook && npm run analyze && storybook build -o dist/storybook",
+    "test": "echo \"No tests configured\""
   },
   "type": "module",
-  "version": "0.0.24"
+  "version": "0.0.26"
 }