tuix-webcomponents 0.0.25 → 0.0.27

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,20 +54,26 @@
   --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-50: rgba(241, 249, 245, 0.30);
-  --tuix-dark-color-validation: #FFD489;
-  --tuix-dark-color-validation-50: rgba(255, 212, 137, 0.20);
+  --tuix-dark-color-success: #6BC49D;
+  --tuix-dark-color-success-50: #F1F9F5;
+  --tuix-dark-color-validation: #F5C66A;
+  --tuix-dark-color-validation-50: #FFFBF4;
+  --tuix-dark-color-#fffbf4: VALIDATION_50;
   --tuix-dark-color-validation-200: #FFEAC1;
   --tuix-dark-color-#ffeac1: VALIDATION_200;
-  --tuix-dark-color-error: #FF8486;
-  --tuix-dark-color-error-50: rgba(255, 132, 134, 0.20);
+  --tuix-dark-color-error: #FF7A7A;
+  --tuix-dark-color-error-50: #FFF5F5;
+  --tuix-dark-color-#fff5f5: ERROR_50;
   --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;
   --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/tuix-icon/TuixIcon.icons.js

@@ -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/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-input/TuixInput.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

@@ -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 {

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

@@ -16,10 +16,10 @@ export const toastBgColorMap = {
     [ToastType.SUCCESS]: Palette.SUCCESS_50,
 };
 export const toastBgDarkColorMap = {
-    [ToastType.TEXT]: Palette.PRIMARY_950,
-    [ToastType.WARNING]: DarkPalette.VALIDATION_50,
-    [ToastType.ERROR]: DarkPalette.ERROR_50,
-    [ToastType.SUCCESS]: DarkPalette.SUCCESS_50,
+    [ToastType.TEXT]: DarkPalette.TOAST_TEXT,
+    [ToastType.WARNING]: DarkPalette.TOAST_WARNING,
+    [ToastType.ERROR]: DarkPalette.TOAST_ERROR,
+    [ToastType.SUCCESS]: DarkPalette.TOAST_SUCCESS,
 };
 export const iconPropertiesMap = {
     [ToastType.TEXT]: {

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,17 +16,22 @@ export declare enum DarkPalette {
     BLACK = "#0F1117",
     NEUTRAL_200 = "#C9C8D3",
     NEUTRAL_600 = "#8A8894",
-    SUCCESS = "#439F6E",
-    SUCCESS_50 = "rgba(241, 249, 245, 0.30)",
-    VALIDATION = "#FFD489",
-    VALIDATION_50 = "rgba(255, 212, 137, 0.20)",
+    SUCCESS = "#6BC49D",
+    SUCCESS_50 = "#F1F9F5",
+    VALIDATION = "#F5C66A",
+    VALIDATION_50 = "#FFFBF4",
     VALIDATION_200 = "#FFEAC1",
-    ERROR = "#FF8486",
-    ERROR_50 = "rgba(255, 132, 134, 0.20)",
+    ERROR = "#FF7A7A",
+    ERROR_50 = "#FFF5F5",
     ERROR_200 = "#FFD8D8",
     SECTION_BG = "#0E0E0E",
+    STROKE_GREY = "#32355F",
     ELEVATION_1 = "#141722",
     ELEVATION_2 = "#181C29",
     ELEVATION_3 = "#1D2131",
-    ELEVATION_4 = "#23273A"
+    ELEVATION_4 = "#23273A",
+    TOAST_SUCCESS = "#3C4046",
+    TOAST_WARNING = "#3F382D",
+    TOAST_TEXT = "#181A32",
+    TOAST_ERROR = "#3F282D"
 }

package/dist/src/utils/darkColors.js

@@ -17,17 +17,22 @@ export var DarkPalette;
     DarkPalette["BLACK"] = "#0F1117";
     DarkPalette["NEUTRAL_200"] = "#C9C8D3";
     DarkPalette["NEUTRAL_600"] = "#8A8894";
-    DarkPalette["SUCCESS"] = "#439F6E";
-    DarkPalette["SUCCESS_50"] = "rgba(241, 249, 245, 0.30)";
-    DarkPalette["VALIDATION"] = "#FFD489";
-    DarkPalette["VALIDATION_50"] = "rgba(255, 212, 137, 0.20)";
+    DarkPalette["SUCCESS"] = "#6BC49D";
+    DarkPalette["SUCCESS_50"] = "#F1F9F5";
+    DarkPalette["VALIDATION"] = "#F5C66A";
+    DarkPalette["VALIDATION_50"] = "#FFFBF4";
     DarkPalette["VALIDATION_200"] = "#FFEAC1";
-    DarkPalette["ERROR"] = "#FF8486";
-    DarkPalette["ERROR_50"] = "rgba(255, 132, 134, 0.20)";
+    DarkPalette["ERROR"] = "#FF7A7A";
+    DarkPalette["ERROR_50"] = "#FFF5F5";
     DarkPalette["ERROR_200"] = "#FFD8D8";
     DarkPalette["SECTION_BG"] = "#0E0E0E";
+    DarkPalette["STROKE_GREY"] = "#32355F";
     DarkPalette["ELEVATION_1"] = "#141722";
     DarkPalette["ELEVATION_2"] = "#181C29";
     DarkPalette["ELEVATION_3"] = "#1D2131";
     DarkPalette["ELEVATION_4"] = "#23273A";
+    DarkPalette["TOAST_SUCCESS"] = "#3C4046";
+    DarkPalette["TOAST_WARNING"] = "#3F382D";
+    DarkPalette["TOAST_TEXT"] = "#181A32";
+    DarkPalette["TOAST_ERROR"] = "#3F282D";
 })(DarkPalette || (DarkPalette = {}));

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": {
@@ -128,22 +124,19 @@
     "createWebbundle": "tsx ./scripts/build-webbundle.ts",
     "docs:build": "npm --prefix docs run build",
     "docs:dev": "npm --prefix docs run dev",
-    "docs:install": "npm --prefix docs install",
+    "docs:install": "npm --prefix docs ci",
     "docs:format": "npm --prefix docs run format",
     "generate:react": "tsx ./scripts/build-react.ts",
     "format": "prettier --write './**/*.{mjs,js,ts,tsx,vue}'",
     "format:check": "prettier --check \"**/**/*.ts\" ",
     "lint": "eslint './src/**/*.{ts,tsx}' --fix",
     "prepare": "husky install",
-    "preview": "node ./scripts/preview.mjs",
-    "prepublishOnly": "npm run build && npm run stage:package",
     "publish:local": "./scripts/publish-local-npm.sh",
     "stage:package": "rm -rf dist && mkdir dist && cp -a package-build/. dist/",
-    "start": "rm -rf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "storybook": "rm -rf build && npm run analyze && storybook dev -p 6006",
+    "storybook": "npm run analyze && storybook dev -p 6006",
     "storybook:build": "rm -rf dist/storybook && npm run analyze && storybook build -o dist/storybook",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"No tests configured\""
   },
   "type": "module",
-  "version": "0.0.25"
+  "version": "0.0.27"
 }