Merge pull request #15 from sparklayer-io/update-to-13.0.0

Update to 13.0.0

assets/base.css

@@ -1585,6 +1585,9 @@ details[open] > .share-button__fallback {
   appearance: none;
   background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   width: 100%;
   box-sizing: border-box;
@@ -1925,6 +1928,9 @@ input[type='checkbox'] {
 
 .quantity__input {
   color: currentColor;
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   font-weight: 500;
   opacity: 0.85;

assets/cart.js

@@ -234,7 +234,7 @@ if (!customElements.get('cart-note')) {
         super();
 
         this.addEventListener(
-          'change',
+          'input',
           debounce((event) => {
             const body = JSON.stringify({ note: event.target.value });
             fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } });

assets/collapsible-content.css

@@ -70,7 +70,7 @@
   border-top: 0;
 }
 
-.collapsible-row-layout .accordion:not(:first-child):not(.color-background-1) {
+.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
   margin-top: 1rem;
 }
 

assets/component-card.css

@@ -68,7 +68,7 @@
 }
 
 /* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
-.card__inner.color-background-1 {
+.card__inner.color-scheme-1 {
   background: transparent;
 }
 
@@ -311,7 +311,6 @@
 }
 
 .card--standard:not(.card--horizontal) .placeholder-svg {
-  height: auto;
   width: 100%;
 }
 

assets/component-cart-items.css

@@ -184,16 +184,18 @@ cart-remove-button .icon-remove {
 }
 
 .cart-item__error-text {
-  font-size: 1.2rem;
-  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  font-size: 1.3rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
   order: 1;
 }
 
 .cart-item__error-text + svg {
   flex-shrink: 0;
-  width: 1.2rem;
-  margin-right: 0.5rem;
-  margin-top: 0.1rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.7rem;
+  margin-top: 0.25rem;
 }
 
 .cart-item__error-text:empty + svg {

assets/component-localization-form.css

@@ -51,13 +51,20 @@
 }
 
 .localization-form__currency {
-  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  white-space: nowrap;
+  padding-right: 1.7rem;
 }
 
 @media screen and (max-width: 749px) {
   .localization-form .button {
     word-break: break-all;
   }
+
+  .localization-form__currency {
+    opacity: 1;
+  }
 }
 
 .localization-form__select {
@@ -149,6 +156,7 @@ noscript .localization-selector.link {
   border-radius: var(--popup-corner-radius);
   box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
     rgba(var(--color-shadow), var(--popup-shadow-opacity));
+  max-height: 27.5rem;
 }
 
 .disclosure__list {
@@ -158,20 +166,165 @@ noscript .localization-selector.link {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
   scroll-padding: 0.5rem 0;
-  min-height: 8.2rem;
-  max-height: 20.65rem;
-  max-width: 22rem;
+  max-height: 20.5rem;
+  max-width: 25.5rem;
   min-width: 12rem;
   width: max-content;
 }
 
+.country-selector__list {
+  width: 25.5rem;
+  padding-bottom: 0.95rem;
+  padding-top: 0;
+}
+
+.country-selector__close-button {
+  display: none;
+}
+
+.country-filter {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 1.5rem 0.6rem;
+  position: sticky;
+  top: -0.02rem;
+  background-color: rgb(var(--color-background));
+  z-index: 6;
+}
+
+.country-filter__reset-button,
+.country-filter__search-icon {
+  right: calc(var(--inputs-border-width));
+  top: var(--inputs-border-width);
+}
+
+.country-filter__reset-button:not(:focus-visible)::after,
+.country-filter__reset-button:not(:focus)::after {
+  display: block;
+  height: calc(100% - 1.8rem);
+  content: '';
+  position: absolute;
+  right: 0;
+}
+
+.country-filter__reset-button:focus,
+.country-filter__reset-button:focus-visible {
+  background-color: rgb(var(--color-background));
+  z-index: 4;
+}
+
+.country-filter__reset-button:not(:focus-visible):not(.focused) {
+  box-shadow: inherit;
+  background-color: inherit;
+}
+
+.country-filter__reset-button:hover .icon {
+  transform: scale(1.07);
+}
+
+.country-filter__reset-button .icon.icon-close,
+.country-filter__search-icon .icon {
+  height: 1.8rem;
+  width: 1.8rem;
+  stroke-width: 0.1rem;
+}
+
+.country-filter__search-icon {
+  transition: opacity var(--duration-short) ease, visibility var(--duration-short) ease;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: none;
+  cursor: text;
+}
+
+.country-filter__search-icon--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@media screen and (max-width: 749px) {
+  .disclosure__list-wrapper.country-selector:not([hidden]) + .country-selector__overlay:empty {
+    display: block;
+  }
+
+  .country-selector__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--color-foreground), 0.5);
+    z-index: 3;
+    animation: animateLocalization var(--duration-default) ease;
+  }
+
+  .disclosure__list-wrapper.country-selector {
+    position: fixed;
+    bottom: -1rem;
+    left: 0;
+    width: 100%;
+    height: 80%;
+    max-height: 80vh;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    z-index: 4;
+  }
+
+  .disclosure__list.country-selector__list {
+    max-height: 85%;
+    min-width: 100%;
+    margin-bottom: 0;
+    z-index: 5;
+  }
+
+  .country-selector__close-button.link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0rem;
+    background-color: transparent;
+    height: 4.4rem;
+    width: 4.4rem;
+  }
+
+  .country-selector__close-button .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .country-filter {
+    padding: 1.5rem 2rem 0.6rem 1.5rem;
+  }
+}
+
+@media screen and (min-width: 750px) {
+  .country-filter--no-padding {
+    padding: 0;
+  }
+}
+
+.countries {
+  padding-top: 0.6rem;
+}
+
+.popular-countries {
+  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
+}
+
 .disclosure__item {
   position: relative;
 }
 
 .disclosure__link {
-  display: block;
-  padding: 0.95rem 3.5rem 0.95rem 2rem;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem;
+  padding: 0.9rem 1.5rem;
   text-decoration: none;
   line-height: calc(1 + 0.8 / var(--font-body-scale));
   color: rgba(var(--color-foreground), 0.75);
@@ -182,8 +335,16 @@ noscript .localization-selector.link {
   color: rgb(var(--color-foreground));
 }
 
-.disclosure__link--active {
-  text-decoration: underline;
+.disclosure__link .icon-checkmark {
+  width: 1rem;
+  margin-right: 0.2rem;
+}
+
+.disclosure__link:hover .localization-form__currency,
+.disclosure__link:focus-visible .localization-form__currency,
+.disclosure__link:focus .localization-form__currency {
+  display: inline-block;
+  opacity: 1;
 }
 
 .disclosure__button[aria-expanded='true'] .icon-caret {

assets/component-menu-drawer.css

@@ -263,3 +263,11 @@ details[open].menu-opening > .menu-drawer__submenu {
 .menu-drawer .list-social__link {
   padding: 1.1rem 1.1rem;
 }
+
+@media screen and (max-width: 749px) {
+  .menu-drawer.country-selector-open {
+    transform: none !important;
+    filter: none !important;
+    transition: none !important;
+  }
+}