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

package/dist/tooltip/tooltip.css

@@ -1,140 +1,172 @@
 :root {
-  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
         0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
-  position: relative;
+    position: relative;
 }
+
 span.tooltip {
-  display: inline-block;
+    display: inline-block;
 }
+
 .tooltip__overlay {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-shadow);
-  display: none;
-  font-size: 14px;
-  left: 0;
-  max-width: 344px;
-  position: absolute;
-  top: 0;
-  transform: scale3d(1, 1, 1);
-  width: -webkit-max-content;
-  width: max-content;
-  z-index: 1;
+    box-shadow: var(--bubble-shadow);
+    display: none;
+    font-size: 14px;
+    left: 0;
+    max-width: 344px;
+    position: absolute;
+    top: 0;
+    transform: scaleX(1);
+    width: max-content;
+}
+
+.tooltip__mask,
+.tooltip__overlay {
+    border-radius: var(--bubble-border-radius, var(--border-radius-50));
+    z-index: 1;
 }
+
 .tooltip__mask {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  position: relative;
-  z-index: 1;
-  background-color: var(--tooltip-background-color, var(--color-background-elevated));
-  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
-}
+    background-color: var(
+        --tooltip-background-color,
+        var(--color-background-elevated)
+    );
+    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    position: relative;
+}
+
 span.tooltip__mask {
-  display: block;
+    display: block;
 }
+
 .tooltip__cell {
-  display: flex;
-  padding: var(--spacing-100) var(--spacing-200);
-  word-break: break-word;
+    display: flex;
+    padding: var(--spacing-100) var(--spacing-200);
+    word-break: break-word;
 }
 .tooltip__cell a {
-  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 .tooltip__cell a:focus {
-  outline: 1px dashed currentColor;
+    outline: 1px dashed currentColor;
 }
+
 .tooltip__content {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 .tooltip__content p {
-  margin: 0;
+    margin: 0;
 }
 .tooltip__content p:not(:first-of-type) {
-  margin-top: var(--spacing-50);
+    margin-top: var(--spacing-50);
 }
+
 button.tooltip__close {
-  align-self: flex-start;
-  background: none;
-  border: 0;
-  flex-shrink: 0;
-  height: var(--spacing-400);
-  margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0 var(--spacing-100);
-  padding: 0;
-  white-space: nowrap;
-  width: 32px;
-}
+    align-self: flex-start;
+    background: none;
+    border: 0;
+    flex-shrink: 0;
+    height: var(--spacing-400);
+    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+        var(--spacing-100);
+    padding: 0;
+    white-space: nowrap;
+    width: 32px;
+}
+
 .tooltip__pointer {
-  height: 8px;
-  position: absolute;
-  transform: rotate(45deg);
-  width: 8px;
-  z-index: 0;
-  background-color: var(--tooltip-background-color, var(--color-background-elevated));
-}
+    background-color: var(
+        --tooltip-background-color,
+        var(--color-background-elevated)
+    );
+    height: 8px;
+    position: absolute;
+    transform: rotate(45deg);
+    width: 8px;
+    z-index: 0;
+}
+
 .tooltip__pointer--top-left {
-  top: -4px;
-  left: 12px;
+    left: 12px;
+    top: -4px;
 }
+
 .tooltip__pointer--top {
-  top: -4px;
-  left: calc(50% - 4px);
+    left: calc(50% - 4px);
+    top: -4px;
 }
+
 .tooltip__pointer--top-right {
-  top: -4px;
-  left: auto;
-  right: 12px;
+    left: auto;
+    right: 12px;
+    top: -4px;
 }
+
 .tooltip__pointer--bottom-left {
-  bottom: -4px;
-  top: auto;
-  left: 12px;
+    bottom: -4px;
+    left: 12px;
+    top: auto;
 }
+
 .tooltip__pointer--bottom {
-  bottom: -4px;
-  top: auto;
-  left: calc(50% - 4px);
+    bottom: -4px;
+    left: calc(50% - 4px);
+    top: auto;
 }
+
 .tooltip__pointer--bottom-right {
-  bottom: -4px;
-  top: auto;
-  left: auto;
-  right: 12px;
+    bottom: -4px;
+    left: auto;
+    right: 12px;
+    top: auto;
 }
+
 .tooltip__pointer--left {
-  top: calc(50% - 4px);
-  left: -4px;
+    left: -4px;
+    top: calc(50% - 4px);
 }
+
 .tooltip__pointer--left-bottom {
-  bottom: 12px;
-  left: -4px;
-  top: auto;
+    bottom: 12px;
+    left: -4px;
+    top: auto;
 }
+
 .tooltip__pointer--left-top {
-  left: -4px;
-  top: 12px;
+    left: -4px;
+    top: 12px;
 }
+
 .tooltip__pointer--right {
-  top: calc(50% - 4px);
-  left: auto;
-  right: -4px;
+    left: auto;
+    right: -4px;
+    top: calc(50% - 4px);
 }
+
 .tooltip__pointer--right-bottom {
-  bottom: 12px;
-  left: auto;
-  right: -4px;
-  top: auto;
+    bottom: 12px;
+    left: auto;
+    right: -4px;
+    top: auto;
 }
+
 .tooltip__pointer--right-top {
-  left: auto;
-  right: -4px;
-  top: 12px;
+    left: auto;
+    right: -4px;
+    top: 12px;
 }
+
 .tooltip--expanded .tooltip__overlay,
 .tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
-  display: block;
+    display: block;
 }
+
 @media (min-width: 512px) {
-  .tooltip__overlay {
-    max-width: 400px;
-  }
+    .tooltip__overlay {
+        max-width: 400px;
+    }
 }
+
+/*# sourceMappingURL=tooltip.css.map */

package/dist/tooltip/tooltip.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_bubble-mixins.scss","tooltip.css","../../src/sass/tooltip/tooltip.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAEA;EAKI,4EAAA;ACQJ;ACXA;EACI,iBAAA;ADgBJ;;ACbA;EACI,oBAAA;ADgBJ;;ACbA;EFEI,+BAAA;EACA,YAAA;EACA,cAAA;EACA,MAAA;EACA,eAAA;EACA,iBAAA;EACA,KAAA;EAEA,mBAAA;EACA,iBAAA;ACiBJ;;ACxBA;ECdQ,kEAAA;EHsBJ,SAAA;ACwBJ;;AChCA;ECdQ,kFAAA;EAAA,sEAAA;EH4BJ,iBAAA;ACkBJ;;ACvBA;EACI,aAAA;AD0BJ;;ACvBA;EFWI,YAAA;EACA,6CAFiC;EAGjC,qBAAA;ACgBJ;AC1BI;EC9BI,sEAAA;AF2DR;ACvBQ;EACI,+BAAA;ADyBZ;;ACpBA;EFEI,WAAA;ACsBJ;ADpBI;EACI,QAAA;ACsBR;ADnBI;EACI,4BAAA;ACqBR;;AC1BA;EFUI,qBAAA;EACA,eAAA;EACA,QAAA;EACA,aAAA;EACA,yBAAA;EACA,mFAAA;EAEA,SAAA;EACA,kBAAA;EACA,UAAA;ACmBJ;;AClCA;EClDQ,kFAAA;EHsEJ,UAAA;EACA,iBAAA;EACA,uBAAA;EACA,SAAA;EACA,SAAA;ACmBJ;;ACnCA;EF4CI,SAAA;EAfA,QAAA;ACWJ;;ACpCA;EF6BI,oBAAA;EAJA,QAAA;ACgBJ;;ACrCA;EF0CI,SAAA;EACA,UAAA;EAtBA,QAAA;ACsBJ;;ACvCA;EFQI,WAAA;EA0CA,SAAA;EAzCA,QAAA;ACoCJ;;ACzCA;EFII,WAAA;EAaA,oBAAA;EAZA,QAAA;AC0CJ;;AC3CA;EFAI,WAAA;EAgDA,SAAA;EACA,UAAA;EAhDA,QAAA;ACiDJ;;AC9CA;EFmDI,SAAA;EAlDA,mBAAA;ACkDJ;;AC/CA;EFwDI,WAAA;EACA,SAAA;EACA,QAAA;ACLJ;;ACjDA;EF+CI,SAAA;EACA,QAAA;ACMJ;;AClDA;EFwDI,SAAA;EACA,UAAA;EApEA,mBAAA;ACmEJ;;ACpDA;EF+DI,WAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;ACPJ;;ACvDA;EFqDI,SAAA;EACA,UAAA;EACA,QAAA;ACMJ;;ACzDA;EAEI,aAAA;AD4DJ;;ACzDA;EACI;IF/EA,eAAA;EC4IF;AACF","file":"tooltip.css"}

package/dist/tourtip/tourtip.css

@@ -1,175 +1,208 @@
 :root {
-  --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
         0 5px 17px rgba(0, 0, 0, 0.2);
 }
 .tourtip {
-  position: relative;
+    position: relative;
 }
+
 span.tourtip {
-  display: inline-block;
+    display: inline-block;
 }
+
 .tourtip__overlay {
-  border-radius: var(--bubble-border-radius, var(--border-radius-100));
-  box-shadow: var(--bubble-shadow);
-  display: none;
-  font-size: 14px;
-  left: 0;
-  max-width: 344px;
-  position: absolute;
-  top: 0;
-  transform: scale3d(1, 1, 1);
-  width: -webkit-max-content;
-  width: max-content;
-  z-index: 1;
+    box-shadow: var(--bubble-shadow);
+    display: none;
+    font-size: 14px;
+    left: 0;
+    max-width: 344px;
+    position: absolute;
+    top: 0;
+    transform: scaleX(1);
+    width: max-content;
+}
+
+.tourtip__mask,
+.tourtip__overlay {
+    border-radius: var(--bubble-border-radius, var(--border-radius-100));
+    z-index: 1;
 }
+
 .tourtip__mask {
-  border-radius: var(--bubble-border-radius, var(--border-radius-100));
-  position: relative;
-  z-index: 1;
-  background-color: var(--tourtip-background-color, var(--color-background-elevated));
-  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
-}
+    background-color: var(
+        --tourtip-background-color,
+        var(--color-background-elevated)
+    );
+    color: var(--tourtip-foreground-color, var(--color-foreground-primary));
+    position: relative;
+}
+
 span.tourtip__mask {
-  display: block;
+    display: block;
 }
+
 .tourtip__cell {
-  display: flex;
-  padding: var(--spacing-200);
-  word-break: break-word;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--spacing-200);
+    word-break: break-word;
 }
 .tourtip__cell a {
-  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
+    color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 .tourtip__cell a:focus {
-  outline: 1px dashed currentColor;
+    outline: 1px dashed currentColor;
 }
+
 .tourtip__content {
-  flex-grow: 1;
-  flex-basis: 0;
+    flex-basis: 0;
+    flex-grow: 1;
 }
 .tourtip__content p {
-  margin: 0;
+    margin: 0;
 }
 .tourtip__content p:not(:first-of-type) {
-  margin-top: var(--spacing-50);
+    margin-top: var(--spacing-50);
 }
+
 button.tourtip__close {
-  align-self: flex-start;
-  background: none;
-  border: 0;
-  flex-shrink: 0;
-  height: var(--spacing-400);
-  margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0 var(--spacing-100);
-  padding: 0;
-  white-space: nowrap;
-  width: 32px;
-  outline-offset: -2px;
-}
+    align-self: flex-start;
+    background: none;
+    border: 0;
+    flex-shrink: 0;
+    height: var(--spacing-400);
+    margin: calc(var(--spacing-100) * -1) calc(var(--spacing-100) * -1) 0
+        var(--spacing-100);
+    outline-offset: -2px;
+    padding: 0;
+    white-space: nowrap;
+    width: 32px;
+}
+
 .tourtip__pointer {
-  height: 8px;
-  position: absolute;
-  transform: rotate(45deg);
-  width: 8px;
-  z-index: 0;
-  background-color: var(--tourtip-background-color, var(--color-background-elevated));
-}
+    background-color: var(
+        --tourtip-background-color,
+        var(--color-background-elevated)
+    );
+    height: 8px;
+    position: absolute;
+    transform: rotate(45deg);
+    width: 8px;
+    z-index: 0;
+}
+
 .tourtip__pointer--top-left {
-  top: -4px;
-  left: 12px;
+    left: 12px;
+    top: -4px;
 }
+
 .tourtip__pointer--top {
-  top: -4px;
-  left: calc(50% - 4px);
+    left: calc(50% - 4px);
+    top: -4px;
 }
+
 .tourtip__pointer--top-right {
-  top: -4px;
-  left: auto;
-  right: 12px;
+    left: auto;
+    right: 12px;
+    top: -4px;
 }
+
 .tourtip__pointer--bottom-left {
-  bottom: -4px;
-  top: auto;
-  left: 12px;
+    bottom: -4px;
+    left: 12px;
+    top: auto;
 }
+
 .tourtip__pointer--bottom {
-  bottom: -4px;
-  top: auto;
-  left: calc(50% - 4px);
+    bottom: -4px;
+    left: calc(50% - 4px);
+    top: auto;
 }
+
 .tourtip__pointer--bottom-right {
-  bottom: -4px;
-  top: auto;
-  left: auto;
-  right: 12px;
+    bottom: -4px;
+    left: auto;
+    right: 12px;
+    top: auto;
 }
+
 .tourtip__pointer--left {
-  top: calc(50% - 4px);
-  left: -4px;
+    left: -4px;
+    top: calc(50% - 4px);
 }
+
 .tourtip__pointer--left-bottom {
-  bottom: 12px;
-  left: -4px;
-  top: auto;
+    bottom: 12px;
+    left: -4px;
+    top: auto;
 }
+
 .tourtip__pointer--left-top {
-  left: -4px;
-  top: 12px;
+    left: -4px;
+    top: 12px;
 }
+
 .tourtip__pointer--right {
-  top: calc(50% - 4px);
-  left: auto;
-  right: -4px;
+    left: auto;
+    right: -4px;
+    top: calc(50% - 4px);
 }
+
 .tourtip__pointer--right-bottom {
-  bottom: 12px;
-  left: auto;
-  right: -4px;
-  top: auto;
+    bottom: 12px;
+    left: auto;
+    right: -4px;
+    top: auto;
 }
+
 .tourtip__pointer--right-top {
-  left: auto;
-  right: -4px;
-  top: 12px;
+    left: auto;
+    right: -4px;
+    top: 12px;
 }
+
 .tourtip__heading {
-  font-size: var(--font-size-large-1);
-  font-weight: bold;
-  margin: 0 0 var(--spacing-100);
+    font-size: var(--font-size-large-1);
+    font-weight: 700;
+    margin: 0 0 var(--spacing-100);
 }
+
+.tourtip--expanded .tourtip__overlay,
 span.tourtip__heading {
-  display: block;
-}
-.tourtip--expanded .tourtip__overlay {
-  display: block;
+    display: block;
 }
+
 .tourtip__footer {
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-  width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+    width: 100%;
 }
-.tourtip__footer > button:not(:last-child),
-.tourtip__footer > a:not(:last-child) {
-  margin-right: 8px;
+
+.tourtip__footer > a:not(:last-child),
+.tourtip__footer > button:not(:last-child) {
+    margin-right: 8px;
 }
 .tourtip__footer > .fake-link,
 .tourtip__footer > a {
-  color: var(--color-foreground-primary);
-  text-decoration: none;
+    color: var(--color-foreground-primary);
+    text-decoration: none;
 }
 .tourtip__footer > .fake-link:hover:not(:disabled),
 .tourtip__footer > a:hover:not(:disabled) {
-  color: var(--color-foreground-primary);
-  text-decoration: underline;
+    color: var(--color-foreground-primary);
+    text-decoration: underline;
 }
 .tourtip__index {
-  color: var(--tourtip-index-color, var(--color-foreground-secondary));
-  flex: 1;
+    color: var(--tourtip-index-color, var(--color-foreground-secondary));
+    flex: 1;
 }
+
 @media (min-width: 512px) {
-  .tourtip__overlay {
-    max-width: 400px;
-  }
+    .tourtip__overlay {
+        max-width: 400px;
+    }
 }
+
+/*# sourceMappingURL=tourtip.css.map */

package/dist/tourtip/tourtip.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/mixins/private/_bubble-mixins.scss","tourtip.css","../../src/sass/tourtip/tourtip.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAEA;EAKI,4EAAA;ACQJ;ACXA;EACI,iBAAA;ADgBJ;;ACbA;EACI,oBAAA;ADgBJ;;ACbA;EFEI,+BAAA;EACA,YAAA;EACA,cAAA;EACA,MAAA;EACA,eAAA;EACA,iBAAA;EACA,KAAA;EAEA,mBAAA;EACA,iBAAA;ACiBJ;;ACxBA;ECdQ,mEAAA;EHsBJ,SAAA;ACwBJ;;AChCA;ECdQ,kFAAA;EAAA,sEAAA;EH4BJ,iBAAA;ACkBJ;;ACvBA;EACI,aAAA;AD0BJ;;ACvBA;EFWI,YAAA;EERA,cAAA;EFSA,0BEXqB;EFYrB,qBAAA;ACiBJ;ACzBI;EChCI,sEAAA;AF4DR;ACtBQ;EACI,+BAAA;ADwBZ;;ACnBA;EAGI,YAAA;EFHA,WAAA;ACwBJ;ADtBI;EACI,QAAA;ACwBR;ADrBI;EACI,4BAAA;ACuBR;;ACxBA;EFMI,qBAAA;EACA,eAAA;EACA,QAAA;EACA,aAAA;EACA,yBAAA;EACA,mFAAA;EERA,mBAAA;EFUA,SAAA;EACA,kBAAA;EACA,UAAA;ACsBJ;;AC/BA;ECxDQ,kFAAA;EHsEJ,UAAA;EACA,iBAAA;EACA,uBAAA;EACA,SAAA;EACA,SAAA;ACsBJ;;AChCA;EFsCI,SAAA;EAfA,QAAA;ACcJ;;ACjCA;EFuBI,oBAAA;EAJA,QAAA;ACmBJ;;AClCA;EFoCI,SAAA;EACA,UAAA;EAtBA,QAAA;ACyBJ;;ACpCA;EFEI,WAAA;EA0CA,SAAA;EAzCA,QAAA;ACuCJ;;ACtCA;EFFI,WAAA;EAaA,oBAAA;EAZA,QAAA;AC6CJ;;ACxCA;EFNI,WAAA;EAgDA,SAAA;EACA,UAAA;EAhDA,QAAA;ACoDJ;;AC3CA;EF6CI,SAAA;EAlDA,mBAAA;ACqDJ;;AC5CA;EFkDI,WAAA;EACA,SAAA;EACA,QAAA;ACFJ;;AC9CA;EFyCI,SAAA;EACA,QAAA;ACSJ;;AC/CA;EFkDI,SAAA;EACA,UAAA;EApEA,mBAAA;ACsEJ;;ACjDA;EFyDI,WAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;ACJJ;;ACpDA;EF+CI,SAAA;EACA,UAAA;EACA,QAAA;ACSJ;;ACtDA;EACI,kCAAA;EACA,eAAA;EACA,6BAAA;ADyDJ;;AClDA;EACI,aAAA;ADyDJ;;ACtDA;EACI,kBAAA;EACA,YAAA;EACA,wBAAA;EACA,eAAA;EACA,UAAA;ADyDJ;;ACtDA;EAEI,gBAAA;ADyDJ;ACpDA;EAEI,qCAAA;EACA,oBAAA;ADyDJ;ACvDI;EACI,qCAAA;EACA,yBAAA;AD0DR;ACrDA;ECzJQ,mEAAA;ED4JJ,MAAA;ADwDJ;;ACrDA;EACI;IF/HA,eAAA;ECwLF;AACF","file":"tourtip.css"}