@ebay/skin 18.0.8 → 18.2.0

package/dist/bundles/skin-full.css

@@ -210,7 +210,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-background-attention:var(--color-red-600);
   --color-background-confirmation:var(--color-kiwi-600);
   --color-background-information:var(--color-blue-500);
-  --color-background-education:#ecf7fe;
+  --color-background-education:var(--color-blue-100);
   --color-background-accent:var(--color-blue-500);
   --color-background-invalid:var(--color-red-200);
   --color-background-elevated:var(--color-neutral-100);
@@ -343,6 +343,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   );
   --shadow-subtle:0px 4px 12px 0px rgba(0, 0, 0, 0.07);
   --shadow-strong:0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
+  --color-loading-overlay:var(--color-neutral-100-rgb), 0.7;
   --color-loading-fill:#ededed;
   --color-loading-shimmer:linear-gradient(
       270deg,
@@ -385,7 +386,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){
@@ -398,7 +399,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
     --color-background-attention:var(--color-red-400);
     --color-background-confirmation:var(--color-kiwi-500);
     --color-background-information:var(--color-blue-500);
-    --color-background-education:#2f373c;
+    --color-background-education:var(--color-indigo-800);
     --color-background-accent:var(--color-blue-400);
     --color-background-invalid:var(--color-red-200);
     --color-background-elevated:var(--color-neutral-800);
@@ -527,6 +528,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
         var(--color-ai-solid-green-subtle) 0%,
         var(--color-ai-solid-blue-subtle) 154.5%
     );
+    --color-loading-overlay:var(--color-neutral-900-rgb), 0.7;
     --color-loading-fill:#2d2d2d;
     --color-loading-shimmer:linear-gradient(
         270deg,
@@ -709,6 +711,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;
@@ -1071,6 +1077,10 @@ button.btn[aria-disabled=true],button.btn[disabled]{
   color:var(--expand-btn-disabled-foreground-color, var(--color-foreground-disabled));
 }
 
+a.fake-btn:not([href]),a.fake-btn[aria-disabled=true]{
+  color:var(--link-foreground-color-disabled, var(--color-foreground-disabled));
+}
+
 a.fake-btn--borderless,button.btn--borderless{
   border-color:transparent;
   min-width:auto;
@@ -1240,6 +1250,7 @@ button.btn--primary[aria-disabled=true] svg.icon,button.btn--primary[disabled] s
 a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
   background-color:var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
   border-color:var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
+  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
 }
 
 a.fake-btn--secondary,button.btn--secondary{
@@ -1309,7 +1320,8 @@ a.fake-btn--tertiary[href]:active,button.btn--tertiary:not([disabled],[aria-disa
   background-color:var(--color-state-secondary-active);
 }
 
-a.fake-btn--tertiary:not([href]),button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+  border-color:var(--expand-btn-disabled-border-color, var(--color-stroke-disabled));
   color:var(--btn-tertiary-disabled-foreground-color, var(--color-background-disabled));
 }
 
@@ -2685,13 +2697,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 +2714,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 +2737,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 +5171,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);
@@ -6355,7 +6375,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   border-bottom-right-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
 }
 
-.fake-menu-button__item svg.icon--16,.menu-button__item svg.icon--16{
+.fake-menu-button__item>svg.icon--16,.menu-button__item>svg.icon--16{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
@@ -6364,7 +6384,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   stroke-width:0;
 }
 
-.fake-menu-button__item svg.icon--16:last-child,.menu-button__item svg.icon--16:last-child{
+.fake-menu-button__item>svg.icon--16:last-child,.menu-button__item>svg.icon--16:last-child{
   margin-left:var(--spacing-100);
 }
 a.fake-menu-button__item{
@@ -7058,7 +7078,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 +7455,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;
@@ -8595,6 +8615,62 @@ span.switch__control:focus:not(:focus-visible){
     opacity:1;
   }
 }
+:root{
+  --density-compact-cell-height:36px;
+  --density-default-cell-height:48px;
+  --density-relaxed-cell-height:56px;
+}
+
+.table{
+  overflow-x:auto;
+  position:relative;
+}
+
+.table table{
+  border-collapse:collapse;
+  border-spacing:0;
+  width:100%;
+}
+
+.table td,.table th{
+  background-color:var(--color-background-primary);
+  border-bottom:1px solid var(--color-stroke-subtle);
+  box-sizing:border-box;
+  height:var(--density-default-cell-height);
+  max-width:400px;
+  min-width:124px;
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-200);
+}
+
+.table__cell{
+  text-align:left;
+}
+
+.table [data-type=numeric],.table__cell--numeric{
+  text-align:right;
+}
+
+.table td:last-child,.table th:last-child{
+  -webkit-padding-end:0;
+          padding-inline-end:0;
+}
+
+.table--density-compact td,.table--density-compact th{
+  height:var(--density-compact-cell-height);
+}
+
+.table--density-relaxed td,.table--density-relaxed th{
+  height:var(--density-relaxed-cell-height);
+}
+
+.table--mode-selection td:first-child,.table--mode-selection th:first-child{
+  min-width:unset;
+}
+
+.table tbody th{
+  font-weight:400;
+}
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -8820,7 +8896,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 +9245,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 +9256,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 +9303,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;
@@ -499,6 +503,10 @@ button.btn[aria-disabled=true],button.btn[disabled]{
   color:var(--expand-btn-disabled-foreground-color, var(--color-foreground-disabled));
 }
 
+a.fake-btn:not([href]),a.fake-btn[aria-disabled=true]{
+  color:var(--link-foreground-color-disabled, var(--color-foreground-disabled));
+}
+
 a.fake-btn--borderless,button.btn--borderless{
   border-color:transparent;
   min-width:auto;
@@ -668,6 +676,7 @@ button.btn--primary[aria-disabled=true] svg.icon,button.btn--primary[disabled] s
 a.fake-btn--primary:not([href]),a.fake-btn--primary[aria-disabled=true]{
   background-color:var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
   border-color:var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
+  color:var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
 }
 
 a.fake-btn--secondary,button.btn--secondary{
@@ -737,7 +746,8 @@ a.fake-btn--tertiary[href]:active,button.btn--tertiary:not([disabled],[aria-disa
   background-color:var(--color-state-secondary-active);
 }
 
-a.fake-btn--tertiary:not([href]),button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+a.fake-btn--tertiary:not([href]),a.fake-btn--tertiary[aria-disabled=true],button.btn--tertiary[aria-disabled=true]:not([aria-live=polite][aria-disabled=true]),button.btn--tertiary[disabled]{
+  border-color:var(--expand-btn-disabled-border-color, var(--color-stroke-disabled));
   color:var(--btn-tertiary-disabled-foreground-color, var(--color-background-disabled));
 }
 
@@ -2113,13 +2123,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 +2140,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 +2163,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 +4597,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);
@@ -5783,7 +5801,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   border-bottom-right-radius:var(--menu-button-menu-border-radius, var(--border-radius-50));
 }
 
-.fake-menu-button__item svg.icon--16,.menu-button__item svg.icon--16{
+.fake-menu-button__item>svg.icon--16,.menu-button__item>svg.icon--16{
   align-self:center;
   fill:currentColor;
   margin:0 auto;
@@ -5792,7 +5810,7 @@ div.menu-button__item[role^=menuitem]:last-child{
   stroke-width:0;
 }
 
-.fake-menu-button__item svg.icon--16:last-child,.menu-button__item svg.icon--16:last-child{
+.fake-menu-button__item>svg.icon--16:last-child,.menu-button__item>svg.icon--16:last-child{
   margin-left:var(--spacing-100);
 }
 a.fake-menu-button__item{
@@ -6486,7 +6504,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 +6881,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;
@@ -8023,6 +8041,62 @@ span.switch__control:focus:not(:focus-visible){
     opacity:1;
   }
 }
+:root{
+  --density-compact-cell-height:36px;
+  --density-default-cell-height:48px;
+  --density-relaxed-cell-height:56px;
+}
+
+.table{
+  overflow-x:auto;
+  position:relative;
+}
+
+.table table{
+  border-collapse:collapse;
+  border-spacing:0;
+  width:100%;
+}
+
+.table td,.table th{
+  background-color:var(--color-background-primary);
+  border-bottom:1px solid var(--color-stroke-subtle);
+  box-sizing:border-box;
+  height:var(--density-default-cell-height);
+  max-width:400px;
+  min-width:124px;
+  padding-block:var(--spacing-100);
+  padding-inline:var(--spacing-200);
+}
+
+.table__cell{
+  text-align:left;
+}
+
+.table [data-type=numeric],.table__cell--numeric{
+  text-align:right;
+}
+
+.table td:last-child,.table th:last-child{
+  -webkit-padding-end:0;
+          padding-inline-end:0;
+}
+
+.table--density-compact td,.table--density-compact th{
+  height:var(--density-compact-cell-height);
+}
+
+.table--density-relaxed td,.table--density-relaxed th{
+  height:var(--density-relaxed-cell-height);
+}
+
+.table--mode-selection td:first-child,.table--mode-selection th:first-child{
+  min-width:unset;
+}
+
+.table tbody th{
+  font-weight:400;
+}
 .fake-tabs,.tabs{
   margin-top:var(--spacing-200);
 }
@@ -8248,7 +8322,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 +8671,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 +8682,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 +8729,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/button/button.css

@@ -39,6 +39,14 @@ button.btn[disabled] {
     );
 }
 
+a.fake-btn:not([href]),
+a.fake-btn[aria-disabled="true"] {
+    color: var(
+        --link-foreground-color-disabled,
+        var(--color-foreground-disabled)
+    );
+}
+
 a.fake-btn--borderless,
 button.btn--borderless {
     border-color: transparent;
@@ -302,6 +310,10 @@ a.fake-btn--primary[aria-disabled="true"] {
         --btn-primary-disabled-border-color,
         var(--color-foreground-disabled)
     );
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
 }
 
 a.fake-btn--secondary,
@@ -433,10 +445,15 @@ button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
 }
 
 a.fake-btn--tertiary:not([href]),
+a.fake-btn--tertiary[aria-disabled="true"],
 button.btn--tertiary[aria-disabled="true"]:not(
         [aria-live="polite"][aria-disabled="true"]
     ),
 button.btn--tertiary[disabled] {
+    border-color: var(
+        --expand-btn-disabled-border-color,
+        var(--color-stroke-disabled)
+    );
     color: var(
         --btn-tertiary-disabled-foreground-color,
         var(--color-background-disabled)

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);