@dogsbay/elements 0.2.0-beta.14 → 0.2.0-beta.141

package/dist/chunk-GC5HL7FU.js

@@ -0,0 +1,255 @@
+import {
+  isDisabled,
+  ownOne,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-combobox.ts
+var DbCombobox = class extends DogsbayElement {
+  input = null;
+  listbox = null;
+  empty = null;
+  _open = false;
+  highlighted = null;
+  observer = null;
+  base = uid("db-combobox");
+  optionSeq = 0;
+  get open() {
+    return this._open;
+  }
+  get inline() {
+    return this.hasAttribute("inline");
+  }
+  get filtering() {
+    return (this.getAttribute("filter") ?? "contains") !== "none";
+  }
+  /** All options, in order. Read live, so page-supplied results are always current. */
+  options() {
+    if (!this.listbox) return [];
+    return Array.from(this.listbox.querySelectorAll("[data-part='option']")).filter((o) => o.closest("db-combobox") === this);
+  }
+  visible() {
+    return this.options().filter((o) => !o.hidden && !isDisabled(o));
+  }
+  setup() {
+    this.input = ownOne(this, "[data-part='input']");
+    this.listbox = ownOne(this, "[data-part='listbox']");
+    this.empty = ownOne(this, "[data-part='empty']");
+    if (!this.input || !this.listbox) return;
+    const { input, listbox } = this;
+    listbox.id ||= `${this.base}-listbox`;
+    listbox.setAttribute("role", "listbox");
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-controls", listbox.id);
+    input.setAttribute("autocomplete", "off");
+    if (!this.inline) listbox.hidden = true;
+    this.prepareOptions();
+    this.syncExpanded();
+  }
+  prepareOptions() {
+    this.options().forEach((o) => {
+      o.id ||= `${this.base}-option-${++this.optionSeq}`;
+      o.setAttribute("role", "option");
+      if (!o.hasAttribute("aria-selected")) o.setAttribute("aria-selected", "false");
+      if (o.matches("a[href], button")) o.setAttribute("tabindex", "-1");
+      o.querySelectorAll("a, button").forEach((el) => el.setAttribute("tabindex", "-1"));
+      if (o.parentElement && o.parentElement !== this.listbox && o.parentElement.localName === "li" && !o.parentElement.hasAttribute("role")) {
+        o.parentElement.setAttribute("role", "none");
+      }
+    });
+  }
+  onInput = () => {
+    if (this.filtering) this.filter(this.input.value);
+    else this.show();
+  };
+  onFocus = () => {
+    if (this.hasAttribute("open-on-focus") || this.filtering && this.input.value) {
+      if (this.filtering) this.filter(this.input.value);
+      else this.show();
+    }
+  };
+  onKey = (e) => {
+    const vis = this.visible();
+    const cur = this.highlighted ? vis.indexOf(this.highlighted) : -1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!this._open) this.show();
+        if (vis.length) this.highlight(vis[cur < 0 ? 0 : Math.min(cur + 1, vis.length - 1)]);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!this._open) this.show();
+        if (vis.length) this.highlight(vis[cur < 0 ? vis.length - 1 : Math.max(cur - 1, 0)]);
+        break;
+      case "Home":
+      case "End":
+        if (this._open && this.highlighted && vis.length) {
+          e.preventDefault();
+          this.highlight(e.key === "Home" ? vis[0] : vis[vis.length - 1]);
+        }
+        break;
+      case "Enter":
+        if (this._open && this.highlighted) {
+          e.preventDefault();
+          this.choose(this.highlighted);
+        }
+        break;
+      case "Escape":
+        if (this._open && !this.inline) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.hide();
+        } else if (this.input.value) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.input.value = "";
+          this.input.dispatchEvent(new Event("input", { bubbles: true }));
+          this.hide();
+        }
+        break;
+      case "Tab":
+        if (!this.inline) this.hide();
+        break;
+    }
+  };
+  onListClick = (e) => {
+    const o = e.target.closest("[data-part='option']");
+    if (!o || o.closest("db-combobox") !== this || isDisabled(o)) return;
+    const link = e.target.closest("a[href]");
+    if (!this.choose(o, !link) && link) e.preventDefault();
+  };
+  onListPointer = (e) => {
+    const o = e.target.closest("[data-part='option']");
+    if (o && o.closest("db-combobox") === this && !isDisabled(o) && !o.hidden) this.highlight(o);
+  };
+  onListDown = (e) => e.preventDefault();
+  // keep focus in the input
+  onDocDown = (e) => {
+    if (this._open && !this.inline && !this.contains(e.target)) this.hide();
+  };
+  connect() {
+    const { input, listbox } = this;
+    if (!input || !listbox) return;
+    input.addEventListener("input", this.onInput);
+    input.addEventListener("focus", this.onFocus);
+    input.addEventListener("keydown", this.onKey);
+    listbox.addEventListener("click", this.onListClick);
+    listbox.addEventListener("pointermove", this.onListPointer);
+    listbox.addEventListener("mousedown", this.onListDown);
+    document.addEventListener("pointerdown", this.onDocDown);
+    if (typeof MutationObserver !== "undefined") {
+      this.observer = new MutationObserver(() => this.onOptionsChanged());
+      this.observer.observe(listbox, { childList: true, subtree: true });
+    }
+  }
+  disconnect() {
+    const { input, listbox } = this;
+    input?.removeEventListener("input", this.onInput);
+    input?.removeEventListener("focus", this.onFocus);
+    input?.removeEventListener("keydown", this.onKey);
+    listbox?.removeEventListener("click", this.onListClick);
+    listbox?.removeEventListener("pointermove", this.onListPointer);
+    listbox?.removeEventListener("mousedown", this.onListDown);
+    document.removeEventListener("pointerdown", this.onDocDown);
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+  /** Re-scan options after the page replaced them (filter="none"). */
+  refresh() {
+    this.onOptionsChanged();
+  }
+  onOptionsChanged() {
+    this.prepareOptions();
+    if (this.highlighted && !this.options().includes(this.highlighted)) this.clearHighlight();
+    const vis = this.visible();
+    if (!this.filtering) {
+      if (vis.length || this.inline) this.show();
+      else this.hide();
+      if (vis.length && !this.highlighted && !this.hasAttribute("no-autohighlight")) this.highlight(vis[0]);
+    }
+    this.syncExpanded();
+    this.dispatchEvent(new CustomEvent("db-combobox:update", { detail: { count: vis.length }, bubbles: true }));
+  }
+  filter(query) {
+    const q = query.toLowerCase().trim();
+    let count = 0;
+    for (const o of this.options()) {
+      const hit = !q || (o.textContent ?? "").toLowerCase().includes(q) || (o.dataset.value ?? "").toLowerCase().includes(q);
+      o.hidden = !hit;
+      if (hit) count++;
+    }
+    if (this.empty) this.empty.hidden = count > 0 || !q;
+    this.clearHighlight();
+    if (count || q && this.empty) this.show();
+    else this.hide();
+    const vis = this.visible();
+    if (vis.length && !this.hasAttribute("no-autohighlight")) this.highlight(vis[0]);
+    this.dispatchEvent(new CustomEvent("db-combobox:update", { detail: { count }, bubbles: true }));
+  }
+  syncExpanded() {
+    if (!this.input) return;
+    const expanded = this.inline ? this.visible().length > 0 : this._open;
+    this.input.setAttribute("aria-expanded", String(expanded));
+    this.setAttribute("data-state", expanded ? "open" : "closed");
+  }
+  show() {
+    if (!this.listbox || this._open) return this.syncExpanded();
+    this._open = true;
+    this.listbox.hidden = false;
+    this.syncExpanded();
+  }
+  hide() {
+    if (!this.listbox) return;
+    this.clearHighlight();
+    if (!this._open) return this.syncExpanded();
+    this._open = false;
+    if (!this.inline) this.listbox.hidden = true;
+    this.syncExpanded();
+  }
+  highlight(o) {
+    if (!this.input) return;
+    this.highlighted?.removeAttribute("data-highlighted");
+    this.highlighted?.setAttribute("aria-selected", "false");
+    this.highlighted = o;
+    o.setAttribute("data-highlighted", "");
+    o.setAttribute("aria-selected", "true");
+    this.input.setAttribute("aria-activedescendant", o.id);
+    o.scrollIntoView?.({ block: "nearest" });
+  }
+  clearHighlight() {
+    this.highlighted?.removeAttribute("data-highlighted");
+    this.highlighted?.setAttribute("aria-selected", "false");
+    this.highlighted = null;
+    this.input?.removeAttribute("aria-activedescendant");
+  }
+  /** Returns false when a `db-combobox:select` listener cancelled the choice. */
+  choose(o, followLink = true) {
+    const value = o.dataset.value ?? "";
+    const text = o.textContent?.trim() ?? value;
+    const ev = new CustomEvent("db-combobox:select", { detail: { value, text, option: o }, bubbles: true, cancelable: true });
+    if (!this.dispatchEvent(ev)) return false;
+    const link = o.matches("a[href]") ? o : o.querySelector("a[href]");
+    if (link) {
+      if (followLink) link.click();
+      return true;
+    }
+    if (this.input) this.input.value = o.getAttribute("data-label") ?? text;
+    if (!this.inline) this.hide();
+    this.dispatchEvent(new CustomEvent("db-combobox:change", { detail: { value, text }, bubbles: true }));
+    return true;
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-combobox")) {
+  customElements.define("db-combobox", DbCombobox);
+}
+
+export {
+  DbCombobox
+};

package/dist/chunk-HMNRE3FZ.js

@@ -0,0 +1,382 @@
+import {
+  hideFloating,
+  isDisabled,
+  own,
+  ownOne,
+  showFloating,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-select.ts
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { setupFloating } from "@dogsbay/primitives/floating";
+import { Typeahead } from "@dogsbay/primitives/typeahead";
+var DbSelect = class extends DogsbayElement {
+  trigger = null;
+  content = null;
+  valueEl = null;
+  items = [];
+  nativeSelect = null;
+  hiddenInput = null;
+  labelEl = null;
+  onLabelClick = (e) => {
+    if (e.target.closest("[data-part='trigger']")) return;
+    e.preventDefault();
+    this.trigger?.focus();
+  };
+  dismiss = null;
+  typeahead = null;
+  cleanupFloating = null;
+  _open = false;
+  _value = "";
+  highlighted = -1;
+  get open() {
+    return this._open;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    const item = this.items.find((i) => i.dataset.value === v);
+    if (item) this.select(item, false);
+  }
+  /** Disabled when the host or the enhanced native select is. */
+  get isDisabled() {
+    return this.hasAttribute("disabled") || !!this.nativeSelect?.disabled;
+  }
+  syncing = false;
+  /** Re-read the native select's value (after script changes it or a form reset). */
+  refresh() {
+    const sel = this.nativeSelect;
+    if (!sel) return;
+    const item = this.items.find((i) => i.dataset.value === sel.value);
+    if (item) this.select(item, false);
+    this.trigger?.setAttribute("aria-disabled", String(this.isDisabled));
+  }
+  onNativeChange = () => {
+    if (!this.syncing) this.refresh();
+  };
+  onFormReset = () => setTimeout(() => this.refresh());
+  enabled() {
+    return this.items.filter((i) => !isDisabled(i));
+  }
+  setup() {
+    this.nativeSelect = ownOne(this, "select");
+    if (this.nativeSelect && !ownOne(this, "[data-part='trigger']")) this.buildFromNative(this.nativeSelect);
+    this.trigger = ownOne(this, "[data-part='trigger']");
+    this.content = ownOne(this, "[data-part='content']");
+    this.valueEl = ownOne(this, "[data-part='value']");
+    if (!this.trigger || !this.content) return;
+    const { trigger, content } = this;
+    this.items = own(this, "[data-part='item']");
+    const base = uid("db-select");
+    content.id ||= `${base}-listbox`;
+    content.setAttribute("role", "listbox");
+    content.hidden = true;
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-controls", content.id);
+    if (trigger instanceof HTMLButtonElement && !trigger.hasAttribute("type")) trigger.type = "button";
+    if (this.isDisabled) trigger.setAttribute("aria-disabled", "true");
+    this.items.forEach((item, i) => {
+      item.id ||= `${base}-item-${i}`;
+      item.setAttribute("role", "option");
+      item.setAttribute("aria-selected", "false");
+    });
+    own(this, "[data-part='group']").forEach((group) => {
+      group.setAttribute("role", "group");
+      const label = group.querySelector("[data-part='label']");
+      if (label) {
+        label.id ||= uid("db-select-label");
+        group.setAttribute("aria-labelledby", label.id);
+      }
+    });
+    const name = this.getAttribute("name");
+    if (name && !this.nativeSelect) {
+      this.hiddenInput = document.createElement("input");
+      this.hiddenInput.type = "hidden";
+      this.hiddenInput.name = name;
+      if (this.hasAttribute("required")) this.hiddenInput.required = true;
+      this.appendChild(this.hiddenInput);
+    }
+    this.typeahead = new Typeahead({
+      getItemCount: () => this.enabled().length,
+      getItemText: (i) => this.enabled()[i]?.textContent?.trim() ?? "",
+      onMatch: (i) => {
+        const item = this.enabled()[i];
+        if (!item) return;
+        if (this._open) this.highlight(this.items.indexOf(item));
+        else this.select(item);
+      }
+    });
+    this.dismiss = new DismissController(content, { onDismiss: (reason) => this.close(reason !== "outside-press") });
+    const initial = this.nativeSelect?.value ?? this.getAttribute("default-value") ?? "";
+    const initialItem = this.items.find((i) => i.dataset.value === initial);
+    if (initialItem && isDisabled(initialItem)) {
+      if (this.valueEl) {
+        this.valueEl.textContent = initialItem.textContent?.trim() ?? "";
+        this.valueEl.setAttribute("data-placeholder", "");
+      }
+    } else if (initialItem) this.select(initialItem, false);
+    this.setState("closed");
+  }
+  /** Build the trigger and listbox from a native <select>, and hide it. */
+  buildFromNative(sel) {
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.setAttribute("data-part", "trigger");
+    trigger.className = "db-select-trigger";
+    const label = sel.getAttribute("aria-label");
+    let labelledBy = sel.getAttribute("aria-labelledby");
+    const forLabel = !labelledBy && sel.id ? document.querySelector(`label[for="${CSS.escape(sel.id)}"]`) : null;
+    if (forLabel) labelledBy = forLabel.id ||= uid("db-select-for");
+    if (label) trigger.setAttribute("aria-label", label);
+    if (labelledBy) trigger.setAttribute("aria-labelledby", labelledBy);
+    const wrap = sel.closest("label");
+    if (wrap) {
+      this.labelEl = wrap;
+      if (!label && !labelledBy) {
+        const text = Array.from(wrap.childNodes).filter((n) => !(n instanceof Element && (n === sel || n.contains(sel) || n.localName === "db-select"))).map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
+        if (text) trigger.setAttribute("aria-label", text);
+      }
+    } else if (forLabel) this.labelEl = forLabel;
+    const value = document.createElement("span");
+    value.setAttribute("data-part", "value");
+    value.className = "db-select-value";
+    const chevron = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    chevron.setAttribute("viewBox", "0 0 24 24");
+    chevron.setAttribute("aria-hidden", "true");
+    chevron.setAttribute("class", "db-select-chevron");
+    chevron.innerHTML = '<path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
+    trigger.append(value, chevron);
+    const list = document.createElement("div");
+    list.setAttribute("data-part", "content");
+    list.className = "db-select-content";
+    const addOption = (o, parent) => {
+      const item = document.createElement("div");
+      item.setAttribute("data-part", "item");
+      item.className = "db-select-item";
+      item.dataset.value = o.value;
+      for (const [k, v] of Object.entries(o.dataset)) if (v != null) item.dataset[k] = v;
+      if (o.disabled) item.setAttribute("aria-disabled", "true");
+      item.textContent = o.textContent ?? o.value;
+      parent.appendChild(item);
+    };
+    for (const child of Array.from(sel.children)) {
+      if (child instanceof HTMLOptGroupElement) {
+        const group = document.createElement("div");
+        group.setAttribute("data-part", "group");
+        const gl = document.createElement("div");
+        gl.setAttribute("data-part", "label");
+        gl.className = "db-select-label";
+        gl.textContent = child.label;
+        group.appendChild(gl);
+        for (const o of Array.from(child.children)) if (o instanceof HTMLOptionElement) addOption(o, group);
+        list.appendChild(group);
+      } else if (child instanceof HTMLOptionElement) {
+        addOption(child, list);
+      }
+    }
+    sel.hidden = true;
+    sel.tabIndex = -1;
+    sel.setAttribute("aria-hidden", "true");
+    this.append(trigger, list);
+  }
+  onTriggerClick = () => {
+    if (this.isDisabled) return;
+    if (this._open) this.close();
+    else this.show();
+  };
+  // Firefox fires click on keyup of Space even after keydown was cancelled; cancel it
+  // there too so Space does not toggle twice.
+  onTriggerKeyUp = (e) => {
+    if (e.key === " ") e.preventDefault();
+  };
+  onTriggerKey = (e) => {
+    if (this.isDisabled) return;
+    const enabled = this.enabled();
+    if (!this._open) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " " || e.altKey && e.key === "ArrowDown") {
+        e.preventDefault();
+        this.show();
+        if (e.key === "ArrowUp" && enabled.length) this.highlight(this.items.indexOf(enabled[enabled.length - 1]));
+      } else if (e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        this.show();
+        const t = e.key === "Home" ? enabled[0] : enabled[enabled.length - 1];
+        if (t) this.highlight(this.items.indexOf(t));
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        this.typeahead?.handle(e.key);
+      }
+      return;
+    }
+    if (!enabled.length) return;
+    const cur = this.highlighted >= 0 ? enabled.indexOf(this.items[this.highlighted]) : -1;
+    const go = (i) => {
+      e.preventDefault();
+      this.highlight(this.items.indexOf(enabled[i]));
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        return go(Math.min(cur + 1, enabled.length - 1));
+      case "ArrowUp":
+        if (e.altKey) {
+          e.preventDefault();
+          if (this.highlighted >= 0) this.select(this.items[this.highlighted]);
+          return this.close();
+        }
+        return go(Math.max(cur - 1, 0));
+      case "Home":
+        return go(0);
+      case "End":
+        return go(enabled.length - 1);
+      case "PageDown":
+        return go(Math.min(cur + 10, enabled.length - 1));
+      case "PageUp":
+        return go(Math.max(cur - 10, 0));
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (this.highlighted >= 0) this.select(this.items[this.highlighted]);
+        return this.close();
+      case "Tab":
+        if (this.highlighted >= 0) this.select(this.items[this.highlighted]);
+        return this.close(false);
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) this.typeahead?.handle(e.key);
+    }
+  };
+  onListClick = (e) => {
+    const item = e.target.closest("[data-part='item']");
+    if (!item || !this.items.includes(item) || isDisabled(item)) return;
+    this.select(item);
+    this.close();
+  };
+  onListPointer = (e) => {
+    const item = e.target.closest("[data-part='item']");
+    if (item && this.items.includes(item) && !isDisabled(item)) this.highlight(this.items.indexOf(item));
+  };
+  connect() {
+    this.trigger?.addEventListener("click", this.onTriggerClick);
+    this.trigger?.addEventListener("keydown", this.onTriggerKey);
+    this.trigger?.addEventListener("keyup", this.onTriggerKeyUp);
+    this.nativeSelect?.addEventListener("change", this.onNativeChange);
+    this.nativeSelect?.form?.addEventListener("reset", this.onFormReset);
+    this.labelEl?.addEventListener("click", this.onLabelClick);
+    this.content?.addEventListener("click", this.onListClick);
+    this.content?.addEventListener("pointermove", this.onListPointer);
+    this.content?.addEventListener("mousedown", this.preventBlur);
+  }
+  disconnect() {
+    this.trigger?.removeEventListener("click", this.onTriggerClick);
+    this.trigger?.removeEventListener("keydown", this.onTriggerKey);
+    this.trigger?.removeEventListener("keyup", this.onTriggerKeyUp);
+    this.nativeSelect?.removeEventListener("change", this.onNativeChange);
+    this.nativeSelect?.form?.removeEventListener("reset", this.onFormReset);
+    this.labelEl?.removeEventListener("click", this.onLabelClick);
+    this.content?.removeEventListener("click", this.onListClick);
+    this.content?.removeEventListener("pointermove", this.onListPointer);
+    this.content?.removeEventListener("mousedown", this.preventBlur);
+    if (this._open) this.close(false);
+  }
+  preventBlur = (e) => e.preventDefault();
+  setState(state) {
+    this.setAttribute("data-state", state);
+    this.content?.setAttribute("data-state", state);
+  }
+  show() {
+    const { trigger, content } = this;
+    if (!trigger || !content || this._open) return;
+    this._open = true;
+    const layer = showFloating(content);
+    this.setState("open");
+    trigger.setAttribute("aria-expanded", "true");
+    this.cleanupFloating = setupFloating(trigger, content, {
+      placement: "bottom-start",
+      offset: 4,
+      matchWidth: !this.hasAttribute("auto-width"),
+      strategy: layer === "top-layer" ? "fixed" : "absolute"
+    });
+    const selected = this.items.find((i) => i.dataset.value === this._value && !isDisabled(i));
+    const first = selected ?? this.enabled()[0];
+    if (first) this.highlight(this.items.indexOf(first));
+    this.dismiss?.activate();
+    this.typeahead?.reset();
+    trigger.focus();
+  }
+  /** Close the listbox. `refocus` is false for outside presses, which keep focus where the user clicked. */
+  close(refocus = true) {
+    const { trigger, content } = this;
+    if (!trigger || !content || !this._open) return;
+    this._open = false;
+    this.dismiss?.deactivate();
+    this.cleanupFloating?.();
+    this.cleanupFloating = null;
+    hideFloating(content);
+    this.setState("closed");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.removeAttribute("aria-activedescendant");
+    this.items.forEach((i) => i.removeAttribute("data-highlighted"));
+    this.highlighted = -1;
+    this.typeahead?.reset();
+    if (refocus) trigger.focus();
+  }
+  highlight(index) {
+    const item = this.items[index];
+    const content = this.content;
+    if (!item || !content || !this.trigger) return;
+    if (this.highlighted >= 0) this.items[this.highlighted]?.removeAttribute("data-highlighted");
+    this.highlighted = index;
+    item.setAttribute("data-highlighted", "");
+    this.trigger.setAttribute("aria-activedescendant", item.id);
+    const top = item.offsetTop;
+    const bottom = top + item.offsetHeight;
+    if (top < content.scrollTop) content.scrollTop = top;
+    else if (bottom > content.scrollTop + content.clientHeight) content.scrollTop = bottom - content.clientHeight;
+  }
+  select(item, notify = true) {
+    if (isDisabled(item)) return;
+    const value = item.dataset.value ?? "";
+    const changed = value !== this._value;
+    this._value = value;
+    for (const i of this.items) {
+      const on = i === item;
+      i.setAttribute("aria-selected", String(on));
+      if (on) i.setAttribute("data-state", "checked");
+      else i.removeAttribute("data-state");
+    }
+    if (this.valueEl) {
+      this.valueEl.textContent = item.textContent?.trim() ?? "";
+      this.valueEl.removeAttribute("data-placeholder");
+    }
+    if (this.hiddenInput) this.hiddenInput.value = value;
+    if (!notify || !changed) {
+      if (this.nativeSelect) this.nativeSelect.value = value;
+      return;
+    }
+    if (this.nativeSelect) {
+      this.nativeSelect.value = value;
+      this.syncing = true;
+      try {
+        this.nativeSelect.dispatchEvent(new Event("input", { bubbles: true }));
+        this.nativeSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      } finally {
+        this.syncing = false;
+      }
+    }
+    this.dispatchEvent(new CustomEvent("db-select:change", { detail: { value }, bubbles: true }));
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-select")) {
+  customElements.define("db-select", DbSelect);
+}
+
+export {
+  DbSelect
+};