@ebay/skin 18.0.8 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Skin Changelog
 
+## 18.1.0
+
+### Minor Changes
+
+-   [#2403](https://github.com/eBay/skin/pull/2403) [`a7757e5`](https://github.com/eBay/skin/commit/a7757e58f8f2fcca00f5925515779a492e30798d) Thanks [@agliga](https://github.com/agliga)! - details: updated design
+
+-   [#2402](https://github.com/eBay/skin/pull/2402) [`ba747cb`](https://github.com/eBay/skin/commit/ba747cbfa0585cd79c3f2df6251098aa517f2670) Thanks [@agliga](https://github.com/agliga)! - progress-spinner: fixed wobble
+
+-   [#2407](https://github.com/eBay/skin/pull/2407) [`2cbfe64`](https://github.com/eBay/skin/commit/2cbfe645fa0f0f06cc25ae042debb194e4ad6b71) Thanks [@agliga](https://github.com/agliga)! - feat(utility): added image disabled utility class
+
+-   [#2407](https://github.com/eBay/skin/pull/2407) [`ac4e7c0`](https://github.com/eBay/skin/commit/ac4e7c0e16c05e916069b73548bb8102d6e5241d) Thanks [@agliga](https://github.com/agliga)! - feat(icons): added and updated icons
+
+-   [#2409](https://github.com/eBay/skin/pull/2409) [`88d4f0e`](https://github.com/eBay/skin/commit/88d4f0e4a5f2cda3aeb9f5c55b0e11c5fdacae27) Thanks [@agliga](https://github.com/agliga)! - carousel: preserve /_!Y _/ comments
+
+-   [#2367](https://github.com/eBay/skin/pull/2367) [`923a83f`](https://github.com/eBay/skin/commit/923a83f4e796a2692bbaa7ca0c7ae7c1324e9f00) Thanks [@agliga](https://github.com/agliga)! - docs: updated urls to be opensource.ebay.com
+
+-   [#2406](https://github.com/eBay/skin/pull/2406) [`f151214`](https://github.com/eBay/skin/commit/f1512145fa8f67fa3d263df940858f85b9c6843c) Thanks [@ArtBlue](https://github.com/ArtBlue)! - fix(toggle-button-group): fixed buttons per row and added min layout exceptions
+
+### Patch Changes
+
+-   [#2405](https://github.com/eBay/skin/pull/2405) [`d67e8ea`](https://github.com/eBay/skin/commit/d67e8ea906d40736e727c8d3547416f1ea5980ba) Thanks [@HenriqueLimas](https://github.com/HenriqueLimas)! - Use 100% width on input for fluid variant
+
+-   [#2373](https://github.com/eBay/skin/pull/2373) [`c09c885`](https://github.com/eBay/skin/commit/c09c885b914a23f1feb0aa12c2e78f3c9ef91255) Thanks [@cordeliadillon](https://github.com/cordeliadillon)! - docs: update Design System name mapping for modules
+
 ## 18.0.8
 
 ### Patch Changes

package/CONTRIBUTING.md

@@ -97,7 +97,6 @@ Add applicable metadata about the component to the `module_metadata` map in [doc
 ```yaml
 your-module-name: # the Skin module name
     ds-component: # module's relationship with the eBay Design System
-        group: # eBay Design System component group
         name: # eBay Design System component name
         version: # version of the eBay Design System component implemented in Skin
     status: # status, e.g. "beta", "deprecated", "in-progress"

package/README.md

@@ -4,7 +4,7 @@
 
 > Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
 
-Please visit the [Skin website](https://ebay.github.io/skin) for all end-user documentation.
+Please visit the [Skin website](https://opensource.ebay.com/skin/) for all end-user documentation.
 
 ## License
 
@@ -12,7 +12,7 @@ Skin is [MIT](LICENSE) licensed.
 
 ## Install
 
-Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://ebay.github.io/skin#cdn).
+Skin is available as the `@ebay/skin` package on [NPM](https://www.npmjs.com/). Skin is also available on our [CDN](https://opensource.ebay.com/skin/#cdn).
 
 ## Versioning
 
@@ -28,7 +28,7 @@ More detailed insight into our versioning process can be found in our [contribut
 
 Please refer to our [releases](https://github.com/eBay/skin/releases) page to view the change log for current and past releases.
 
-Please refer to our [web archive](https://ebay.github.io/skin/archive/) for past examples and documentation.
+Please refer to our [web archive](https://opensource.ebay.com/skin/archive/) for past examples and documentation.
 
 ## Roadmap
 

package/dist/bundles/skin-default.css

@@ -385,7 +385,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
       var(--color-ai-solid-green-subtle) 66%,
       var(--color-ai-solid-green-subtle) 100%
   );
-  --color-icon-disabled-filter:grayscale(1) opacity(0.25);
+  --color-media-disabled-filter:grayscale(1) opacity(0.25);
 }
 @font-face{
   font-display:swap;
@@ -525,6 +525,10 @@ a:not([href]),a[aria-disabled=true]{
   object-fit:contain;
 }
 
+.image-disabled{
+  filter:var(--color-media-disabled-filter);
+}
+
 .text-truncate{
   overflow:hidden;
   text-overflow:ellipsis;
@@ -2501,13 +2505,15 @@ a.cta-btn--large{
 }
 summary.details__summary{
   align-items:center;
+  border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
   box-sizing:border-box;
-  color:var(--details-summary-foreground-color, var(--color-foreground-accent));
-  display:inline-block;
+  color:var(--details-summary-foreground-color, var(--color-foreground-primary));
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  font-weight:var(--font-weight-bold);
   list-style-position:inside;
   list-style-type:none;
   padding:12px 8px;
-  width:100%;
 }
 summary.details__summary:before{
   content:none;
@@ -2516,11 +2522,17 @@ summary.details__summary::-webkit-details-marker{
   display:none;
 }
 summary.details__summary:focus,summary.details__summary:hover{
-  color:var(--color-state-accent-hover);
+  background-color:var(--color-state-secondary-hover);
+  outline:1;
+}
+summary.details__summary:active{
+  background-color:var(--color-state-secondary-active);
+  outline:1;
 }
 
 summary.details__summary--center{
-  text-align:center;
+  justify-content:center;
+  width:100%;
 }
 
 summary.details__summary--small{
@@ -2533,7 +2545,7 @@ span.details__icon{
           margin-inline-start:8px;
 }
 span.details__icon[hidden]{
-  display:inline-block;
+  display:inline-flex;
 }
 
 details.details[open] span.details__icon{
@@ -4967,7 +4979,7 @@ svg.icon--64-colored{
   height:64px;
 }
 svg.icon--disabled{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled{
   color:var(--color-foreground-attention);
@@ -6874,7 +6886,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input--disabled span.fflag,.phone-input--disabled svg.flag{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox{
@@ -7251,7 +7263,7 @@ button.icon-btn.panel-dialog__close{
     transform:rotate(2turn);
   }
 }
-.progress-spinner>svg.icon.icon--spinner-20,.progress-spinner>svg.icon.icon--spinner-24,.progress-spinner>svg.icon.icon--spinner-30{
+.progress-spinner>svg.icon.icon--20,.progress-spinner>svg.icon.icon--24,.progress-spinner>svg.icon.icon--30{
   height:inherit;
   margin:0;
   max-height:inherit;
@@ -8636,7 +8648,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   text-decoration:underline;
 }
 
-.textbox--fluid{
+.textbox--fluid,.textbox--fluid .textbox__control{
   width:100%;
 }
 :root{
@@ -8985,7 +8997,7 @@ button.toast-dialog__close>svg{
   --row-list-toggle-buttons-sm:2;
   --row-list-toggle-buttons-md:3;
   --row-list-toggle-buttons-xl:5;
-  --row-gallery-toggle-buttons-min:1;
+  --row-gallery-toggle-buttons-min:2;
   --row-gallery-toggle-buttons-xs:2;
   --row-gallery-toggle-buttons-sm:3;
   --row-gallery-toggle-buttons-md:4;
@@ -8996,6 +9008,30 @@ button.toast-dialog__close>svg{
   container:toggle-buttons-container/inline-size;
 }
 
+@supports not (contain:inline-size){
+  @media (max-width:320px){
+    .toggle-button-group[data-columns-min="1"] ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-min="2"] ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-min="3"] ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+  }
+}
+@container toggle-buttons-container (inline-size < 320px){
+  .toggle-button-group[data-columns-min="1"] ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .toggle-button-group[data-columns-min="2"] ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .toggle-button-group[data-columns-min="3"] ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+}
 .toggle-button-group ul{
   display:grid;
   gap:var(--spacing-100);
@@ -9019,12 +9055,20 @@ button.toast-dialog__close>svg{
   max-width:100%;
   width:100%;
 }
+.toggle-button-group--list-layout ul{
+  grid-template-columns:repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button{
   justify-content:left;
   max-width:100%;
   min-width:auto;
 }
 
+.toggle-button-group--gallery-layout ul{
+  grid-template-columns:repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li{
   max-width:100%;
 }

package/dist/bundles/skin-full.css

@@ -385,7 +385,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
       var(--color-ai-solid-green-subtle) 66%,
       var(--color-ai-solid-green-subtle) 100%
   );
-  --color-icon-disabled-filter:grayscale(1) opacity(0.25);
+  --color-media-disabled-filter:grayscale(1) opacity(0.25);
 }
 
 @media (prefers-color-scheme:dark){
@@ -709,6 +709,10 @@ a:not([href]),a[aria-disabled=true]{
   object-fit:contain;
 }
 
+.image-disabled{
+  filter:var(--color-media-disabled-filter);
+}
+
 .text-truncate{
   overflow:hidden;
   text-overflow:ellipsis;
@@ -2685,13 +2689,15 @@ a.cta-btn--large{
 }
 summary.details__summary{
   align-items:center;
+  border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
   box-sizing:border-box;
-  color:var(--details-summary-foreground-color, var(--color-foreground-accent));
-  display:inline-block;
+  color:var(--details-summary-foreground-color, var(--color-foreground-primary));
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  font-weight:var(--font-weight-bold);
   list-style-position:inside;
   list-style-type:none;
   padding:12px 8px;
-  width:100%;
 }
 summary.details__summary:before{
   content:none;
@@ -2700,11 +2706,17 @@ summary.details__summary::-webkit-details-marker{
   display:none;
 }
 summary.details__summary:focus,summary.details__summary:hover{
-  color:var(--color-state-accent-hover);
+  background-color:var(--color-state-secondary-hover);
+  outline:1;
+}
+summary.details__summary:active{
+  background-color:var(--color-state-secondary-active);
+  outline:1;
 }
 
 summary.details__summary--center{
-  text-align:center;
+  justify-content:center;
+  width:100%;
 }
 
 summary.details__summary--small{
@@ -2717,7 +2729,7 @@ span.details__icon{
           margin-inline-start:8px;
 }
 span.details__icon[hidden]{
-  display:inline-block;
+  display:inline-flex;
 }
 
 details.details[open] span.details__icon{
@@ -5151,7 +5163,7 @@ svg.icon--64-colored{
   height:64px;
 }
 svg.icon--disabled{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled{
   color:var(--color-foreground-attention);
@@ -7058,7 +7070,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input--disabled span.fflag,.phone-input--disabled svg.flag{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox{
@@ -7435,7 +7447,7 @@ button.icon-btn.panel-dialog__close{
     transform:rotate(2turn);
   }
 }
-.progress-spinner>svg.icon.icon--spinner-20,.progress-spinner>svg.icon.icon--spinner-24,.progress-spinner>svg.icon.icon--spinner-30{
+.progress-spinner>svg.icon.icon--20,.progress-spinner>svg.icon.icon--24,.progress-spinner>svg.icon.icon--30{
   height:inherit;
   margin:0;
   max-height:inherit;
@@ -8820,7 +8832,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   text-decoration:underline;
 }
 
-.textbox--fluid{
+.textbox--fluid,.textbox--fluid .textbox__control{
   width:100%;
 }
 :root{
@@ -9169,7 +9181,7 @@ button.toast-dialog__close>svg{
   --row-list-toggle-buttons-sm:2;
   --row-list-toggle-buttons-md:3;
   --row-list-toggle-buttons-xl:5;
-  --row-gallery-toggle-buttons-min:1;
+  --row-gallery-toggle-buttons-min:2;
   --row-gallery-toggle-buttons-xs:2;
   --row-gallery-toggle-buttons-sm:3;
   --row-gallery-toggle-buttons-md:4;
@@ -9180,6 +9192,30 @@ button.toast-dialog__close>svg{
   container:toggle-buttons-container/inline-size;
 }
 
+@supports not (contain:inline-size){
+  @media (max-width:320px){
+    .toggle-button-group[data-columns-min="1"] ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-min="2"] ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-min="3"] ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+  }
+}
+@container toggle-buttons-container (inline-size < 320px){
+  .toggle-button-group[data-columns-min="1"] ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .toggle-button-group[data-columns-min="2"] ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .toggle-button-group[data-columns-min="3"] ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+}
 .toggle-button-group ul{
   display:grid;
   gap:var(--spacing-100);
@@ -9203,12 +9239,20 @@ button.toast-dialog__close>svg{
   max-width:100%;
   width:100%;
 }
+.toggle-button-group--list-layout ul{
+  grid-template-columns:repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button{
   justify-content:left;
   max-width:100%;
   min-width:auto;
 }
 
+.toggle-button-group--gallery-layout ul{
+  grid-template-columns:repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li{
   max-width:100%;
 }

package/dist/bundles/skin-headless.css

@@ -137,6 +137,10 @@ a:not([href]),a[aria-disabled=true]{
   object-fit:contain;
 }
 
+.image-disabled{
+  filter:var(--color-media-disabled-filter);
+}
+
 .text-truncate{
   overflow:hidden;
   text-overflow:ellipsis;
@@ -2113,13 +2117,15 @@ a.cta-btn--large{
 }
 summary.details__summary{
   align-items:center;
+  border-radius:var(--expand-btn-border-radius, var(--border-radius-50));
   box-sizing:border-box;
-  color:var(--details-summary-foreground-color, var(--color-foreground-accent));
-  display:inline-block;
+  color:var(--details-summary-foreground-color, var(--color-foreground-primary));
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  font-weight:var(--font-weight-bold);
   list-style-position:inside;
   list-style-type:none;
   padding:12px 8px;
-  width:100%;
 }
 summary.details__summary:before{
   content:none;
@@ -2128,11 +2134,17 @@ summary.details__summary::-webkit-details-marker{
   display:none;
 }
 summary.details__summary:focus,summary.details__summary:hover{
-  color:var(--color-state-accent-hover);
+  background-color:var(--color-state-secondary-hover);
+  outline:1;
+}
+summary.details__summary:active{
+  background-color:var(--color-state-secondary-active);
+  outline:1;
 }
 
 summary.details__summary--center{
-  text-align:center;
+  justify-content:center;
+  width:100%;
 }
 
 summary.details__summary--small{
@@ -2145,7 +2157,7 @@ span.details__icon{
           margin-inline-start:8px;
 }
 span.details__icon[hidden]{
-  display:inline-block;
+  display:inline-flex;
 }
 
 details.details[open] span.details__icon{
@@ -4579,7 +4591,7 @@ svg.icon--64-colored{
   height:64px;
 }
 svg.icon--disabled{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled{
   color:var(--color-foreground-attention);
@@ -6486,7 +6498,7 @@ button.icon-btn.panel-dialog__close{
 }
 
 .phone-input--disabled span.fflag,.phone-input--disabled svg.flag{
-  filter:var(--color-icon-disabled-filter);
+  filter:var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox{
@@ -6863,7 +6875,7 @@ button.icon-btn.panel-dialog__close{
     transform:rotate(2turn);
   }
 }
-.progress-spinner>svg.icon.icon--spinner-20,.progress-spinner>svg.icon.icon--spinner-24,.progress-spinner>svg.icon.icon--spinner-30{
+.progress-spinner>svg.icon.icon--20,.progress-spinner>svg.icon.icon--24,.progress-spinner>svg.icon.icon--30{
   height:inherit;
   margin:0;
   max-height:inherit;
@@ -8248,7 +8260,7 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
   text-decoration:underline;
 }
 
-.textbox--fluid{
+.textbox--fluid,.textbox--fluid .textbox__control{
   width:100%;
 }
 :root{
@@ -8597,7 +8609,7 @@ button.toast-dialog__close>svg{
   --row-list-toggle-buttons-sm:2;
   --row-list-toggle-buttons-md:3;
   --row-list-toggle-buttons-xl:5;
-  --row-gallery-toggle-buttons-min:1;
+  --row-gallery-toggle-buttons-min:2;
   --row-gallery-toggle-buttons-xs:2;
   --row-gallery-toggle-buttons-sm:3;
   --row-gallery-toggle-buttons-md:4;
@@ -8608,6 +8620,30 @@ button.toast-dialog__close>svg{
   container:toggle-buttons-container/inline-size;
 }
 
+@supports not (contain:inline-size){
+  @media (max-width:320px){
+    .toggle-button-group[data-columns-min="1"] ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-min="2"] ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-min="3"] ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+  }
+}
+@container toggle-buttons-container (inline-size < 320px){
+  .toggle-button-group[data-columns-min="1"] ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .toggle-button-group[data-columns-min="2"] ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .toggle-button-group[data-columns-min="3"] ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+}
 .toggle-button-group ul{
   display:grid;
   gap:var(--spacing-100);
@@ -8631,12 +8667,20 @@ button.toast-dialog__close>svg{
   max-width:100%;
   width:100%;
 }
+.toggle-button-group--list-layout ul{
+  grid-template-columns:repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button{
   justify-content:left;
   max-width:100%;
   min-width:auto;
 }
 
+.toggle-button-group--gallery-layout ul{
+  grid-template-columns:repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li{
   max-width:100%;
 }

package/dist/carousel/carousel.css

@@ -223,10 +223,12 @@ span.carousel__container {
 [dir="rtl"] .carousel__control .icon--12 {
     transform: rotate(180deg);
 }
-@supports not (
-    (-webkit-scroll-snap-coordinate: 0 0) or (-ms-scroll-snap-coordinate: 0 0)
-        or (scroll-snap-coordinate: 0 0) or (scroll-snap-align: start)
-) {
+@supports not /*!Y */
+    (
+        /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+            (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+            (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+    ) {
     .carousel:not(.carousel__autoplay) .carousel__control {
         opacity: 0.92;
     }
@@ -235,9 +237,11 @@ span.carousel__container {
         opacity: 0.3;
     }
 }
-@supports (-webkit-scroll-snap-coordinate: 0 0) or
-    (-ms-scroll-snap-coordinate: 0 0) or (scroll-snap-coordinate: 0 0) or
-    (scroll-snap-align: start) {
+@supports (
+    /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+        (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+        (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+) {
     .carousel:not(.carousel__autoplay) {
         overflow: visible;
     }

package/dist/details/details.css

@@ -1,15 +1,17 @@
 summary.details__summary {
     align-items: center;
+    border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
     box-sizing: border-box;
     color: var(
         --details-summary-foreground-color,
-        var(--color-foreground-accent)
+        var(--color-foreground-primary)
     );
-    display: inline-block;
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-bold);
     list-style-position: inside;
     list-style-type: none;
     padding: 12px 8px;
-    width: 100%;
 }
 summary.details__summary:before {
     content: none;
@@ -19,11 +21,17 @@ summary.details__summary::-webkit-details-marker {
 }
 summary.details__summary:focus,
 summary.details__summary:hover {
-    color: var(--color-state-accent-hover);
+    background-color: var(--color-state-secondary-hover);
+    outline: 1;
+}
+summary.details__summary:active {
+    background-color: var(--color-state-secondary-active);
+    outline: 1;
 }
 
 summary.details__summary--center {
-    text-align: center;
+    justify-content: center;
+    width: 100%;
 }
 
 summary.details__summary--small {
@@ -36,7 +44,7 @@ span.details__icon {
     margin-inline-start: 8px;
 }
 span.details__icon[hidden] {
-    display: inline-block;
+    display: inline-flex;
 }
 
 details.details[open] span.details__icon {

package/dist/icon/icon.css

@@ -74,7 +74,7 @@ svg.icon--64-colored {
     height: 64px;
 }
 svg.icon--disabled {
-    filter: var(--color-icon-disabled-filter);
+    filter: var(--color-media-disabled-filter);
 }
 svg.icon--attention-filled {
     color: var(--color-foreground-attention);

package/dist/phone-input/phone-input.css

@@ -95,7 +95,7 @@
 
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
-    filter: var(--color-icon-disabled-filter);
+    filter: var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox {

package/dist/progress-spinner/progress-spinner.css

@@ -13,9 +13,9 @@
         transform: rotate(2turn);
     }
 }
-.progress-spinner > svg.icon.icon--spinner-20,
-.progress-spinner > svg.icon.icon--spinner-24,
-.progress-spinner > svg.icon.icon--spinner-30 {
+.progress-spinner > svg.icon.icon--20,
+.progress-spinner > svg.icon.icon--24,
+.progress-spinner > svg.icon.icon--30 {
     height: inherit;
     margin: 0;
     max-height: inherit;