chore: added visual-html to skin

.gitignore

@@ -45,6 +45,9 @@ public/ebayui-core-react/
 public/ebayui-core/
 public/skin-storybook/
 
+packages/skin/src/test/failures
+.vitest-attachments
+
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "npm run lint && mtc && npm run build -w packages/skin && npm run build -w packages/ebayui-core && npm run build -w packages/ebayui-core-react",
-    "build:ci": "CI=true npm run build -w packages/skin && npm run build -w packages/ebayui-core && npm run build -w packages/ebayui-core-react",
+    "build:ci": "CI=true npm run build -w packages/skin && npm run snapshots -w packages/skin && npm run build -w packages/ebayui-core && npm run build -w packages/ebayui-core-react",
     "change": "changeset add",
     "copy:coreui-site": "npm run deploy --ws",
     "copy:skin-site": "npm run deploy --ws",

packages/ebayui-core/vite.config.mjs

@@ -50,7 +50,18 @@ export default defineConfig({
                         headless: true,
                         instances: [{
                             browser: "chromium",
-                        }]
+                        }],
+                        expect: {
+                            toMatchScreenshot: {
+                                comparatorName: 'pixelmatch',
+                                comparatorOptions: {
+                                    // 0-1, how different can colors be?
+                                    threshold: 0.2,
+                                    // 1% of pixels can differ
+                                    allowedMismatchedPixelRatio: 0.01,
+                                },
+                            },
+                        },
                     },
                     include: ["src/**/test.browser.{ts,js}"],
                     setupFiles: ["./test.setup.ts"]

packages/skin/dist/combobox/combobox.css

@@ -193,7 +193,6 @@ span.combobox {
     top: calc(50% - 8px);
 }
 .combobox__control > input {
-    -webkit-appearance: none;
     appearance: none;
     background-color: var(
         --combobox-textbox-background-color,

packages/skin/dist/icon-button/icon-button.css

@@ -101,9 +101,6 @@ button.icon-btn.icon-btn--large {
     width: 48px;
 }
 a.icon-link--transparent,
-button.icon-btn--transparent {
-    background-color: initial;
-}
 a.icon-link--transparent:not([disabled], [aria-disabled="true"]):active:after,
 a.icon-link--transparent:not(
         [disabled],
@@ -113,6 +110,7 @@ a.icon-link--transparent:not([disabled], [aria-disabled="true"]):hover:after,
 a.icon-link--transparent[href]:active:after,
 a.icon-link--transparent[href]:focus-visible:after,
 a.icon-link--transparent[href]:hover:after,
+button.icon-btn--transparent,
 button.icon-btn--transparent:not(
         [disabled],
         [aria-disabled="true"]

packages/skin/dist/number-input/number-input.css

@@ -135,7 +135,6 @@
     margin: 0;
 }
 .number-input .textbox .textbox__control[type="number"] {
-    -webkit-appearance: textfield;
     appearance: textfield;
 }
 .number-input .icon-btn {

packages/skin/dist/select/select.css

@@ -7,7 +7,6 @@ span.select {
     display: inline-block;
 }
 .select select {
-    -webkit-appearance: none;
     appearance: none;
     background-color: var(
         --select-background-color,

packages/skin/dist/textbox/textbox.css

@@ -98,7 +98,6 @@ input.textbox__control:last-child:not([readonly]) {
 
 input.textbox__control,
 textarea.textbox__control {
-    -webkit-appearance: none;
     appearance: none;
     flex-grow: 1;
     font-size: 1em;

packages/skin/package.json

@@ -58,15 +58,11 @@
         "preview": "marko-run preview",
         "postpublish": "tsx scripts clean",
         "release": "npm run build",
-        "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
-        "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
-        "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
-        "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
-        "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
+        "snapshots": "vitest run",
         "start": "marko-run",
         "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook --no-open",
         "test": "npm run build",
+        "update-snaphots": "vitest run -u",
         "verify": "tsx scripts verify",
         "version": "npm run build"
     },