@studiocms/ui 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/Button/button.css

@@ -267,7 +267,7 @@
     color: hsl(259, 84%, 45%);
   }
   .sui-button.success.flat {
-    background-color: var(--success-flat-base);
+    background-color: var(--success-flat);
     color: hsl(143, 59%, 20%);
   }
   .sui-button.success.flat:hover {
@@ -277,7 +277,7 @@
     background-color: var(--success-flat-active);
   }
   .sui-button.warning.flat {
-    background-color: var(--warning-flat-base);
+    background-color: var(--warning-flat);
     color: hsl(48, 78%, 20%);
   }
   .sui-button.warning.flat:hover {

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/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>