npm - ciderui - Versions diffs - 0.1.0 - Mend

ciderui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/README.md +106 -0
package/js/carousel.js +77 -0
package/js/combobox.js +125 -0
package/js/command.js +91 -0
package/js/context-menu.js +49 -0
package/js/dialog.js +18 -0
package/js/dropdown-menu.js +39 -0
package/js/otp.js +92 -0
package/js/popover.js +35 -0
package/js/select.js +56 -0
package/js/sheet.js +17 -0
package/js/tabs.js +34 -0
package/js/toast.js +60 -0
package/js/toggle.js +26 -0
package/package.json +53 -0
package/src/css/ciderui.cdn.css +11 -0
package/src/css/ciderui.css +324 -0
package/src/css/components/accordion.css +31 -0
package/src/css/components/alert.css +18 -0
package/src/css/components/aspect-ratio.css +7 -0
package/src/css/components/avatar.css +17 -0
package/src/css/components/badge.css +20 -0
package/src/css/components/breadcrumb.css +16 -0
package/src/css/components/button-group.css +20 -0
package/src/css/components/button.css +59 -0
package/src/css/components/card.css +37 -0
package/src/css/components/carousel.css +60 -0
package/src/css/components/checkbox.css +16 -0
package/src/css/components/collapsible.css +25 -0
package/src/css/components/combobox.css +69 -0
package/src/css/components/command.css +64 -0
package/src/css/components/context-menu.css +28 -0
package/src/css/components/dialog.css +23 -0
package/src/css/components/drawer.css +69 -0
package/src/css/components/dropdown-menu.css +28 -0
package/src/css/components/empty.css +12 -0
package/src/css/components/field.css +7 -0
package/src/css/components/file-tree.css +53 -0
package/src/css/components/form-controls.css +57 -0
package/src/css/components/form.css +15 -0
package/src/css/components/hover-card.css +25 -0
package/src/css/components/input-group.css +48 -0
package/src/css/components/input-otp.css +22 -0
package/src/css/components/item.css +43 -0
package/src/css/components/kbd.css +7 -0
package/src/css/components/label.css +4 -0
package/src/css/components/pagination.css +15 -0
package/src/css/components/popover.css +19 -0
package/src/css/components/progress.css +18 -0
package/src/css/components/radio.css +13 -0
package/src/css/components/scroll-area.css +24 -0
package/src/css/components/separator.css +19 -0
package/src/css/components/sheet.css +46 -0
package/src/css/components/sidebar.css +32 -0
package/src/css/components/skeleton.css +9 -0
package/src/css/components/slider.css +48 -0
package/src/css/components/spinner.css +12 -0
package/src/css/components/switch.css +28 -0
package/src/css/components/table.css +39 -0
package/src/css/components/tabs.css +44 -0
package/src/css/components/theme-switcher.css +17 -0
package/src/css/components/toast.css +22 -0
package/src/css/components/toggle.css +34 -0
package/src/css/components/tooltip.css +66 -0
package/src/css/components/typography.css +84 -0

package/README.md ADDED Viewed

@@ -0,0 +1,106 @@
+# Cider UI
+Apple-aesthetic UI components as a Tailwind CSS v4 plugin. Semantic class names like `btn`, `card`, `input` — no utility soup in your markup.
+## Install
+```bash
+npm install ciderui@github:newlix/ciderui
+```
+## Usage
+### Tailwind CSS v4 plugin
+```css
+/* your main CSS file */
+@import "tailwindcss";
+@import "ciderui";
+```
+```html
+<button class="btn">Click me</button>
+<button class="btn-destructive">Delete</button>
+<div class="card">
+  <header><h2>Title</h2></header>
+  <section>Content</section>
+</div>
+```
+### CDN
+For quick prototyping without a build step:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/dist/ciderui.cdn.min.css" />
+```
+## Components (27)
+| Component | Class | JS |
+|-----------|-------|----|
+| Button | `btn` `btn-primary` `btn-secondary` `btn-outline` `btn-ghost` `btn-destructive` `btn-pill` `btn-sm` `btn-lg` `btn-icon` | — |
+| Badge | `badge` `badge-primary` `badge-success` `badge-warning` `badge-destructive` `badge-outline` | — |
+| Card | `card` `card-interactive` (children: `header` `section` `footer`) | — |
+| Alert | `alert-info` `alert-success` `alert-warning` `alert-destructive` | — |
+| Input | `input` | — |
+| Textarea | `textarea` | — |
+| Select | `select` (native) | `js/select.js` (custom) |
+| Checkbox | `checkbox` | — |
+| Radio | `radio` | — |
+| Switch | `switch` | — |
+| Label | `label` | — |
+| Field | `field` (auto-styles children) | — |
+| Dialog | `dialog` (children: `header` `section` `footer`) | `js/dialog.js` (optional) |
+| Dropdown | `dropdown-menu` | `js/dropdown-menu.js` |
+| Tabs | `tabs` `tabs-list` `tabs-trigger` `tabs-content` `tabs-pill` | `js/tabs.js` |
+| Table | `table` `table-striped` | — |
+| Accordion | `accordion` (native `<details>`) | — |
+| Avatar | `avatar` `avatar-sm` `avatar-lg` `avatar-group` | — |
+| Breadcrumb | `breadcrumb` | — |
+| Button Group | `button-group` | — |
+| Kbd | `kbd` | — |
+| Pagination | `pagination` `pagination-item` | — |
+| Progress | `progress` > `.progress-bar` `progress-sm` `progress-indeterminate` | — |
+| Skeleton | `skeleton` `skeleton-circle` | — |
+| Slider | `slider` | — |
+| Spinner | `spinner` `spinner-sm` `spinner-lg` | — |
+| Toast | `toast` `toast-container` | `js/toast.js` |
+| Tooltip | `tooltip` `tooltip-content` `tooltip-bottom` | — |
+### ES Module / Bundler (Vite, Webpack, etc.)
+JS files work with bundlers. Import them as side effects in your entry file:
+```js
+import "ciderui/dialog.js";
+import "ciderui/tabs.js";
+import "ciderui/select.js";
+import "ciderui/toast.js";
+```
+## Dark Mode
+Add `class="dark"` to your `<html>` element. All components automatically adapt.
+```js
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
+```
+## Design Tokens
+CSS variables that you can override:
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--primary` | Apple Blue | Apple Blue |
+| `--background` | white | gray-950 |
+| `--foreground` | gray-900 | gray-100 |
+| `--border` | gray-200/60 | gray-800 |
+| `--radius` | 0.625rem | 0.625rem |
+| `--apple-press-scale` | 0.97 | 0.97 |
+## License
+MIT

package/js/carousel.js ADDED Viewed

@@ -0,0 +1,77 @@
+// Carousel — ciderui
+// Prev/next navigation + indicators for scroll-snap carousels.
+function init() {
+  document.querySelectorAll(".carousel").forEach((carousel) => {
+    const content = carousel.querySelector(".carousel-content");
+    const prevBtn = carousel.querySelector(".carousel-prev");
+    const nextBtn = carousel.querySelector(".carousel-next");
+    const indicators = carousel.querySelector(".carousel-indicators");
+    if (!content) return;
+    function getItems() {
+      return content.querySelectorAll(".carousel-item, .carousel-item-half, .carousel-item-third");
+    }
+    function getCurrentIndex() {
+      const items = getItems();
+      const scrollLeft = content.scrollLeft;
+      let closest = 0;
+      let minDist = Infinity;
+      items.forEach((item, i) => {
+        const dist = Math.abs(item.offsetLeft - scrollLeft);
+        if (dist < minDist) { minDist = dist; closest = i; }
+      });
+      return closest;
+    }
+    function scrollToIndex(index) {
+      const items = getItems();
+      if (index < 0 || index >= items.length) return;
+      content.scrollTo({ left: items[index].offsetLeft, behavior: "smooth" });
+    }
+    function updateState() {
+      const items = getItems();
+      const current = getCurrentIndex();
+      if (prevBtn) prevBtn.disabled = current === 0;
+      if (nextBtn) nextBtn.disabled = current >= items.length - 1;
+      if (indicators) {
+        indicators.querySelectorAll(".carousel-indicator").forEach((dot, i) => {
+          if (i === current) dot.setAttribute("data-active", "");
+          else dot.removeAttribute("data-active");
+        });
+      }
+    }
+    // Build indicators if container exists but is empty
+    if (indicators && !indicators.children.length) {
+      const items = getItems();
+      items.forEach((_, i) => {
+        const dot = document.createElement("button");
+        dot.className = "carousel-indicator";
+        dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
+        if (i === 0) dot.setAttribute("data-active", "");
+        dot.addEventListener("click", () => scrollToIndex(i));
+        indicators.appendChild(dot);
+      });
+    }
+    if (prevBtn) prevBtn.addEventListener("click", () => scrollToIndex(getCurrentIndex() - 1));
+    if (nextBtn) nextBtn.addEventListener("click", () => scrollToIndex(getCurrentIndex() + 1));
+    content.addEventListener("scroll", () => {
+      clearTimeout(content._scrollTimer);
+      content._scrollTimer = setTimeout(updateState, 50);
+    });
+    updateState();
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/js/combobox.js ADDED Viewed

@@ -0,0 +1,125 @@
+// Combobox — ciderui
+// Searchable select dropdown
+function init() {
+  document.querySelectorAll(".combobox").forEach((combobox) => {
+    const trigger = combobox.querySelector("button");
+    const content = combobox.querySelector("[data-combobox-content]");
+    const input = content ? content.querySelector("header input") : null;
+    const listbox = content ? content.querySelector("[role='listbox']") : null;
+    const valueDisplay = trigger ? trigger.querySelector("span") : null;
+    const hiddenInput = combobox.querySelector("input[type='hidden']");
+    if (!trigger || !content || !listbox) return;
+    const options = listbox.querySelectorAll("[role='option']");
+    const groups = listbox.querySelectorAll("[role='group']");
+    function open() {
+      combobox.setAttribute("data-open", "");
+      if (input) {
+        input.value = "";
+        input.dispatchEvent(new Event("input"));
+        requestAnimationFrame(() => input.focus());
+      }
+    }
+    function close() {
+      combobox.removeAttribute("data-open");
+    }
+    function isOpen() {
+      return combobox.hasAttribute("data-open");
+    }
+    // Toggle on trigger click
+    trigger.addEventListener("click", () => {
+      // Close all other comboboxes
+      document.querySelectorAll(".combobox[data-open]").forEach((el) => {
+        if (el !== combobox) el.removeAttribute("data-open");
+      });
+      if (isOpen()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    // Select an option
+    options.forEach((option) => {
+      option.addEventListener("click", () => {
+        const value = option.dataset.value || option.textContent.trim();
+        const text = option.textContent.trim();
+        // Update display
+        if (valueDisplay) {
+          valueDisplay.textContent = text;
+          valueDisplay.removeAttribute("data-placeholder");
+        }
+        // Update hidden input
+        if (hiddenInput) {
+          hiddenInput.value = value;
+        }
+        // Mark selected
+        options.forEach((o) => o.removeAttribute("data-selected"));
+        option.setAttribute("data-selected", "");
+        close();
+      });
+    });
+    // Search filtering
+    if (input) {
+      input.addEventListener("input", () => {
+        const query = input.value.toLowerCase().trim();
+        let anyVisible = false;
+        options.forEach((option) => {
+          const text = (option.dataset.value || option.textContent || "").toLowerCase();
+          const match = !query || text.includes(query);
+          option.hidden = !match;
+          if (match) anyVisible = true;
+        });
+        // Hide empty groups
+        groups.forEach((group) => {
+          const visibleOptions = group.querySelectorAll("[role='option']:not([hidden])");
+          const heading = group.querySelector("[role='heading']");
+          if (heading) heading.hidden = visibleOptions.length === 0;
+          group.hidden = visibleOptions.length === 0;
+        });
+        // Toggle empty state
+        if (listbox.hasAttribute("data-empty")) {
+          listbox.classList.toggle("combobox-empty", !anyVisible);
+        }
+      });
+    }
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+// Close on outside click
+document.addEventListener("click", (e) => {
+  if (!e.target.closest(".combobox")) {
+    document.querySelectorAll(".combobox[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});
+// Close on Escape
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    document.querySelectorAll(".combobox[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});

package/js/command.js ADDED Viewed

@@ -0,0 +1,91 @@
+// Command — ciderui
+// Handles search filtering in .command components
+function init() {
+  document.querySelectorAll(".command").forEach((command) => {
+    const input = command.querySelector("header input");
+    if (!input) return;
+    const menu = command.querySelector("[role='menu'], [role='listbox']");
+    if (!menu) return;
+    const items = menu.querySelectorAll("[role='menuitem'], [role='option']");
+    const groups = menu.querySelectorAll("[role='group']");
+    const separators = menu.querySelectorAll("hr[role='separator'], hr");
+    const emptyContainer = menu.hasAttribute("data-empty") ? menu : null;
+    input.addEventListener("input", () => {
+      const query = input.value.toLowerCase().trim();
+      let anyVisible = false;
+      items.forEach((item) => {
+        const text = (item.getAttribute("data-filter") || item.textContent || "").toLowerCase();
+        const match = !query || text.includes(query);
+        item.hidden = !match;
+        if (match) anyVisible = true;
+      });
+      // Hide groups that have no visible items
+      groups.forEach((group) => {
+        const visibleItems = group.querySelectorAll("[role='menuitem']:not([hidden]), [role='option']:not([hidden])");
+        const heading = group.querySelector("[role='heading']");
+        if (heading) heading.hidden = visibleItems.length === 0;
+        group.hidden = visibleItems.length === 0;
+      });
+      // Hide separators when filtering
+      separators.forEach((sep) => {
+        sep.hidden = !!query;
+      });
+      // Toggle empty message via CSS (data-empty::after shows when no items visible)
+      if (emptyContainer) {
+        emptyContainer.classList.toggle("command-empty", !anyVisible);
+      }
+    });
+  });
+  // Close command dialogs on backdrop click
+  document.querySelectorAll(".command-dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) {
+        dialog.close();
+      }
+    });
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+// Command dialog — keyboard shortcut (single listener for all dialogs)
+document.addEventListener("keydown", (e) => {
+  document.querySelectorAll(".command-dialog[data-shortcut]").forEach((dialog) => {
+    const parts = dialog.dataset.shortcut.toLowerCase().split("+");
+    const key = parts.pop();
+    const needsMeta = parts.includes("meta") || parts.includes("cmd");
+    const needsCtrl = parts.includes("ctrl");
+    const metaMatch = needsMeta ? (e.metaKey || e.ctrlKey) : true;
+    const ctrlMatch = needsCtrl ? e.ctrlKey : true;
+    if (metaMatch && ctrlMatch && e.key.toLowerCase() === key) {
+      e.preventDefault();
+      if (dialog.open) {
+        dialog.close();
+      } else {
+        dialog.showModal();
+        const input = dialog.querySelector("header input");
+        if (input) {
+          input.value = "";
+          input.dispatchEvent(new Event("input"));
+          input.focus();
+        }
+      }
+    }
+  });
+});

package/js/context-menu.js ADDED Viewed

@@ -0,0 +1,49 @@
+// Context Menu — ciderui
+// Right-click triggered menu, reuses dropdown-menu styling.
+document.addEventListener("contextmenu", (e) => {
+  const trigger = e.target.closest(".context-menu-trigger");
+  if (!trigger) return;
+  e.preventDefault();
+  // Close all context menus first
+  document.querySelectorAll(".context-menu-content[data-open]").forEach((el) => {
+    el.removeAttribute("data-open");
+  });
+  const menu = trigger.querySelector(".context-menu-content") ||
+               trigger.nextElementSibling;
+  if (!menu || !menu.classList.contains("context-menu-content")) return;
+  // Position at cursor
+  menu.style.left = e.clientX + "px";
+  menu.style.top = e.clientY + "px";
+  menu.setAttribute("data-open", "");
+  // Adjust if overflowing viewport
+  requestAnimationFrame(() => {
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      menu.style.left = (e.clientX - rect.width) + "px";
+    }
+    if (rect.bottom > window.innerHeight) {
+      menu.style.top = (e.clientY - rect.height) + "px";
+    }
+  });
+});
+// Close on click anywhere
+document.addEventListener("click", () => {
+  document.querySelectorAll(".context-menu-content[data-open]").forEach((el) => {
+    el.removeAttribute("data-open");
+  });
+});
+// Close on Escape
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    document.querySelectorAll(".context-menu-content[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});

package/js/dialog.js ADDED Viewed

@@ -0,0 +1,18 @@
+// Dialog — ciderui
+// Uses native <dialog> element — no JS needed for basic open/close.
+// This script adds backdrop-click-to-close behavior.
+function init() {
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) {
+        dialog.close();
+      }
+    });
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/js/dropdown-menu.js ADDED Viewed

@@ -0,0 +1,39 @@
+// Dropdown Menu — ciderui
+document.addEventListener("click", (e) => {
+  const trigger = e.target.closest("[data-dropdown-trigger]");
+  if (trigger) {
+    const dropdown = trigger.closest("[data-dropdown]");
+    const content = dropdown.querySelector("[data-dropdown-content]");
+    const isOpen = content.hasAttribute("data-open");
+    // Close all other dropdowns
+    document.querySelectorAll("[data-dropdown-content][data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+    if (!isOpen) {
+      content.setAttribute("data-open", "");
+    }
+    return;
+  }
+  // Close if clicking an item inside the dropdown
+  if (e.target.closest("[data-dropdown-content] button")) {
+    e.target.closest("[data-dropdown-content]").removeAttribute("data-open");
+    return;
+  }
+  // Close all dropdowns on outside click
+  document.querySelectorAll("[data-dropdown-content][data-open]").forEach((el) => {
+    el.removeAttribute("data-open");
+  });
+});
+// Close on Escape
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    document.querySelectorAll("[data-dropdown-content][data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});

package/js/otp.js ADDED Viewed

@@ -0,0 +1,92 @@
+// Input OTP — ciderui
+// Manages hidden input, auto-advance, backspace, paste for OTP slots.
+function init() {
+  document.querySelectorAll(".input-otp").forEach((otp) => {
+    const slots = otp.querySelectorAll(".input-otp-slot");
+    if (!slots.length) return;
+    // Create hidden input for the full value
+    let hidden = otp.querySelector("input[type=hidden]");
+    if (!hidden) {
+      hidden = document.createElement("input");
+      hidden.type = "hidden";
+      hidden.name = otp.dataset.name || "otp";
+      otp.appendChild(hidden);
+    }
+    function syncValue() {
+      hidden.value = Array.from(slots).map((s) => s.textContent.trim()).join("");
+      // Update active state
+      slots.forEach((s) => s.removeAttribute("data-active"));
+    }
+    function focusSlot(index) {
+      if (index >= 0 && index < slots.length) {
+        slots[index].focus();
+        slots.forEach((s) => s.removeAttribute("data-active"));
+        slots[index].setAttribute("data-active", "");
+      }
+    }
+    slots.forEach((slot, i) => {
+      slot.setAttribute("tabindex", "0");
+      slot.setAttribute("role", "textbox");
+      slot.setAttribute("aria-label", `Digit ${i + 1}`);
+      slot.addEventListener("focus", () => {
+        slots.forEach((s) => s.removeAttribute("data-active"));
+        slot.setAttribute("data-active", "");
+      });
+      slot.addEventListener("blur", () => {
+        slot.removeAttribute("data-active");
+      });
+      slot.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace") {
+          e.preventDefault();
+          if (slot.textContent.trim()) {
+            slot.textContent = "";
+            syncValue();
+          } else if (i > 0) {
+            slots[i - 1].textContent = "";
+            focusSlot(i - 1);
+            syncValue();
+          }
+          return;
+        }
+        if (e.key === "ArrowLeft") { e.preventDefault(); focusSlot(i - 1); return; }
+        if (e.key === "ArrowRight") { e.preventDefault(); focusSlot(i + 1); return; }
+        if (e.key.length === 1 && /\d/.test(e.key)) {
+          e.preventDefault();
+          slot.textContent = e.key;
+          syncValue();
+          focusSlot(i + 1);
+        }
+      });
+      slot.addEventListener("paste", (e) => {
+        e.preventDefault();
+        const text = (e.clipboardData || window.clipboardData).getData("text").replace(/\D/g, "");
+        for (let j = 0; j < text.length && i + j < slots.length; j++) {
+          slots[i + j].textContent = text[j];
+        }
+        syncValue();
+        focusSlot(Math.min(i + text.length, slots.length - 1));
+      });
+    });
+    // Click the container focuses the first empty slot
+    otp.addEventListener("click", (e) => {
+      if (e.target.closest(".input-otp-slot")) return;
+      const firstEmpty = Array.from(slots).findIndex((s) => !s.textContent.trim());
+      focusSlot(firstEmpty >= 0 ? firstEmpty : slots.length - 1);
+    });
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/js/popover.js ADDED Viewed

@@ -0,0 +1,35 @@
+// Popover — ciderui
+document.addEventListener("click", (e) => {
+  const trigger = e.target.closest("[data-popover-trigger]");
+  if (trigger) {
+    const popover = trigger.closest("[data-popover]");
+    const content = popover.querySelector(".popover-content");
+    const isOpen = content.hasAttribute("data-open");
+    // Close all other popovers
+    document.querySelectorAll(".popover-content[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+    if (!isOpen) {
+      content.setAttribute("data-open", "");
+    }
+    return;
+  }
+  // Close all popovers on outside click
+  if (!e.target.closest(".popover-content")) {
+    document.querySelectorAll(".popover-content[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});
+// Close on Escape
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    document.querySelectorAll(".popover-content[data-open]").forEach((el) => {
+      el.removeAttribute("data-open");
+    });
+  }
+});

package/js/select.js ADDED Viewed

@@ -0,0 +1,56 @@
+// Custom Select — ciderui
+function init() {
+  document.querySelectorAll("[data-select]").forEach((select) => {
+    const trigger = select.querySelector("[data-select-trigger]");
+    const content = select.querySelector("[data-select-content]");
+    const valueEl = select.querySelector("[data-select-value]");
+    const items = select.querySelectorAll("[data-select-item]");
+    trigger.addEventListener("click", () => {
+      const isOpen = !content.classList.contains("hidden");
+      // Close all other selects
+      document.querySelectorAll("[data-select-content]").forEach((el) => {
+        el.classList.add("hidden");
+      });
+      if (!isOpen) {
+        content.classList.remove("hidden");
+      }
+    });
+    items.forEach((item) => {
+      item.addEventListener("click", () => {
+        valueEl.textContent = item.textContent;
+        valueEl.removeAttribute("data-placeholder");
+        content.classList.add("hidden");
+        // Mark selected
+        items.forEach((i) => i.removeAttribute("data-selected"));
+        item.setAttribute("data-selected", "");
+      });
+    });
+  });
+}
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+// Close on outside click
+document.addEventListener("click", (e) => {
+  if (!e.target.closest("[data-select]")) {
+    document.querySelectorAll("[data-select-content]").forEach((el) => {
+      el.classList.add("hidden");
+    });
+  }
+});
+// Close on Escape
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    document.querySelectorAll("[data-select-content]").forEach((el) => {
+      el.classList.add("hidden");
+    });
+  }
+});