@ebay/skin 17.2.0-next.0 → 17.2.0

package/dist/listbox/listbox.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 div.listbox {
   margin: var(--spacing-200) 0;
@@ -30,6 +31,8 @@ div.listbox__options--reverse[role="listbox"] {
 }
 div.listbox__option[role="option"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

package/dist/listbox-button/listbox-button.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .listbox-button {
   line-height: normal;
@@ -21,9 +22,9 @@ span.listbox-button--fluid .btn {
 div.listbox-button__listbox {
   background-color: var(--listbox-button-listbox-background-color, var(--color-background-elevated));
   border-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   box-sizing: border-box;
   display: none;
-  filter: var(--bubble-filter);
   left: 0;
   max-height: 400px;
   min-width: 100%;
@@ -128,6 +129,8 @@ div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
 }
 div.listbox-button__option[role="option"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

package/dist/menu/menu.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .menu__items,
 .fake-menu__items {
@@ -46,6 +47,8 @@ button.fake-menu__item,
 a.fake-menu__item,
 div.menu__item[role^="menuitem"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

package/dist/menu-button/menu-button.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .menu-button,
 .fake-menu-button {
@@ -10,9 +11,9 @@
 .fake-menu-button__menu {
   background-color: var(--menu-button-menu-background-color, var(--color-background-elevated));
   border-radius: var(--menu-button-menu-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   box-sizing: border-box;
   display: none;
-  filter: var(--bubble-filter);
   left: 0;
   max-height: 400px;
   min-width: 100%;
@@ -42,6 +43,8 @@ span.fake-menu-button__button {
 }
 div.menu-button__item[role^="menuitem"] {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;
@@ -115,6 +118,8 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
 .fake-menu-button__menu a.fake-menu-button__item,
 .fake-menu-button__menu button.fake-menu-button__item {
   background-color: transparent;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
   display: inline-grid;
   font-family: inherit;

package/dist/tooltip/tooltip.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
   position: relative;
@@ -9,8 +10,8 @@ span.tooltip {
 }
 .tooltip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  box-shadow: var(--bubble-shadow);
   display: none;
-  filter: var(--bubble-filter);
   font-size: 14px;
   left: 0;
   max-width: 344px;

package/dist/tourtip/tourtip.css

@@ -1,5 +1,6 @@
 :root {
-  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tourtip {
   position: relative;
@@ -9,8 +10,8 @@ span.tourtip {
 }
 .tourtip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-100));
+  box-shadow: var(--bubble-shadow);
   display: none;
-  filter: var(--bubble-filter);
   font-size: 14px;
   left: 0;
   max-width: 344px;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.2.0-next.0",
+    "version": "17.2.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -58,28 +58,27 @@
         "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook",
         "change": "changeset add",
         "prerelease:start": "changeset pre enter next",
-        "prerelease:end": "changeset pre exit",
-        "release:manual": "npm run version && git commit -am '`npm pkg get version | tr -d \"`'"
+        "prerelease:end": "changeset pre exit"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.4",
-        "@babel/core": "^7.23.3",
-        "@babel/preset-env": "^7.23.3",
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "^2.27.1",
-        "@commitlint/cli": "^18.4.3",
-        "@commitlint/config-conventional": "^18.4.3",
-        "@ebay/browserslist-config": "^2.6.0",
-        "@floating-ui/dom": "^1.5.3",
-        "@percy/cli": "^1.27.4",
-        "@percy/storybook": "^5.0.0",
-        "@storybook/html": "^7.1.1",
-        "@storybook/html-webpack5": "^7.5.3",
-        "babel-loader": "^9.1.2",
+        "@commitlint/cli": "^18.6.1",
+        "@commitlint/config-conventional": "^18.6.2",
+        "@ebay/browserslist-config": "^2.7.0",
+        "@floating-ui/dom": "^1.6.3",
+        "@percy/cli": "^1.28.0",
+        "@percy/storybook": "^5.0.1",
+        "@storybook/html": "^7.6.17",
+        "@storybook/html-webpack5": "^7.6.17",
+        "babel-loader": "^9.1.3",
         "browser-sync": "^3.0.2",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.54.0",
+        "eslint": "^8.57.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
@@ -88,13 +87,13 @@
         "gulp-clean-css": "^4",
         "gulp-less": "^5",
         "gulp-rename": "^2",
-        "husky": "^9.0.7",
+        "husky": "^9.0.11",
         "jekyll": "^3.0.0-beta1",
         "jsdom": "^24.0.0",
-        "less-loader": "^12.1.0",
+        "less-loader": "^12.2.0",
         "less-plugin-autoprefix": "^2",
         "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^15.1.0",
+        "lint-staged": "^15.2.2",
         "makeup-alert-dialog": "~0.2.0",
         "makeup-combobox": "~0.3.0",
         "makeup-confirm-dialog": "~0.2.0",
@@ -107,11 +106,11 @@
         "makeup-input-dialog": "0.1.0",
         "makeup-key-emitter": "~0.3.1",
         "makeup-lightbox-dialog": "0.1.0",
-        "makeup-listbox": "~0.3.1",
-        "makeup-listbox-button": "~0.4.0",
+        "makeup-listbox": "~0.3.2",
+        "makeup-listbox-button": "~0.4.2",
         "makeup-menu": "~0.3.0",
-        "makeup-menu-button": "~0.3.0",
-        "makeup-modal": "~0.4.0",
+        "makeup-menu-button": "~0.3.3",
+        "makeup-modal": "~0.4.1",
         "makeup-panel-dialog": "0.1.0",
         "makeup-prevent-scroll-keys": "~0.2.1",
         "makeup-roving-tabindex": "~0.6.0",
@@ -122,19 +121,19 @@
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^8.0.0",
-        "prettier": "^3.1.0",
+        "postcss-loader": "^8.1.0",
+        "prettier": "^3.2.5",
         "rimraf": "^5",
-        "storybook": "^7.5.3",
-        "stylelint": "^16.1.0",
+        "storybook": "^7.6.17",
+        "stylelint": "^16.2.1",
         "stylelint-config-standard": "^36",
         "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
-        "svgo": "^3.0.4",
-        "webpack": "^5.83.0",
-        "webpack-cli": "^5.1.1",
-        "winston": "^3.8.2",
+        "svgo": "^3.2.0",
+        "webpack": "^5.90.3",
+        "webpack-cli": "^5.1.4",
+        "winston": "^3.11.0",
         "xmlserializer": "^0.6.1",
         "yargs": "^17.7.2"
     },

package/src/less/date-textbox/date-textbox.less

@@ -14,7 +14,7 @@
 .date-textbox__popover {
     .background-color-token(calendar-background-color, color-background-elevated);
     border-radius: var(--spacing-200);
-    filter: var(--bubble-filter);
+    box-shadow: var(--bubble-shadow);
     margin-left: calc(var(--spacing-100) * -1);
     padding: var(--spacing-200);
     position: absolute;

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

@@ -88,8 +88,8 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"]:hov
     .background-color-token(filter-menu-item-background-color, color-background-elevated);
     border: none;
     border-radius: 16px;
+    box-shadow: var(--bubble-shadow);
     display: none;
-    filter: var(--bubble-filter);
     max-width: 288px; // TODO remove max-width restriction to filter-menu styles
     min-width: 144px;
     overflow: hidden;

package/src/less/mixins/private/bubble-mixins.less

@@ -1,15 +1,19 @@
 // this mixin is used by infotip, tooltip, tourtip, date-textbox
 
 :root {
-    --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))
-        drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+    // Do NOT use filter: drop-shadow() as Safari cannot do
+    //   drop-shadows outside an element with overflow.
+    //   Since box-shadow more widely supports various use cases,
+    //   it's a more robust solution.
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 
 .bubble(@border-radius-value: border-radius-50) {
     .border-radius-token(bubble-border-radius, @border-radius-value);
 
+    box-shadow: var(--bubble-shadow);
     display: none;
-    filter: var(--bubble-filter);
     font-size: 14px;
     left: 0;
     max-width: 344px;

package/src/less/mixins/private/dropdown-mixins.less

@@ -3,9 +3,9 @@
 .dropdown-base(@component) {
     .background-color-token(~"@{component}-background-color", color-background-elevated);
     .border-radius-token(~"@{component}-border-radius", border-radius-50);
+    box-shadow: var(--bubble-shadow);
     box-sizing: border-box;
     display: none;
-    filter: var(--bubble-filter);
     left: 0;
     max-height: 400px;
     min-width: 100%;

package/src/less/mixins/private/selection-list-mixins.less

@@ -1,5 +1,7 @@
 .selection-list-item-base() {
     background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
     box-sizing: border-box;
     display: inline-grid;
     font-family: inherit;

package/src/less/pagination/stories/overflow.stories.js

@@ -16,8 +16,8 @@ export const start = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -61,8 +61,8 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -77,8 +77,8 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -122,8 +122,8 @@ export const end = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -169,8 +169,8 @@ export const endMenuCollapsed = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
-                        <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
-                            <use href="#icon-overflow"></use>
+                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                            <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
                     <ul class="fake-menu-button__menu">
@@ -240,8 +240,8 @@ export const endMenuExpanded = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-expanded="true" aria-label="Menu">
-                        <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
-                            <use href="#icon-overflow"></use>
+                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                            <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
                     <ul class="fake-menu-button__menu">

package/.changeset/chilled-dots-whisper.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-icon updates

package/.changeset/five-bats-appear.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-ebay-signal has incorrect type size and internal padding

package/.changeset/gentle-moles-collect.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-Venmo icon: Missing borders

package/.changeset/healthy-kings-hang.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-flyout: update styling

package/.changeset/pre.json

@@ -1,17 +0,0 @@
-{
-    "mode": "pre",
-    "tag": "next",
-    "initialVersions": {
-        "@ebay/skin": "17.1.1"
-    },
-    "changesets": [
-        "chilled-dots-whisper",
-        "five-bats-appear",
-        "gentle-moles-collect",
-        "healthy-kings-hang",
-        "pretty-rabbits-smash",
-        "slow-maps-guess",
-        "stale-lamps-retire",
-        "unlucky-files-tickle"
-    ]
-}

package/.changeset/pretty-rabbits-smash.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-component status alignment

package/.changeset/slow-maps-guess.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-Docs: remove focusable attribute from examples and stories

package/.changeset/stale-lamps-retire.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-ebay-button: reduce width of stroke for priority=tertiary

package/.changeset/unlucky-files-tickle.md

@@ -1,5 +0,0 @@
----
-"@ebay/skin": minor
----
-
-feat: automatically publish skin