@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/dist/select/select.css

@@ -1,96 +1,132 @@
 .select {
-  color: var(--select-foreground-color, var(--color-foreground-primary));
-  font-size: var(--font-size-default);
-  position: relative;
+    color: var(--select-foreground-color, var(--color-foreground-primary));
+    font-size: var(--font-size-default);
+    position: relative;
 }
+
 span.select {
-  display: inline-block;
+    display: inline-block;
 }
+
 .select select {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--select-background-color, var(--color-background-secondary));
-  border-color: var(--select-border-color, var(--color-stroke-default));
-  border-radius: var(--select-border-radius, var(--border-radius-50));
-  border-style: solid;
-  border-width: 1px;
-  color: inherit;
-  font-family: inherit;
-  font-size: 1em;
-  height: 40px;
-  padding: 0 var(--spacing-400) 0 var(--spacing-200);
-  vertical-align: middle;
-}
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: var(
+        --select-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(--select-border-color, var(--color-stroke-default));
+    border-radius: var(--select-border-radius, var(--border-radius-50));
+    border-style: solid;
+    border-width: 1px;
+    color: inherit;
+    font-family: inherit;
+    font-size: 1em;
+    height: 40px;
+    padding: 0 var(--spacing-400) 0 var(--spacing-200);
+    vertical-align: middle;
+}
+
 .select svg.icon--chevron-down-12 {
-  height: 100%;
-  pointer-events: none;
-  position: absolute;
-  right: 16px;
-  top: 0;
+    height: 100%;
+    pointer-events: none;
+    position: absolute;
+    right: 16px;
+    top: 0;
 }
+
 .select--large select {
-  font-size: var(--font-size-medium);
-  height: 48px;
-}
-.select--fluid {
-  width: 100%;
+    font-size: var(--font-size-medium);
+    height: 48px;
 }
+
+.select--fluid,
 .select--fluid select {
-  width: 100%;
+    width: 100%;
 }
+
 .select--borderless select {
-  background-color: transparent;
-  border: 0;
-  padding-left: 0;
-  width: auto;
+    background-color: initial;
+    border: 0;
+    padding-left: 0;
+    width: auto;
 }
 .select--borderless select:focus {
-  background-color: transparent;
-  text-decoration: underline;
+    background-color: initial;
+    text-decoration: underline;
 }
+
 .select select:focus {
-  background-color: var(--select-focus-background-color, var(--color-background-primary));
+    background-color: var(
+        --select-focus-background-color,
+        var(--color-background-primary)
+    );
 }
+
 .select select:focus:not(:read-only) {
-  background-color: var(--select-focus-background-color, var(--color-background-primary));
-  border-color: var(--select-focus-border-color, var(--color-stroke-default));
-  outline: 0;
-  text-decoration: underline;
+    background-color: var(
+        --select-focus-background-color,
+        var(--color-background-primary)
+    );
+    border-color: var(--select-focus-border-color, var(--color-stroke-default));
+    outline: 0;
+    text-decoration: underline;
 }
 .select select::-ms-expand {
-  display: none;
+    display: none;
 }
+
 .select select[disabled] {
-  border-color: var(--textbox-disabled-border-color, var(--color-background-disabled));
-  color: var(--select-disabled-foregound-color, var(--color-foreground-disabled));
-  opacity: 1;
-}
+    border-color: var(
+        --textbox-disabled-border-color,
+        var(--color-background-disabled)
+    );
+    color: var(
+        --select-disabled-foregound-color,
+        var(--color-foreground-disabled)
+    );
+    opacity: 1;
+}
+
 .select select[disabled] + svg {
-  color: var(--select-disabled-foregound-color, var(--color-foreground-on-disabled));
+    color: var(
+        --select-disabled-foregound-color,
+        var(--color-foreground-on-disabled)
+    );
 }
+
 .select select[readonly] {
-  background-color: transparent;
-  border: none;
+    background-color: initial;
+    border: none;
 }
+
 .select select[aria-invalid="true"] {
-  border-color: var(--select-invalid-border-color, var(--color-stroke-attention));
-  border-style: solid;
-  border-width: 1px;
+    border-color: var(
+        --select-invalid-border-color,
+        var(--color-stroke-attention)
+    );
+    border-style: solid;
+    border-width: 1px;
 }
 .select select[aria-invalid="true"]:focus {
-  background-color: var(--select-focus-background-color, var(--color-background-primary));
-  border-color: var(--select-focus-border-color, var(--color-stroke-default));
+    background-color: var(
+        --select-focus-background-color,
+        var(--color-background-primary)
+    );
+    border-color: var(--select-focus-border-color, var(--color-stroke-default));
 }
 [dir="rtl"] .select > select {
-  padding-left: 30px;
-  padding-right: var(--spacing-200);
+    padding-left: 30px;
+    padding-right: var(--spacing-200);
 }
 [dir="rtl"] .select svg {
-  left: 16px;
-  right: auto;
+    left: 16px;
+    right: auto;
 }
 [dir="rtl"] .select--underline svg.icon {
-  left: 0;
-  right: auto;
+    left: 0;
+    right: auto;
 }
+
+/*# sourceMappingURL=select.css.map */

package/dist/select/select.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/select/select.scss","../../src/sass/mixins/private/_token-mixins.scss","select.css"],"names":[],"mappings":"AAGA;ECDQ,qEAAA;EDIJ,kCAAA;EACA,iBAAA;AEIJ;;AFDA;EACI,oBAAA;AEIJ;;AFDA;EACI,uBAAA;KAAA,oBAAA;UAAA,eAAA;ECbI,kFAAA;EAAA,oEAAA;EDoBJ,kEAAA;EACA,kBAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,iDAAA;EACA,qBAAA;AEAJ;;AFGA;EACI,WAAA;EACA,mBAAA;EACA,iBAAA;EACA,UAAA;EACA,KAAA;AEAJ;;AFGA;EACI,iCAAA;EACA,WAAA;AEAJ;;AFOA;EACI,UAAA;AEAJ;;AFGA;EACI,wBAAA;EACA,QAAA;EACA,cAAA;EACA,UAAA;AEAJ;AFEI;EACI,wBAAA;EACA,yBAAA;AEAR;;AFIA;EChEQ,sFAAA;ACgER;;AFOA;ECvEQ,sFAAA;EAAA,0EAAA;EDiFJ,SAAA;EACA,yBAAA;AEXJ;AFeA;EACI,YAAA;AEXJ;;AFcA;EC1FQ,mFAAA;EAAA,8EAAA;EDoGJ,SAAA;AElBJ;;AFqBA;ECvGQ,iFAAA;ACsFR;;AFwBA;EACI,wBAAA;EACA,WAAA;AErBJ;;AFwBA;ECnHQ,8EAAA;EDyHJ,kBAAA;EACA,gBAAA;AEzBJ;AF2BI;EC5HI,sFAAA;EAAA,0EAAA;ACqGR;AFqCI;EACI,iBAAA;EACA,gCAAA;AEjCR;AFoCI;EACI,SAAA;EACA,UAAA;AElCR;AFqCI;EACI,MAAA;EACA,UAAA;AEnCR","file":"select.css"}

package/dist/signal/signal.css

@@ -1,26 +1,35 @@
 .signal {
-  border: 1px solid;
-  border-radius: var(--border-radius-100);
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: var(--font-size-smallest);
-  font-weight: bold;
-  letter-spacing: 0.5px;
-  line-height: var(--spacing-150);
-  margin: var(--spacing-100) 0;
-  padding: 2px var(--spacing-100) 1px;
-  text-align: center;
-  text-transform: uppercase;
+    border: 1px solid;
+    border-radius: var(--border-radius-100);
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: var(--font-size-smallest);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    line-height: var(--spacing-150);
+    margin: var(--spacing-100) 0;
+    padding: 2px var(--spacing-100) 1px;
+    text-align: center;
+    text-transform: uppercase;
 }
+
 .signal--trustworthy {
-  color: var(--signal-trustworthy-color, var(--color-foreground-accent));
+    color: var(--signal-trustworthy-color, var(--color-foreground-accent));
 }
+
 .signal--recent {
-  color: var(--signal-recent-color, var(--color-foreground-confirmation));
+    color: var(--signal-recent-color, var(--color-foreground-confirmation));
 }
+
 .signal--time-sensitive {
-  color: var(--signal-time-sensitive-color, var(--color-foreground-attention));
+    color: var(
+        --signal-time-sensitive-color,
+        var(--color-foreground-attention)
+    );
 }
+
 .signal--neutral {
-  color: var(--signal-neutral-color, var(--color-foreground-secondary));
+    color: var(--signal-neutral-color, var(--color-foreground-secondary));
 }
+
+/*# sourceMappingURL=signal.css.map */

package/dist/signal/signal.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/signal/signal.scss","signal.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EACI,gBAAA;EACA,sCAAA;EACA,qBAAA;EACA,oBAAA;EACA,mCAAA;EACA,eAAA;EACA,mBAAA;EACA,8BAAA;EACA,2BAAA;EACA,kCAAA;EACA,iBAAA;EACA,wBAAA;ACKJ;;ADFA;EEhBQ,qEAAA;ADsBR;;ADFA;EEpBQ,sEAAA;AD0BR;;ADFA;EExBQ,2EAAA;AD8BR;;ADCA;EE/BQ,oEAAA;ADkCR","file":"signal.css"}

package/dist/skeleton/skeleton.css

@@ -1,175 +1,198 @@
 .skeleton {
-  container-name: skeleton-container;
-  container-type: inline-size;
-  cursor: progress;
-  width: 100%;
+    container-name: skeleton-container;
+    container-type: inline-size;
+    cursor: progress;
+    width: 100%;
 }
+
 .skeleton__avatar,
 .skeleton__button,
-.skeleton__text,
 .skeleton__image,
+.skeleton__text,
 .skeleton__textbox {
-  background: var(--skeleton-background, var(--color-loading-fill));
-  width: 100%;
+    background: var(--skeleton-background, var(--color-loading-fill));
+    width: 100%;
 }
 .skeleton__avatar {
-  border-radius: var(--avatar-border-radius, 50%);
-  height: 48px;
-  width: 48px;
+    border-radius: var(--avatar-border-radius, 50%);
+    height: 48px;
+    width: 48px;
 }
+
 .skeleton__button {
-  border-radius: var(--btn-border-radius, calc(40px / 2));
-  height: 40px;
+    border-radius: var(--btn-border-radius, 20px);
+    height: 40px;
 }
+
 .skeleton__button--small {
-  border-radius: var(--btn-border-radius, calc(32px / 2));
-  height: 32px;
+    border-radius: var(--btn-border-radius, 16px);
+    height: 32px;
 }
+
 .skeleton__button--large {
-  border-radius: var(--btn-border-radius, calc(48px / 2));
-  height: 48px;
+    border-radius: var(--btn-border-radius, 24px);
+    height: 48px;
 }
+
 .skeleton__text {
-  border-radius: var(--text-border-radius, 3px);
-  height: 16px;
-  width: calc(100% - var(--spacing-300));
+    border-radius: var(--text-border-radius, 3px);
+    height: 16px;
+    width: calc(100% - var(--spacing-300));
 }
-.skeleton__text::after {
-  height: 16px;
-  margin-top: calc(16px + var(--spacing-100));
+
+.skeleton__text:after {
+    height: 16px;
+    margin-top: calc(16px + var(--spacing-100));
 }
+
 .skeleton__text--large {
-  height: 24px;
+    height: 24px;
 }
-.skeleton__text--large::after {
-  height: 24px;
-  margin-top: calc(24px + var(--spacing-100));
+
+.skeleton__text--large:after {
+    height: 24px;
+    margin-top: calc(24px + var(--spacing-100));
 }
+
 .skeleton__text--multiline {
-  margin-bottom: var(--spacing-300);
-  position: relative;
-  width: calc(100% - var(--spacing-300));
-}
-.skeleton__text--multiline::after {
-  background: inherit;
-  content: "";
-  position: absolute;
-  width: calc(100% - var(--spacing-700));
-}
+    margin-bottom: var(--spacing-300);
+    position: relative;
+    width: calc(100% - var(--spacing-300));
+}
+
+.skeleton__text--multiline:after {
+    background: inherit;
+    content: "";
+    position: absolute;
+    width: calc(100% - var(--spacing-700));
+}
+
 .skeleton__text--large.skeleton__text--multiline {
-  margin-bottom: var(--spacing-400);
+    margin-bottom: var(--spacing-400);
 }
+
 .skeleton__textbox {
-  border-radius: var(--textbox-border-radius, var(--border-radius-50));
-  height: 48px;
+    border-radius: var(--textbox-border-radius, var(--border-radius-50));
+    height: 48px;
 }
+
 .skeleton__image {
-  border-radius: var(--image-border-radius, var(--border-radius-50));
-  height: 100%;
-  max-width: initial;
-}
-.skeleton__image::after {
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-}
+    border-radius: var(--image-border-radius, var(--border-radius-50));
+    height: 100%;
+    max-width: none;
+}
+.skeleton__image:after {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
 span.skeleton__avatar,
 span.skeleton__button,
-span.skeleton__text,
 span.skeleton__image,
+span.skeleton__text,
 span.skeleton__textbox {
-  display: inline-block;
+    display: inline-block;
 }
+
 span.skeleton__avatar:not(:last-child),
 span.skeleton__button:not(:last-child),
-span.skeleton__text:not(:last-child),
 span.skeleton__image:not(:last-child),
+span.skeleton__text:not(:last-child),
 span.skeleton__textbox:not(:last-child) {
-  -webkit-margin-end: var(--spacing-100);
-          margin-inline-end: var(--spacing-100);
+    -webkit-margin-end: var(--spacing-100);
+    margin-inline-end: var(--spacing-100);
 }
+
 div.skeleton__avatar:not(:last-child),
 div.skeleton__button:not(:last-child),
-div.skeleton__text:not(:last-child),
 div.skeleton__image:not(:last-child),
+div.skeleton__text:not(:last-child),
 div.skeleton__textbox:not(:last-child) {
-  -webkit-margin-after: var(--spacing-150);
-          margin-block-end: var(--spacing-150);
+    -webkit-margin-after: var(--spacing-150);
+    margin-block-end: var(--spacing-150);
 }
 .skeleton--elevated {
-  --skeleton-background: var(--color-loading-fill-elevated);
+    --skeleton-background: var(--color-loading-fill-elevated);
 }
+
 .skeleton--on-secondary {
-  --skeleton-background: var(--color-loading-fill-on-secondary);
+    --skeleton-background: var(--color-loading-fill-on-secondary);
 }
+
 @media screen and (max-width: 512px) {
-  .skeleton {
-    --skeleton-background: var(--color-loading-shimmer);
-  }
-  .skeleton--elevated {
-    --skeleton-background: var(--color-loading-shimmer-elevated);
-  }
-  .skeleton--on-secondary {
-    --skeleton-background: var(--color-loading-shimmer-on-secondary);
-  }
+    .skeleton {
+        --skeleton-background: var(--color-loading-shimmer);
+    }
+    .skeleton--elevated {
+        --skeleton-background: var(--color-loading-shimmer-elevated);
+    }
+    .skeleton--on-secondary {
+        --skeleton-background: var(--color-loading-shimmer-on-secondary);
+    }
 }
 .skeleton--purple {
-  --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
+    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
 }
+
 .skeleton--green {
-  --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
+    --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
 }
+
 .skeleton--blue {
-  --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
+    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
 }
+
 @media (prefers-reduced-motion: no-preference) {
-  @keyframes loading-frames {
-    0% {
-      background-position: 0% 0%;
-    }
-    50% {
-      background-position: 45% 0%;
+    @keyframes loading-frames {
+        0% {
+            background-position: 0 0;
+        }
+        50% {
+            background-position: 45% 0;
+        }
+        to {
+            background-position: 90% 0;
+        }
     }
-    100% {
-      background-position: 90% 0%;
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
     }
-  }
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
+    .skeleton__avatar,
+    .skeleton__button,
+    .skeleton__image,
+    .skeleton__text,
+    .skeleton__textbox {
+        animation:
+            fade-in 0.5s forwards,
+            loading-frames 833ms linear 667ms 6;
+        animation-fill-mode: both;
+        background-size: 200%;
     }
-    100% {
-      opacity: 1;
-    }
-  }
-  .skeleton__avatar,
-  .skeleton__button,
-  .skeleton__text,
-  .skeleton__image,
-  .skeleton__textbox {
-    /*  setting animation-iteration-count to 6 (5000/833ms)    */
-    /*  so it does not exceed 5s per WCAG 2.2.2    */
-    animation: fade-in 500ms forwards, loading-frames 833ms 667ms linear 6;
-    animation-fill-mode: both;
-    background-size: 200%;
-  }
 }
 @container skeleton-container (width > 79px) {
-  .skeleton__image {
-    border-radius: var(--image-border-radius, var(--border-radius-100));
-  }
+    .skeleton__image {
+        border-radius: var(--image-border-radius, var(--border-radius-100));
+    }
 }
 [dir="rtl"] .skeleton__avatar,
 [dir="rtl"] .skeleton__button,
-[dir="rtl"] .skeleton__text,
 [dir="rtl"] .skeleton__image,
+[dir="rtl"] .skeleton__text,
 [dir="rtl"] .skeleton__textbox {
-  animation-direction: normal, reverse;
+    animation-direction: normal, reverse;
 }
-[dir="rtl"] .skeleton__text--multiline::after {
-  left: var(--spacing-700);
+[dir="rtl"] .skeleton__text--multiline:after {
+    left: var(--spacing-700);
 }
+
+/*# sourceMappingURL=skeleton.css.map */

package/dist/skeleton/skeleton.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/skeleton/skeleton.scss","skeleton.css","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/private/_button-mixins.scss"],"names":[],"mappings":"AAIA;EACI,iCAAA;EACA,0BAAA;EACA,eAAA;EACA,UAAA;ACKJ;;ADFA;EETQ,gEAAA;EFgBJ,UAAA;ACIJ;ADAA;EACI,8CAAA;EACA,WAAA;EACA,UAAA;ACIJ;;ADDA;EACI,4CAAA;EACA,WG7BoB;AFiCxB;;ADDA;EACI,4CAAA;EACA,WGnCkB;AFuCtB;;ADDA;EACI,4CAAA;EACA,WGtCkB;AF0CtB;;ADDA;EACI,4CAAA;EACA,WAAA;EACA,qCAAA;ACIJ;;ADDA;EACI,WAAA;EACA,0CAAA;ACIJ;;ADDA;EACI,WAAA;ACIJ;;ADDA;EACI,WAAA;EACA,0CAAA;ACIJ;;ADDA;EACI,gCAAA;EACA,iBAAA;EACA,qCAAA;ACIJ;;ADDA;EACI,kBAAA;EACA,UAAA;EACA,iBAAA;EACA,qCAAA;ACIJ;;ADDA;EACI,gCAAA;ACIJ;;ADDA;EE9EQ,mEAAA;EFiFJ,WAAA;ACGJ;;ADAA;EEpFQ,iEAAA;EFuFJ,WAAA;EACA,cAAA;ACEJ;ADGA;EACI,QAAA;EACA,WAAA;EACA,MAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;EACA,UAAA;ACEJ;;ADCA;EAKI,oBAAA;ACEJ;;ADCA;EAKI,qCAAA;UAAA,oCAAA;ACEJ;;ADCA;EAKI,uCAAA;UAAA,mCAAA;ACEJ;ADEA;EACI,wDAAA;ACEJ;;ADCA;EACI,4DAAA;ACEJ;;ADCA;EACI;IACI,kDAAA;ECEN;EDEE;IACI,2DAAA;ECCN;EDEE;IACI,+DAAA;ECAN;AACF;ADGA;EACI,oEAAA;ACDJ;;ADIA;EACI,mEAAA;ACDJ;;ADIA;EACI,kEAAA;ACDJ;;ADIA;EACI;IACI;MACI,uBAAA;ICDR;IDGI;MACI,yBAAA;ICDR;IDGI;MACI,yBAAA;ICDR;EACF;EDIE;IACI;MACI,SAAA;ICFR;IDII;MACI,SAAA;ICFR;EACF;EDKE;IAOI,kEACI;IAEJ,wBAAA;IACA,oBAAA;ECLN;AACF;ADSA;EACI;IE1MI,kEAAA;EDqMN;AACF;ADUI;EAKI,mCAAA;ACRR;ADWI;EACI,uBAAA;ACTR","file":"skeleton.css"}