@ebay/skin 16.0.0 → 16.1.0-0

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

@@ -74,11 +74,26 @@ hr.progress-stepper__separator {
     font-weight: bold;
 }
 
-.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h2,
-.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h3,
-.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h4,
-.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h5,
-.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h6 {
+.progress-stepper__item[aria-current]
+    ~ .progress-stepper__item
+    .progress-stepper__text
+    h2,
+.progress-stepper__item[aria-current]
+    ~ .progress-stepper__item
+    .progress-stepper__text
+    h3,
+.progress-stepper__item[aria-current]
+    ~ .progress-stepper__item
+    .progress-stepper__text
+    h4,
+.progress-stepper__item[aria-current]
+    ~ .progress-stepper__item
+    .progress-stepper__text
+    h5,
+.progress-stepper__item[aria-current]
+    ~ .progress-stepper__item
+    .progress-stepper__text
+    h6 {
     .color-token(progress-stepper-text-light-color, color-foreground-secondary);
 }
 
@@ -108,7 +123,8 @@ hr.progress-stepper__separator {
 }
 
 // DEPRECATED remove progress-stepper__item--current in next major version
-.progress-stepper__item--attention[aria-current] ~ hr.progress-stepper__separator,
+.progress-stepper__item--attention[aria-current]
+    ~ hr.progress-stepper__separator,
 .progress-stepper__items--current
     .progress-stepper__item[aria-current]
     ~ hr.progress-stepper__separator {
@@ -145,7 +161,9 @@ hr.progress-stepper__separator {
     width: auto;
 }
 
-.progress-stepper--vertical .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
+.progress-stepper--vertical
+    .progress-stepper__item[aria-current]
+    + hr.progress-stepper__separator {
     background: linear-gradient(
         180deg,
         @_progress-stepper-active-gradient,
@@ -248,7 +266,9 @@ hr.progress-stepper__separator {
         text-align: left;
     }
 
-    .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
+    .progress-stepper--vertical
+        .progress-stepper__item
+        .progress-stepper__text {
         margin-left: inherit;
         margin-right: @spacing-200;
         text-align: right;
@@ -260,7 +280,7 @@ hr.progress-stepper__separator {
     }
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     hr.progress-stepper__separator {
         min-width: @progress-stepper-large-min-width;
     }

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

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

package/src/less/radio/radio.less

@@ -75,11 +75,15 @@ input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked {
     display: inline-block;
 }
 
-input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked {
+input.radio__control[type="radio"]:checked
+    + span.radio__icon
+    svg.radio__checked {
     display: inline-block;
 }
 
-input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked {
+input.radio__control[type="radio"]:checked
+    + span.radio__icon
+    svg.radio__unchecked {
     display: none;
 }
 
@@ -98,6 +102,7 @@ input.radio__control[type="radio"]:focus + span.radio__icon {
     outline-offset: 2px;
 }
 
-input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+input.radio__control[type="radio"]:focus:not(:focus-visible)
+    + span.radio__icon {
     outline: none;
 }

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

@@ -1,4 +1,4 @@
-export default { title: 'Radio/Checked' };
+export default { title: "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: "Radio/Unchecked" };
 
 export const base = () => `
 <span class="radio">

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

@@ -105,7 +105,7 @@ p.section-notice__cta {
 
 /* LARGE SCREEN ADJUSTMENTS */
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     section.section-notice,
     div[role="region"].section-notice {
         margin: @spacing-200 0;

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

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

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

@@ -94,7 +94,7 @@
     }
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .section-title__title {
         .typography-large-2();
     }

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

@@ -1,4 +1,4 @@
-export default { title: 'Section Title/RTL' };
+export default { title: "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: "Section Title" };
 
 export const heading = () => `
 <div class="section-title">

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

@@ -1,4 +1,4 @@
-export default { title: 'Select/Cascade' };
+export default { title: "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: "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: "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: "Hotness Signals" };
 
 export const trustWorthy = () => `
 <span class="signal signal--trustworthy">

package/src/less/snackbar-dialog/snackbar-dialog.less

@@ -79,7 +79,7 @@
     text-decoration: underline;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .snackbar-dialog {
         bottom: 20px;
     }

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

@@ -1,4 +1,4 @@
-export default { title: 'Snackbar Dialog/Base' };
+export default { title: "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: "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: "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: "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: "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: "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/square-corner-theme/square-corner-theme.less

@@ -30,8 +30,8 @@ button.expand-btn {
 .tourtip,
 .infotip {
     --bubble-border-radius: 0;
-    --bubble-base-box-shadow: 0 -2px 2px @box-shadow, 2px 0 2px @box-shadow, 0 2px 2px @box-shadow,
-        -2px 0 2px @box-shadow;
+    --bubble-base-box-shadow: 0 -2px 2px @box-shadow, 2px 0 2px @box-shadow,
+        0 2px 2px @box-shadow, -2px 0 2px @box-shadow;
     --bubble-left-box-shadow: -2px 2px 2px @box-shadow;
     --bubble-right-box-shadow: 2px -2px 2px @box-shadow;
     --bubble-bottom-box-shadow: 2px 2px 2px @box-shadow;
@@ -83,7 +83,7 @@ button.expand-btn {
     --toast-dialog-border-radius: 0;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .toast-dialog {
         --toast-dialog-large-border-radius: 0;
     }

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

@@ -1,4 +1,4 @@
-export default { title: 'Star Rating' };
+export default { title: "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/star-rating-select.less

@@ -65,8 +65,12 @@ div.star-rating-select span.star-rating-select__radio-icon svg {
 }
 
 div.star-rating-select input {
-    &.star-rating-select__control--filled + span.star-rating-select__radio-icon svg,
-    &.star-rating-select__control[type="radio"]:checked + span.star-rating-select__radio-icon svg {
+    &.star-rating-select__control--filled
+        + span.star-rating-select__radio-icon
+        svg,
+    &.star-rating-select__control[type="radio"]:checked
+        + span.star-rating-select__radio-icon
+        svg {
         --color-star-rating-full: var(
             --color-star-rating-filled,
             @color-star-rating-icon-filled-foreground

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: "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: "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: "Switch/Script" };
 
 export const on = () => `
 <div class="switch">

package/src/less/switch/switch.less

@@ -95,26 +95,32 @@ span.switch__control:not([aria-disabled="true"]):focus + span.switch__button {
 
 // ON > Track
 input.switch__control:not([disabled]):checked + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.switch__button {
+span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
+    + span.switch__button {
     .background-color-token(switch-checked-background-color, color-background-accent);
 }
 
 // ON > Track > Disabled
 input.switch__control[disabled]:checked + span.switch__button,
-span.switch__control[aria-disabled="true"][aria-checked="true"] + span.switch__button {
+span.switch__control[aria-disabled="true"][aria-checked="true"]
+    + span.switch__button {
     .background-color-token(switch-disabled-background-color, color-background-disabled);
     .border-color-token(switch-border-color, color-background-disabled);
 }
 
-span.switch__control:not([aria-disabled="true"]):focus-visible + span.switch__button,
+span.switch__control:not([aria-disabled="true"]):focus-visible
+    + span.switch__button,
 input.switch__control:not([disabled]):focus-visible + span.switch__button {
-    box-shadow: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--color-state-accent-hover);
+    box-shadow: 0 0 0 2px var(--color-background-primary),
+        0 0 0 4px var(--color-state-accent-hover);
 }
 
 input.switch__control:not([disabled]):checked:hover + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:hover + span.switch__button,
+span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:hover
+    + span.switch__button,
 input.switch__control:not([disabled]):checked:focus + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:focus + span.switch__button {
+span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:focus
+    + span.switch__button {
     .background-color-token(switch-checked-hover-background-color, color-state-accent-hover);
 }
 

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

@@ -1,4 +1,4 @@
-export default { title: 'Tabs/Fake Tabs/Block' };
+export default { title: "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: "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: "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: "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: "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: "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: "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: "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: "Toast Dialog" };
 
 export const primaryAction = () => `
 <aside class="toast-dialog" aria-label="Notification" aria-live="polite" aria-modal="false" role="dialog">

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

@@ -142,7 +142,7 @@ button.toast-dialog__close > svg {
     }
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .toast-dialog {
         .border-radius-token(toast-dialog-border-radius, border-radius-100);
         bottom: @spacing-200;