@studiocms/ui 0.4.1 → 0.4.2

package/dist/components/Accordion/accordion.d.ts

@@ -1 +1 @@
-declare const allAccordions: NodeListOf<HTMLDivElement>;
+declare function loadAccordions(): void;

package/dist/components/Accordion/accordion.js

@@ -1,70 +1,73 @@
-const allAccordions = document.querySelectorAll(".sui-accordion");
-for (const accordion of allAccordions) {
-  const multipleOpen = accordion.dataset.multiple === "true";
-  const items = accordion.querySelectorAll(".sui-accordion-item");
-  for (const item of items) {
-    const summary = item.querySelector(".sui-accordion-summary");
-    const content = item.querySelector(".sui-accordion-details");
-    if (!content || !summary) continue;
-    const itemWidth = item.getBoundingClientRect().width;
-    content.style.width = `${itemWidth - 36}px`;
-    let contentBoundingBox = content.getBoundingClientRect();
-    content.style.width = "auto";
-    if (content.classList.contains("initial")) {
-      content.classList.remove("initial");
-      content.classList.add("active");
-    }
-    const open = item.dataset.open === "true";
-    if (open) {
-      item.classList.add("active");
-      content.style.maxHeight = `${contentBoundingBox.height}px`;
-    }
-    const toggleElement = () => {
-      if (!multipleOpen) {
-        for (const otherItem of items) {
-          if (otherItem !== item) {
-            otherItem.classList.remove("active");
-            const otherContent = otherItem.querySelector(".sui-accordion-details");
-            if (otherContent) {
-              otherContent.style.maxHeight = "0";
-            }
-          }
-        }
+function loadAccordions() {
+  const allAccordions = document.querySelectorAll(".sui-accordion");
+  for (const accordion of allAccordions) {
+    const multipleOpen = accordion.dataset.multiple === "true";
+    const items = accordion.querySelectorAll(".sui-accordion-item");
+    for (const item of items) {
+      const summary = item.querySelector(".sui-accordion-summary");
+      const content = item.querySelector(".sui-accordion-details");
+      if (!content || !summary) continue;
+      const itemWidth = item.getBoundingClientRect().width;
+      content.style.width = `${itemWidth - 36}px`;
+      let contentBoundingBox = content.getBoundingClientRect();
+      content.style.width = "auto";
+      if (content.classList.contains("initial")) {
+        content.classList.remove("initial");
+        content.classList.add("active");
       }
-      item.classList.toggle("active");
-      if (item.classList.contains("active")) {
+      const open = item.dataset.open === "true";
+      if (open) {
+        item.classList.add("active");
         content.style.maxHeight = `${contentBoundingBox.height}px`;
-      } else {
-        content.style.maxHeight = "0";
-        content.classList.remove("open");
-      }
-    };
-    summary.addEventListener("click", toggleElement);
-    summary.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        toggleElement();
       }
-    });
-    let resetting = false;
-    window.addEventListener("resize", async () => {
-      if (item.classList.contains("active")) {
-        content.style.maxHeight = "none";
-        contentBoundingBox = content.getBoundingClientRect();
-        content.style.maxHeight = `${contentBoundingBox.height}px`;
-      } else if (!resetting) {
-        resetting = true;
-        content.classList.remove("active");
-        content.classList.add("initial");
-        const itemWidth2 = item.getBoundingClientRect().width;
-        content.style.width = `${itemWidth2 - 36}px`;
-        content.style.maxHeight = "none";
-        contentBoundingBox = content.getBoundingClientRect();
-        content.style.width = "auto";
-        content.style.maxHeight = "0";
-        content.classList.add("active");
-        content.classList.remove("initial");
-        resetting = false;
-      }
-    });
+      const toggleElement = () => {
+        if (!multipleOpen) {
+          for (const otherItem of items) {
+            if (otherItem !== item) {
+              otherItem.classList.remove("active");
+              const otherContent = otherItem.querySelector(".sui-accordion-details");
+              if (otherContent) {
+                otherContent.style.maxHeight = "0";
+              }
+            }
+          }
+        }
+        item.classList.toggle("active");
+        if (item.classList.contains("active")) {
+          content.style.maxHeight = `${contentBoundingBox.height}px`;
+        } else {
+          content.style.maxHeight = "0";
+          content.classList.remove("open");
+        }
+      };
+      summary.addEventListener("click", toggleElement);
+      summary.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          toggleElement();
+        }
+      });
+      let resetting = false;
+      window.addEventListener("resize", async () => {
+        if (item.classList.contains("active")) {
+          content.style.maxHeight = "none";
+          contentBoundingBox = content.getBoundingClientRect();
+          content.style.maxHeight = `${contentBoundingBox.height}px`;
+        } else if (!resetting) {
+          resetting = true;
+          content.classList.remove("active");
+          content.classList.add("initial");
+          const itemWidth2 = item.getBoundingClientRect().width;
+          content.style.width = `${itemWidth2 - 36}px`;
+          content.style.maxHeight = "none";
+          contentBoundingBox = content.getBoundingClientRect();
+          content.style.width = "auto";
+          content.style.maxHeight = "0";
+          content.classList.add("active");
+          content.classList.remove("initial");
+          resetting = false;
+        }
+      });
+    }
   }
 }
+document.addEventListener("astro:page-load", loadAccordions);

package/dist/components/Checkbox/checkbox.d.ts

@@ -1,2 +1 @@
-declare const allElements: NodeListOf<HTMLDivElement>;
-declare const allCheckbox: NodeListOf<HTMLInputElement>;
+declare function loadCheckboxes(): void;

package/dist/components/Checkbox/checkbox.js

@@ -1,20 +1,23 @@
-const allElements = document.querySelectorAll(".sui-checkmark-container");
-const allCheckbox = document.querySelectorAll(".sui-checkbox");
-for (const element of allElements) {
-  if (element.dataset.initialized) continue;
-  element.dataset.initialized = "true";
-  element.addEventListener("keydown", (e) => {
-    if (e.key !== "Enter" && e.key !== " ") return;
-    e.preventDefault();
-    const checkbox = element.querySelector(".sui-checkbox");
-    if (!checkbox) return;
-    checkbox.click();
-  });
-}
-for (const box of allCheckbox) {
-  if (box.dataset.initialized) continue;
-  box.dataset.initialized = "true";
-  box.addEventListener("change", (e) => {
-    box.parentElement.ariaChecked = e.target.checked ? "true" : "false";
-  });
+function loadCheckboxes() {
+  const allElements = document.querySelectorAll(".sui-checkmark-container");
+  const allCheckbox = document.querySelectorAll(".sui-checkbox");
+  for (const element of allElements) {
+    if (element.dataset.initialized) continue;
+    element.dataset.initialized = "true";
+    element.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      const checkbox = element.querySelector(".sui-checkbox");
+      if (!checkbox) return;
+      checkbox.click();
+    });
+  }
+  for (const box of allCheckbox) {
+    if (box.dataset.initialized) continue;
+    box.dataset.initialized = "true";
+    box.addEventListener("change", (e) => {
+      box.parentElement.ariaChecked = e.target.checked ? "true" : "false";
+    });
+  }
 }
+document.addEventListener("astro:page-load", loadCheckboxes);

package/dist/components/Progress/progress.d.ts

@@ -1 +1 @@
-declare const allBars: NodeListOf<HTMLDivElement>;
+declare function loadProgressBars(): void;

package/dist/components/Progress/progress.js

@@ -1,10 +1,13 @@
-const allBars = document.querySelectorAll(".sui-progress");
-for (const bar of allBars) {
-  const value = bar.dataset.value;
-  const max = bar.dataset.max;
-  const progress = bar.firstElementChild;
-  if (value && max) {
-    const percent = Math.round(Number.parseInt(value, 10) / Number.parseInt(max, 10) * 100);
-    progress.style.width = `${percent}%`;
+function loadProgressBars() {
+  const allBars = document.querySelectorAll(".sui-progress");
+  for (const bar of allBars) {
+    const value = bar.dataset.value;
+    const max = bar.dataset.max;
+    const progress = bar.firstElementChild;
+    if (value && max) {
+      const percent = Math.round(Number.parseInt(value, 10) / Number.parseInt(max, 10) * 100);
+      progress.style.width = `${percent}%`;
+    }
   }
 }
+document.addEventListener("astro:page-load", loadProgressBars);

package/dist/components/RadioGroup/radiogroup.d.ts

@@ -1 +1 @@
-declare const AllRadioGroupContainers: NodeListOf<HTMLDivElement>;
+declare function loadRadioGroups(): void;

package/dist/components/RadioGroup/radiogroup.js

@@ -1,48 +1,51 @@
-const AllRadioGroupContainers = document.querySelectorAll(".sui-radio-container");
-for (const element of AllRadioGroupContainers) {
-  if (element.dataset.initialized) continue;
-  element.dataset.initialized = "true";
-  const radioBoxes = element.querySelectorAll(".sui-radio-box");
-  let i = 0;
-  for (const radioBox of radioBoxes) {
-    radioBox.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        const input = e.target.parentElement.parentElement.querySelector(".sui-radio-toggle");
-        if (input.disabled) return;
-        input.checked = true;
-      }
-      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-        e.preventDefault();
-        let nextRadioBox;
-        radioBoxes.forEach((box, index) => {
-          if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
-        });
-        if (!nextRadioBox) return;
-        radioBox.tabIndex = -1;
-        nextRadioBox.tabIndex = 0;
-        nextRadioBox.focus();
-        nextRadioBox.click();
-      }
-      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-        e.preventDefault();
-        let previousRadioBox;
-        radioBoxes.forEach((box, index) => {
-          if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
-        });
-        if (!previousRadioBox) return;
-        radioBox.tabIndex = -1;
-        previousRadioBox.tabIndex = 0;
-        previousRadioBox.focus();
-        previousRadioBox.click();
-      }
+function loadRadioGroups() {
+  const AllRadioGroupContainers = document.querySelectorAll(".sui-radio-container");
+  for (const element of AllRadioGroupContainers) {
+    if (element.dataset.initialized) continue;
+    element.dataset.initialized = "true";
+    const radioBoxes = element.querySelectorAll(".sui-radio-box");
+    let i = 0;
+    for (const radioBox of radioBoxes) {
+      radioBox.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          const input = e.target.parentElement.parentElement.querySelector(".sui-radio-toggle");
+          if (input.disabled) return;
+          input.checked = true;
+        }
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+          e.preventDefault();
+          let nextRadioBox;
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
+          });
+          if (!nextRadioBox) return;
+          radioBox.tabIndex = -1;
+          nextRadioBox.tabIndex = 0;
+          nextRadioBox.focus();
+          nextRadioBox.click();
+        }
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+          e.preventDefault();
+          let previousRadioBox;
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
+          });
+          if (!previousRadioBox) return;
+          radioBox.tabIndex = -1;
+          previousRadioBox.tabIndex = 0;
+          previousRadioBox.focus();
+          previousRadioBox.click();
+        }
+      });
+      i++;
+    }
+    element.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter") return;
+      const checkbox = element.querySelector(".sui-checkbox");
+      if (!checkbox) return;
+      checkbox.click();
     });
-    i++;
   }
-  element.addEventListener("keydown", (e) => {
-    if (e.key !== "Enter") return;
-    const checkbox = element.querySelector(".sui-checkbox");
-    if (!checkbox) return;
-    checkbox.click();
-  });
 }
+document.addEventListener("astro:page-load", loadRadioGroups);

package/dist/components/SearchSelect/searchselect.d.ts

@@ -3,4 +3,4 @@ interface Option {
     value: string;
     disabled?: boolean;
 }
-declare const allSearchSelects: NodeListOf<HTMLDivElement>;
+declare function loadSearchSelects(): void;

package/dist/components/SearchSelect/searchselect.js

@@ -1,166 +1,169 @@
-const allSearchSelects = document.querySelectorAll(".sui-search-select-label");
-for (const container of allSearchSelects) {
-  let hideOnClickOutside = function(element) {
-    const outsideClickListener = (event) => {
-      if (!element.contains(event.target) && isVisible(element) && active === true) {
+function loadSearchSelects() {
+  const allSearchSelects = document.querySelectorAll(".sui-search-select-label");
+  for (const container of allSearchSelects) {
+    let hideOnClickOutside2 = function(element) {
+      const outsideClickListener = (event) => {
+        if (!element.contains(event.target) && isVisible(element) && active === true) {
+          dropdown.classList.remove("active", "above");
+          active = false;
+        }
+      };
+      document.addEventListener("click", outsideClickListener);
+    }, constructOptionsBasedOnOptions2 = function(options2) {
+      dropdown.innerHTML = "";
+      if (options2.length === 0) {
+        const element = document.createElement("li");
+        element.classList.add("empty-search-results");
+        element.textContent = "No results found.";
+        dropdown.appendChild(element);
+      }
+      let i = 0;
+      for (const option of options2) {
+        const element = document.createElement("li");
+        element.classList.add(
+          ...[
+            "sui-search-select-option",
+            option.disabled && "disabled",
+            focusIndex === i && "focused"
+          ].filter((x) => typeof x === "string")
+        );
+        element.role = "option";
+        element.value = Number.parseInt(option.value);
+        element.id = "";
+        element.dataset.optionIndex = i.toString();
+        element.dataset.value = option.value;
+        element.textContent = option.label;
+        element.addEventListener("click", (e) => handleSelection(e, element));
+        dropdown.appendChild(element);
+        i++;
+      }
+      optionElements = container.querySelectorAll("li");
+    };
+    var hideOnClickOutside = hideOnClickOutside2, constructOptionsBasedOnOptions = constructOptionsBasedOnOptions2;
+    const hiddenSelect = container.querySelector("select");
+    const searchWrapper = container.querySelector(".sui-search-input-wrapper");
+    const searchInput = searchWrapper.querySelector("input");
+    const dropdown = container.querySelector(".sui-search-select-dropdown");
+    let optionElements = container.querySelectorAll("li");
+    let active = false;
+    const options = JSON.parse(container.dataset.options);
+    const id = container.dataset.id;
+    let filteredOptions = options;
+    searchWrapper.addEventListener("click", () => {
+      const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
+      const optionHeight = 36;
+      const totalBorderSize = 2;
+      const margin = 4;
+      const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
+      const CustomRect = {
+        top: bottom + margin,
+        left,
+        right,
+        bottom: bottom + margin + dropdownHeight,
+        width,
+        height: dropdownHeight,
+        x,
+        y: y + height + margin
+      };
+      if (active) {
+        searchInput.ariaExpanded = "false";
         dropdown.classList.remove("active", "above");
         active = false;
+        return;
       }
-    };
-    document.addEventListener("click", outsideClickListener);
-  }, constructOptionsBasedOnOptions = function(options2) {
-    dropdown.innerHTML = "";
-    if (options2.length === 0) {
-      const element = document.createElement("li");
-      element.classList.add("empty-search-results");
-      element.textContent = "No results found.";
-      dropdown.appendChild(element);
-    }
-    let i = 0;
-    for (const option of options2) {
-      const element = document.createElement("li");
-      element.classList.add(
-        ...[
-          "sui-search-select-option",
-          option.disabled && "disabled",
-          focusIndex === i && "focused"
-        ].filter((x) => typeof x === "string")
-      );
-      element.role = "option";
-      element.value = Number.parseInt(option.value);
-      element.id = "";
-      element.dataset.optionIndex = i.toString();
-      element.dataset.value = option.value;
-      element.textContent = option.label;
-      element.addEventListener("click", (e) => handleSelection(e, element));
-      dropdown.appendChild(element);
-      i++;
-    }
-    optionElements = container.querySelectorAll("li");
-  };
-  var hideOnClickOutside2 = hideOnClickOutside, constructOptionsBasedOnOptions2 = constructOptionsBasedOnOptions;
-  const hiddenSelect = container.querySelector("select");
-  const searchWrapper = container.querySelector(".sui-search-input-wrapper");
-  const searchInput = searchWrapper.querySelector("input");
-  const dropdown = container.querySelector(".sui-search-select-dropdown");
-  let optionElements = container.querySelectorAll("li");
-  let active = false;
-  const options = JSON.parse(container.dataset.options);
-  const id = container.dataset.id;
-  let filteredOptions = options;
-  searchWrapper.addEventListener("click", () => {
-    const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
-    const optionHeight = 36;
-    const totalBorderSize = 2;
-    const margin = 4;
-    const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
-    const CustomRect = {
-      top: bottom + margin,
-      left,
-      right,
-      bottom: bottom + margin + dropdownHeight,
-      width,
-      height: dropdownHeight,
-      x,
-      y: y + height + margin
-    };
-    if (active) {
-      searchInput.ariaExpanded = "false";
-      dropdown.classList.remove("active", "above");
-      active = false;
-      return;
-    }
-    active = true;
-    searchInput.ariaExpanded = "true";
-    if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
-      dropdown.classList.add("active");
-    } else {
-      dropdown.classList.add("active", "above");
-    }
-  });
-  const handleSelection = (e, option) => {
-    e.stopImmediatePropagation();
-    if (option.id === `${id}-selected` || !id) return;
-    const currentlySelected = document.getElementById(`${id}-selected`);
-    if (currentlySelected) {
-      currentlySelected.classList.remove("selected");
-      currentlySelected.id = "";
-    }
-    option.id = `${id}-selected`;
-    option.classList.add("selected");
-    const index = options.findIndex((x) => x.value === option.dataset.value);
-    focusIndex = index;
-    const opt = options[index];
-    hiddenSelect.value = opt.value;
-    searchInput.placeholder = opt.label;
-    dropdown.classList.remove("active", "above");
-    searchInput.value = "";
-    filteredOptions = options;
-    constructOptionsBasedOnOptions(options);
-    active = false;
-  };
-  for (const option of optionElements) {
-    option.addEventListener("click", (e) => handleSelection(e, option));
-  }
-  window.addEventListener("scroll", () => {
-    dropdown.classList.remove("active", "above");
-    active = false;
-  });
-  hideOnClickOutside(container);
-  const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-  let focusIndex = 0;
-  const recomputeOptions = () => {
-    for (const entry of optionElements) {
-      if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
-        entry.classList.add("focused");
+      active = true;
+      searchInput.ariaExpanded = "true";
+      if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
+        dropdown.classList.add("active");
       } else {
-        entry.classList.remove("focused");
+        dropdown.classList.add("active", "above");
       }
-    }
-  };
-  searchInput.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
+    });
+    const handleSelection = (e, option) => {
       e.stopImmediatePropagation();
-      active = false;
+      if (option.id === `${id}-selected` || !id) return;
+      const currentlySelected = document.getElementById(`${id}-selected`);
+      if (currentlySelected) {
+        currentlySelected.classList.remove("selected");
+        currentlySelected.id = "";
+      }
+      option.id = `${id}-selected`;
+      option.classList.add("selected");
+      const index = options.findIndex((x) => x.value === option.dataset.value);
+      focusIndex = index;
+      const opt = options[index];
+      hiddenSelect.value = opt.value;
+      searchInput.placeholder = opt.label;
       dropdown.classList.remove("active", "above");
-      searchInput.blur();
-      return;
-    }
-    if (e.key === "ArrowUp" && focusIndex > 0) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      focusIndex--;
-      recomputeOptions();
-      return;
-    }
-    if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter((x) => !x.disabled).length) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      focusIndex++;
-      recomputeOptions();
-      return;
+      searchInput.value = "";
+      filteredOptions = options;
+      constructOptionsBasedOnOptions2(options);
+      active = false;
+    };
+    for (const option of optionElements) {
+      option.addEventListener("click", (e) => handleSelection(e, option));
     }
-    if (e.key === "Enter") {
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    window.addEventListener("scroll", () => {
+      dropdown.classList.remove("active", "above");
+      active = false;
+    });
+    hideOnClickOutside2(container);
+    const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+    let focusIndex = 0;
+    const recomputeOptions = () => {
       for (const entry of optionElements) {
         if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
-          entry.click();
+          entry.classList.add("focused");
+        } else {
+          entry.classList.remove("focused");
         }
       }
-      return;
-    }
-  });
-  searchInput.addEventListener("keyup", (e) => {
-    if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
-    if (searchInput.value.trim().length === 0) {
-      constructOptionsBasedOnOptions(options);
-      filteredOptions = options;
-      return;
-    }
-    filteredOptions = options.filter((x) => x.label.includes(searchInput.value));
-    focusIndex = 0;
-    constructOptionsBasedOnOptions(filteredOptions);
-  });
+    };
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        active = false;
+        dropdown.classList.remove("active", "above");
+        searchInput.blur();
+        return;
+      }
+      if (e.key === "ArrowUp" && focusIndex > 0) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        focusIndex--;
+        recomputeOptions();
+        return;
+      }
+      if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter((x) => !x.disabled).length) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        focusIndex++;
+        recomputeOptions();
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        for (const entry of optionElements) {
+          if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
+            entry.click();
+          }
+        }
+        return;
+      }
+    });
+    searchInput.addEventListener("keyup", (e) => {
+      if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+      if (searchInput.value.trim().length === 0) {
+        constructOptionsBasedOnOptions2(options);
+        filteredOptions = options;
+        return;
+      }
+      filteredOptions = options.filter((x) => x.label.includes(searchInput.value));
+      focusIndex = 0;
+      constructOptionsBasedOnOptions2(filteredOptions);
+    });
+  }
 }
+document.addEventListener("astro:page-load", loadSearchSelects);

package/dist/components/Tabs/tabs.d.ts

@@ -1 +1 @@
-declare const allTabContainers: NodeListOf<HTMLDivElement>;
+declare function loadTabs(): void;

package/dist/components/Tabs/tabs.js

@@ -1,82 +1,85 @@
-const allTabContainers = document.querySelectorAll(".sui-tabs-container");
-for (const tabContainer of allTabContainers) {
-  const storage = tabContainer.dataset.storageStrategy;
-  const syncKey = tabContainer.dataset.syncKey;
-  const storageLayer = storage === "session" ? sessionStorage : localStorage;
-  const constructCustomEvent = (tabIndex, uniqueId) => {
-    return new CustomEvent(`sui-tab-switch:${syncKey}`, {
-      detail: {
-        tabIndex,
-        uniqueId
+function loadTabs() {
+  const allTabContainers = document.querySelectorAll(".sui-tabs-container");
+  for (const tabContainer of allTabContainers) {
+    const storage = tabContainer.dataset.storageStrategy;
+    const syncKey = tabContainer.dataset.syncKey;
+    const storageLayer = storage === "session" ? sessionStorage : localStorage;
+    const constructCustomEvent = (tabIndex, uniqueId) => {
+      return new CustomEvent(`sui-tab-switch:${syncKey}`, {
+        detail: {
+          tabIndex,
+          uniqueId
+        }
+      });
+    };
+    const switchTab = (target, container, originatedFromSync = false) => {
+      const activeChildren = container.querySelectorAll(".active");
+      for (const child of activeChildren) {
+        child.tabIndex = -1;
+        child.classList.remove("active");
       }
-    });
-  };
-  const switchTab = (target, container, originatedFromSync = false) => {
-    const activeChildren = container.querySelectorAll(".active");
-    for (const child of activeChildren) {
-      child.tabIndex = -1;
-      child.classList.remove("active");
-    }
-    const newActiveTab = target;
-    newActiveTab.classList.add("active");
-    newActiveTab.tabIndex = 0;
-    const newActiveTabContentId = newActiveTab.dataset.tabChild;
-    const newActiveTabContent = container.querySelector(
-      `sui-tab-item[data-tab-id="${newActiveTabContentId}"]`
-    );
-    newActiveTabContent.classList.add("active");
-    if (syncKey && !originatedFromSync) {
-      const tabIndex = Array.prototype.indexOf.call(
-        newActiveTab.parentElement.children,
-        newActiveTab
+      const newActiveTab = target;
+      newActiveTab.classList.add("active");
+      newActiveTab.tabIndex = 0;
+      const newActiveTabContentId = newActiveTab.dataset.tabChild;
+      const newActiveTabContent = container.querySelector(
+        `sui-tab-item[data-tab-id="${newActiveTabContentId}"]`
       );
-      storageLayer.setItem(syncKey, tabIndex.toString());
-      document.dispatchEvent(constructCustomEvent(tabIndex, container.dataset.uniqueId));
+      newActiveTabContent.classList.add("active");
+      if (syncKey && !originatedFromSync) {
+        const tabIndex = Array.prototype.indexOf.call(
+          newActiveTab.parentElement.children,
+          newActiveTab
+        );
+        storageLayer.setItem(syncKey, tabIndex.toString());
+        document.dispatchEvent(constructCustomEvent(tabIndex, container.dataset.uniqueId));
+      }
+    };
+    const tabHeaders = tabContainer.querySelectorAll(".sui-tab-header");
+    for (const tab of tabHeaders) {
+      tab.addEventListener("click", (e) => switchTab(e.target, tabContainer));
+      tab.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          const activeTabIndex = Array.prototype.indexOf.call(tab.parentElement.children, tab);
+          const nextTabIndex = e.key === "ArrowLeft" ? activeTabIndex - 1 : activeTabIndex + 1;
+          if (nextTabIndex >= 0 && nextTabIndex < tab.parentElement.children.length) {
+            tab.tabIndex = -1;
+            const nextTab = tab.parentElement.children[nextTabIndex];
+            nextTab.tabIndex = 0;
+            nextTab.click();
+            nextTab.focus();
+          } else if (nextTabIndex < 0) {
+            tab.tabIndex = -1;
+            const lastTab = tab.parentElement.children[tab.parentElement.children.length - 1];
+            lastTab.tabIndex = 0;
+            lastTab.click();
+            lastTab.focus();
+          } else {
+            tab.tabIndex = -1;
+            const firstTab = tab.parentElement.children[0];
+            firstTab.tabIndex = 0;
+            firstTab.click();
+            firstTab.focus();
+          }
+        }
+      });
     }
-  };
-  const tabHeaders = tabContainer.querySelectorAll(".sui-tab-header");
-  for (const tab of tabHeaders) {
-    tab.addEventListener("click", (e) => switchTab(e.target, tabContainer));
-    tab.addEventListener("keydown", (e) => {
-      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-        const activeTabIndex = Array.prototype.indexOf.call(tab.parentElement.children, tab);
-        const nextTabIndex = e.key === "ArrowLeft" ? activeTabIndex - 1 : activeTabIndex + 1;
-        if (nextTabIndex >= 0 && nextTabIndex < tab.parentElement.children.length) {
-          tab.tabIndex = -1;
-          const nextTab = tab.parentElement.children[nextTabIndex];
-          nextTab.tabIndex = 0;
-          nextTab.click();
-          nextTab.focus();
-        } else if (nextTabIndex < 0) {
-          tab.tabIndex = -1;
-          const lastTab = tab.parentElement.children[tab.parentElement.children.length - 1];
-          lastTab.tabIndex = 0;
-          lastTab.click();
-          lastTab.focus();
-        } else {
-          tab.tabIndex = -1;
-          const firstTab = tab.parentElement.children[0];
-          firstTab.tabIndex = 0;
-          firstTab.click();
-          firstTab.focus();
+    if (syncKey) {
+      const activeTabIndex = storageLayer.getItem(syncKey);
+      if (activeTabIndex) {
+        const activeTab = tabContainer.querySelector(`#${syncKey}-${activeTabIndex}`);
+        if (activeTab) {
+          activeTab.click();
         }
       }
-    });
-  }
-  if (syncKey) {
-    const activeTabIndex = storageLayer.getItem(syncKey);
-    if (activeTabIndex) {
-      const activeTab = tabContainer.querySelector(`#${syncKey}-${activeTabIndex}`);
-      if (activeTab) {
-        activeTab.click();
-      }
+      document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
+        const event = e;
+        const { tabIndex, uniqueId } = event.detail;
+        if (uniqueId === tabContainer.dataset.uniqueId) return;
+        const newTab = tabContainer.querySelector(`#${syncKey}-${tabIndex}`);
+        switchTab(newTab, tabContainer, true);
+      });
     }
-    document.addEventListener(`sui-tab-switch:${syncKey}`, (e) => {
-      const event = e;
-      const { tabIndex, uniqueId } = event.detail;
-      if (uniqueId === tabContainer.dataset.uniqueId) return;
-      const newTab = tabContainer.querySelector(`#${syncKey}-${tabIndex}`);
-      switchTab(newTab, tabContainer, true);
-    });
   }
 }
+document.addEventListener("astro:page-load", loadTabs);

package/dist/components/Toggle/toggle.d.ts

@@ -1,2 +1 @@
-declare const allToggleElements: NodeListOf<HTMLDivElement>;
-declare const allToggles: NodeListOf<HTMLInputElement>;
+declare function loadToggles(): void;

package/dist/components/Toggle/toggle.js

@@ -1,20 +1,23 @@
-const allToggleElements = document.querySelectorAll(".sui-toggle-container");
-const allToggles = document.querySelectorAll(".sui-toggle-checkbox");
-for (const element of allToggleElements) {
-  if (element.dataset.initialized) continue;
-  element.dataset.initialized = "true";
-  element.addEventListener("keydown", (e) => {
-    if (e.key !== "Enter" && e.key !== " ") return;
-    e.preventDefault();
-    const checkbox = element.querySelector(".sui-toggle-checkbox");
-    if (!checkbox) return;
-    checkbox.click();
-  });
-}
-for (const box of allToggles) {
-  if (box.dataset.initialized) continue;
-  box.dataset.initialized = "true";
-  box.addEventListener("change", (e) => {
-    box.previousSibling.ariaChecked = e.target.checked ? "true" : "false";
-  });
+function loadToggles() {
+  const allToggleElements = document.querySelectorAll(".sui-toggle-container");
+  const allToggles = document.querySelectorAll(".sui-toggle-checkbox");
+  for (const element of allToggleElements) {
+    if (element.dataset.initialized) continue;
+    element.dataset.initialized = "true";
+    element.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      const checkbox = element.querySelector(".sui-toggle-checkbox");
+      if (!checkbox) return;
+      checkbox.click();
+    });
+  }
+  for (const box of allToggles) {
+    if (box.dataset.initialized) continue;
+    box.dataset.initialized = "true";
+    box.addEventListener("change", (e) => {
+      box.previousSibling.ariaChecked = e.target.checked ? "true" : "false";
+    });
+  }
 }
+document.addEventListener("astro:page-load", loadToggles);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",