@ebay/skin 16.2.0-0 → 16.2.1

package/dist/mixins/utility-mixins.less

@@ -33,10 +33,13 @@
 
     &::after {
         background: rgba(0, 0, 0, 0.05);
+        bottom: 0;
         content: "";
         display: block;
-        inset: 0;
+        left: 0;
         position: absolute;
+        right: 0;
+        top: 0;
     }
 
     > img {

package/dist/panel-dialog/panel-dialog.css

@@ -6,10 +6,13 @@
 }
 .panel-dialog[role="dialog"] {
   background-color: var(--dialog-scrim-color-show);
-  inset: 0;
+  bottom: 0;
+  left: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
+  right: 0;
+  top: 0;
   will-change: background-color;
   z-index: 100000;
   flex-direction: column;

package/dist/tooltip/tooltip.css

@@ -120,7 +120,10 @@ button.tooltip__close {
   right: -4px;
 }
 .tooltip__pointer--right-bottom {
-  inset: auto -4px 12px auto;
+  bottom: 12px;
+  left: auto;
+  right: -4px;
+  top: auto;
 }
 .tooltip__pointer--right-top {
   left: auto;

package/dist/tourtip/tourtip.css

@@ -125,7 +125,10 @@ button.tourtip__close > svg {
   right: -4px;
 }
 .tourtip__pointer--right-bottom {
-  inset: auto -4px 12px auto;
+  bottom: 12px;
+  left: auto;
+  right: -4px;
+  top: auto;
 }
 .tourtip__pointer--right-top {
   left: auto;

package/dist/utility/utility.css

@@ -51,10 +51,13 @@
 }
 .image-treatment::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .image-treatment > img {
   display: inline-block;
@@ -72,10 +75,13 @@
 }
 .image-treatment-large::after {
   background: rgba(0, 0, 0, 0.05);
+  bottom: 0;
   content: "";
   display: block;
-  inset: 0;
+  left: 0;
   position: absolute;
+  right: 0;
+  top: 0;
 }
 .image-treatment-large > img {
   display: inline-block;

package/dist/video/video.css

@@ -8,14 +8,17 @@
 .video-player__overlay {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.6);
+  bottom: 0;
   color: var(--color-neutral-0);
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  inset: 0;
   justify-content: center;
+  left: 0;
   position: absolute;
+  right: 0;
   text-align: center;
+  top: 0;
 }
 .video-player__overlay-text {
   margin: 20px 20px 0;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.2.0-0",
+    "version": "16.2.1",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -27,8 +27,8 @@
         "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
         "build:storybook": "npm run copy:assetsToStorybook && npm run build:storybook:ds6",
-        "build:storybook:ds4": "cross-env STORYBOOK_DS=4 build-storybook -o ./docs/ds4/storybook",
-        "build:storybook:ds6": "cross-env STORYBOOK_DS=6 build-storybook -o ./docs/storybook",
+        "build:storybook:ds4": "cross-env STORYBOOK_DS=4 storybook build -o ./docs/ds4/storybook",
+        "build:storybook:ds6": "cross-env STORYBOOK_DS=6 storybook build -o ./docs/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "compileModule": "npx gulp compileModule --name $NAME",
         "bundle": "npm run bundle:js && npm run bundle:css",
@@ -49,32 +49,31 @@
         "verify": "node scripts verify",
         "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
-        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 build-storybook -o ./.storybook-percy",
+        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook build -o ./.storybook-percy",
         "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
         "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:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
         "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
-        "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 start-storybook -s ."
+        "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 storybook dev -c .storybook"
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.21.4",
-        "@babel/preset-env": "^7.21.4",
-        "@commitlint/cli": "^17.5.1",
-        "@commitlint/config-conventional": "^17.4.2",
-        "@ebay/browserslist-config": "^2.4.1",
-        "@percy/cli": "^1.21.0",
-        "@percy/storybook": "^4.3.4",
-        "@storybook/builder-webpack5": "^6.5.16",
-        "@storybook/html": "^6.5.16",
-        "@storybook/manager-webpack5": "^6.5.16",
+        "@babel/cli": "^7.21.5",
+        "@babel/core": "^7.21.8",
+        "@babel/preset-env": "^7.21.5",
+        "@commitlint/cli": "^17.6.3",
+        "@commitlint/config-conventional": "^17.6.3",
+        "@ebay/browserslist-config": "^2.6.0",
+        "@percy/cli": "^1.24.1",
+        "@percy/storybook": "^4.3.6",
+        "@storybook/html": "^7.0.12",
+        "@storybook/html-webpack5": "^7.0.12",
         "babel-loader": "^9.1.2",
-        "browser-sync": "^2.29.1",
+        "browser-sync": "^2.29.3",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.37.0",
+        "eslint": "^8.40.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -85,11 +84,11 @@
         "gulp-rename": "^2",
         "husky": "^8.0.3",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^21.1.0",
+        "jsdom": "^22.0.0",
         "less-loader": "^11.1.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^13.0.2",
+        "lint-staged": "^13.2.2",
         "makeup-alert-dialog": "~0.2.0",
         "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
@@ -113,24 +112,25 @@
         "makeup-snackbar-dialog": "0.1.0",
         "makeup-switch": "~0.2.0",
         "makeup-toast-dialog": "0.1.0",
-        "mkdirp": "^2",
+        "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^7.0.2",
-        "prettier": "^2.8.7",
-        "rimraf": "^4",
-        "stylelint": "^15.4.0",
-        "stylelint-config-standard": "^32",
+        "postcss-loader": "^7.3.0",
+        "prettier": "^2.8.8",
+        "rimraf": "^5",
+        "storybook": "^7.0.12",
+        "stylelint": "^15.6.2",
+        "stylelint-config-standard": "^33",
         "stylelint-no-unsupported-browser-features": "^6.0.1",
         "stylelint-order": "^6",
         "stylelint-prettier": "^3",
         "svgo": "^3.0.1",
-        "webpack": "^5.78.0",
-        "webpack-cli": "^5.0.1",
+        "webpack": "^5.83.0",
+        "webpack-cli": "^5.1.1",
         "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",
-        "yargs": "^17.6.2"
+        "yargs": "^17.7.2"
     },
     "keywords": [
         "eBay",

package/src/less/alert-dialog/stories/alert-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Alert Dialog" };
+export default { title: "Skin/Alert Dialog" };
 
 export const base = () => `
 <div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" role="alertdialog">

package/src/less/avatar/stories/avatar.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Avatar" };
+export default { title: "Skin/Avatar" };
 
 export const base = () => /* HTML */ ` <div class="avatar">E</div> `;
 

package/src/less/badge/stories/badge.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Badge" };
+export default { title: "Skin/Badge" };
 
 export const oneDigit = () => `
 <span class="badge">1</span>

package/src/less/breadcrumbs/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Buttons/Cascade" };
+export default { title: "Skin/Breadcrumbs/Buttons/Cascade" };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/button-overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Buttons/Overflow" };
+export default { title: "Skin/Breadcrumbs/Buttons/Overflow" };
 
 export const minimum = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">

package/src/less/breadcrumbs/stories/buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Buttons" };
+export default { title: "Skin/Breadcrumbs/Buttons" };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/breadcrumbs/stories/link-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Links/Cascade" };
+export default { title: "Skin/Breadcrumbs/Links/Cascade" };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/link-overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Links/Overflow" };
+export default { title: "Skin/Breadcrumbs/Links/Overflow" };
 
 export const minimum = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs breadcrumb--overflow" role="navigation">

package/src/less/breadcrumbs/stories/links.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Breadcrumbs/Links" };
+export default { title: "Skin/Breadcrumbs/Links" };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/button/stories/button/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Base" };
+export default { title: "Skin/Button/Base" };
 
 export const textOnly = () => '<button class="btn">Button</button>';
 

package/src/less/button/stories/button/borderless.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Borderless" };
+export default { title: "Skin/Button/Borderless" };
 
 export const base = () => `<button class="btn btn--borderless">
     <span class="btn__cell">

package/src/less/button/stories/button/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Cascade" };
+export default { title: "Skin/Button/Cascade" };
 
 export const color = () => `
 <button type="button" class="btn" style="color: red;">

package/src/less/button/stories/button/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Dimensions" };
+export default { title: "Skin/Button/Dimensions" };
 
 export const large = () => `
 <button type="button" class="btn btn--large">

package/src/less/button/stories/button/primary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Primary" };
+export default { title: "Skin/Button/Primary" };
 
 export const textOnly = () =>
     '<button class="btn btn--primary">Button</button>';

package/src/less/button/stories/button/secondary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Secondary" };
+export default { title: "Skin/Button/Secondary" };
 
 export const textOnly = () =>
     '<button class="btn btn--secondary">Button</button>';

package/src/less/button/stories/button/tertiary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Tertiary" };
+export default { title: "Skin/Button/Tertiary" };
 
 export const textOnly = () => `
 <button class="btn btn--tertiary">Tertiary</button

package/src/less/button/stories/destructive-button/primary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Destructive/Primary" };
+export default { title: "Skin/Button/Destructive/Primary" };
 
 export const textOnly = () =>
     '<button class="btn btn--primary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/destructive-button/secondary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Destructive/Secondary" };
+export default { title: "Skin/Button/Destructive/Secondary" };
 
 export const textOnly = () =>
     '<button class="btn btn--secondary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/destructive-button/tertiary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Button/Destructive/Tertiary" };
+export default { title: "Skin/Button/Destructive/Tertiary" };
 
 export const textOnly = () =>
     '<button class="btn btn--tertiary btn--destructive">Destructive Button</button>';

package/src/less/button/stories/fake-button/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fake Button/Base" };
+export default { title: "Skin/Fake Button/Base" };
 
 export const textOnly = () =>
     '<a href="http://www.ebay/com" class="fake-btn">Fake Button</a>';

package/src/less/button/stories/fake-button/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fake Button/Cascade" };
+export default { title: "Skin/Fake Button/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/button/stories/fake-button/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fake Button/Dimensions" };
+export default { title: "Skin/Fake Button/Dimensions" };
 
 export const large = () => `
 <a class="fake-btn fake-btn--large" href="http://www.ebay.com">

package/src/less/button/stories/fake-button/primary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fake Button/Primary" };
+export default { title: "Skin/Fake Button/Primary" };
 
 export const textOnly = () =>
     '<a href="http://www.ebay/com" class="fake-btn fake-btn--primary">Fake Button</a>';

package/src/less/button/stories/fake-button/secondary.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fake Button/Secondary" };
+export default { title: "Skin/Fake Button/Secondary" };
 
 export const textOnly = () =>
     '<a href="http://www.ebay/com" class="fake-btn fake-btn--secondary">Fake Button</a>';

package/src/less/calendar/calendar.less

@@ -154,10 +154,13 @@
     // Only visible in WHCM
     border: solid transparent;
     border-width: 1px 0;
+    bottom: 0;
     content: "";
-    inset: 0;
+    left: 0;
     pointer-events: none;
     position: absolute;
+    right: 0;
+    top: 0;
 }
 
 .calendar__range--start::before {

package/src/less/calendar/stories/calendar.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Calendar" };
+export default { title: "Skin/Calendar" };
 
 export const base = () => /* HTML */ `
     <div class="calendar">

package/src/less/carousel/stories/carousel.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Carousel" };
+export default { title: "Skin/Carousel" };
 
 export const continuous = () => `
 <div class="carousel">

package/src/less/checkbox/stories/checked.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Checkbox/Checked" };
+export default { title: "Skin/Checkbox/Checked" };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/checkbox/stories/mixed.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Checkbox/Mixed" };
+export default { title: "Skin/Checkbox/Mixed" };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/checkbox/stories/unchecked.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Checkbox/Unchecked" };
+export default { title: "Skin/Checkbox/Unchecked" };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/combobox/stories/combobox.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Combobox" };
+export default { title: "Skin/Combobox" };
 
 export const collapsed = () => `
 <span class="combobox">

package/src/less/confirm-dialog/stories/confirm-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Confirm Dialog" };
+export default { title: "Skin/Confirm Dialog" };
 
 export const base = () => `
 <div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade" role="dialog">

package/src/less/cta-button/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "CTA Button/Cascade" };
+export default { title: "Skin/CTA Button/Cascade" };
 
 export const color = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="color: red">

package/src/less/cta-button/stories/cta-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: "CTA Button" };
+export default { title: "Skin/CTA Button" };
 
 export const base = () => `
 <a class="cta-btn" href="http://www.ebay.com">

package/src/less/cta-button/stories/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: "CTA Button/Dimensions" };
+export default { title: "Skin/CTA Button/Dimensions" };
 
 export const large = () => `
 <a class="cta-btn cta-btn--large" href="http://www.ebay.com">

package/src/less/details/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Details/Cascade" };
+export default { title: "Skin/Details/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/details/stories/details.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Details" };
+export default { title: "Skin/Details" };
 
 export const closed = () => `
 <details class="details">

package/src/less/drawer-dialog/stories/drawer-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Drawer Dialog" };
+export default { title: "Skin/Drawer Dialog" };
 
 export const empty = () => `
 <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">

package/src/less/field/stories/stacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Field/Stacked" };
+export default { title: "Skin/Field/Stacked" };
 
 export const group = () => `
 <fieldset>

package/src/less/field/stories/unstacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Field/Unstacked" };
+export default { title: "Skin/Field/Unstacked" };
 
 export const inlineLevel = () => `
 <span class="field">

package/src/less/filter-button/stories/button.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Filter/Button" };
+export default { title: "Skin/Filter/Button" };
 
 export const base = () => `
 <button type="button" class="filter-button">

package/src/less/filter-button/stories/group.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Filter/Button/Group" };
+export default { title: "Skin/Filter/Button/Group" };
 
 export const group = () => `
 <div class="filter-group">

package/src/less/filter-button/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Filter/Button/Link" };
+export default { title: "Skin/Filter/Button/Link" };
 
 export const base = () => `
 <a href="http://www.ebay.com" class="filter-link">

package/src/less/filter-menu/stories/filter-menu.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Filter/Menu" };
+export default { title: "Skin/Filter/Menu" };
 
 export const base = () => `
 <span class="filter-menu">

package/src/less/filter-menu-button/stories/filter-menu-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Filter/Menu Button" };
+export default { title: "Skin/Filter/Menu Button" };
 
 export const collapsed = () => `
 <span class="filter-menu-button">

package/src/less/floating-label/stories/floating-label.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Floating Label" };
+export default { title: "Skin/Floating Label" };
 
 export const base = () => `
 <span class="floating-label">

package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Fullscreen Dialog" };
+export default { title: "Skin/Fullscreen Dialog" };
 
 export const closeButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">

package/src/less/global/stories/global.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Global" };
+export default { title: "Skin/Global" };
 
 export const headings = () => `
     <h1>This is a level 1 heading</h1>

package/src/less/icon/stories/icon.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Icon" };
+export default { title: "Skin/Icon" };
 
 export const insideHeading = () => `
 <h2>

package/src/less/icon-button/stories/alignment.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Icon Button/Alignment" };
+export default { title: "Skin/Icon Button/Alignment" };
 
 export const menu = () => `
 <button aria-label="menu" type="button" class="icon-btn">

package/src/less/image-placeholder/stories/image-placeholder.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Image Placeholder" };
+export default { title: "Skin/Image Placeholder" };
 
 export const insideHeading = () => `
 <h2>

package/src/less/infotip/stories/infotip.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Infotip" };
+export default { title: "Skin/Infotip" };
 
 export const collapsed = () => `
 <span class="infotip">

package/src/less/inline-notice/stories/inline.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Inline Notice" };
+export default { title: "Skin/Inline Notice" };
 
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">