zz-shopify-components 0.25.0 → 0.25.1-beta.1

package/assets/zz-components.css

@@ -419,7 +419,8 @@ body.zz-dialog-open {
   position: fixed;
   inset: 0;
   display: grid;
-  place-items: center;
+  place-items: start center;
+  padding-top: 20%;
   pointer-events: none;
   /* 不阻挡点击 */
   z-index: 9999;

package/blocks/zz-bundle-compare-item.liquid

@@ -0,0 +1,36 @@
+{% schema %}
+  {
+    "name": "Compare Tab Item",
+    "settings": [
+      {
+        "type": "text",
+        "id": "title",
+        "label": "Tab标题"
+      },
+      {
+        "type": "image_picker",
+        "id": "image",
+        "label": "图片"
+      },
+    ],
+    "presets": [
+      {
+        "name": "Compare Tab Item",
+        "settings": {
+        }
+      }
+    ]
+  }
+{% endschema %}
+
+<input
+    type="radio"
+    name="zz-bundle-compare-item-{{ block.id }}"
+    role="tab"
+    class="tw-daisy-tab"
+    aria-label= {{ block.settings.title }}
+    checked="checked" />
+ <div role="tabpanel" class="tw-daisy-tab-content tw-w-full tw-p-10">
+
+    <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.title }}" class="tw-w-full tw-h-full" />
+ </div>

package/blocks/zz-bundle-compare.liquid

@@ -0,0 +1,33 @@
+{% schema %}
+  {
+    "name": "Bundle Compare",
+    "class": "zz-bundle-compare",
+    "settings": [
+        {
+          "type": "image_picker",
+          "id": "pc_image",
+          "label": "PC端图片"
+        },
+    ],
+    "blocks": [
+      {
+        "type": "zz-bundle-compare-item",
+      }
+    ],
+    "presets": [
+      {
+        "name": "Bundle Compare",
+        "settings": {
+        }
+      }
+    ]
+  }
+{% endschema %}
+{% comment %} <div class="zz-bundle-compare-container">
+    {% content_for 'block', block %}
+</div> {% endcomment %}
+
+<div role="tablist" class="tw-daisy-tabs tw-daisy-tabs-bordered">
+    {% content_for 'blocks' %}
+</div>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.25.0",
+  "version": "0.25.1-beta.1",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-accessories-preview-swiper.liquid

@@ -0,0 +1,331 @@
+<zz-accessories-preview-swiper class=' tw-w-full product-accessories-swiper-container tw-h-full tw-relative'>
+  <div class='swiper product-accessories-swiper-list tw-w-full tw-h-full tw-relative'>
+    <div class='swiper-wrapper'>
+      {% for image in product.metafields.custom.acc_images.value %}
+        {% assign accessories_points_index = forloop.index %}
+        <div class='swiper-slide tw-flex tw-justify-center tw-relative'>
+          {{
+            image
+            | image_url: width: 3000
+            | image_tag:
+              loading: 'lazy',
+              class: 'tw-w-auto tw-h-full tw-max-w-full tw-object-cover tw-m-auto',
+              sizes: '(min-width: 750px) 700px, calc(100vw - 30px)',
+              widths: '3000, 4000, 5000'
+          }}
+          {% for block in accessories_points %}
+            {% if block.settings.swiper_index == accessories_points_index %}
+              <div
+                onclick='window.accessoriesPointClickHandler(event, {{ block.settings.accessories_product.selected_or_first_available_variant.id }})'
+                data-point-swiper-index='{{ block.settings.swiper_index }}'
+                class='product-accessories-point-item tw-absolute tw-rounded-full tw-backdrop-blur-[20px] tw-gap-[12px] tw-flex tw-items-center tw-justify-center tw-bg-[rgba(255,255,255,0.8)] lg:tw-py-[6px] tw-py-[4px] lg:tw-pl-[8px] tw-pl-[4px] tw-pr-[20px] tw-z-50 tw-cursor-pointer'
+                style='left: {{ block.settings.point_x }}%; top: {{ block.settings.point_y }}%;'
+              >
+                <svg
+                  width='36'
+                  height='36'
+                  viewBox='0 0 36 36'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                  class="tw-block buy-icon tw-w-[36px] tw-h-[36px]"
+                >
+                  <rect width="36" height="36" rx="18" fill="#FC6C0F"/>
+                  <path d="M8 10H9.51521C10.2098 10 10.8135 10.4769 10.9744 11.1526L11.4143 13M11.4143 13L13.3341 21.0632C13.5486 21.9642 14.3536 22.6 15.2797 22.6H23.786C24.7278 22.6 25.542 21.943 25.7409 21.0225L26.9511 15.4225C27.2204 14.1765 26.2709 13 24.9962 13H11.4143Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  <circle cx="24.584" cy="26" r="0.6" fill="white" stroke="white" stroke-width="0.8"/>
+                  <circle cx="14.916" cy="26" r="0.6" fill="white" stroke="white" stroke-width="0.8"/>
+                  <path d="M17.4746 17.7998H21.4746" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
+                  <path d="M19.4746 19.7998V15.7998" stroke="white" stroke-width="1.3" stroke-linecap="round"/>
+                </svg>
+
+                <svg
+                  width='30'
+                  height='30'
+                  viewBox='0 0 30 30'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                  class="tw-hidden buy-done-icon tw-w-[36px] tw-h-[36px]"
+                >
+                  <rect width="30" height="30" rx="15" fill="#FC6C0F"/>
+                  <rect x="1" y="1" width="28" height="28" rx="14" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
+                  <path d="M10.4168 15.0586L13.9523 18.5941L19.8449 12.7016" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+
+                <div class=' tw-flex tw-flex-col  '>
+                  <div class='lg:tw-text-[16px] tw-text-[12px] tw-leading-[1.2] tw-font-bold'>
+                    {{
+                      block.settings.accessories_title
+                      | default: block.settings.accessories_product.selected_or_first_available_variant.title
+                    }}
+                  </div>
+                  <div class='lg:tw-text-[14px] tw-text-[12px] tw-leading-[1.5] tw-font-medium'>
+                    {{
+                      block.settings.accessories_product.selected_or_first_available_variant.price
+                      | money_without_trailing_zeros
+                    }}
+                  </div>
+                </div>
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+      {% endfor %}
+    </div>
+    <div class='swiper-pagination'></div>
+    <div class='product-accessories-swiper-button-prev'>
+      {% render 'zz-prev-next-blur-icon', type: 'prev' %}
+    </div>
+    <div class='product-accessories-swiper-button-next'>
+      {% render 'zz-prev-next-blur-icon', type: 'next' %}
+    </div>
+  </div>
+
+  <div class=' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] '>
+    <div class='swiper product-accessories-swiper-list-thumbs tw-opacity-0'>
+      <div class='swiper-wrapper tw-flex tw-justify-center'>
+        {% for image in product.metafields.custom.acc_images.value %}
+          <div class='swiper-slide !tw-w-auto tw-opacity-30 tw-relative'>
+            {{
+              image
+              | image_url: width: 200
+              | image_tag:
+                loading: 'lazy',
+                class: 'lg:tw-w-[40px]  tw-w-[30px] tw-aspect-square tw-object-cover tw-rounded-[6px] ',
+                sizes: '(min-width: 750px) 50px, calc(100vw - 30px)',
+                widths: '50, 100, 150'
+            }}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</zz-accessories-preview-swiper>
+
+<style>
+  zz-accessories-preview-swiper {
+    display: block;
+  }
+  zz-accessories-preview-swiper .product-accessories-swiper-button-prev path,
+  zz-accessories-preview-swiper .product-accessories-swiper-button-next path {
+    fill: white;
+  }
+  .product-accessories-swiper-container .swiper-pagination {
+    --swiper-pagination-color: black;
+    --swiper-pagination-bottom: 10px;
+  }
+  .product-accessories-swiper-container .swiper-pagination,
+  .product-accessories-swiper-list-thumbs {
+    transition: opacity 0.2s ease-in-out;
+  }
+  .product-accessories-swiper-list-thumbs {
+    transform: translateY(12px) scale(0.96);
+    transform-origin: bottom center;
+    will-change: opacity, transform;
+    transition:
+      opacity 0.25s ease,
+      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+  .product-accessories-swiper-container:hover
+    .product-accessories-swiper-list-thumbs {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  .product-accessories-swiper-container:hover .swiper-pagination {
+    display: none;
+    transition: none;
+  }
+
+  .product-accessories-swiper-list-thumbs .swiper-slide {
+    border: 1px solid black;
+    border-radius: 6px;
+  }
+
+  .product-accessories-swiper-list-thumbs .swiper-slide-thumb-active {
+    opacity: 1;
+    border: 1px solid black;
+    border-radius: 6px;
+  }
+  .product-accessories-swiper-button-prev,
+  .product-accessories-swiper-button-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  @media screen and (max-width: 1024px) {
+    .product-accessories-swiper-button-prev {
+      display: none;
+    }
+    .product-accessories-swiper-button-next {
+      display: none;
+    }
+  }
+  .product-accessories-swiper-button-prev {
+    left: 20px;
+  }
+  .product-accessories-swiper-button-next {
+    right: 20px;
+  }
+</style>
+<script>
+  ;(() => {
+    class ZZAccessoriesPreviewSwiper extends HTMLElement {
+      constructor() {
+        super();
+        this._thumbs = null;
+        this._swiper = null;
+        this._listEl = null;
+        this._thumbsEl = null;
+        this._paginationEl = null;
+        this._btnPrev = null;
+        this._btnNext = null;
+        this._initialized = false;
+      }
+
+      connectedCallback() {
+        const init = () => {
+          if (this._initialized) return;
+          if (typeof Swiper === 'undefined') return;
+          this._ensureElements();
+          this._initSwipers();
+          this._initialized = true;
+        };
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', init, { once: true });
+        } else {
+          init();
+        }
+      }
+
+      disconnectedCallback() {
+        this._destroySwipers();
+        this._initialized = false;
+      }
+
+      _ensureElements() {
+        this._listEl = this.querySelector('.product-accessories-swiper-list');
+        this._thumbsEl = this.querySelector('.product-accessories-swiper-list-thumbs');
+        if (!this._listEl || !this._thumbsEl) return;
+        this._paginationEl = this._listEl.querySelector('.swiper-pagination');
+        this._btnPrev = this._listEl.querySelector('.product-accessories-swiper-button-prev');
+        this._btnNext = this._listEl.querySelector('.product-accessories-swiper-button-next');
+      }
+
+      _initSwipers() {
+        if (!this._listEl || !this._thumbsEl) return;
+
+        this._thumbs = new Swiper(this._thumbsEl, {
+          slidesPerView: 5,
+          spaceBetween: 8,
+          watchSlidesProgress: true,
+          slideToClickedSlide: true,
+          breakpoints: {
+            0: { slidesPerView: 4, spaceBetween: 6 },
+            768: { slidesPerView: 5, spaceBetween: 8 },
+            1024: { slidesPerView: 6, spaceBetween: 10 },
+          },
+        });
+
+        const loopedSlides = {{ product.metafields.custom.acc_images.value.size | default: 0 }};
+        this._swiper = new Swiper(this._listEl, {
+          loop: true,
+          navigation: {
+            nextEl: this._btnNext,
+            prevEl: this._btnPrev,
+          },
+          effect: 'fade',
+          loopedSlides: loopedSlides,
+          slidesPerView: 1,
+          spaceBetween: 10,
+          pagination: {
+            el: this._paginationEl,
+            clickable: true,
+          },
+          thumbs: { swiper: this._thumbs },
+        });
+      }
+
+      _destroySwipers() {
+        try {
+          this._swiper && this._swiper.destroy(true, true);
+        } catch (e) {}
+        try {
+          this._thumbs && this._thumbs.destroy(true, true);
+        } catch (e) {}
+        this._swiper = null;
+        this._thumbs = null;
+      }
+    }
+
+    if (!customElements.get('zz-accessories-preview-swiper')) {
+      customElements.define('zz-accessories-preview-swiper', ZZAccessoriesPreviewSwiper);
+    }
+
+    window.accessoriesPointClickHandler = async function(eventOrElement, variantId) {
+      const element =
+        eventOrElement?.currentTarget ||
+        (eventOrElement instanceof Event ? eventOrElement.target : eventOrElement);
+
+      if (!(element instanceof Element)) {
+        console.warn('accessoriesPointClickHandler: expected an Element but got', eventOrElement);
+        return;
+      }
+
+      const buyIcon = element.querySelector('.buy-icon');
+      const buyDoneIcon = element.querySelector('.buy-done-icon');
+      if (buyIcon) buyIcon.style.display = 'none';
+      if (buyDoneIcon) buyDoneIcon.style.display = 'block';
+      const data = {
+        items: [
+          {
+            id: variantId,
+            quantity: 1,
+          },
+        ],
+        sections: 'cart-drawer,cart-icon-bubble',
+      };
+      const cart = document.querySelector('cart-drawer');
+
+      await fetch(`${routes.cart_add_url}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/javascript',
+        },
+        body: JSON.stringify(data),
+      })
+        .then((response) => response.json())
+        .then((response) => {
+          if (response.status) {
+            publish(PUB_SUB_EVENTS.cartError, {
+              source: 'product-form',
+              productVariantId: variantId,
+              errors: response.errors || response.description,
+              message: response.message,
+            });
+          }
+
+          publish(PUB_SUB_EVENTS.cartUpdate, {
+            source: 'product-form',
+            productVariantId: variantId,
+            cartData: response,
+          });
+          cart.renderContents(response, false);
+          zzShowToast('1 item added to Cart', { type: 'success' });
+        })
+        .catch((e) => {
+          console.error(e);
+        })
+        .finally(() => {
+          setTimeout(() => {
+            if (buyIcon) buyIcon.style.display = 'block';
+            if (buyDoneIcon) buyDoneIcon.style.display = 'none';
+          }, 3000);
+          if (cart && cart.classList.contains('is-empty'))
+            cart.classList.remove('is-empty');
+        });
+    };
+  })();
+</script>

package/snippets/zz-gallery-tab.liquid

@@ -0,0 +1,257 @@
+<gallery-tab>
+  <div class='gallery-tab-container lg:tw-mt-[20px] tw-mt-[12px] tw-absolute bottom-0 left-0 tw-w-full tw-z-10 tw-text-center tw-flex tw-items-center tw-justify-center lg:tw-gap-[12px] tw-gap-[4px]'>
+    <div
+      class='gallery-tab-item active'
+      data-test-locator='galleryTabItemPhoto'
+      data-test-value='photo'
+    >
+      <div class='gallery-tab-item-text'>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='16'
+          height='16'
+          viewBox='0 0 16 16'
+          fill='none'
+        >
+          <path d="M1 4.5V12.5C1 13.0523 1.44772 13.5 2 13.5H14" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+          <rect x="3" y="3.5" width="12" height="8" rx="0.5" stroke="black"/>
+          <path d="M3 11L6 8L8 9.5L10.5 7L14.5 11" stroke="black" stroke-linejoin="round"/>
+          <circle cx="5.75" cy="5.75" r="0.75" fill="black"/>
+        </svg>
+        <span class='gallery-tab-item-text-span'> Photo </span>
+      </div>
+    </div>
+    {% if show_accessories_point %}
+      <div
+        class='gallery-tab-item'
+        data-test-locator='galleryTabItemAccessories'
+        data-test-value='accessories'
+      >
+        <div class='gallery-tab-item-text'>
+          <svg
+            width='20'
+            height='20'
+            viewBox='0 0 20 20'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path d="M6.88574 3.83398H13.1035C13.9019 3.83401 14.5757 4.42847 14.6748 5.2207L15.8027 14.249C15.9207 15.1938 15.1845 16.028 14.2324 16.0283H5.75781C4.80554 16.0283 4.06858 15.1939 4.18652 14.249L5.31445 5.2207C5.41357 4.4285 6.08736 3.83406 6.88574 3.83398Z" stroke="black"/>
+            <path d="M12.7724 7.15332C12.7724 8.68744 11.5287 9.9311 9.99457 9.9311C8.46045 9.9311 7.2168 8.68744 7.2168 7.15332" stroke="black" stroke-linecap="round"/>
+          </svg>
+
+          <span class='gallery-tab-item-text-span'> Accessories </span>
+        </div>
+      </div>
+    {% endif %}
+    {% if show_video %}
+      <div
+        class='gallery-tab-item'
+        data-test-locator='galleryTabItemVideo'
+        data-test-value='video'
+      >
+        <div class='gallery-tab-item-text'>
+          <svg
+            width='16'
+            height='16'
+            viewBox='0 0 16 16'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <rect x="0.5" y="2.5" width="15" height="11" rx="1.5" stroke="black"/>
+            <path d="M6.26348 6.16606C6.26362 5.85833 6.59736 5.66564 6.86394 5.81938L10.1644 7.72531C10.4306 7.87943 10.4304 8.26404 10.1639 8.41793L6.86389 10.3232C6.59737 10.4771 6.2642 10.2849 6.26385 9.97726L6.26348 6.16606Z" stroke="black"/>
+          </svg>
+          <span class='gallery-tab-item-text-span'> Video </span>
+        </div>
+      </div>
+    {% endif %}
+    {% if show_model %}
+      <div
+        class='gallery-tab-item'
+        data-test-locator='galleryTabItem3D'
+        data-test-value='3d'
+      >
+        <div class='gallery-tab-item-text'>
+          <svg
+            width='16'
+            height='16'
+            viewBox='0 0 16 16'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path d="M12.6963 3.78809V8.71094L8 11.4229L3.30371 8.71094V3.78809L8 1.07617L12.6963 3.78809Z" stroke="black"/>
+            <path d="M12.6346 3.75198L8.03554 6.40723L3.43652 3.75198" stroke="black"/>
+            <path d="M8 11.375V5.875" stroke="black" stroke-linejoin="round"/>
+            <path d="M6.41406 12.5996L7.82828 14.0138L6.41406 15.428" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M3.30431 7C1.59439 7.73314 0.5 8.858 0.5 10.1192C0.5 12.2387 3.59098 13.9732 7.5 14.1104M12.6957 7C14.4056 7.73314 15.5 8.858 15.5 10.1192C15.5 12.0543 12.9234 13.6685 9.5 14.0392" stroke="black"/>
+          </svg>
+          <span class='gallery-tab-item-text-span'> 3D </span>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</gallery-tab>
+
+<style>
+  .gallery-tab-item {
+    padding: 3px 16px;
+    cursor: pointer;
+    display: inline-block;
+    border-radius: 100px;
+    background: #fff;
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  @media screen and (max-width: 1024px) {
+    .gallery-tab-item {
+      padding: 8px 10px;
+      font-size: 12px !important;
+      line-height: 12px;
+    }
+  }
+  .gallery-tab-item:hover {
+    background: #f5f5f5;
+  }
+  .gallery-tab-item.active {
+    color: #fff;
+    background: #000;
+  }
+  .gallery-tab-item-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+  .gallery-tab-item svg {
+    transition: filter 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
+  }
+  .gallery-tab-item.active svg {
+    filter: invert(1);
+  }
+  .gallery-tab-item-text-span {
+  }
+  @media screen and (max-width: 1024px) {
+    .gallery-tab-item-text svg {
+      width: 12px;
+      height: 12px;
+    }
+    .gallery-tab-item-text {
+      font-size: 12px;
+      gap: 6px;
+    }
+  }
+</style>
+
+<script>
+  (() => {
+    class GalleryTab extends HTMLElement {
+      static get observedAttributes() {
+        return ['value'];
+      }
+      constructor() {
+        super();
+        this._items = [];
+        this._suppressChange = false;
+        this._onItemClick = this._onItemClick.bind(this);
+      }
+      connectedCallback() {
+        this._items = Array.from(this.querySelectorAll('.gallery-tab-item'));
+        this._items.forEach((item) => {
+          item.addEventListener('click', this._onItemClick, false);
+          item.setAttribute('role', 'tab');
+        });
+        const activeFromDom = this.querySelector('.gallery-tab-item.active');
+        const activeFromDomValue = activeFromDom
+          ? activeFromDom.dataset.testValue ||
+            activeFromDom.getAttribute('data-test-value')
+          : null;
+        const firstItemValue = this._items[0]
+          ? this._items[0].dataset.testValue ||
+            this._items[0].getAttribute('data-test-value')
+          : null;
+        const initialValue =
+          this.getAttribute('value') ||
+          activeFromDomValue ||
+          firstItemValue ||
+          '';
+        this._suppressChange = true;
+        this.setAttribute('value', String(initialValue));
+        this._syncActive(initialValue);
+        this._suppressChange = false;
+      }
+      disconnectedCallback() {
+        this._items.forEach((item) => {
+          item.removeEventListener('click', this._onItemClick, false);
+        });
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name !== 'value' || oldValue === newValue) return;
+        this._syncActive(newValue);
+        if (!this._suppressChange) {
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              detail: { value: newValue },
+              bubbles: true,
+            })
+          );
+          document.querySelectorAll('.product-preview-item').forEach((item) => {
+            if (item.dataset.galleryValue === newValue) {
+              item.classList.add('active');
+            } else {
+              item.classList.remove('active');
+            }
+          });
+        }
+        document
+          .querySelectorAll('product-video-tab video')
+          .forEach((video) => {
+            video.pause();
+            video.currentTime = 0;
+          });
+      }
+      get value() {
+        return this.getAttribute('value');
+      }
+      set value(next) {
+        if (next == null) {
+          this.removeAttribute('value');
+        } else {
+          this.setAttribute('value', String(next));
+        }
+      }
+      _onItemClick(event) {
+        const item = event.currentTarget;
+        const nextValue = item
+          ? item.dataset.testValue || item.getAttribute('data-test-value')
+          : '';
+        if (!nextValue || nextValue === this.value) return;
+        this.value = nextValue;
+      }
+      _syncActive(value) {
+        const normalized = String(value || '');
+        let matched = false;
+        this._items.forEach((item) => {
+          const itemValue =
+            item.dataset.testValue ||
+            item.getAttribute('data-test-value') ||
+            '';
+          const isActive = itemValue === normalized;
+          item.classList.toggle('active', isActive);
+          item.setAttribute('aria-selected', isActive ? 'true' : 'false');
+          if (isActive) matched = true;
+        });
+        if (!matched && this._items[0]) {
+          this._items.forEach((item, index) => {
+            const isActive = index === 0;
+            item.classList.toggle('active', isActive);
+            item.setAttribute('aria-selected', isActive ? 'true' : 'false');
+          });
+        }
+      }
+    }
+    if (!customElements.get('gallery-tab')) {
+      customElements.define('gallery-tab', GalleryTab);
+    }
+  })();
+</script>