@ebay/skin 16.2.0 → 16.3.0

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -6,10 +6,13 @@
 }
 .lightbox-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;
   align-items: flex-start;

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",
+    "version": "16.3.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

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/floating-label.less

@@ -106,3 +106,18 @@ label.floating-label__label--invalid {
         transform-origin: right;
     }
 }
+
+// Autofill
+
+label.floating-label__label.floating-label__label--inline:has(
+        + .textbox > :autofill
+    ) {
+    transform: scale(0.75, 0.75) translate(0, 2px);
+}
+
+.floating-label--large
+    label.floating-label__label.floating-label__label--inline:has(
+        + .textbox > :autofill
+    ) {
+    transform: scale(0.75, 0.75) translate(0, 3px);
+}

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">

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">