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

package/dist/switch/switch.css

@@ -1,109 +1,150 @@
 .switch {
-  box-sizing: border-box;
-  height: 40px;
-  position: relative;
-  vertical-align: middle;
+    box-sizing: border-box;
+    height: 40px;
+    position: relative;
+    vertical-align: middle;
 }
+
 div.switch {
-  display: flex;
+    display: flex;
 }
+
 span.switch {
-  display: inline-flex;
+    display: inline-flex;
 }
+
 span.switch__button {
-  align-self: center;
-  background-color: var(--switch-unchecked-background-color, var(--color-background-secondary));
-  border-color: var(--switch-border-color, var(--color-stroke-strong));
-  border-radius: 400px;
-  border-style: solid;
-  border-width: 1px;
-  color: transparent;
-  display: inline-block;
-  height: 24px;
-  position: relative;
-  text-indent: 100%;
-  transition: left 0.15s ease-out 0s;
-  width: 40px;
-}
-span.switch__button::after {
-  background-color: var(--switch-foreground-color, var(--color-background-primary));
-  border-color: var(--switch-foreground-border-color, var(--color-stroke-strong));
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 1px;
-  content: "";
-  display: block;
-  height: 24px;
-  left: -1px;
-  position: absolute;
-  top: -1px;
-  transform: translate3d(0, 0, 0);
-  transition: left 0.15s ease-out 0s;
-  width: 24px;
-}
+    align-self: center;
+    background-color: var(
+        --switch-unchecked-background-color,
+        var(--color-background-secondary)
+    );
+    border-color: var(--switch-border-color, var(--color-stroke-strong));
+    border-radius: 400px;
+    border-style: solid;
+    border-width: 1px;
+    color: transparent;
+    display: inline-block;
+    position: relative;
+    text-indent: 100%;
+    width: 40px;
+}
+span.switch__button,
+span.switch__button:after {
+    height: 24px;
+    transition: left 0.15s ease-out 0s;
+}
+span.switch__button:after {
+    background-color: var(
+        --switch-foreground-color,
+        var(--color-background-primary)
+    );
+    border-color: var(
+        --switch-foreground-border-color,
+        var(--color-stroke-strong)
+    );
+    border-radius: 50%;
+    border-style: solid;
+    border-width: 1px;
+    content: "";
+    display: block;
+    left: -1px;
+    position: absolute;
+    top: -1px;
+    transform: translateZ(0);
+    width: 24px;
+}
+
 input.switch__control,
 span.switch__control {
-  height: 24px;
-  left: 0;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  position: absolute;
-  top: 8px;
-  width: 40px;
-  z-index: 1;
+    height: 24px;
+    left: 0;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    position: absolute;
+    top: 8px;
+    width: 40px;
+    z-index: 1;
 }
 input.switch__control[disabled] + span.switch__button,
 span.switch__control[aria-disabled="true"] + span.switch__button {
-  border-color: var(--switch-border-color, var(--color-stroke-disabled));
+    border-color: var(--switch-border-color, var(--color-stroke-disabled));
 }
+
 input.switch__control {
-  opacity: 0;
+    opacity: 0;
 }
 input.switch__control:focus + span.switch__button {
-  outline: 1px auto var(--switch-custom-outline-color, var(--color-foreground-secondary));
+    outline: 1px auto
+        var(--switch-custom-outline-color, var(--color-foreground-secondary));
 }
 input.switch__control:focus:not(:focus-visible) + span.switch__button {
-  outline: none;
+    outline: none;
 }
-input.switch__control[disabled] + span.switch__button::after,
-span.switch__control[aria-disabled="true"] + span.switch__button::after {
-  border-color: var(--switch-border-color, var(--color-background-disabled));
+input.switch__control[disabled] + span.switch__button:after,
+span.switch__control[aria-disabled="true"] + span.switch__button:after {
+    border-color: var(--switch-border-color, var(--color-background-disabled));
 }
-input.switch__control:not([disabled]):hover + span.switch__button,
-span.switch__control:not([aria-disabled="true"]):hover + span.switch__button,
+
 input.switch__control:not([disabled]):focus + span.switch__button,
-span.switch__control:not([aria-disabled="true"]):focus + span.switch__button {
-  background-color: var(--switch-unchecked-hover-background-color, var(--color-state-secondary-hover));
+input.switch__control:not([disabled]):hover + span.switch__button,
+span.switch__control:not([aria-disabled="true"]):focus + span.switch__button,
+span.switch__control:not([aria-disabled="true"]):hover + span.switch__button {
+    background-color: var(
+        --switch-unchecked-hover-background-color,
+        var(--color-state-secondary-hover)
+    );
 }
 input.switch__control:not([disabled]):checked + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"] + span.switch__button {
-  background-color: var(--switch-checked-background-color, var(--color-background-accent));
+span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
+    + span.switch__button {
+    background-color: var(
+        --switch-checked-background-color,
+        var(--color-background-accent)
+    );
 }
 input.switch__control[disabled]:checked + span.switch__button,
-span.switch__control[aria-disabled="true"][aria-checked="true"] + span.switch__button {
-  background-color: var(--switch-disabled-background-color, var(--color-background-disabled));
-  border-color: var(--switch-border-color, var(--color-background-disabled));
-}
-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);
-}
-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[aria-disabled="true"][aria-checked="true"]
+    + span.switch__button {
+    background-color: var(
+        --switch-disabled-background-color,
+        var(--color-background-disabled)
+    );
+    border-color: var(--switch-border-color, var(--color-background-disabled));
+}
+
+input.switch__control:not([disabled]):focus-visible + span.switch__button,
+span.switch__control:not([aria-disabled="true"]):focus-visible
+    + span.switch__button {
+    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:focus + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:focus + span.switch__button {
-  background-color: var(--switch-checked-hover-background-color, var(--color-state-accent-hover));
-}
-input.switch__control:checked + span.switch__button::after,
-span.switch__control[aria-checked="true"] + span.switch__button::after {
-  left: 15px;
+input.switch__control:not([disabled]):checked:hover + 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"]:hover
+    + span.switch__button {
+    background-color: var(
+        --switch-checked-hover-background-color,
+        var(--color-state-accent-hover)
+    );
+}
+input.switch__control:checked + span.switch__button:after,
+span.switch__control[aria-checked="true"] + span.switch__button:after {
+    left: 15px;
 }
 span.switch__control:focus:not(:focus-visible) {
-  outline: 0;
+    outline: 0;
 }
+
 @media screen and (-ms-high-contrast: active) {
-  input.switch__control {
-    opacity: 1;
-  }
+    input.switch__control {
+        opacity: 1;
+    }
 }
+
+/*# sourceMappingURL=switch.css.map */

package/dist/switch/switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/switch/switch.scss","switch.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EACI,qBAAA;EACA,WAAA;EACA,iBAAA;EACA,qBAAA;ACKJ;;ADFA;EACI,YAAA;ACKJ;;ADFA;EACI,mBAAA;ACKJ;;ADFA;EACI,iBAAA;EEjBI,4FAAA;EAAA,mEAAA;EFwBJ,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,oBAAA;EAEA,iBAAA;EACA,gBAAA;EAEA,UAAA;ACCJ;ADCI;EANA,WAAA;EAGA,gCAAA;ACkBJ;ADfI;EEnCI,gFAAA;EAAA,8EAAA;EF6CA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,aAAA;EAEA,SAAA;EACA,iBAAA;EACA,QAAA;EACA,uBAAA;EAEA,UAAA;ACNR;;ADUA;EAEI,WAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,SAAA;EACA,iBAAA;EACA,OAAA;EACA,UAAA;EACA,SAAA;ACPJ;ADWA;EE1EQ,qEAAA;ADqER;;ADUA;EACI,SAAA;ACPJ;ADSI;EEsCA,sFAAA;AD3CJ;ADcI;EACI,YAAA;ACZR;ADiBA;EEjGQ,yEAAA;ADsFR;;ADgBA;EEtGQ,mGAAA;AD6FR;ADoBA;EEjHQ,uFAAA;ADmGR;ADwBA;EE3HQ,0FAAA;EAAA,yEAAA;AD0GR;;AD2BA;EAGI,+FACI;AC1BR;;AD8BA;EE7IQ,8FAAA;ADsHR;ADoCA;EAEI,SAAA;AChCJ;ADoCA;EACI,SAAA;AChCJ;;ADmCA;EACI;IACI,SAAA;EChCN;AACF","file":"switch.css"}

package/dist/tabs/tabs.css

@@ -1,83 +1,102 @@
-.tabs,
-.fake-tabs {
-  margin-top: var(--spacing-200);
+.fake-tabs,
+.tabs {
+    margin-top: var(--spacing-200);
 }
-span.tabs,
-span.fake-tabs {
-  display: inline-block;
+
+span.fake-tabs,
+span.tabs {
+    display: inline-block;
 }
+
 div.tabs__items[role="tablist"],
 ul.fake-tabs__items {
-  font-size: var(--font-size-default);
+    font-size: var(--font-size-default);
 }
+
 ul.fake-tabs__items {
-  display: block;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
+
 div.tabs__item[role="tab"] {
-  cursor: default;
+    cursor: default;
 }
+
 div.tabs__item[role="tab"],
 li.fake-tabs__item {
-  display: inline-block;
-  position: relative;
-  -webkit-tap-highlight-color: var(--color-background-secondary);
+    display: inline-block;
+    position: relative;
+    -webkit-tap-highlight-color: var(--color-background-secondary);
 }
 div.tabs__item[role="tab"]:not(:last-child),
 li.fake-tabs__item:not(:last-child) {
-  -webkit-margin-end: var(--spacing-450);
-          margin-inline-end: var(--spacing-450);
+    -webkit-margin-end: var(--spacing-450);
+    margin-inline-end: var(--spacing-450);
 }
+
 li.fake-tabs__item > a {
-  padding: 1px 0;
-  text-decoration: none;
+    padding: 1px 0;
+    text-decoration: none;
 }
+
 div.tabs__item[role="tab"] > span {
-  padding: 2px 0;
+    padding: 2px 0;
 }
+
 div.tabs__item[role="tab"] > span,
 li.fake-tabs__item > a {
-  color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
-  display: inline-block;
-}
-div.tabs__item[role="tab"] > span::after,
-li.fake-tabs__item > a::after {
-  background-color: transparent;
-  border-radius: 6px;
-  content: "";
-  display: block;
-  height: 2px;
-  margin-top: var(--spacing-50);
-  position: absolute;
-  width: 100%;
-}
+    color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
+    display: inline-block;
+}
+div.tabs__item[role="tab"] > span:after,
+li.fake-tabs__item > a:after {
+    background-color: initial;
+    border-radius: 6px;
+    content: "";
+    display: block;
+    height: 2px;
+    margin-top: var(--spacing-50);
+    position: absolute;
+    width: 100%;
+}
+
 div.tabs__item[role="tab"][aria-selected="true"] > span,
 li.fake-tabs__item > a[aria-current] {
-  color: var(--tabs-item-selected-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --tabs-item-selected-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
-div.tabs__item[role="tab"][aria-selected="true"] > span::after,
-li.fake-tabs__item > a[aria-current]::after {
-  background-color: currentColor;
+div.tabs__item[role="tab"][aria-selected="true"] > span:after,
+li.fake-tabs__item > a[aria-current]:after {
+    background-color: currentColor;
 }
 div.tabs__item[role="tab"]:focus:not(:focus-visible),
 li.fake-tabs__item a:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
+
 div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span,
 div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span,
 li.fake-tabs__item > a:not([aria-current]):focus,
 li.fake-tabs__item > a:not([aria-current]):hover {
-  color: var(--tabs-item-hover-foreground-color, var(--color-foreground-secondary));
-}
-div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span::after,
-div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span::after,
-li.fake-tabs__item > a:not([aria-current]):focus::after,
-li.fake-tabs__item > a:not([aria-current]):hover::after {
-  background-color: currentColor;
-}
-.tabs__cell,
-.fake-tabs__cell {
-  margin: var(--spacing-200) 0;
-}
+    color: var(
+        --tabs-item-hover-foreground-color,
+        var(--color-foreground-secondary)
+    );
+}
+div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span:after,
+div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span:after,
+li.fake-tabs__item > a:not([aria-current]):focus:after,
+li.fake-tabs__item > a:not([aria-current]):hover:after {
+    background-color: currentColor;
+}
+
+.fake-tabs__cell,
+.tabs__cell {
+    margin: var(--spacing-200) 0;
+}
+
+/*# sourceMappingURL=tabs.css.map */

package/dist/tabs/tabs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/tabs/tabs.scss","tabs.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAGA;EAEI,6BAAA;ACKJ;;ADFA;EAEI,oBAAA;ACKJ;;ADFA;EAEI,kCAAA;ACKJ;;ADFA;EACI,aAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;ACKJ;;ADFA;EACI,cAAA;ACKJ;;ADFA;EAEI,oBAAA;EACA,iBAAA;EACA,6DAAA;ACKJ;ADHI;EACI,qCAAA;UAAA,oCAAA;ACMR;;ADFA;EACI,aAAA;EACA,oBAAA;ACKJ;;ADFA;EACI,aAAA;ACKJ;;ADFA;EE/CQ,0EAAA;EFsDJ,oBAAA;ACCJ;ADCI;EACI,wBAAA;EACA,iBAAA;EACA,UAAA;EACA,aAAA;EACA,UAAA;EACA,4BAAA;EACA,iBAAA;EACA,UAAA;ACER;;ADEA;EEpEQ,iFAAA;ADuER;ADII;EACI,6BAAA;ACDR;ADQI;EACI,YAAA;ACHR;;ADOA;EExFQ,gFAAA;ADwFR;ADSI;EACI,6BAAA;ACJR;;ADQA;EAEI,2BAAA;ACLJ","file":"tabs.css"}