@ebay/skin 16.0.0 → 16.1.0

package/dist/carousel/carousel.css

@@ -56,13 +56,10 @@
 }
 .carousel__list--image-treatment > li::after {
   background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
   content: "";
   display: block;
-  left: 0;
+  inset: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 .carousel__list--image-treatment > li > img {
   display: inline-block;
@@ -80,13 +77,10 @@
 }
 .carousel__list--image-treatment-large > li::after {
   background: rgba(0, 0, 0, 0.05);
-  bottom: 0;
   content: "";
   display: block;
-  left: 0;
+  inset: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 .carousel__list--image-treatment-large > li > img {
   display: inline-block;
@@ -135,7 +129,7 @@ div.carousel {
 .carousel__control:focus:not(:focus-visible) {
   outline: none;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
   }
@@ -143,7 +137,7 @@ div.carousel {
     opacity: 0.3;
   }
 }
-@media (min-width: 601px) and (hover: hover) {
+@media (min-width: 512px) and (hover: hover) {
   .carousel:hover .carousel__control {
     opacity: 0.92;
   }
@@ -200,8 +194,9 @@ span.carousel__container {
 }
 /* autoprefixer: ignore next */
 @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)
+        /*!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;
@@ -220,8 +215,9 @@ span.carousel__container {
  */
 /* autoprefixer: ignore next */
 @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)
+    /*!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)
 ) {
   /* autoprefixer: off */
   .carousel:not(.carousel__autoplay) {
@@ -263,7 +259,7 @@ span.carousel__container {
     scroll-snap-coordinate: 0 0;
   }
   /* autoprefixer: on */
-  @media (min-width: 601px) {
+  @media (min-width: 512px) {
     div.carousel {
       margin: 16px 0;
     }

package/dist/combobox/combobox.css

@@ -100,12 +100,10 @@ span.combobox {
 .combobox__option[role^="option"] svg.icon {
   align-self: center;
   fill: currentColor;
-  height: 10px;
   margin: 0 auto;
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  width: 14px;
 }
 .combobox__option--active[role^="option"] {
   background-color: var(--color-state-primary-active);

package/dist/confirm-dialog/confirm-dialog.css

@@ -1,12 +1,15 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .confirm-dialog[role="dialog"] {
-  background-color: rgba(17, 24, 32, 0.7);
-  bottom: 0;
-  left: 0;
+  background-color: var(--dialog-scrim-color-show);
+  inset: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
-  right: 0;
-  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-start;
@@ -23,8 +26,10 @@
   min-height: 55px;
   will-change: opacity, transform;
   border-radius: var(--lightbox-border-radius, var(--border-radius-100));
-  margin-top: 15vh;
+  margin: auto;
+  max-height: 90%;
   max-width: calc(100% - 32px);
+  min-width: 208px;
   margin-left: 16px;
   margin-right: 16px;
   padding: 16px;
@@ -72,7 +77,7 @@ button.confirm-dialog__confirm {
 .confirm-dialog--show-init.confirm-dialog--mask-fade,
 .confirm-dialog--hide.confirm-dialog--mask-fade-slow,
 .confirm-dialog--show-init.confirm-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0);
+  background-color: var(--dialog-scrim-color-hide);
 }
 .confirm-dialog--hide .confirm-dialog__window--fade,
 .confirm-dialog--show-init .confirm-dialog__window--fade {
@@ -88,19 +93,19 @@ button.confirm-dialog__confirm {
 .confirm-dialog--hide-init.confirm-dialog--mask-fade,
 .confirm-dialog--show.confirm-dialog--mask-fade-slow,
 .confirm-dialog--hide-init.confirm-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0.7);
+  background-color: var(--dialog-scrim-color-show);
 }
 .confirm-dialog--show .confirm-dialog__window--fade,
 .confirm-dialog--hide-init .confirm-dialog__window--fade {
   opacity: 1;
 }
-@media (min-width: calc(768px + 1px)) and (max-width: 1024px) {
+@media (min-width: 768px) {
   .confirm-dialog__window {
     max-width: calc(88% - 32px);
   }
 }
-@media (min-width: calc(1024px + 1px)) {
+@media (min-width: 1024px) {
   .confirm-dialog__window {
-    max-width: 616px;
+    max-width: var(--dialog-lightbox-max-width);
   }
 }

package/dist/date-textbox/date-textbox.css

@@ -19,7 +19,7 @@
 .date-textbox__popover[hidden] {
   display: none;
 }
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 512px) {
   .date-textbox__popover {
     left: 0;
     margin-left: 0;

package/dist/drawer-dialog/drawer-dialog.css

@@ -1,12 +1,15 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .drawer-dialog[role="dialog"] {
-  background-color: rgba(17, 24, 32, 0.7);
-  bottom: 0;
-  left: 0;
+  background-color: var(--dialog-scrim-color-show);
+  inset: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
-  right: 0;
-  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-end;
@@ -64,7 +67,7 @@
 .drawer-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  margin: 16px;
+  padding: 16px;
   position: relative;
   min-height: auto;
   overflow: auto;
@@ -141,7 +144,7 @@ button.icon-button.drawer-dialog__close {
 .drawer-dialog--show-init.drawer-dialog--mask-fade,
 .drawer-dialog--hide.drawer-dialog--mask-fade-slow,
 .drawer-dialog--show-init.drawer-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0);
+  background-color: var(--dialog-scrim-color-hide);
 }
 .drawer-dialog--hide .drawer-dialog__window--slide,
 .drawer-dialog--show-init .drawer-dialog__window--slide {
@@ -157,7 +160,7 @@ button.icon-button.drawer-dialog__close {
 .drawer-dialog--hide-init.drawer-dialog--mask-fade,
 .drawer-dialog--show.drawer-dialog--mask-fade-slow,
 .drawer-dialog--hide-init.drawer-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0.7);
+  background-color: var(--dialog-scrim-color-show);
 }
 .drawer-dialog--show .drawer-dialog__window--fade,
 .drawer-dialog--hide-init .drawer-dialog__window--fade {

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -1,12 +1,15 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .fullscreen-dialog[role="dialog"] {
-  background-color: rgba(17, 24, 32, 0.7);
-  bottom: 0;
-  left: 0;
+  background-color: var(--dialog-scrim-color-show);
+  inset: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
-  right: 0;
-  top: 0;
   will-change: background-color;
   z-index: 100000;
 }
@@ -56,7 +59,7 @@
 .fullscreen-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  margin: 16px;
+  padding: 16px;
   position: relative;
   min-height: auto;
 }
@@ -117,7 +120,7 @@ button.fullscreen-dialog__back {
 .fullscreen-dialog--show-init.fullscreen-dialog--mask-fade,
 .fullscreen-dialog--hide.fullscreen-dialog--mask-fade-slow,
 .fullscreen-dialog--show-init.fullscreen-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0);
+  background-color: var(--dialog-scrim-color-hide);
 }
 .fullscreen-dialog--hide .fullscreen-dialog__window--fade,
 .fullscreen-dialog--show-init .fullscreen-dialog__window--fade {
@@ -141,7 +144,7 @@ button.fullscreen-dialog__back {
 .fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade,
 .fullscreen-dialog--show.fullscreen-dialog--mask-fade-slow,
 .fullscreen-dialog--hide-init.fullscreen-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0.7);
+  background-color: var(--dialog-scrim-color-show);
 }
 .fullscreen-dialog--show .fullscreen-dialog__window--fade,
 .fullscreen-dialog--hide-init .fullscreen-dialog__window--fade {

package/dist/icon/icon.css

@@ -219,6 +219,14 @@ svg.icon--book-24 {
   height: 24px;
   width: 24px;
 }
+svg.icon--bookmark-16 {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--bookmark-24 {
+  height: 24px;
+  width: 24px;
+}
 svg.icon--brand-authorized-seller-16-fit {
   height: 16px;
   width: 10px;
@@ -1131,10 +1139,6 @@ svg.icon--image-64 {
   height: 64px;
   width: 64px;
 }
-svg.icon--image-placeholder {
-  height: 300px;
-  width: 300px;
-}
 svg.icon--inbox-16 {
   height: 16px;
   width: 16px;
@@ -1651,10 +1655,18 @@ svg.icon--play-filled-16 {
   height: 16px;
   width: 16px;
 }
+svg.icon--play-filled-16-colored {
+  height: 16px;
+  width: 16px;
+}
 svg.icon--play-filled-24 {
   height: 24px;
   width: 24px;
 }
+svg.icon--play-filled-24-colored {
+  height: 24px;
+  width: 24px;
+}
 svg.icon--postepay-12-colored {
   height: 12px;
   width: 20px;
@@ -2299,7 +2311,7 @@ svg.icon--wrench-24 {
   height: 24px;
   width: 24px;
 }
-svg.icon--zoom-In-16 {
+svg.icon--zoom-in-16 {
   height: 16px;
   width: 16px;
 }

package/dist/image-placeholder/image-placeholder.css

@@ -0,0 +1,4 @@
+svg.image-placeholder {
+  height: inherit;
+  width: inherit;
+}

package/dist/infotip/infotip.css

@@ -105,10 +105,7 @@ span.infotip__mask {
   right: -4px;
 }
 .infotip__pointer--right-bottom {
-  bottom: 12px;
-  left: auto;
-  right: -4px;
-  top: auto;
+  inset: auto -4px 12px auto;
 }
 .infotip__pointer--right-top {
   left: auto;
@@ -138,7 +135,7 @@ button.infotip__close,
 .infotip__close {
   margin-left: 16px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .infotip__overlay {
     max-width: 400px;
   }

package/dist/legacy-theme/legacy-theme.css

@@ -49,8 +49,8 @@ a.icon-link {
 .tourtip,
 .infotip {
   --bubble-border-radius: 0;
-  --bubble-base-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15),
-        -2px 0 2px rgba(0, 0, 0, 0.15);
+  --bubble-base-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15),
+        0 2px 2px rgba(0, 0, 0, 0.15), -2px 0 2px rgba(0, 0, 0, 0.15);
   --bubble-left-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15);
   --bubble-right-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
   --bubble-bottom-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);

package/dist/legacy-tokens/ds4-light.css

@@ -69,4 +69,6 @@
     --color-data-viz-chart-quinary-stroke: var(--color-teal-5);
     --color-data-viz-tooltip-shadow-primary: #00000026;
     --color-data-viz-tooltip-shadow-secondary: #0000002b;
+    --color-scrim-image: rgba(0, 0, 0, 0.04);
+    --color-scrim-background: rgba(0, 0, 0, 0.32);
 }

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -1,12 +1,15 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .lightbox-dialog[role="dialog"] {
-  background-color: rgba(17, 24, 32, 0.7);
-  bottom: 0;
-  left: 0;
+  background-color: var(--dialog-scrim-color-show);
+  inset: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
-  right: 0;
-  top: 0;
   will-change: background-color;
   z-index: 100000;
   align-items: flex-start;
@@ -23,8 +26,10 @@
   min-height: 55px;
   will-change: opacity, transform;
   border-radius: var(--lightbox-border-radius, var(--border-radius-100));
-  margin-top: 15vh;
+  margin: auto;
+  max-height: 90%;
   max-width: calc(100% - 32px);
+  min-width: 208px;
 }
 .lightbox-dialog__header {
   display: flex;
@@ -51,9 +56,10 @@
 .lightbox-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  margin: 16px;
+  padding: 16px;
   position: relative;
   min-height: 18px;
+  overflow: auto;
 }
 .lightbox-dialog__main > :first-child {
   margin-top: 0;
@@ -108,7 +114,7 @@ button.icon-btn.lightbox-dialog__close {
 .lightbox-dialog--show-init.lightbox-dialog--mask-fade,
 .lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,
 .lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0);
+  background-color: var(--dialog-scrim-color-hide);
 }
 .lightbox-dialog--hide .lightbox-dialog__window--fade,
 .lightbox-dialog--show-init .lightbox-dialog__window--fade {
@@ -124,23 +130,16 @@ button.icon-btn.lightbox-dialog__close {
 .lightbox-dialog--hide-init.lightbox-dialog--mask-fade,
 .lightbox-dialog--show.lightbox-dialog--mask-fade-slow,
 .lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0.7);
+  background-color: var(--dialog-scrim-color-show);
 }
 .lightbox-dialog--show .lightbox-dialog__window--fade,
 .lightbox-dialog--hide-init .lightbox-dialog__window--fade {
   opacity: 1;
 }
-@media (min-width: 601px) and (max-width: 768px) {
+@media (min-width: 512px) {
   .lightbox-dialog__window {
     max-width: calc(88% - 32px);
   }
-}
-@media (min-width: 769px) {
-  .lightbox-dialog__window {
-    max-width: 616px;
-  }
-}
-@media (min-width: 601px) {
   .lightbox-dialog__window .lightbox-dialog__footer {
     flex-direction: row;
     justify-content: flex-end;
@@ -151,3 +150,11 @@ button.icon-btn.lightbox-dialog__close {
     margin-top: initial;
   }
 }
+@media (min-width: 768px) {
+  .lightbox-dialog__window {
+    max-width: var(--dialog-lightbox-max-width);
+  }
+  .lightbox-dialog--wide .lightbox-dialog__window {
+    max-width: var(--dialog-lightbox-wide-max-width);
+  }
+}

package/dist/listbox/listbox.css

@@ -62,12 +62,10 @@ span.listbox__value {
 div.listbox__option svg.icon {
   align-self: center;
   fill: currentColor;
-  height: 10px;
   margin: 0 auto;
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  width: 14px;
   margin-left: 8px;
 }
 [dir="rtl"] div.listbox__option svg.icon {

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

@@ -88,12 +88,10 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button__option svg.icon {
   align-self: center;
   fill: currentColor;
-  height: 10px;
   margin: 0 auto;
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  width: 14px;
   margin-left: 8px;
 }
 div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {

package/dist/menu/menu.css

@@ -21,12 +21,10 @@ span.fake-menu__items {
 .fake-menu__item > svg.icon--tick-16 {
   align-self: center;
   fill: currentColor;
-  height: 10px;
   margin: 0 auto;
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  width: 14px;
 }
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,

package/dist/menu-button/menu-button.css

@@ -79,12 +79,10 @@ div.menu-button__item[role^="menuitem"]:last-child {
 .fake-menu-button__item svg.icon--tick-16 {
   align-self: center;
   fill: currentColor;
-  height: 10px;
   margin: 0 auto;
   opacity: 0;
   stroke: currentColor;
   stroke-width: 0;
-  width: 14px;
 }
 .menu-button__item svg.icon--tick-16:last-child,
 .fake-menu-button__item svg.icon--tick-16:last-child {

package/dist/mixins/utility-mixins.less

@@ -33,13 +33,10 @@
 
     &::after {
         background: rgba(0, 0, 0, 0.05);
-        bottom: 0;
         content: "";
         display: block;
-        left: 0;
+        inset: 0;
         position: absolute;
-        right: 0;
-        top: 0;
     }
 
     > img {

package/dist/page-grid/page-grid.css

@@ -33,17 +33,27 @@
   position: relative;
   width: 100%;
 }
-.page-grid-container .page-grid-container {
-  max-width: 100%;
-  padding: 0;
-  width: 100%;
-}
 .page-grid {
   column-gap: var(--page-grid-column-gaps);
   display: grid;
   grid-template-columns: repeat(var(--page-grid-number-cols), var(--page-grid-column-widths));
   row-gap: var(--page-grid-row-gaps);
 }
+.subgrid,
+.page-grid__subgrid {
+  display: grid;
+}
+@supports (grid-template-columns: subgrid) {
+  .subgrid,
+  .page-grid__subgrid {
+    grid-template-columns: subgrid;
+  }
+}
+.page-grid-container .nested-grid-container {
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+}
 /* prettier-ignore */
 .page-grid--debug {
   --debug-grid-col-color: pink;

package/dist/page-notice/page-notice.css

@@ -104,7 +104,7 @@ p.page-notice__cta {
   margin-right: 16px;
   margin-top: 16px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   section.page-notice,
   div[role="region"].page-notice {
     margin: 16px 0;

package/dist/panel-dialog/panel-dialog.css

@@ -1,12 +1,15 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .panel-dialog[role="dialog"] {
-  background-color: rgba(17, 24, 32, 0.7);
-  bottom: 0;
-  left: 0;
+  background-color: var(--dialog-scrim-color-show);
+  inset: 0;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   position: fixed;
-  right: 0;
-  top: 0;
   will-change: background-color;
   z-index: 100000;
   flex-direction: column;
@@ -61,7 +64,7 @@
 .panel-dialog__main {
   box-sizing: border-box;
   flex: 1 1 auto;
-  margin: 16px;
+  padding: 16px;
   position: relative;
   height: 1px;
   overflow-y: auto;
@@ -117,7 +120,7 @@ button.icon-btn.panel-dialog__close {
 .panel-dialog--show-init.panel-dialog--mask-fade,
 .panel-dialog--hide.panel-dialog--mask-fade-slow,
 .panel-dialog--show-init.panel-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0);
+  background-color: var(--dialog-scrim-color-hide);
 }
 .panel-dialog--hide .panel-dialog__window--slide-left,
 .panel-dialog--show-init .panel-dialog__window--slide-left {
@@ -145,13 +148,13 @@ button.icon-btn.panel-dialog__close {
 .panel-dialog--hide-init.panel-dialog--mask-fade,
 .panel-dialog--show.panel-dialog--mask-fade-slow,
 .panel-dialog--hide-init.panel-dialog--mask-fade-slow {
-  background-color: rgba(17, 24, 32, 0.7);
+  background-color: var(--dialog-scrim-color-show);
 }
 .panel-dialog--show .panel-dialog__window--slide,
 .panel-dialog--hide-init .panel-dialog__window--slide {
   transform: translateX(0);
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .panel-dialog__window {
     width: 384px;
   }

package/dist/progress-bar/progress-bar.css

@@ -20,7 +20,7 @@
 .progress-bar--fluid {
   width: 100%;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .progress-bar {
     margin: 16px 0;
   }

package/dist/progress-stepper/progress-stepper.css

@@ -168,7 +168,7 @@ hr.progress-stepper__separator {
   margin-left: inherit;
   margin-right: 11px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   hr.progress-stepper__separator {
     min-width: 120px;
   }

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

@@ -81,7 +81,7 @@ p.section-notice__cta {
   margin: 4px 0 0;
 }
 /* LARGE SCREEN ADJUSTMENTS */
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   section.section-notice,
   div[role="region"].section-notice {
     margin: 16px 0;

package/dist/section-title/section-title.css

@@ -74,7 +74,7 @@
 [dir="rtl"] .section-title__info {
   margin: 0 8px 0 24px;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .section-title__title {
     font-size: 1.5rem;
     font-weight: 700;

package/dist/snackbar-dialog/snackbar-dialog.css

@@ -1,3 +1,9 @@
+:root {
+  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+  --dialog-lightbox-max-width: 616px;
+  --dialog-lightbox-wide-max-width: 896px;
+}
 .snackbar-dialog {
   background-color: var(--snackbar-dialog-background-color, var(--color-background-inverse));
   border-radius: var(--snackbar-dialog-border-radius, var(--border-radius-100));
@@ -59,7 +65,7 @@
   color: var(--snackbar-dialog-foreground-color, var(--color-foreground-on-inverse));
   text-decoration: underline;
 }
-@media (min-width: 601px) {
+@media (min-width: 512px) {
   .snackbar-dialog {
     bottom: 20px;
   }