@ebay/skin 16.2.0-0 → 16.2.1

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

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

package/src/less/link/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Link" };
+export default { title: "Skin/Link" };
 
 export const base = () => `
 <a href="https://www.ebay.com/urw/ZTE-AXON-7-Mini-32GB-Ion-Gold-Unlocked-Smartphone/product-reviews/230215749?_itm=222972816761">Link</a>

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

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

package/src/less/listbox/stories/listbox.stories.js

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

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

@@ -1,4 +1,4 @@
-export default { title: "Listbox Button/Base" };
+export default { title: "Skin/Listbox Button/Base" };
 
 export const collapsedUnselected = () => `
 <span class="listbox-button">

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

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

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

@@ -1,4 +1,4 @@
-export default { title: "Listbox Button/Dimensions" };
+export default { title: "Skin/Listbox Button/Dimensions" };
 
 export const fluid = () => `
 <span class="listbox-button listbox-button--fluid">

package/src/less/listbox-button/stories/form.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Listbox Button/Form" };
+export default { title: "Skin/Listbox Button/Form" };
 
 export const enabled = () => `
 <span class="listbox-button listbox-button--form">

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

@@ -1,4 +1,4 @@
-export default { title: "Menu/Fake Menu" };
+export default { title: "Skin/Menu/Fake Menu" };
 
 export const links = () => `
 <div class="fake-menu">

package/src/less/menu/stories/misc.stories.js

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

package/src/less/menu/stories/multiSelect.stories.js

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

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

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

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

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

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

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

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

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

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

@@ -150,5 +150,8 @@
 }
 
 .pointer-right-bottom() {
-    inset: auto -4px 12px auto;
+    bottom: 12px;
+    left: auto;
+    right: -4px;
+    top: auto;
 }

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

@@ -9,10 +9,13 @@
 
 .dialog-base() {
     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; // because global header has an element with 99999
 

package/src/less/mixins/public/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/src/less/page-notice/stories/page-notice.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Page Notice" };
+export default { title: "Skin/Page Notice" };
 
 export const general = () => `
 <section class="page-notice page-notice--general" role="region" aria-label="Information">

package/src/less/page-notice/stories/test.stories.js

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

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

@@ -1,4 +1,4 @@
-export default { title: "Pagination/Buttons/Cascade" };
+export default { title: "Skin/Pagination/Buttons/Cascade" };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

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

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

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

@@ -1,4 +1,4 @@
-export default { title: "Pagination/Links/Cascade" };
+export default { title: "Skin/Pagination/Links/Cascade" };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

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

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

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

@@ -1,4 +1,4 @@
-export default { title: "Pagination/Overflow" };
+export default { title: "Skin/Pagination/Overflow" };
 
 export const start = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

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

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

package/src/less/progress-bar/stories/progress-bar.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Progress Bar" };
+export default { title: "Skin/Progress Bar" };
 
 export const empty = () =>
     `<progress class="progress" value=1 max=100>0%</progress>`;

package/src/less/progress-spinner/stories/progress-spinner.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Progress Spinner" };
+export default { title: "Skin/Progress Spinner" };
 
 export const base = () =>
     `<span class="progress-spinner" aria-label="Busy animation" role="img">

package/src/less/progress-stepper/stories/progress-stepper.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Progress Stepper" };
+export default { title: "Skin/Progress Stepper" };
 
 export const base = () => `
 <div class="progress-stepper">

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

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

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

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

package/src/less/section-notice/stories/rtl.stories.js

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

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

@@ -1,4 +1,4 @@
-export default { title: "Section Notice" };
+export default { title: "Skin/Section Notice" };
 
 export const general = () => `
 <div class="section-notice" role="region">

package/src/less/section-notice/stories/test.stories.js

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

package/src/less/section-title/stories/rtl.stories.js

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

package/src/less/section-title/stories/section-title.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Section Title" };
+export default { title: "Skin/Section Title" };
 
 export const heading = () => `
 <div class="section-title">

package/src/less/segmented-buttons/stories/segmented-buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Segmented Buttons" };
+export default { title: "Skin/Segmented Buttons" };
 export const base = () => `
     <div class="segmented-buttons">
         <ul>

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

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

package/src/less/select/stories/default.stories.js

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

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

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

package/src/less/signal/stories/signal.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Hotness Signals" };
+export default { title: "Skin/Hotness Signals" };
 
 export const trustWorthy = () => `
 <span class="signal signal--trustworthy">

package/src/less/snackbar-dialog/stories/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Snackbar Dialog/Base" };
+export default { title: "Skin/Snackbar Dialog/Base" };
 
 export const noAction = () => `
     <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">

package/src/less/snackbar-dialog/stories/font-size.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Snackbar Dialog/Font-Size" };
+export default { title: "Skin/Snackbar Dialog/Font-Size" };
 
 export const noAction = () => `
     <div style="font-size: 200%">

package/src/less/snackbar-dialog/stories/rtl.stories.js

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

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

@@ -1,4 +1,4 @@
-export default { title: "Split Button/Base" };
+export default { title: "Skin/Split Button/Base" };
 export const primaryCollapsed = () => `
 <span class="split-button">
     <button class="btn btn--primary btn--split-start" type="button">

package/src/less/split-button/stories/rtl.stories.js

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

package/src/less/split-button/stories/size.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Split Button/Size" };
+export default { title: "Skin/Split Button/Size" };
 export const longTextCollapsed = () => `
 <span class="split-button">
     <button class="btn btn--primary btn--split-start btn--truncated" aria-haspopup="true" type="button">

package/src/less/star-rating/stories/star-rating.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Star Rating" };
+export default { title: "Skin/Star Rating" };
 
 export const empty = () => `
 <div role="img" aria-label="Rating: 0/5" class="star-rating" data-stars="0">

package/src/less/star-rating-select/stories/star-rating-select.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Star Rating Select" };
+export default { title: "Skin/Star Rating Select" };
 
 export const empty = () => `
 <div role="radiogroup" aria-label="Rate this product" class="star-rating-select">

package/src/less/switch/stories/form.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Switch/Form" };
+export default { title: "Skin/Switch/Form" };
 
 export const on = () => `
 <div class="switch">

package/src/less/switch/stories/script.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Switch/Script" };
+export default { title: "Skin/Switch/Script" };
 
 export const on = () => `
 <div class="switch">

package/src/less/tabs/stories/fake-tabs/block.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Tabs/Fake Tabs/Block" };
+export default { title: "Skin/Tabs/Fake Tabs/Block" };
 
 export const two = () => `
 <div class="fake-tabs">

package/src/less/tabs/stories/fake-tabs/inlineBlock.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Tabs/Fake Tabs/Inline-Block" };
+export default { title: "Skin/Tabs/Fake Tabs/Inline-Block" };
 
 export const two = () => `
 <span class="fake-tabs">

package/src/less/tabs/stories/tabs/block.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Tabs/Block" };
+export default { title: "Skin/Tabs/Block" };
 
 export const two = () => `
 <div class="tabs">

package/src/less/tabs/stories/tabs/inlineBlock.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Tabs/Inline-Block" };
+export default { title: "Skin/Tabs/Inline-Block" };
 
 export const two = () => `
 <span class="tabs">

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

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

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

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

package/src/less/textbox/stories/rtl/textbox.stories.js

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

package/src/less/textbox/stories/textbox.stories.js

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

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

@@ -1,4 +1,4 @@
-export default { title: "Toast Dialog" };
+export default { title: "Skin/Toast Dialog" };
 
 export const primaryAction = () => `
 <aside class="toast-dialog" aria-label="Notification" aria-live="polite" aria-modal="false" role="dialog">

package/src/less/tooltip/stories/pointer.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Tooltip/Pointer" };
+export default { title: "Skin/Tooltip/Pointer" };
 
 const pointerStyles = {
     left: {

package/src/less/tooltip/stories/tooltip.stories.js

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

package/src/less/tourtip/stories/tourtip.stories.js

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

package/src/less/video/video.less

@@ -13,14 +13,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 {