@ebay/skin 19.14.1 → 19.14.3

package/dist/accordion/accordion.css

@@ -52,12 +52,12 @@ ul.accordion details .details__content {
 }
 
 ul.accordion summary.details__summary span.details__icon svg {
+    animation: chevron-bounce-close var(--motion-duration-medium-1)
+        var(--motion-easing-standard);
     fill: var(
         --details-secondary-foreground-color,
         var(--color-foreground-secondary)
     );
-    animation: chevron-bounce-close var(--motion-duration-medium-1)
-        var(--motion-easing-standard);
 }
 
 ul.accordion details[open] summary.details__summary span.details__icon svg {

package/dist/bundles/skin-default.css

@@ -639,8 +639,8 @@ ul.accordion details .details__content{
 }
 
 ul.accordion summary.details__summary span.details__icon svg{
-  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
   animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
 }
 
 ul.accordion details[open] summary.details__summary span.details__icon svg{
@@ -2295,10 +2295,10 @@ input.checkbox__control[type=checkbox]{
 .checkbox svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -8036,8 +8036,8 @@ span.listbox__value{
 
 div.listbox__option svg.icon{
   align-self:center;
-  margin-inline-start:var(--spacing-100);
   fill:currentColor;
+  margin-inline-start:var(--spacing-100);
   margin:0 auto;
   opacity:0;
   stroke:currentColor;
@@ -8184,10 +8184,10 @@ div.listbox-button__listbox--fixed{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
+  margin-inline-start:var(--spacing-100);
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox-button__option[role=option][aria-selected=true] svg.icon{
@@ -10049,10 +10049,10 @@ input.radio__control[type=radio]{
 .radio svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -10100,7 +10100,15 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
 
 div[role=region].section-notice,section.section-notice{
   display:grid;
-  grid-template-columns:32px auto min-content min-content;
+  grid-template-columns:32px auto auto;
+}
+
+div[role=region].section-notice:has(.section-notice__cta),section.section-notice:has(.section-notice__cta){
+  grid-template-columns:32px auto auto min-content;
+}
+
+div[role=region].section-notice:has(.section-notice__cta) .section-notice__footer,section.section-notice:has(.section-notice__cta) .section-notice__footer{
+  grid-column:4;
 }
 .section-notice--education{
   background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -10163,7 +10171,7 @@ span[role=region].section-notice{
 }
 
 .section-notice__footer{
-  grid-column:4;
+  grid-column:3;
   grid-row:1;
   justify-self:flex-end;
   margin-top:2px;
@@ -11549,9 +11557,9 @@ input.textbox__control{
 .textbox .icon-btn>svg,.textbox>svg{
   color:var(--textbox-icon-color, var(--color-foreground-secondary));
   display:inline-flex;
+  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
   height:1lh;
   pointer-events:none;
-  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{

package/dist/bundles/skin-full.css

@@ -842,8 +842,8 @@ ul.accordion details .details__content{
 }
 
 ul.accordion summary.details__summary span.details__icon svg{
-  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
   animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
 }
 
 ul.accordion details[open] summary.details__summary span.details__icon svg{
@@ -2498,10 +2498,10 @@ input.checkbox__control[type=checkbox]{
 .checkbox svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -8239,8 +8239,8 @@ span.listbox__value{
 
 div.listbox__option svg.icon{
   align-self:center;
-  margin-inline-start:var(--spacing-100);
   fill:currentColor;
+  margin-inline-start:var(--spacing-100);
   margin:0 auto;
   opacity:0;
   stroke:currentColor;
@@ -8387,10 +8387,10 @@ div.listbox-button__listbox--fixed{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
+  margin-inline-start:var(--spacing-100);
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox-button__option[role=option][aria-selected=true] svg.icon{
@@ -10252,10 +10252,10 @@ input.radio__control[type=radio]{
 .radio svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -10303,7 +10303,15 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
 
 div[role=region].section-notice,section.section-notice{
   display:grid;
-  grid-template-columns:32px auto min-content min-content;
+  grid-template-columns:32px auto auto;
+}
+
+div[role=region].section-notice:has(.section-notice__cta),section.section-notice:has(.section-notice__cta){
+  grid-template-columns:32px auto auto min-content;
+}
+
+div[role=region].section-notice:has(.section-notice__cta) .section-notice__footer,section.section-notice:has(.section-notice__cta) .section-notice__footer{
+  grid-column:4;
 }
 .section-notice--education{
   background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -10366,7 +10374,7 @@ span[role=region].section-notice{
 }
 
 .section-notice__footer{
-  grid-column:4;
+  grid-column:3;
   grid-row:1;
   justify-self:flex-end;
   margin-top:2px;
@@ -11752,9 +11760,9 @@ input.textbox__control{
 .textbox .icon-btn>svg,.textbox>svg{
   color:var(--textbox-icon-color, var(--color-foreground-secondary));
   display:inline-flex;
+  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
   height:1lh;
   pointer-events:none;
-  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{

package/dist/bundles/skin-headless.css

@@ -209,8 +209,8 @@ ul.accordion details .details__content{
 }
 
 ul.accordion summary.details__summary span.details__icon svg{
-  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
   animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+  fill:var(--details-secondary-foreground-color, var(--color-foreground-secondary));
 }
 
 ul.accordion details[open] summary.details__summary span.details__icon svg{
@@ -1865,10 +1865,10 @@ input.checkbox__control[type=checkbox]{
 .checkbox svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -7606,8 +7606,8 @@ span.listbox__value{
 
 div.listbox__option svg.icon{
   align-self:center;
-  margin-inline-start:var(--spacing-100);
   fill:currentColor;
+  margin-inline-start:var(--spacing-100);
   margin:0 auto;
   opacity:0;
   stroke:currentColor;
@@ -7754,10 +7754,10 @@ div.listbox-button__listbox--fixed{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
+  margin-inline-start:var(--spacing-100);
   opacity:0;
   stroke:currentColor;
   stroke-width:0;
-  margin-inline-start:var(--spacing-100);
 }
 
 div.listbox-button__option[role=option][aria-selected=true] svg.icon{
@@ -9619,10 +9619,10 @@ input.radio__control[type=radio]{
 .radio svg{
   display:inline-block;
   fill:currentColor;
+  height:18px;
   pointer-events:none;
   stroke:currentColor;
   stroke-width:0;
-  height:18px;
   vertical-align:middle;
   width:18px;
 }
@@ -9670,7 +9670,15 @@ input.radio__control[type=radio]:focus:not(:focus-visible)+span.radio__icon{
 
 div[role=region].section-notice,section.section-notice{
   display:grid;
-  grid-template-columns:32px auto min-content min-content;
+  grid-template-columns:32px auto auto;
+}
+
+div[role=region].section-notice:has(.section-notice__cta),section.section-notice:has(.section-notice__cta){
+  grid-template-columns:32px auto auto min-content;
+}
+
+div[role=region].section-notice:has(.section-notice__cta) .section-notice__footer,section.section-notice:has(.section-notice__cta) .section-notice__footer{
+  grid-column:4;
 }
 .section-notice--education{
   background-color:var(--section-notice-education-background-color, var(--color-background-education));
@@ -9733,7 +9741,7 @@ span[role=region].section-notice{
 }
 
 .section-notice__footer{
-  grid-column:4;
+  grid-column:3;
   grid-row:1;
   justify-self:flex-end;
   margin-top:2px;
@@ -11119,9 +11127,9 @@ input.textbox__control{
 .textbox .icon-btn>svg,.textbox>svg{
   color:var(--textbox-icon-color, var(--color-foreground-secondary));
   display:inline-flex;
+  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
   height:1lh;
   pointer-events:none;
-  fill:var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox>span:first-child,.textbox>svg:first-child{

package/dist/checkbox/checkbox.css

@@ -49,10 +49,10 @@ input.checkbox__control[type="checkbox"] {
 .checkbox svg {
     display: inline-block;
     fill: currentColor;
+    height: 18px;
     pointer-events: none;
     stroke: currentColor;
     stroke-width: 0;
-    height: 18px;
     vertical-align: middle;
     width: 18px;
 }

package/dist/listbox/listbox.css

@@ -90,8 +90,8 @@ span.listbox__value {
 
 div.listbox__option svg.icon {
     align-self: center;
-    margin-inline-start: var(--spacing-100);
     fill: currentColor;
+    margin-inline-start: var(--spacing-100);
     margin: 0 auto;
     opacity: 0;
     stroke: currentColor;

package/dist/listbox-button/listbox-button.css

@@ -199,10 +199,10 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {
     align-self: center;
     fill: currentColor;
     margin: 0 auto;
+    margin-inline-start: var(--spacing-100);
     opacity: 0;
     stroke: currentColor;
     stroke-width: 0;
-    margin-inline-start: var(--spacing-100);
 }
 
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {

package/dist/radio/radio.css

@@ -49,10 +49,10 @@ input.radio__control[type="radio"] {
 .radio svg {
     display: inline-block;
     fill: currentColor;
+    height: 18px;
     pointer-events: none;
     stroke: currentColor;
     stroke-width: 0;
-    height: 18px;
     vertical-align: middle;
     width: 18px;
 }

package/dist/section-notice/section-notice.css

@@ -12,7 +12,18 @@
 div[role="region"].section-notice,
 section.section-notice {
     display: grid;
-    grid-template-columns: 32px auto min-content min-content;
+    grid-template-columns: 32px auto auto;
+}
+
+div[role="region"].section-notice:has(.section-notice__cta),
+section.section-notice:has(.section-notice__cta) {
+    grid-template-columns: 32px auto auto min-content;
+}
+
+div[role="region"].section-notice:has(.section-notice__cta)
+    .section-notice__footer,
+section.section-notice:has(.section-notice__cta) .section-notice__footer {
+    grid-column: 4;
 }
 .section-notice--education {
     background-color: var(
@@ -87,7 +98,7 @@ span[role="region"].section-notice {
 }
 
 .section-notice__footer {
-    grid-column: 4;
+    grid-column: 3;
     grid-row: 1;
     justify-self: flex-end;
     margin-top: 2px;

package/dist/svg/icon/icon-clock-12.svg

@@ -1,7 +1,6 @@
 <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M6.75 3.75v1.942l1.275 1.283a.75.75 0 0 1-1.058 1.058l-1.5-1.5A.75.75 0 0 1 5.25 6V3.75a.75.75 0 0 1 1.5 0Z"
-    fill="#191919"
   />
   <path
     d="M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0Zm0 10.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z"

package/dist/svg/icons.svg

@@ -2151,7 +2151,6 @@
   <symbol viewBox="0 0 12 12" id="icon-clock-12">
     <path
       d="M6.75 3.75v1.942l1.275 1.283a.75.75 0 0 1-1.058 1.058l-1.5-1.5A.75.75 0 0 1 5.25 6V3.75a.75.75 0 0 1 1.5 0Z"
-      fill="#191919"
     />
     <path
       d="M6 0a6 6 0 1 0 0 12A6 6 0 0 0 6 0Zm0 10.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z"

package/dist/textbox/textbox.css

@@ -162,9 +162,9 @@ input.textbox__control {
 .textbox > svg {
     color: var(--textbox-icon-color, var(--color-foreground-secondary));
     display: inline-flex;
+    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
     height: 1lh;
     pointer-events: none;
-    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox > span:first-child,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.14.1",
+    "version": "19.14.3",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",