@studiocms/ui 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/components/Input/input.css

@@ -45,6 +45,7 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  color: var(--text-muted);
 }
 .input-icon.icon-left {
   left: 0.5rem;

package/dist/components/Modal/modal.css

@@ -8,6 +8,7 @@
   margin: auto;
   z-index: 50;
   max-width: calc(100% - 4rem);
+  background-color: var(--background-base);
 }
 .sui-modal.sm {
   width: 384px;

package/dist/components/SearchSelect/SearchSelect.astro

@@ -132,7 +132,7 @@ const defaultLabel = selected
 	: placeholder;
 ---
 
-<div
+<sui-combobox
 	id={`${name}-container`}
 	class="sui-search-select-label"
 	class:list={[disabled && "disabled", className, fullWidth && "full"]}
@@ -222,7 +222,7 @@ const defaultLabel = selected
 			</div>
 		)
 	}
-</div>
+</sui-combobox>
 <script>
 import "studiocms:ui/scripts/searchselect"
 </script>

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

@@ -1,19 +1 @@
-type SearchSelectOption = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-};
-type SearchSelectContainer = HTMLDivElement & {
-    input: HTMLInputElement | null;
-    dropdown: Element | null;
-    select: HTMLSelectElement | null;
-};
-type SearchSelectState = {
-    optionsMap: Record<string, SelectOption[]>;
-    isMultipleMap: Record<string, boolean>;
-    selectedOptionsMap: Record<string, string[]>;
-    placeholderMap: Record<string, string>;
-    focusIndex: number;
-    isSelectingOption: boolean;
-};
-declare function loadSearchSelects(): void;
+export {};

package/dist/components/SearchSelect/searchselect.js

@@ -1,50 +1,50 @@
-function loadSearchSelects() {
-  const CONSTANTS = {
-    OPTION_HEIGHT: 36,
-    BORDER_SIZE: 2,
-    MARGIN: 4,
-    BADGE_PADDING: 80
-  };
-  const getDropdownPosition = (input, optionsCount) => {
-    const rect = input.getBoundingClientRect();
-    const dropdownHeight = optionsCount * CONSTANTS.OPTION_HEIGHT + CONSTANTS.BORDER_SIZE + CONSTANTS.MARGIN;
-    const customRect = {
-      top: rect.bottom + CONSTANTS.MARGIN,
-      bottom: rect.bottom + CONSTANTS.MARGIN + dropdownHeight,
-      left: rect.left,
-      right: rect.right,
-      width: rect.width,
-      x: rect.x,
-      y: rect.y + rect.height + CONSTANTS.MARGIN,
-      height: dropdownHeight
-    };
-    return {
-      isAbove: customRect.top >= 0 && customRect.left >= 0 && customRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && customRect.right <= (window.innerWidth || document.documentElement.clientWidth),
-      customRect
-    };
+import { SUISelectElement } from "studiocms:ui/components/select/script";
+class SUIComboboxElement extends SUISelectElement {
+  input;
+  state = {
+    options: [],
+    isMultiple: false,
+    focusIndex: -1,
+    placeholder: "",
+    selectedOptions: [],
+    isSelectingOption: false
   };
-  const createSelectBadge = (value, label) => {
-    const badge = document.createElement("span");
-    badge.classList.add(
-      "sui-badge",
-      "primary",
-      "sm",
-      "outlined",
-      "full",
-      "sui-search-select-badge"
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.input = this.querySelector("input");
+    this.dropdown = this.querySelector(".sui-search-select-dropdown-list");
+    const selectedOptions = Array.from(
+      this.dropdown?.querySelectorAll(".sui-search-select-option.selected") ?? []
     );
-    badge.setAttribute("data-value", value);
-    badge.innerHTML = `${label} <svg style='min-width: 8px' xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' role="button" tabindex="0"><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M6 6l12 12'></path></svg>`;
+    this.state.placeholder = this.input?.placeholder ?? "";
+    this.state.options = JSON.parse(this.dataset.options ?? "{}");
+    this.state.isMultiple = this.dataset.multiple === "true";
+    this.state.selectedOptions = selectedOptions.map((x) => x.getAttribute("data-value") ?? "");
+    this.input?.addEventListener("focusin", () => this.handleContainerFocusIn());
+    this.addEventListener("focusout", () => this.handleContainerFocusOut());
+    this.addEventListener("keydown", (e) => this.handleSelectKeyDown(e));
+    this.input?.addEventListener("keyup", (e) => this.handleInputKeyup(e));
+    this.addEventListener("mousedown", (e) => this.handleContainerMouseDown(e));
+    if (this.state.isMultiple) {
+      this.recalculateBadges();
+    }
+  }
+  createSearchSelectBadge = (value, label) => {
+    const badge = this.createSelectBadge(value, label);
+    badge.classList.remove("sui-select-badge");
+    badge.classList.add("sui-search-select-badge");
     return badge;
   };
-  const recalculateBadges = (state2, container) => {
-    const badgeContainer = container.querySelector(".sui-search-select-badge-container");
-    if (!badgeContainer || !container.input) return;
+  recalculateBadges = () => {
+    const badgeContainer = this.querySelector(".sui-search-select-badge-container");
+    if (!badgeContainer || !this.input) return;
     badgeContainer.innerHTML = "";
-    const selectedValues = state2.selectedOptionsMap[container.dataset.id] || [];
-    const allOptions = state2.optionsMap[container.dataset.id] || [];
+    const selectedValues = this.state.selectedOptions;
+    const allOptions = this.state.options;
     if (selectedValues.length === 0) {
-      container.input.placeholder = state2.placeholderMap[container.dataset.id] ?? "";
+      this.input.placeholder = this.state.placeholder ?? "";
       return;
     }
     for (const value of selectedValues.sort((a, b) => {
@@ -54,46 +54,44 @@ function loadSearchSelects() {
     })) {
       const option = allOptions.find((opt) => opt.value === value);
       if (option) {
-        const newBadge = createSelectBadge(value, option.label);
+        const newBadge = this.createSearchSelectBadge(value, option.label);
         badgeContainer.appendChild(newBadge);
       }
     }
   };
-  const updateLabel = (isMultiple, state2, container) => {
-    const selectedInput = container?.input;
-    if (isMultiple) {
-      recalculateBadges(state2, container);
+  updateLabel = () => {
+    const selectedInput = this.input;
+    if (this.state.isMultiple) {
+      this.recalculateBadges();
       if (selectedInput) {
-        selectedInput.placeholder = state2.placeholderMap[container.dataset.id] ?? "";
+        selectedInput.placeholder = this.state.placeholder;
       }
     } else {
-      const selected = container.querySelector(
-        ".sui-search-select-option.selected"
-      );
+      const selected = this.querySelector(".sui-search-select-option.selected");
       if (selected && selectedInput) {
         selectedInput.placeholder = selected.innerText.trim();
       }
     }
   };
-  const updateOptionSelection = (value, container, state2, forceState) => {
-    const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+  updateOptionSelection = (value, forceState) => {
+    const currentSelected = this.state.selectedOptions;
     const isCurrentlySelected = currentSelected.includes(value);
-    const max = Number.parseInt(container.dataset.multipleMax, 10);
+    const max = Number.parseInt(this.dataset.multipleMax, 10);
     if (!isCurrentlySelected && !Number.isNaN(max) && currentSelected.length >= max) {
       return false;
     }
     const newSelected = isCurrentlySelected ? currentSelected.filter((v) => v !== value) : [...currentSelected, value];
-    state2.selectedOptionsMap[container.dataset.id] = newSelected;
-    const option = container.dropdown?.querySelector(
+    this.state.selectedOptions = newSelected;
+    const option = this.dropdown?.querySelector(
       `.sui-search-select-option[data-value='${value}']`
     );
     if (option) {
       option.classList.toggle("selected", forceState ?? !isCurrentlySelected);
-      if (container?.select) {
-        container.select.value = option.getAttribute("value");
+      if (this.select) {
+        this.select.value = option.getAttribute("value");
       }
     }
-    const selectedCountEl = container.querySelector(
+    const selectedCountEl = this.querySelector(
       ".sui-search-select-max-span .sui-search-select-select-count"
     );
     if (selectedCountEl) {
@@ -101,29 +99,29 @@ function loadSearchSelects() {
     }
     return true;
   };
-  const toggleMultiOption = (id, container, state2) => {
-    const success = updateOptionSelection(id, container, state2);
+  toggleMultiOption = (id) => {
+    const success = this.updateOptionSelection(id);
     if (success) {
-      recalculateBadges(state2, container);
+      this.recalculateBadges();
     }
   };
-  const recomputeOptions = (state2, container) => {
-    const optionElements = container?.dropdown?.querySelectorAll(
+  recomputeOptions = () => {
+    const optionElements = this.dropdown?.querySelectorAll(
       ".sui-search-select-option"
     );
     for (const entry of optionElements) {
-      if (Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex) {
+      if (Number.parseInt(entry.dataset.optionIndex, 10) === this.state.focusIndex) {
         entry.classList.add("focused");
       } else {
         entry.classList.remove("focused");
       }
     }
   };
-  const reconstructOptions = (filteredOptions, state2, container) => {
-    container.dropdown.innerHTML = "";
-    const selectedValues = state2.selectedOptionsMap[container.dataset.id] || [];
+  reconstructOptions = (filteredOptions) => {
+    this.dropdown.innerHTML = "";
+    const selectedValues = this.state.selectedOptions;
     if (filteredOptions.length === 0) {
-      container.dropdown.innerHTML = '<li class="empty-search-results">No results found</li>';
+      this.dropdown.innerHTML = '<li class="empty-search-results">No results found</li>';
       return;
     }
     let i = 0;
@@ -140,101 +138,101 @@ function loadSearchSelects() {
       element.dataset.optionIndex = i.toString();
       element.dataset.value = option.value;
       element.textContent = option.label;
-      container.dropdown?.appendChild(element);
+      this.dropdown?.appendChild(element);
       i++;
     }
   };
-  const getInteractiveOptions = (container) => {
-    const allOptions = container?.dropdown?.querySelectorAll(
+  getInteractiveOptions = () => {
+    const allOptions = this.dropdown?.querySelectorAll(
       ".sui-search-select-option"
     );
     return Array.from(allOptions).filter(
       (option) => !option.classList.contains("hidden") && !option.classList.contains("disabled") && !option.hasAttribute("disabled")
     );
   };
-  const handleContainerMouseDown = (e, state2, container) => {
+  handleContainerMouseDown = (e) => {
     const target = e.target;
     if (!target.closest("input")) {
       e.preventDefault();
     }
-    if (container.input?.value.length === 0) {
-      reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
+    if (this.input?.value.length === 0) {
+      this.reconstructOptions(this.state.options);
     }
     if (target.closest(".sui-search-select-indicator")) {
-      if (container.dropdown?.parentElement?.classList.contains("active")) {
-        container.dropdown?.parentElement?.classList.remove("active", "above");
-        container.input?.blur();
-        container.input.value = "";
+      if (this.dropdown?.parentElement?.classList.contains("active")) {
+        this.dropdown?.parentElement?.classList.remove("active", "above");
+        this.input?.blur();
+        this.input.value = "";
       } else {
-        container.dropdown?.parentElement?.classList.add("active");
-        container.input?.focus();
-        container.input.value = "";
+        this.dropdown?.parentElement?.classList.add("active");
+        this.input?.focus();
+        this.input.value = "";
       }
       return;
     }
     if (target.closest(".sui-search-select-badge-container")) {
-      container.dropdown?.parentElement?.classList.remove("active", "above");
-      container.input?.blur();
-      container.input.value = "";
+      this.dropdown?.parentElement?.classList.remove("active", "above");
+      this.input?.blur();
+      this.input.value = "";
     }
-    state2.isSelectingOption = true;
+    this.state.isSelectingOption = true;
     setTimeout(() => {
-      state2.isSelectingOption = false;
+      this.state.isSelectingOption = false;
     }, 0);
     if (target.closest(".sui-search-select-badge svg")) {
       const value = target.closest(".sui-search-select-badge")?.getAttribute("data-value");
-      const success = updateOptionSelection(value, container, state2);
+      const success = this.updateOptionSelection(value);
       if (success) {
-        recalculateBadges(state2, container);
+        this.recalculateBadges();
       }
       return;
     }
     const opt = target.closest(".sui-search-select-option");
     if (!opt?.dataset.value) return;
     if (opt.classList.contains("disabled") || opt.hasAttribute("disabled")) {
-      container.input?.focus();
+      this.input?.focus();
       return;
     }
-    const isMultiple = state2.isMultipleMap[container.dataset.id];
+    const isMultiple = this.state.isMultiple;
     if (isMultiple) {
-      const success = updateOptionSelection(opt.dataset.value, container, state2);
+      const success = this.updateOptionSelection(opt.dataset.value);
       if (success) {
-        updateLabel(true, state2, container);
-        recalculateBadges(state2, container);
+        this.updateLabel();
+        this.recalculateBadges();
       }
     } else {
-      const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+      const currentSelected = this.state.selectedOptions;
       for (const value of currentSelected) {
-        updateOptionSelection(value, container, state2, false);
+        this.updateOptionSelection(value, false);
       }
-      updateOptionSelection(opt.dataset.value, container, state2, true);
-      updateLabel(false, state2, container);
-      container.dropdown?.parentElement?.classList.remove("active", "above");
-      container.input?.blur();
-      container.input.value = "";
+      this.updateOptionSelection(opt.dataset.value, true);
+      this.updateLabel();
+      this.dropdown?.parentElement?.classList.remove("active", "above");
+      this.input?.blur();
+      this.input.value = "";
     }
   };
-  const handleSelectKeyDown = (e, state2, container) => {
+  handleSelectKeyDown = (e) => {
     const focusedElement = document.activeElement;
     if (e.key === "Escape" || e.key === "Tab") {
-      container.input?.blur();
-      container.dropdown?.parentElement?.classList.remove("active", "above");
+      this.input?.blur();
+      this.dropdown?.parentElement?.classList.remove("active", "above");
       return;
     }
     if ((e.key === "Enter" || e.key === " ") && focusedElement?.tagName.toLowerCase() === "svg") {
       const badgeElement = focusedElement?.closest(".sui-search-select-badge");
-      if (badgeElement && state2.isMultipleMap[container?.dataset.id]) {
+      if (badgeElement && this.state.isMultiple) {
         const badgeValue = badgeElement.getAttribute("data-value");
         let nextBadge = badgeElement.previousElementSibling;
         if (!nextBadge) {
           nextBadge = badgeElement.nextElementSibling;
         }
         const nextBadgeValue = nextBadge?.getAttribute("data-value");
-        toggleMultiOption(badgeValue, container, state2);
-        recalculateBadges(state2, container);
+        this.toggleMultiOption(badgeValue);
+        this.recalculateBadges();
         setTimeout(() => {
           if (nextBadgeValue) {
-            const badgeToFocus = container?.querySelector(
+            const badgeToFocus = this.querySelector(
               `.sui-search-select-badge[data-value="${nextBadgeValue}"] svg`
             );
             if (badgeToFocus) {
@@ -247,150 +245,98 @@ function loadSearchSelects() {
         return;
       }
     }
-    const interactiveOptions = getInteractiveOptions(container);
+    const interactiveOptions = this.getInteractiveOptions();
     const currentInteractiveIndex = interactiveOptions.findIndex(
       (option) => option.classList.contains("focused")
     );
     if (e.key === "ArrowUp" && currentInteractiveIndex > 0) {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-search-select-option") || []
       ).indexOf(interactiveOptions[currentInteractiveIndex - 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
       return;
     }
     if (e.key === "ArrowDown" && currentInteractiveIndex < interactiveOptions.length - 1) {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-search-select-option") || []
       ).indexOf(interactiveOptions[currentInteractiveIndex + 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
       return;
     }
     if (e.key === "PageUp") {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-search-select-option") || []
       ).indexOf(interactiveOptions[0]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
       return;
     }
     if (e.key === "PageDown") {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-search-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-search-select-option") || []
       ).indexOf(interactiveOptions[interactiveOptions.length - 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
       return;
     }
     if (e.key === "Enter") {
       e.preventDefault();
       e.stopImmediatePropagation();
-      const optionElements = container?.dropdown?.querySelectorAll(
+      const optionElements = this.dropdown?.querySelectorAll(
         ".sui-search-select-option"
       );
       const focusedOption = Array.from(optionElements).find(
-        (entry) => Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex
+        (entry) => Number.parseInt(entry.dataset.optionIndex, 10) === this.state.focusIndex
       );
       if (focusedOption && !focusedOption.classList.contains("disabled") && !focusedOption.hasAttribute("disabled")) {
         const value = focusedOption.dataset.value;
         if (!value) return;
-        const isMultiple = state2.isMultipleMap[container.dataset.id];
+        const isMultiple = this.state.isMultiple;
         if (isMultiple) {
-          const success = updateOptionSelection(value, container, state2);
+          const success = this.updateOptionSelection(value);
           if (success) {
-            updateLabel(true, state2, container);
-            recalculateBadges(state2, container);
+            this.updateLabel();
+            this.recalculateBadges();
           }
         } else {
-          const currentSelected = state2.selectedOptionsMap[container.dataset.id] || [];
+          const currentSelected = this.state.selectedOptions;
           for (const existingValue of currentSelected) {
-            updateOptionSelection(existingValue, container, state2, false);
+            this.updateOptionSelection(existingValue, false);
           }
-          updateOptionSelection(value, container, state2, true);
-          updateLabel(false, state2, container);
-          container.dropdown?.parentElement?.classList.remove("active", "above");
-          container.input.value = "";
+          this.updateOptionSelection(value, true);
+          this.updateLabel();
+          this.dropdown?.parentElement?.classList.remove("active", "above");
+          this.input.value = "";
         }
       }
       return;
     }
   };
-  const handleInputKeyup = (e, state2, container) => {
+  handleInputKeyup = (e) => {
     if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
-    const value = container.input.value.trim().toLowerCase();
-    const allOptions = state2.optionsMap[container.dataset.id];
+    const value = this.input.value.trim().toLowerCase();
+    const allOptions = this.state.options;
     if (value.length === 0) {
-      reconstructOptions(allOptions, state2, container);
+      this.reconstructOptions(allOptions);
       return;
     }
-    const filteredOptions = allOptions?.filter((option) => option.label.toLowerCase().includes(value)) ?? [];
-    state2.focusIndex = 0;
-    reconstructOptions(filteredOptions, state2, container);
+    const filteredOptions = allOptions.filter((option) => option.label.toLowerCase().includes(value)) ?? [];
+    this.state.focusIndex = 0;
+    this.reconstructOptions(filteredOptions);
   };
-  const handleContainerFocusOut = (state2, container) => {
-    if (state2.isSelectingOption) return;
-    container.input.value = "";
-    reconstructOptions(state2.optionsMap[container.dataset.id] ?? [], state2, container);
-    container.dropdown?.parentElement?.classList.remove("active", "above");
+  handleContainerFocusOut = () => {
+    if (this.state.isSelectingOption) return;
+    this.input.value = "";
+    this.reconstructOptions(this.state.options);
+    this.dropdown?.parentElement?.classList.remove("active", "above");
   };
-  const handleContainerFocusIn = (state2, container) => {
+  handleContainerFocusIn = () => {
     const allDropdowns = document.querySelectorAll(".sui-search-select-dropdown-list");
     for (const dropdown of allDropdowns) {
-      if (dropdown !== container.dropdown) {
+      if (dropdown !== this.dropdown) {
         dropdown.parentElement?.classList.remove("active", "above");
       }
     }
-    const { isAbove } = getDropdownPosition(
-      container.input,
-      state2.optionsMap[container.dataset.id]?.length ?? 0
-    );
-    container.dropdown?.parentElement?.classList.add("active", ...isAbove ? [] : ["above"]);
-  };
-  const state = {
-    optionsMap: {},
-    isMultipleMap: {},
-    placeholderMap: {},
-    selectedOptionsMap: {},
-    focusIndex: 0,
-    isSelectingOption: false
+    const { isAbove } = this.getDropdownPosition(this.input);
+    this.dropdown?.parentElement?.classList.add("active", ...isAbove ? [] : ["above"]);
   };
-  const selects = document.querySelectorAll(".sui-search-select-label");
-  for (const container of selects) {
-    if (container.dataset.initialized === "true") continue;
-    const id = container.dataset.id;
-    const specialContainer = Object.assign(container, {
-      input: container.querySelector("input"),
-      dropdown: container.querySelector(".sui-search-select-dropdown-list"),
-      select: container.querySelector("select")
-    });
-    const selectedOptions = Array.from(
-      specialContainer.dropdown?.querySelectorAll(".sui-search-select-option.selected") ?? []
-    );
-    state.placeholderMap[id] = specialContainer.input?.placeholder ?? "";
-    state.optionsMap[id] = JSON.parse(container.dataset.options ?? "{}");
-    state.isMultipleMap[id] = container.dataset.multiple === "true";
-    state.selectedOptionsMap[id] = selectedOptions.map((x) => x.getAttribute("data-value") ?? "");
-    specialContainer.input?.addEventListener(
-      "focusin",
-      () => handleContainerFocusIn(state, specialContainer)
-    );
-    specialContainer.addEventListener(
-      "focusout",
-      () => handleContainerFocusOut(state, specialContainer)
-    );
-    specialContainer.addEventListener(
-      "keydown",
-      (e) => handleSelectKeyDown(e, state, specialContainer)
-    );
-    specialContainer.input?.addEventListener(
-      "keyup",
-      (e) => handleInputKeyup(e, state, specialContainer)
-    );
-    specialContainer.addEventListener(
-      "mousedown",
-      (e) => handleContainerMouseDown(e, state, specialContainer)
-    );
-    if (state.isMultipleMap[id]) {
-      recalculateBadges(state, specialContainer);
-    }
-    container.dataset.initialized = "true";
-  }
 }
-document.addEventListener("astro:page-load", loadSearchSelects);
+customElements.define("sui-combobox", SUIComboboxElement);

package/dist/components/Select/Select.astro

@@ -131,14 +131,13 @@ const defaultLabel = selected
 	: placeholder;
 ---
 
-<div
+<sui-select
 	id={`${name}-container`}
 	class="sui-select-label"
 	class:list={[disabled && "disabled", className, fullWidth && "full"]}
 	data-options={JSON.stringify(options)}
 	data-multiple={multiple ? "true" : undefined}
 	data-multiple-max={multiple && max !== undefined ? max : undefined}
-	data-id={name}
 >
 	{label && (
 		<label class="label" for={`${name}-select-btn`}>
@@ -200,7 +199,7 @@ const defaultLabel = selected
 				const isSelected = Array.isArray(selected)
 					? selected.map((y) => y && y.value).includes(x.value)
 					: selected?.value === x.value;
-					
+
 				return (
 					<option
 						value={x.value}
@@ -219,11 +218,11 @@ const defaultLabel = selected
 		</span>
 	)}
 	{
-		multiple && Array.isArray(selected ?? []) && (		
+		multiple && Array.isArray(selected ?? []) && (
 			<div class="sui-select-badge-container-below"></div>
 		)
 	}
-</div>
+</sui-select>
 <script>
 import "studiocms:ui/scripts/select"
 </script>

package/dist/components/Select/select.d.ts

@@ -1,18 +1,59 @@
-type SelectOption = {
+export type SelectOption = {
     value: string;
     label: string;
     disabled?: boolean;
 };
-type SelectContainer = HTMLDivElement & {
-    button: HTMLButtonElement | null;
-    dropdown: HTMLUListElement | null;
-    select: HTMLSelectElement | null;
-};
-type SelectState = {
-    optionsMap: Record<string, SelectOption[]>;
-    isMultipleMap: Record<string, boolean>;
+interface SelectState {
+    options: SelectOption[];
+    isMultiple: boolean;
     focusIndex: number;
     placeholder: string;
-};
+}
 type ResizeCallback = (width: number, height: number, element: Element) => void;
-declare function loadSelects(): void;
+export declare class SUISelectElement extends HTMLElement {
+    readonly CONSTANTS: {
+        OPTION_HEIGHT: number;
+        BORDER_SIZE: number;
+        MARGIN: number;
+        BADGE_PADDING: number;
+    };
+    observerMap: WeakMap<Element, {
+        observer: ResizeObserver;
+        callback: ResizeCallback;
+    }>;
+    state: SelectState;
+    button: HTMLButtonElement | undefined;
+    dropdown: HTMLDivElement | undefined;
+    select: HTMLSelectElement | undefined;
+    constructor();
+    connectedCallback(): void;
+    private observeResize;
+    private unobserveResize;
+    private isVisible;
+    getDropdownPosition: (element: HTMLElement) => {
+        isAbove: boolean;
+        customRect: {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+            width: number;
+            x: number;
+            y: number;
+            height: number;
+        };
+    };
+    private closeDropdown;
+    private openDropdown;
+    createSelectBadge: (value: string, label: string) => HTMLSpanElement;
+    private measureBadgesWidth;
+    private handleBadgeOverflow;
+    updateLabel: () => void;
+    private deselectMultiOption;
+    recomputeOptions: () => void;
+    getInteractiveOptions: () => HTMLLIElement[];
+    private handleOptionSelect;
+    private handleContainerClick;
+    handleSelectKeyDown: (e: KeyboardEvent) => void;
+}
+export {};

package/dist/components/Select/select.js

@@ -1,14 +1,50 @@
-function loadSelects() {
-  const CONSTANTS = {
+class SUISelectElement extends HTMLElement {
+  CONSTANTS = {
     OPTION_HEIGHT: 36,
     BORDER_SIZE: 2,
     MARGIN: 4,
     BADGE_PADDING: 80
   };
-  const observerMap = /* @__PURE__ */ new WeakMap();
-  function observeResize(element, callback) {
-    if (observerMap.has(element)) {
-      unobserveResize(element);
+  observerMap = /* @__PURE__ */ new WeakMap();
+  state = {
+    options: [],
+    isMultiple: false,
+    focusIndex: -1,
+    placeholder: ""
+  };
+  button;
+  dropdown;
+  select;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.button = this.querySelector(".sui-select-button");
+    this.dropdown = this.querySelector(".sui-select-dropdown");
+    this.select = this.querySelector("select");
+    document.addEventListener("click", ({ target }) => {
+      if (this.dropdown?.classList.contains("active") || !target) {
+        return;
+      }
+      if (!this.contains(target) && this.isVisible(this)) {
+        this.closeDropdown();
+      }
+    });
+    this.state.placeholder = this.button?.querySelector(".sui-select-value-span")?.innerText ?? "";
+    this.state.options = JSON.parse(this.dataset.options);
+    this.state.isMultiple = this.dataset.multiple === "true";
+    this.addEventListener("click", (e) => this.handleContainerClick(e));
+    this.addEventListener("keydown", (e) => this.handleSelectKeyDown(e));
+    if (this.state.isMultiple) {
+      this.observeResize(this.button, () => {
+        this.handleBadgeOverflow();
+      });
+      this.handleBadgeOverflow();
+    }
+  }
+  observeResize = (element, callback) => {
+    if (this.observerMap.has(element)) {
+      this.unobserveResize(element);
     }
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -17,28 +53,30 @@ function loadSelects() {
       }
     });
     observer.observe(element);
-    observerMap.set(element, { observer, callback });
-    return () => unobserveResize(element);
-  }
-  function unobserveResize(element) {
-    const data = observerMap.get(element);
+    this.observerMap.set(element, { observer, callback });
+    return () => this.unobserveResize(element);
+  };
+  unobserveResize = (element) => {
+    const data = this.observerMap.get(element);
     if (data) {
       data.observer.disconnect();
-      observerMap.delete(element);
+      this.observerMap.delete(element);
     }
-  }
-  const isVisible = (elem) => elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0;
-  const getDropdownPosition = (button, optionsCount) => {
-    const rect = button.getBoundingClientRect();
-    const dropdownHeight = optionsCount * CONSTANTS.OPTION_HEIGHT + CONSTANTS.BORDER_SIZE + CONSTANTS.MARGIN;
+  };
+  isVisible = (elem) => elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0;
+  getDropdownPosition = (element) => {
+    const rect = element.getBoundingClientRect();
+    const optionsCount = this.state.options?.length ?? 0;
+    const { OPTION_HEIGHT, BORDER_SIZE, MARGIN } = this.CONSTANTS;
+    const dropdownHeight = optionsCount * OPTION_HEIGHT + BORDER_SIZE + MARGIN;
     const customRect = {
-      top: rect.bottom + CONSTANTS.MARGIN,
-      bottom: rect.bottom + CONSTANTS.MARGIN + dropdownHeight,
+      top: rect.bottom + MARGIN,
+      bottom: rect.bottom + MARGIN + dropdownHeight,
       left: rect.left,
       right: rect.right,
       width: rect.width,
       x: rect.x,
-      y: rect.y + rect.height + CONSTANTS.MARGIN,
+      y: rect.y + rect.height + this.CONSTANTS.MARGIN,
       height: dropdownHeight
     };
     return {
@@ -46,35 +84,32 @@ function loadSelects() {
       customRect
     };
   };
-  const closeDropdown = (container) => {
-    if (!container?.button || !container?.dropdown) return;
-    container.dropdown.classList.remove("active", "above");
-    container.button.ariaExpanded = "false";
+  closeDropdown = () => {
+    if (!this?.button || !this?.dropdown) return;
+    this.dropdown.classList.remove("active", "above");
+    this.button.ariaExpanded = "false";
   };
-  const openDropdown = (state2, container) => {
-    if (!container?.button || !container?.dropdown) return;
-    const { isAbove } = getDropdownPosition(
-      container.button,
-      state2.optionsMap[container.dataset.id]?.length ?? 0
-    );
-    container.button.ariaExpanded = "true";
-    container.dropdown.classList.add("active", ...isAbove ? [] : ["above"]);
+  openDropdown = () => {
+    if (!this.button || !this.dropdown) return;
+    const { isAbove } = this.getDropdownPosition(this.button);
+    this.button.ariaExpanded = "true";
+    this.dropdown.classList.add("active", ...isAbove ? [] : ["above"]);
   };
-  const createSelectBadge = (value, label) => {
+  createSelectBadge = (value, label) => {
     const badge = document.createElement("span");
     badge.classList.add("sui-badge", "primary", "sm", "outlined", "full", "sui-select-badge");
     badge.setAttribute("data-value", value);
     badge.innerHTML = `${label} <svg style='min-width: 8px' xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 18L18 6M6 6l12 12'></path></svg>`;
     return badge;
   };
-  const measureBadgesWidth = (activeSelects) => {
+  measureBadgesWidth = (activeSelects) => {
     const tempContainer = document.createElement("div");
     tempContainer.classList.add("sui-select-badge-container");
     tempContainer.style.position = "absolute";
     tempContainer.style.visibility = "hidden";
     document.body.appendChild(tempContainer);
     const badges = Array.from(activeSelects).map(
-      (select) => createSelectBadge(
+      (select) => this.createSelectBadge(
         select.getAttribute("value") ?? "",
         select.innerText.trim()
       )
@@ -88,26 +123,24 @@ function loadSelects() {
     }, 0);
     return { totalWidth, badges, tempContainer };
   };
-  const handleBadgeOverflow = (state2, container) => {
-    const buttonContainer = container?.button?.parentElement?.parentElement;
-    const buttonValueSpan = container?.button?.querySelector(
-      ".sui-select-value-span"
-    );
-    const activeSelects = container?.dropdown?.querySelectorAll(".sui-select-option.selected");
-    const overflowContainer = container?.querySelector(".sui-select-badge-container-below");
-    if (!buttonContainer || !overflowContainer || !container?.button || !activeSelects) return;
+  handleBadgeOverflow = () => {
+    const buttonContainer = this.button?.parentElement?.parentElement;
+    const buttonValueSpan = this.button?.querySelector(".sui-select-value-span");
+    const activeSelects = this.dropdown?.querySelectorAll(".sui-select-option.selected");
+    const overflowContainer = this.querySelector(".sui-select-badge-container-below");
+    if (!buttonContainer || !overflowContainer || !this.button || !activeSelects) return;
     const parentContainer = buttonContainer.parentElement;
     if (!parentContainer) return;
     overflowContainer.innerHTML = "";
     buttonValueSpan.innerHTML = "";
     if (activeSelects.length === 0) {
-      buttonValueSpan.innerText = state2.placeholder;
+      buttonValueSpan.innerText = this.state.placeholder;
       return;
     }
-    const { totalWidth, badges, tempContainer } = measureBadgesWidth(activeSelects);
+    const { totalWidth, badges, tempContainer } = this.measureBadgesWidth(activeSelects);
     const parentStyles = window.getComputedStyle(parentContainer);
     const availableWidth = parentContainer.clientWidth - (Number.parseFloat(parentStyles.paddingLeft) || 0) - (Number.parseFloat(parentStyles.paddingRight) || 0);
-    const effectiveAvailableWidth = availableWidth - CONSTANTS.BADGE_PADDING;
+    const effectiveAvailableWidth = availableWidth - this.CONSTANTS.BADGE_PADDING;
     document.body.removeChild(tempContainer);
     const finalBadgeContainer = document.createElement("div");
     finalBadgeContainer.classList.add("sui-select-badge-container");
@@ -121,13 +154,12 @@ function loadSelects() {
       buttonValueSpan.appendChild(finalBadgeContainer);
     }
   };
-  const updateLabel = (state2, container) => {
-    const isMultiple = state2.isMultipleMap[container?.dataset.id];
-    if (isMultiple) {
-      handleBadgeOverflow(state2, container);
+  updateLabel = () => {
+    if (this.state.isMultiple) {
+      this.handleBadgeOverflow();
     } else {
-      const selected = container?.querySelector(".sui-select-option.selected");
-      const selectedButtonSpan = container?.button?.querySelector(
+      const selected = this.querySelector(".sui-select-option.selected");
+      const selectedButtonSpan = this.button?.querySelector(
         ".sui-select-value-span"
       );
       if (selected && selectedButtonSpan) {
@@ -135,19 +167,19 @@ function loadSelects() {
       }
     }
   };
-  const deselectMultiOption = (state2, id, container) => {
-    const selectOpt = container?.dropdown?.querySelector(
+  deselectMultiOption = (id) => {
+    const selectOpt = this.dropdown?.querySelector(
       `.sui-select-option[value='${id}']`
     );
-    const max = Number.parseInt(container?.dataset.multipleMax, 10);
-    const selectedCount = container?.querySelectorAll(".sui-select-option.selected").length ?? 0;
-    const selectedCountEl = container?.querySelector(
+    const max = Number.parseInt(this.dataset.multipleMax, 10);
+    const selectedCount = this.querySelectorAll(".sui-select-option.selected").length ?? 0;
+    const selectedCountEl = this.querySelector(
       ".sui-select-max-span .sui-select-select-count"
     );
     const isSelected = selectOpt?.classList.contains("selected");
     if (selectOpt && (isSelected || Number.isNaN(max) || selectedCount < max)) {
       selectOpt.classList.toggle("selected");
-      const selectOptEl = container?.select?.querySelector(
+      const selectOptEl = this.select?.querySelector(
         `option[value='${selectOpt.getAttribute("value")}']`
       );
       if (selectOptEl) {
@@ -156,99 +188,97 @@ function loadSelects() {
       if (selectedCountEl) {
         selectedCountEl.innerText = String(selectedCount + (isSelected ? -1 : 1));
       }
-      updateLabel(state2, container);
+      this.updateLabel();
     }
   };
-  const recomputeOptions = (state2, container) => {
-    const optionElements = container?.dropdown?.querySelectorAll(
+  recomputeOptions = () => {
+    const optionElements = this.dropdown?.querySelectorAll(
       ".sui-select-option"
     );
     for (const entry of optionElements) {
-      if (Number.parseInt(entry.dataset.optionIndex, 10) === state2.focusIndex) {
+      if (Number.parseInt(entry.dataset.optionIndex, 10) === this.state.focusIndex) {
         entry.classList.add("focused");
       } else {
         entry.classList.remove("focused");
       }
     }
   };
-  const getInteractiveOptions = (container) => {
-    const allOptions = container?.dropdown?.querySelectorAll(
+  getInteractiveOptions = () => {
+    const allOptions = this.dropdown?.querySelectorAll(
       ".sui-select-option"
     );
     return Array.from(allOptions).filter(
       (option) => !option.classList.contains("hidden") && !option.classList.contains("disabled") && !option.hasAttribute("disabled")
     );
   };
-  const handleOptionSelect = (target, state2, container) => {
+  handleOptionSelect = (target) => {
     const option = target.closest(".sui-select-option");
-    const lastActive = container?.dropdown?.querySelector(".sui-select-option.selected");
-    const isMultiple = state2.isMultipleMap[container.dataset.id];
+    const lastActive = this.dropdown?.querySelector(".sui-select-option.selected");
+    const isMultiple = this.state.isMultiple;
     if (isMultiple) {
-      deselectMultiOption(state2, option?.getAttribute("value"), container);
+      this.deselectMultiOption(option?.getAttribute("value"));
     } else {
       if (lastActive) {
         lastActive.classList.remove("selected");
       }
       if (option) {
         option.classList.add("selected");
-        if (container?.select) {
-          container.select.value = option.getAttribute("value");
+        if (this.select) {
+          this.select.value = option.getAttribute("value");
         }
-        updateLabel(state2, container);
+        this.updateLabel();
       }
-      closeDropdown(container);
+      this.closeDropdown();
     }
   };
-  const handleContainerClick = (e, state2, container) => {
+  handleContainerClick = (e) => {
     const target = e.target;
     if (target.closest(".sui-select-badge svg")) {
-      deselectMultiOption(
-        state2,
-        target.closest(".sui-select-badge")?.getAttribute("data-value"),
-        container
+      this.deselectMultiOption(
+        target.closest(".sui-select-badge")?.getAttribute("data-value")
       );
-      handleBadgeOverflow(state2, container);
+      this.handleBadgeOverflow();
     }
     if (target.closest(".sui-select-button")) {
-      const container2 = target.closest(".sui-select-label");
-      if (container2.dropdown?.classList.contains("active")) {
-        closeDropdown(container2);
+      const container = target.closest(".sui-select-label");
+      if (container.dropdown?.classList.contains("active")) {
+        this.closeDropdown();
       } else {
-        openDropdown(state2, container2);
+        this.openDropdown();
       }
     }
     if (target.closest(".sui-select-dropdown.active")) {
-      handleOptionSelect(target, state2, container);
+      this.handleOptionSelect(target);
     }
   };
-  const handleSelectKeyDown = (e, state2, container) => {
-    const active = !!container.dropdown?.classList.contains("active");
+  handleSelectKeyDown = (e) => {
+    const active = !!this.dropdown?.classList.contains("active");
     const focusedElement = document.activeElement;
     if (e.key === "Tab" || e.key === "Escape") {
-      closeDropdown(container);
+      this.closeDropdown();
       return;
     }
     if ((e.key === "Enter" || e.key === " ") && focusedElement?.tagName.toLowerCase() === "svg") {
       const badgeElement = focusedElement?.closest(".sui-select-badge");
-      if (badgeElement && state2.isMultipleMap[container?.dataset.id]) {
+      if (badgeElement && this.state.isMultiple) {
         const badgeValue = badgeElement.getAttribute("data-value");
         let nextBadge = badgeElement.previousElementSibling;
         if (!nextBadge) {
           nextBadge = badgeElement.nextElementSibling;
         }
         const nextBadgeValue = nextBadge?.getAttribute("data-value");
-        deselectMultiOption(state2, badgeValue, container);
-        handleBadgeOverflow(state2, container);
+        this.deselectMultiOption(badgeValue);
+        this.handleBadgeOverflow();
         setTimeout(() => {
           if (nextBadgeValue) {
-            const badgeToFocus = container?.querySelector(
+            const badgeToFocus = this.querySelector(
               `.sui-select-badge[data-value="${nextBadgeValue}"] svg`
             );
             if (badgeToFocus) {
               badgeToFocus.focus();
             }
           } else {
-            container?.button?.focus();
+            this.button?.focus();
           }
         }, 0);
         e.preventDefault();
@@ -257,13 +287,13 @@ function loadSelects() {
       }
     }
     if ((e.key === " " || e.key === "Enter") && !active) {
-      openDropdown(state2, container);
+      this.openDropdown();
       e.preventDefault();
       e.stopImmediatePropagation();
       return;
     }
     if (e.key === "Enter" && active) {
-      const currentlyFocused = container?.querySelector(".sui-select-option.focused");
+      const currentlyFocused = this.querySelector(".sui-select-option.focused");
       if (currentlyFocused) {
         currentlyFocused.click();
         e.preventDefault();
@@ -273,77 +303,37 @@ function loadSelects() {
     }
     e.preventDefault();
     e.stopImmediatePropagation();
-    const interactiveOptions = getInteractiveOptions(container);
+    const interactiveOptions = this.getInteractiveOptions();
     const currentInteractiveIndex = interactiveOptions.findIndex(
       (option) => option.classList.contains("focused")
     );
     if (e.key === "ArrowUp" && currentInteractiveIndex > 0) {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-select-option") || []
       ).indexOf(interactiveOptions[currentInteractiveIndex - 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
     }
     if (e.key === "ArrowDown" && currentInteractiveIndex < interactiveOptions.length - 1) {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-select-option") || []
       ).indexOf(interactiveOptions[currentInteractiveIndex + 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
     }
     if (e.key === "PageUp") {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-select-option") || []
       ).indexOf(interactiveOptions[0]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
     }
     if (e.key === "PageDown") {
-      state2.focusIndex = Array.from(
-        container?.dropdown?.querySelectorAll(".sui-select-option") || []
+      this.state.focusIndex = Array.from(
+        this.dropdown?.querySelectorAll(".sui-select-option") || []
       ).indexOf(interactiveOptions[interactiveOptions.length - 1]);
-      recomputeOptions(state2, container);
+      this.recomputeOptions();
     }
   };
-  const state = {
-    optionsMap: {},
-    isMultipleMap: {},
-    focusIndex: -1,
-    placeholder: ""
-  };
-  const selects = document.querySelectorAll(".sui-select-label");
-  document.addEventListener("click", ({ target }) => {
-    for (const container of selects) {
-      if (!container.dropdown?.classList.contains("active") || !target)
-        continue;
-      if (!container.contains(target) && isVisible(container)) {
-        closeDropdown(container);
-      }
-    }
-  });
-  for (const container of selects) {
-    if (container.dataset.initialized === "true") continue;
-    const id = container.dataset.id;
-    const specialContainer = Object.assign(container, {
-      button: container.querySelector("button"),
-      dropdown: container.querySelector(".sui-select-dropdown"),
-      select: container.querySelector("select")
-    });
-    state.placeholder = specialContainer.button?.querySelector(".sui-select-value-span")?.innerText ?? "";
-    state.optionsMap[id] = JSON.parse(container.dataset.options);
-    state.isMultipleMap[id] = container.dataset.multiple === "true";
-    specialContainer.addEventListener(
-      "click",
-      (e) => handleContainerClick(e, state, specialContainer)
-    );
-    specialContainer.addEventListener(
-      "keydown",
-      (e) => handleSelectKeyDown(e, state, specialContainer)
-    );
-    if (state.isMultipleMap[id]) {
-      observeResize(specialContainer.button, () => {
-        handleBadgeOverflow(state, specialContainer);
-      });
-      handleBadgeOverflow(state, specialContainer);
-    }
-    container.dataset.initialized = "true";
-  }
 }
-document.addEventListener("astro:page-load", loadSelects);
+customElements.define("sui-select", SUISelectElement);
+export {
+  SUISelectElement
+};

package/dist/index.js

@@ -133,6 +133,9 @@ function integration(options = {}) {
             "studiocms:ui/scripts/tooltip": `import '${resolve("./components/Tooltip/tooltip.js")}';`,
             "studiocms:ui/scripts/accordion": `import '${resolve("./components/Accordion/accordion.js")}';`,
             "studiocms:ui/scripts/progress": `import '${resolve("./components/Progress/progress.js")}';`,
+            "studiocms:ui/components/select/script": `
+							export { SUISelectElement } from '${resolve("./components/Select/select.js")}';
+						`,
             // Components
             ...virtualComponents,
             "studiocms:ui/utils": `

package/dist/utils/headers.d.ts

@@ -80,7 +80,7 @@ export declare function sortHead(head: HeadConfig): {
     content: string;
 }[];
 /** Get the relative importance of a specific head tag. */
-export declare function getImportance(entry: HeadConfig[number]): 0 | 100 | 80 | 90 | 70;
+export declare function getImportance(entry: HeadConfig[number]): 0 | 80 | 100 | 90 | 70;
 /** Create a fully parsed, merged, and sorted head entry array from multiple sources. */
 export declare function createHead(defaultHeaders: HeadUserConfig, ...heads: HeadConfig[]): {
     tag: "link" | "base" | "meta" | "noscript" | "script" | "style" | "template" | "title";

package/dist/virtuals.d.ts

@@ -116,6 +116,16 @@ declare module 'studiocms:ui/components/select' {
 	export const SearchSelect: typeof import('./components/SearchSelect/SearchSelect.astro').default;
 }
 
+declare module 'studiocms:ui/components/select/script' {
+	export type SelectOption = {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	};
+
+	export const SUISelectElement: typeof import('./components/Select/select.js').SUISelectElement;
+}
+
 declare module 'studiocms:ui/components/dropdown' {
 	export const Dropdown: typeof import('./components/Dropdown/Dropdown.astro').default;
 }

package/package.json

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