@ebay/skin 19.18.1 → 19.19.0

package/dist/bundles/skin-default.css

@@ -10577,11 +10577,11 @@ li.fake-tabs__item>a{
 div.tabs__item[role=tab]>span{
   padding:2px 0;
 }
-div.tabs__item[role=tab]>span,li.fake-tabs__item>a{
+div.tabs__item[role=tab],li.fake-tabs__item>a{
   color:var(--tabs-item-foreground-color, var(--color-foreground-secondary));
   display:inline-block;
 }
-div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
+div.tabs__item[role=tab]:after,li.fake-tabs__item>a:after{
   background-color:initial;
   border-radius:6px;
   content:"";
@@ -10591,19 +10591,25 @@ div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
   position:absolute;
   width:100%;
 }
-div.tabs__item[role=tab][aria-selected=true]>span,li.fake-tabs__item>a[aria-current]{
+div.tabs__item[role=tab][aria-selected=true],li.fake-tabs__item>a[aria-current]{
   color:var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
 }
-div.tabs__item[role=tab][aria-selected=true]>span:after,li.fake-tabs__item>a[aria-current]:after{
+div.tabs__item[role=tab][aria-selected=true]:after,li.fake-tabs__item>a[aria-current]:after{
   background-color:currentColor;
 }
 div.tabs__item[role=tab]:focus:not(:focus-visible),li.fake-tabs__item a:focus:not(:focus-visible){
   outline:none;
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
-  color:var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true],div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover,li.fake-tabs__item>a:not([aria-current]):not([href]),li.fake-tabs__item>a:not([aria-current]):not([href]):focus,li.fake-tabs__item>a:not([aria-current]):not([href]):hover{
+  color:var(--color-foreground-disabled);
+}
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover:after,li.fake-tabs__item>a:not([aria-current]):not([href]):after,li.fake-tabs__item>a:not([aria-current]):not([href]):focus:after,li.fake-tabs__item>a:not([aria-current]):not([href]):hover:after{
+  background-color:initial;
+}
+div.tabs__item[role=tab]:not([aria-selected=true]):focus,div.tabs__item[role=tab]:not([aria-selected=true]):hover,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
+  color:var(--color-foreground-secondary);
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
+div.tabs__item[role=tab]:not([aria-selected=true]):focus:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
   background-color:currentColor;
 }
 .fake-tabs__cell,.tabs__cell{

package/dist/bundles/skin-full.css

@@ -10791,11 +10791,11 @@ li.fake-tabs__item>a{
 div.tabs__item[role=tab]>span{
   padding:2px 0;
 }
-div.tabs__item[role=tab]>span,li.fake-tabs__item>a{
+div.tabs__item[role=tab],li.fake-tabs__item>a{
   color:var(--tabs-item-foreground-color, var(--color-foreground-secondary));
   display:inline-block;
 }
-div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
+div.tabs__item[role=tab]:after,li.fake-tabs__item>a:after{
   background-color:initial;
   border-radius:6px;
   content:"";
@@ -10805,19 +10805,25 @@ div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
   position:absolute;
   width:100%;
 }
-div.tabs__item[role=tab][aria-selected=true]>span,li.fake-tabs__item>a[aria-current]{
+div.tabs__item[role=tab][aria-selected=true],li.fake-tabs__item>a[aria-current]{
   color:var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
 }
-div.tabs__item[role=tab][aria-selected=true]>span:after,li.fake-tabs__item>a[aria-current]:after{
+div.tabs__item[role=tab][aria-selected=true]:after,li.fake-tabs__item>a[aria-current]:after{
   background-color:currentColor;
 }
 div.tabs__item[role=tab]:focus:not(:focus-visible),li.fake-tabs__item a:focus:not(:focus-visible){
   outline:none;
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
-  color:var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true],div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover,li.fake-tabs__item>a:not([aria-current]):not([href]),li.fake-tabs__item>a:not([aria-current]):not([href]):focus,li.fake-tabs__item>a:not([aria-current]):not([href]):hover{
+  color:var(--color-foreground-disabled);
+}
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover:after,li.fake-tabs__item>a:not([aria-current]):not([href]):after,li.fake-tabs__item>a:not([aria-current]):not([href]):focus:after,li.fake-tabs__item>a:not([aria-current]):not([href]):hover:after{
+  background-color:initial;
+}
+div.tabs__item[role=tab]:not([aria-selected=true]):focus,div.tabs__item[role=tab]:not([aria-selected=true]):hover,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
+  color:var(--color-foreground-secondary);
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
+div.tabs__item[role=tab]:not([aria-selected=true]):focus:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
   background-color:currentColor;
 }
 .fake-tabs__cell,.tabs__cell{

package/dist/bundles/skin-headless.css

@@ -9937,11 +9937,11 @@ li.fake-tabs__item>a{
 div.tabs__item[role=tab]>span{
   padding:2px 0;
 }
-div.tabs__item[role=tab]>span,li.fake-tabs__item>a{
+div.tabs__item[role=tab],li.fake-tabs__item>a{
   color:var(--tabs-item-foreground-color, var(--color-foreground-secondary));
   display:inline-block;
 }
-div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
+div.tabs__item[role=tab]:after,li.fake-tabs__item>a:after{
   background-color:initial;
   border-radius:6px;
   content:"";
@@ -9951,19 +9951,25 @@ div.tabs__item[role=tab]>span:after,li.fake-tabs__item>a:after{
   position:absolute;
   width:100%;
 }
-div.tabs__item[role=tab][aria-selected=true]>span,li.fake-tabs__item>a[aria-current]{
+div.tabs__item[role=tab][aria-selected=true],li.fake-tabs__item>a[aria-current]{
   color:var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
 }
-div.tabs__item[role=tab][aria-selected=true]>span:after,li.fake-tabs__item>a[aria-current]:after{
+div.tabs__item[role=tab][aria-selected=true]:after,li.fake-tabs__item>a[aria-current]:after{
   background-color:currentColor;
 }
 div.tabs__item[role=tab]:focus:not(:focus-visible),li.fake-tabs__item a:focus:not(:focus-visible){
   outline:none;
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
-  color:var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true],div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover,li.fake-tabs__item>a:not([aria-current]):not([href]),li.fake-tabs__item>a:not([aria-current]):not([href]):focus,li.fake-tabs__item>a:not([aria-current]):not([href]):hover{
+  color:var(--color-foreground-disabled);
+}
+div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:focus:after,div.tabs__item[role=tab]:not([aria-selected=true])[aria-disabled=true]:hover:after,li.fake-tabs__item>a:not([aria-current]):not([href]):after,li.fake-tabs__item>a:not([aria-current]):not([href]):focus:after,li.fake-tabs__item>a:not([aria-current]):not([href]):hover:after{
+  background-color:initial;
+}
+div.tabs__item[role=tab]:not([aria-selected=true]):focus,div.tabs__item[role=tab]:not([aria-selected=true]):hover,li.fake-tabs__item>a:not([aria-current]):focus,li.fake-tabs__item>a:not([aria-current]):hover{
+  color:var(--color-foreground-secondary);
 }
-div.tabs__item[role=tab]:not([aria-selected=true]):focus>span:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover>span:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
+div.tabs__item[role=tab]:not([aria-selected=true]):focus:after,div.tabs__item[role=tab]:not([aria-selected=true]):hover:after,li.fake-tabs__item>a:not([aria-current]):focus:after,li.fake-tabs__item>a:not([aria-current]):hover:after{
   background-color:currentColor;
 }
 .fake-tabs__cell,.tabs__cell{

package/dist/tabs/tabs.css

@@ -45,13 +45,13 @@ div.tabs__item[role="tab"] > span {
     padding: 2px 0;
 }
 
-div.tabs__item[role="tab"] > span,
+div.tabs__item[role="tab"],
 li.fake-tabs__item > a {
     color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
     display: inline-block;
 }
 
-div.tabs__item[role="tab"] > span:after,
+div.tabs__item[role="tab"]:after,
 li.fake-tabs__item > a:after {
     background-color: initial;
     border-radius: 6px;
@@ -63,7 +63,7 @@ li.fake-tabs__item > a:after {
     width: 100%;
 }
 
-div.tabs__item[role="tab"][aria-selected="true"] > span,
+div.tabs__item[role="tab"][aria-selected="true"],
 li.fake-tabs__item > a[aria-current] {
     color: var(
         --tabs-item-selected-foreground-color,
@@ -71,7 +71,7 @@ li.fake-tabs__item > a[aria-current] {
     );
 }
 
-div.tabs__item[role="tab"][aria-selected="true"] > span:after,
+div.tabs__item[role="tab"][aria-selected="true"]:after,
 li.fake-tabs__item > a[aria-current]:after {
     background-color: currentColor;
 }
@@ -81,18 +81,43 @@ li.fake-tabs__item a:focus:not(:focus-visible) {
     outline: none;
 }
 
-div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span,
-div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span,
+div.tabs__item[role="tab"]:not([aria-selected="true"])[aria-disabled="true"],
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:focus,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:hover,
+li.fake-tabs__item > a:not([aria-current]):not([href]),
+li.fake-tabs__item > a:not([aria-current]):not([href]):focus,
+li.fake-tabs__item > a:not([aria-current]):not([href]):hover {
+    color: var(--color-foreground-disabled);
+}
+
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:after,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:focus:after,
+div.tabs__item[role="tab"]:not(
+        [aria-selected="true"]
+    )[aria-disabled="true"]:hover:after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):focus:after,
+li.fake-tabs__item > a:not([aria-current]):not([href]):hover:after {
+    background-color: initial;
+}
+
+div.tabs__item[role="tab"]:not([aria-selected="true"]):focus,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):hover,
 li.fake-tabs__item > a:not([aria-current]):focus,
 li.fake-tabs__item > a:not([aria-current]):hover {
-    color: var(
-        --tabs-item-hover-foreground-color,
-        var(--color-foreground-secondary)
-    );
+    color: var(--color-foreground-secondary);
 }
 
-div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span:after,
-div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span:after,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):focus:after,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):hover:after,
 li.fake-tabs__item > a:not([aria-current]):focus:after,
 li.fake-tabs__item > a:not([aria-current]):hover:after {
     background-color: currentColor;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.18.1",
+    "version": "19.19.0",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",
@@ -36,7 +36,7 @@
         "prebuild": "npm run clean",
         "build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
         "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
-        "build:icons": "tsx scripts genSVG && prettier src/components/data/icons.json --write",
+        "build:icons": "tsx scripts genSVG && prettier ../../src/data/icons.json --write",
         "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
         "bundle": "sass src/sass:dist src/tokens:dist/tokens --no-source-map -I \"../../node_modules\"",
@@ -45,14 +45,14 @@
         "copy:assetsToStorybook": "tsx scripts storybook-copy",
         "copy:sassToDist": " copyfiles src/sass/variables dist -u 2 && copyfiles src/sass/mixins/public dist/mixins -u 4 && copyfiles src/sass/gh dist -u 2",
         "copy:svgToDist": "copyfiles src/svg dist -u 1",
-        "copy:svgToDocs": "copyfiles src/svg src/routes/static -u 2 && copyfiles src/svg/icons.svg src/components/master-icons.marko -f",
-        "deploy": "BASE_URL=/evo-web/skin/ marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
-        "deploy:only": "marko-run build -o ./_site && npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
+        "copy:svgToDocs": "tsx scripts copy-icons",
+        "deploy": "npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
+        "deploy:only": "npm run build:storybook && rimraf _site/public/archive && copyfiles docs/archive _site/public -u 1 && touch _site/public/.nojekyll",
         "format": "npx prettier --write .",
         "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
         "lint:css": "stylelint dist --config .stylelintrc",
-        "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
-        "lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
+        "lint:js": "eslint 'src/sass/**/stories/*.js' >> lint.log ",
+        "lint:sass": "stylelint src/sass --config .stylelintrc",
         "postcss": "postcss dist/**/*.css -r ",
         "prepublishOnly": "tsx scripts gen",
         "preview": "marko-run preview",
@@ -80,9 +80,6 @@
     "browserslist": [
         "extends @ebay/browserslist-config"
     ],
-    "devDependencies": {
-        "@marko/run-adapter-static": "^2.0.3"
-    },
     "publishConfig": {
         "registry": "https://registry.npmjs.org"
     }