@md-plugins/search-ui 0.1.0-rc.9

package/dist/index.mjs

@@ -0,0 +1,991 @@
+const whitespaceRE = /\s+/g;
+const htmlTagRE = /<[^>]+>/g;
+const markdownImageRE = /!\[([^\]]*)\]\([^)]*\)/g;
+const markdownLinkRE = /\[([^\]]+)\]\([^)]*\)/g;
+const markdownReferenceLinkRE = /\[([^\]]+)\]\[[^\]]*\]/g;
+const markdownInlineCodeRE = /`([^`]+)`/g;
+const markdownStrongRE = /(\*\*|__)(.*?)\1/g;
+const markdownEmphasisRE = /(\*|_)(.*?)\1/g;
+const markdownStrikeRE = /~~(.*?)~~/g;
+const markdownHeadingMarkerRE = /^#{1,6}\s+/gm;
+const markdownBlockquoteMarkerRE = /^>\s?/gm;
+const markdownListMarkerRE = /^\s*(?:[-*+]|\d+\.)\s+/gm;
+const markdownReferenceDefinitionRE = /^\[[^\]]+\]:\s+\S+.*$/gm;
+const spaceBeforePunctuationRE = /\s+([,.;:!?])/g;
+function stripMarkdownSyntax(value) {
+  return value.replace(markdownReferenceDefinitionRE, " ").replace(markdownImageRE, "$1").replace(markdownLinkRE, "$1").replace(markdownReferenceLinkRE, "$1").replace(markdownInlineCodeRE, "$1").replace(markdownStrongRE, "$2").replace(markdownEmphasisRE, "$2").replace(markdownStrikeRE, "$1").replace(markdownHeadingMarkerRE, " ").replace(markdownBlockquoteMarkerRE, " ").replace(markdownListMarkerRE, " ").replace(htmlTagRE, " ").replaceAll("|", " ").replace(spaceBeforePunctuationRE, "$1");
+}
+function normalizeSearchQuery(value) {
+  return value.toLocaleLowerCase().replace(whitespaceRE, " ").trim();
+}
+function createSearchTerms(query) {
+  return Array.from(new Set(normalizeSearchQuery(query).split(" ").filter(Boolean)));
+}
+function normalizeSearchableText(value) {
+  return stripMarkdownSyntax(String(value ?? "")).toLocaleLowerCase().replace(whitespaceRE, " ").trim();
+}
+function createSearchSnippet(content, terms, length = 140) {
+  const normalizedContent = stripMarkdownSyntax(content).replace(whitespaceRE, " ").trim();
+  if (normalizedContent.length <= length) {
+    return normalizedContent;
+  }
+  const lowerContent = normalizedContent.toLocaleLowerCase();
+  const firstMatch = terms.map((term) => lowerContent.indexOf(term)).filter((index) => index >= 0).sort((a, b) => a - b)[0];
+  if (firstMatch === void 0) {
+    return `${normalizedContent.slice(0, length - 1).trim()}\u2026`;
+  }
+  const start = Math.max(firstMatch - Math.floor(length / 3), 0);
+  const end = Math.min(start + length, normalizedContent.length);
+  const prefix = start > 0 ? "\u2026" : "";
+  const suffix = end < normalizedContent.length ? "\u2026" : "";
+  return `${prefix}${normalizedContent.slice(start, end).trim()}${suffix}`;
+}
+
+function normalizeIndexPayload(payload) {
+  return Array.isArray(payload) ? payload : payload.records;
+}
+function getSearchFields(record) {
+  return {
+    title: normalizeSearchableText(record.title),
+    section: normalizeSearchableText(record.section),
+    hierarchy: normalizeSearchableText(record.hierarchy.join(" ")),
+    tags: normalizeSearchableText(record.tags.join(" ")),
+    content: normalizeSearchableText(record.content)
+  };
+}
+function scoreRecord(record, terms) {
+  const fields = getSearchFields(record);
+  let score = 0;
+  for (const term of terms) {
+    let matched = false;
+    if (fields.title.includes(term)) {
+      score += fields.title.startsWith(term) ? 36 : 28;
+      matched = true;
+    }
+    if (fields.section.includes(term)) {
+      score += fields.section.startsWith(term) ? 24 : 18;
+      matched = true;
+    }
+    if (fields.hierarchy.includes(term)) {
+      score += 12;
+      matched = true;
+    }
+    if (fields.tags.includes(term)) {
+      score += 10;
+      matched = true;
+    }
+    if (fields.content.includes(term)) {
+      score += record.type === "content" ? 8 : 5;
+      matched = true;
+    }
+    if (!matched) {
+      return 0;
+    }
+  }
+  if (record.type === "page") {
+    score += 6;
+  } else if (record.type === "heading") {
+    score += 4;
+  }
+  return score;
+}
+function hasUsefulContent(result) {
+  const content = normalizeSearchableText(result.content);
+  if (content === "") {
+    return false;
+  }
+  return content !== normalizeSearchableText(result.title) && content !== normalizeSearchableText(result.section);
+}
+function preferDuplicateResult(current, candidate) {
+  if (current.type === "content" && candidate.type !== "content" && hasUsefulContent(current)) {
+    return current;
+  }
+  if (candidate.type === "content" && current.type !== "content" && hasUsefulContent(candidate)) {
+    return candidate;
+  }
+  if (candidate.score > current.score) {
+    return candidate;
+  }
+  return current;
+}
+function collapseDuplicateResults(results) {
+  const byUrl = /* @__PURE__ */ new Map();
+  for (const result of results) {
+    const current = byUrl.get(result.url);
+    byUrl.set(result.url, current === void 0 ? result : preferDuplicateResult(current, result));
+  }
+  return Array.from(byUrl.values()).sort(
+    (a, b) => b.score - a.score || a.title.localeCompare(b.title)
+  );
+}
+function searchRecords(records, query, options = {}) {
+  const terms = createSearchTerms(query);
+  if (terms.length === 0) {
+    return [];
+  }
+  const results = records.map((record) => {
+    const score = scoreRecord(record, terms);
+    if (score === 0) {
+      return void 0;
+    }
+    return {
+      id: record.id,
+      title: record.title,
+      url: record.url,
+      content: createSearchSnippet(record.content, terms),
+      score,
+      type: record.type,
+      path: record.path,
+      section: record.section,
+      hierarchy: record.hierarchy,
+      tags: record.tags,
+      record
+    };
+  }).filter((result) => result !== void 0).sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
+  const displayResults = options.collapseDuplicateResults === false ? results : collapseDuplicateResults(results);
+  return displayResults.slice(0, options.limit ?? 12);
+}
+function createStaticSearchProvider(records) {
+  return {
+    search(query, options) {
+      return searchRecords(records, query, options);
+    }
+  };
+}
+function createJsonSearchProvider(options = {}) {
+  let recordsPromise;
+  async function loadRecords() {
+    if (options.index !== void 0) {
+      return normalizeIndexPayload(options.index);
+    }
+    if (options.src === void 0) {
+      throw new Error('createJsonSearchProvider requires either "src" or "index".');
+    }
+    const src = options.src;
+    recordsPromise ??= Promise.resolve().then(async () => {
+      const fetcher = options.fetcher ?? globalThis.fetch;
+      if (fetcher === void 0) {
+        throw new Error("No fetch implementation is available for loading the search index.");
+      }
+      const response = await fetcher(src);
+      if (!response.ok) {
+        throw new Error(`Unable to load search index: ${response.status} ${response.statusText}`);
+      }
+      const responseText = await response.text();
+      try {
+        return normalizeIndexPayload(JSON.parse(responseText));
+      } catch {
+        const contentType = response.headers.get("content-type") ?? "unknown content type";
+        const preview = responseText.trim().slice(0, 120);
+        throw new Error(
+          `Unable to parse search index JSON from ${src}. Received ${contentType}${preview ? `: ${preview}` : "."}`
+        );
+      }
+    });
+    return recordsPromise;
+  }
+  return {
+    async search(query, searchOptions) {
+      return searchRecords(await loadRecords(), query, searchOptions);
+    }
+  };
+}
+
+const templateStyles = (
+  /* css */
+  `
+  :host {
+    color-scheme: var(--md-search-color-scheme, light);
+    --md-search-z-index: 5000;
+    --md-search-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --md-search-trigger-bg: color-mix(in srgb, var(--md-search-accent, #2d7ff9) 10%, transparent);
+    --md-search-trigger-border: color-mix(in srgb, var(--md-search-accent, #2d7ff9) 34%, transparent);
+    --md-search-trigger-color: var(--md-search-text, #172033);
+    --md-search-backdrop: rgb(8 13 24 / 54%);
+    --md-search-surface: #ffffff;
+    --md-search-surface-raised: #f6f8fb;
+    --md-search-text: #172033;
+    --md-search-muted: #64748b;
+    --md-search-border: #d7deea;
+    --md-search-accent: #2d7ff9;
+    --md-search-highlight: #f97316;
+    --md-search-highlight-bg: color-mix(in srgb, var(--md-search-highlight) 14%, transparent);
+    --md-search-result-bg: var(--md-search-surface-raised);
+    --md-search-result-active-bg: color-mix(in srgb, var(--md-search-accent) 12%, var(--md-search-surface));
+    --md-search-result-active-border: color-mix(in srgb, var(--md-search-accent) 74%, var(--md-search-border));
+    --md-search-pill-bg: color-mix(in srgb, var(--md-search-accent) 9%, transparent);
+    --md-search-pill-border: color-mix(in srgb, var(--md-search-accent) 54%, transparent);
+    --md-search-radius: 16px;
+    --md-search-shadow: 0 24px 80px rgb(15 23 42 / 28%);
+    --md-search-width: min(720px, calc(100vw - 28px));
+    --md-search-mobile-trigger-size: 40px;
+    display: inline-flex;
+    font-family: var(--md-search-font-family);
+  }
+
+  :host([theme="dark"]) {
+    --md-search-color-scheme: dark;
+    --md-search-trigger-bg: color-mix(in srgb, var(--md-search-accent, #72a7ff) 16%, transparent);
+    --md-search-trigger-border: color-mix(in srgb, var(--md-search-accent, #72a7ff) 42%, transparent);
+    --md-search-trigger-color: var(--md-search-text, #eef5ff);
+    --md-search-backdrop: rgb(0 0 0 / 66%);
+    --md-search-surface: #111827;
+    --md-search-surface-raised: #1f2937;
+    --md-search-text: #eef5ff;
+    --md-search-muted: #a7b4c8;
+    --md-search-border: #334155;
+    --md-search-accent: #72a7ff;
+    --md-search-highlight: #ff8a3d;
+    --md-search-highlight-bg: color-mix(in srgb, var(--md-search-highlight) 18%, transparent);
+    --md-search-result-bg: #0b1220;
+    --md-search-result-active-bg: color-mix(in srgb, var(--md-search-highlight) 16%, #1b1020);
+    --md-search-result-active-border: var(--md-search-highlight);
+    --md-search-pill-bg: color-mix(in srgb, var(--md-search-accent) 12%, transparent);
+    --md-search-pill-border: color-mix(in srgb, var(--md-search-accent) 74%, transparent);
+    --md-search-shadow: 0 24px 90px rgb(0 0 0 / 48%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host(:not([theme="light"])) {
+      --md-search-color-scheme: dark;
+      --md-search-trigger-bg: color-mix(in srgb, var(--md-search-accent, #72a7ff) 16%, transparent);
+      --md-search-trigger-border: color-mix(in srgb, var(--md-search-accent, #72a7ff) 42%, transparent);
+      --md-search-trigger-color: var(--md-search-text, #eef5ff);
+      --md-search-backdrop: rgb(0 0 0 / 66%);
+      --md-search-surface: #111827;
+      --md-search-surface-raised: #1f2937;
+      --md-search-text: #eef5ff;
+      --md-search-muted: #a7b4c8;
+      --md-search-border: #334155;
+      --md-search-accent: #72a7ff;
+      --md-search-highlight: #ff8a3d;
+      --md-search-highlight-bg: color-mix(in srgb, var(--md-search-highlight) 18%, transparent);
+      --md-search-result-bg: #0b1220;
+      --md-search-result-active-bg: color-mix(in srgb, var(--md-search-highlight) 16%, #1b1020);
+      --md-search-result-active-border: var(--md-search-highlight);
+      --md-search-pill-bg: color-mix(in srgb, var(--md-search-accent) 12%, transparent);
+      --md-search-pill-border: color-mix(in srgb, var(--md-search-accent) 74%, transparent);
+      --md-search-shadow: 0 24px 90px rgb(0 0 0 / 48%);
+    }
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  button,
+  input {
+    font: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 40px;
+    max-width: 100%;
+    padding: 0 12px;
+    border: 1px solid var(--md-search-trigger-border);
+    border-radius: 999px;
+    background: var(--md-search-trigger-bg);
+    color: var(--md-search-trigger-color);
+    cursor: pointer;
+  }
+
+  .trigger:hover {
+    border-color: var(--md-search-accent);
+  }
+
+  .trigger__icon {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .kbd {
+    display: inline-flex;
+    min-width: 34px;
+    justify-content: center;
+    padding: 3px 6px;
+    border: 1px solid var(--md-search-border);
+    border-radius: 7px;
+    color: var(--md-search-muted);
+    font-size: 0.72rem;
+    line-height: 1;
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--md-search-z-index);
+    display: grid;
+    align-items: start;
+    justify-items: center;
+    padding: min(10vh, 76px) 14px 24px;
+    background: var(--md-search-backdrop);
+  }
+
+  .dialog {
+    width: var(--md-search-width);
+    overflow: hidden;
+    border: 1px solid var(--md-search-border);
+    border-radius: var(--md-search-radius);
+    background: var(--md-search-surface);
+    color: var(--md-search-text);
+    box-shadow: var(--md-search-shadow);
+  }
+
+  .header {
+    display: grid;
+    gap: 12px;
+    padding: 16px;
+    border-bottom: 1px solid var(--md-search-border);
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 0.88rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .close {
+    width: 34px;
+    height: 34px;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--md-search-muted);
+    cursor: pointer;
+  }
+
+  .close:hover {
+    background: var(--md-search-surface-raised);
+    color: var(--md-search-text);
+  }
+
+  .input {
+    width: 100%;
+    min-height: 48px;
+    border: 1px solid var(--md-search-border);
+    border-radius: calc(var(--md-search-radius) - 6px);
+    background: var(--md-search-surface-raised);
+    color: var(--md-search-text);
+    outline: 0;
+    padding: 0 14px;
+    font-size: 1rem;
+  }
+
+  .input:focus {
+    border-color: var(--md-search-accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-search-accent) 18%, transparent);
+  }
+
+  .help {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 14px;
+    color: var(--md-search-muted);
+    font-size: 0.82rem;
+  }
+
+  .help__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .help .kbd {
+    min-width: 26px;
+    padding: 4px 6px;
+    border-color: color-mix(in srgb, var(--md-search-highlight) 36%, var(--md-search-border));
+    background: color-mix(in srgb, var(--md-search-highlight) 16%, transparent);
+    color: var(--md-search-text);
+  }
+
+  .status {
+    padding: 28px 18px;
+    color: var(--md-search-muted);
+    text-align: center;
+  }
+
+  .list {
+    max-height: min(58vh, 560px);
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: 10px;
+  }
+
+  .result {
+    display: block;
+    width: 100%;
+    border: 1px solid var(--md-search-border);
+    border-radius: calc(var(--md-search-radius) - 6px);
+    background: var(--md-search-result-bg);
+    color: inherit;
+    cursor: pointer;
+    padding: 12px 14px;
+    text-align: left;
+  }
+
+  .result + .result {
+    margin-top: 8px;
+  }
+
+  .result:hover,
+  .result--active {
+    border-color: var(--md-search-result-active-border);
+    background: var(--md-search-result-active-bg);
+  }
+
+  .result__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .result__trail {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 5px;
+    max-width: 100%;
+    padding: 4px 7px;
+    border: 1px solid var(--md-search-pill-border);
+    border-radius: 6px;
+    background: var(--md-search-pill-bg);
+    color: var(--md-search-accent);
+    font-size: 0.9rem;
+    font-weight: 800;
+    line-height: 1.15;
+  }
+
+  .result__separator {
+    color: var(--md-search-muted);
+    font-weight: 700;
+  }
+
+  .result__type {
+    flex: 0 0 auto;
+    color: var(--md-search-accent);
+    font-size: 0.68rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  .result__content {
+    margin-top: 10px;
+    color: var(--md-search-text);
+    font-size: 0.94rem;
+    line-height: 1.45;
+  }
+
+  .result__path {
+    margin-top: 6px;
+    color: var(--md-search-muted);
+    font-size: 0.76rem;
+    line-height: 1.35;
+  }
+
+  mark {
+    border-radius: 4px;
+    background: var(--md-search-highlight-bg);
+    color: var(--md-search-highlight);
+    font-weight: 900;
+    padding: 0 1px;
+  }
+
+  @media (max-width: 560px) {
+    .trigger__label {
+      display: none;
+    }
+
+    .trigger {
+      width: var(--md-search-mobile-trigger-size);
+      min-height: var(--md-search-mobile-trigger-size);
+      justify-content: center;
+      padding: 0;
+    }
+
+    .kbd {
+      display: none;
+    }
+
+    .help {
+      display: none;
+    }
+  }
+`
+);
+const icon = "\u2315";
+function getShortcutLabel(shortcut) {
+  if (shortcut === "none") {
+    return "";
+  }
+  if (shortcut === "mod+k") {
+    const isMac = /Mac|iPhone|iPad|iPod/i.test(globalThis.navigator?.platform ?? "");
+    return isMac ? "\u2318K" : "Ctrl K";
+  }
+  return shortcut;
+}
+function escapeHtml(value) {
+  return String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function renderHighlightedText(value, terms) {
+  const text = String(value ?? "");
+  if (text === "" || terms.length === 0) {
+    return escapeHtml(text);
+  }
+  const pattern = new RegExp(
+    terms.filter(Boolean).sort((a, b) => b.length - a.length).map(escapeRegExp).join("|"),
+    "gi"
+  );
+  let output = "";
+  let lastIndex = 0;
+  for (const match of text.matchAll(pattern)) {
+    const index = match.index ?? 0;
+    output += escapeHtml(text.slice(lastIndex, index));
+    output += `<mark>${escapeHtml(match[0])}</mark>`;
+    lastIndex = index + match[0].length;
+  }
+  output += escapeHtml(text.slice(lastIndex));
+  return output;
+}
+function formatResultType(type) {
+  if (type === "page") {
+    return "page";
+  }
+  if (type === "heading") {
+    return "heading";
+  }
+  return "content";
+}
+function getResultTrail(result) {
+  const trail = (result.hierarchy.length > 0 ? result.hierarchy : [result.title]).filter(
+    (entry, index, entries) => entry !== "" && entry !== entries[index - 1]
+  );
+  if (result.section !== void 0 && !trail.includes(result.section)) {
+    return [...trail, result.section];
+  }
+  return trail;
+}
+function renderResultTrail(result, terms) {
+  return getResultTrail(result).filter(Boolean).map((entry) => `<span>${renderHighlightedText(entry, terms)}</span>`).join('<span class="result__separator" aria-hidden="true">&rsaquo;</span>');
+}
+const BrowserHTMLElement = globalThis.HTMLElement;
+const HTMLElementBase = BrowserHTMLElement ?? class MdSearchServerElement {
+};
+class MdSearchElement extends HTMLElementBase {
+  static observedAttributes = [
+    "src",
+    "placeholder",
+    "trigger-label",
+    "panel-title",
+    "shortcut",
+    "theme",
+    "search-label",
+    "min-query-length",
+    "max-results",
+    "show-duplicate-results"
+  ];
+  provider;
+  root = this.attachShadow({ mode: "open" });
+  elementId = `md-search-${Math.random().toString(36).slice(2)}`;
+  results = [];
+  query = "";
+  opened = false;
+  loading = false;
+  errorMessage = "";
+  activeIndex = 0;
+  searchTimer;
+  searchRequestId = 0;
+  selectionStart = null;
+  selectionEnd = null;
+  connectedCallback() {
+    this.render();
+    globalThis.addEventListener?.("keydown", this.onGlobalKeydown);
+  }
+  disconnectedCallback() {
+    globalThis.removeEventListener?.("keydown", this.onGlobalKeydown);
+    clearTimeout(this.searchTimer);
+  }
+  attributeChangedCallback(name) {
+    if (name === "src") {
+      this.provider = void 0;
+    }
+    if (name === "show-duplicate-results" && this.query.trim().length >= this.minQueryLength) {
+      void this.runSearch();
+      return;
+    }
+    this.render();
+  }
+  open() {
+    this.opened = true;
+    this.render();
+    this.focusInput();
+  }
+  close() {
+    this.opened = false;
+    this.render();
+  }
+  toggle() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  get src() {
+    return this.getAttribute("src") ?? void 0;
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "Search docs...";
+  }
+  get triggerLabel() {
+    return this.getAttribute("trigger-label") ?? "Search";
+  }
+  get panelTitle() {
+    return this.getAttribute("panel-title") ?? "Search";
+  }
+  get searchLabel() {
+    return this.getAttribute("search-label") ?? this.panelTitle;
+  }
+  get shortcut() {
+    return this.getAttribute("shortcut") ?? "mod+k";
+  }
+  get minQueryLength() {
+    return Number(this.getAttribute("min-query-length") ?? 2);
+  }
+  get maxResults() {
+    return Number(this.getAttribute("max-results") ?? 12);
+  }
+  get showDuplicateResults() {
+    return this.hasAttribute("show-duplicate-results");
+  }
+  get activeResult() {
+    return this.results[this.activeIndex];
+  }
+  getProvider() {
+    this.provider ??= createJsonSearchProvider({ src: this.src });
+    return this.provider;
+  }
+  onGlobalKeydown = (event) => {
+    if (this.shortcut !== "mod+k") {
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key.toLocaleLowerCase() === "k") {
+      event.preventDefault();
+      this.open();
+    }
+  };
+  onInput = (event) => {
+    const input = event.target;
+    this.query = input.value;
+    this.selectionStart = input.selectionStart;
+    this.selectionEnd = input.selectionEnd;
+    this.searchRequestId++;
+    clearTimeout(this.searchTimer);
+    if (this.query.trim().length < this.minQueryLength) {
+      this.results = [];
+      this.loading = false;
+      this.errorMessage = "";
+      this.activeIndex = 0;
+      this.renderResultsContainer();
+      return;
+    }
+    this.loading = true;
+    this.errorMessage = "";
+    this.renderResultsContainer();
+    this.searchTimer = setTimeout(() => {
+      void this.runSearch();
+    }, 120);
+  };
+  onDialogKeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.setActiveIndex(this.activeIndex + 1, {
+        scrollIntoView: true
+      });
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.setActiveIndex(this.activeIndex - 1, {
+        scrollIntoView: true
+      });
+      return;
+    }
+    if (event.key === "Enter" && this.activeResult !== void 0) {
+      event.preventDefault();
+      this.selectResult(this.activeResult);
+    }
+  };
+  async runSearch() {
+    const requestId = ++this.searchRequestId;
+    try {
+      const results = await this.getProvider().search(this.query, {
+        limit: this.maxResults,
+        collapseDuplicateResults: !this.showDuplicateResults
+      });
+      if (requestId !== this.searchRequestId) {
+        return;
+      }
+      this.results = results;
+      this.loading = false;
+      this.errorMessage = "";
+      this.activeIndex = 0;
+    } catch (error) {
+      if (requestId !== this.searchRequestId) {
+        return;
+      }
+      this.results = [];
+      this.loading = false;
+      this.errorMessage = error instanceof Error ? error.message : "Search failed.";
+    }
+    this.renderResultsContainer();
+  }
+  focusInput(options = {}) {
+    const { selectionStart, selectionEnd } = this;
+    requestAnimationFrame(() => {
+      const input = this.root.querySelector('[part="input"]');
+      input?.focus();
+      if (input !== null && options.restoreSelection === true && selectionStart !== null && selectionEnd !== null) {
+        input.setSelectionRange(selectionStart, selectionEnd);
+      }
+    });
+  }
+  setActiveIndex(index, options = {}) {
+    if (this.results.length === 0) {
+      return;
+    }
+    this.activeIndex = Math.min(Math.max(index, 0), this.results.length - 1);
+    this.syncActiveResult(options);
+  }
+  syncInputAria() {
+    const input = this.root.querySelector('[part="input"]');
+    if (input === null) {
+      return;
+    }
+    input.setAttribute("aria-expanded", this.results.length > 0 ? "true" : "false");
+    if (this.results.length === 0) {
+      input.removeAttribute("aria-activedescendant");
+      return;
+    }
+    input.setAttribute("aria-activedescendant", `${this.elementId}-result-${this.activeIndex}`);
+  }
+  syncActiveResult(options = {}) {
+    this.syncInputAria();
+    this.root.querySelectorAll("[data-result-index]").forEach((element) => {
+      const isActive = Number(element.dataset.resultIndex ?? -1) === this.activeIndex;
+      element.classList.toggle("result--active", isActive);
+      element.setAttribute("aria-selected", isActive ? "true" : "false");
+      if (isActive && options.scrollIntoView === true) {
+        element.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    });
+  }
+  selectResult(result) {
+    const event = new CustomEvent("md-search-select", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: { result }
+    });
+    const shouldNavigate = this.dispatchEvent(event);
+    this.close();
+    if (shouldNavigate) {
+      globalThis.location.assign(result.url);
+    }
+  }
+  bindResultEvents() {
+    this.root.querySelectorAll("[data-result-index]").forEach((element) => {
+      element.addEventListener("mouseenter", () => {
+        this.setActiveIndex(Number(element.dataset.resultIndex ?? 0));
+      });
+      element.addEventListener("click", () => {
+        const result = this.results[Number(element.dataset.resultIndex ?? 0)];
+        if (result !== void 0) {
+          this.selectResult(result);
+        }
+      });
+    });
+  }
+  renderResultsContainer() {
+    const container = this.root.querySelector('[part="results"]');
+    if (container === null) {
+      this.render();
+      return;
+    }
+    container.innerHTML = this.renderResults();
+    this.bindResultEvents();
+    this.syncInputAria();
+  }
+  renderResults() {
+    if (this.loading) {
+      return '<div part="status" class="status" role="status" aria-live="polite">Searching...</div>';
+    }
+    if (this.errorMessage !== "") {
+      return `<div part="status" class="status" role="status" aria-live="assertive">${escapeHtml(this.errorMessage)}</div>`;
+    }
+    if (this.query.trim().length < this.minQueryLength) {
+      return `<div part="status" class="status" role="status" aria-live="polite">Type at least ${this.minQueryLength} characters.</div>`;
+    }
+    if (this.results.length === 0) {
+      return '<div part="status" class="status" role="status" aria-live="polite">No results found.</div>';
+    }
+    const terms = createSearchTerms(this.query);
+    return `
+      <div part="list" class="list" id="${this.elementId}-listbox" role="listbox">
+        ${this.results.map((result, index) => {
+      const resultId = `${this.elementId}-result-${index}`;
+      return `
+              <button
+                id="${resultId}"
+                type="button"
+                part="result"
+                class="result ${index === this.activeIndex ? "result--active" : ""}"
+                data-result-index="${index}"
+                role="option"
+                aria-selected="${index === this.activeIndex ? "true" : "false"}"
+              >
+                <div part="result-title" class="result__header">
+                  <span part="result-trail" class="result__trail">${renderResultTrail(result, terms)}</span>
+                  <span part="result-type" class="result__type">${escapeHtml(formatResultType(result.type))}</span>
+                </div>
+                <div part="result-snippet" class="result__content">${renderHighlightedText(result.content, terms)}</div>
+                <div part="result-url" class="result__path">${escapeHtml(result.url)}</div>
+              </button>
+            `;
+    }).join("")}
+      </div>
+    `;
+  }
+  render() {
+    const shortcutLabel = getShortcutLabel(this.shortcut);
+    const dialogId = `${this.elementId}-dialog`;
+    const titleId = `${this.elementId}-title`;
+    const activeResultId = this.results.length > 0 ? `${this.elementId}-result-${this.activeIndex}` : void 0;
+    this.root.innerHTML = `
+      <style>${templateStyles}</style>
+      <button
+        type="button"
+        part="trigger"
+        class="trigger"
+        aria-haspopup="dialog"
+        aria-controls="${dialogId}"
+        aria-expanded="${this.opened ? "true" : "false"}"
+        aria-label="${escapeHtml(this.triggerLabel)}"
+      >
+        <span part="trigger-icon" class="trigger__icon" aria-hidden="true">${icon}</span>
+        <span part="trigger-label" class="trigger__label">${escapeHtml(this.triggerLabel)}</span>
+        ${shortcutLabel ? `<kbd part="keyboard-shortcut" class="kbd">${escapeHtml(shortcutLabel)}</kbd>` : ""}
+      </button>
+      <div part="backdrop" class="backdrop" ${this.opened ? "" : "hidden"}>
+        <section
+          id="${dialogId}"
+          part="dialog"
+          class="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="${titleId}"
+        >
+          <div class="header">
+            <div class="title-row">
+              <h2 id="${titleId}" part="title" class="title">${escapeHtml(this.panelTitle)}</h2>
+              <button type="button" part="close-button" class="close" aria-label="Close search">\u2715</button>
+            </div>
+            <input
+              part="input"
+              class="input"
+              type="search"
+              value="${escapeHtml(this.query)}"
+              placeholder="${escapeHtml(this.placeholder)}"
+              role="combobox"
+              aria-label="${escapeHtml(this.searchLabel)}"
+              aria-autocomplete="list"
+              aria-expanded="${this.results.length > 0 ? "true" : "false"}"
+              aria-controls="${this.elementId}-listbox"
+              ${activeResultId !== void 0 ? `aria-activedescendant="${activeResultId}"` : ""}
+              autocomplete="off"
+              spellcheck="false"
+            />
+            <div part="help" class="help" aria-hidden="true">
+              <span class="help__item">Navigate <kbd class="kbd">\u2193</kbd><kbd class="kbd">\u2191</kbd></span>
+              <span class="help__item">Select <kbd class="kbd">\u21B5</kbd></span>
+              <span class="help__item">Close <kbd class="kbd">Esc</kbd></span>
+            </div>
+          </div>
+          <div part="results">
+            ${this.renderResults()}
+          </div>
+        </section>
+      </div>
+    `;
+    this.bindEvents();
+  }
+  bindEvents() {
+    this.root.querySelector('[part="trigger"]')?.addEventListener("click", () => this.open());
+    this.root.querySelector('[part="close-button"]')?.addEventListener("click", () => this.close());
+    this.root.querySelector('[part="backdrop"]')?.addEventListener("click", (event) => {
+      if (event.target === event.currentTarget) {
+        this.close();
+      }
+    });
+    this.root.querySelector('[part="dialog"]')?.addEventListener("keydown", this.onDialogKeydown);
+    this.root.querySelector('[part="input"]')?.addEventListener("input", this.onInput);
+    this.bindResultEvents();
+  }
+}
+function defineMdSearchElement(name = "md-search") {
+  if (globalThis.customElements === void 0 || globalThis.customElements.get(name) !== void 0) {
+    return;
+  }
+  globalThis.customElements.define(name, MdSearchElement);
+}
+function createSearch(options) {
+  defineMdSearchElement();
+  const element = document.createElement("md-search");
+  if (options.src !== void 0) element.setAttribute("src", options.src);
+  if (options.placeholder !== void 0) element.setAttribute("placeholder", options.placeholder);
+  if (options.triggerLabel !== void 0)
+    element.setAttribute("trigger-label", options.triggerLabel);
+  if (options.panelTitle !== void 0) element.setAttribute("panel-title", options.panelTitle);
+  if (options.searchLabel !== void 0) element.setAttribute("search-label", options.searchLabel);
+  if (options.theme !== void 0) element.setAttribute("theme", options.theme);
+  if (options.shortcut !== void 0) element.setAttribute("shortcut", options.shortcut);
+  if (options.minQueryLength !== void 0)
+    element.setAttribute("min-query-length", String(options.minQueryLength));
+  if (options.maxResults !== void 0)
+    element.setAttribute("max-results", String(options.maxResults));
+  if (options.showDuplicateResults === true) element.setAttribute("show-duplicate-results", "");
+  if (options.provider !== void 0) element.provider = options.provider;
+  options.target.append(element);
+  return element;
+}
+
+export { MdSearchElement, createJsonSearchProvider, createSearch, createSearchSnippet, createSearchTerms, createStaticSearchProvider, defineMdSearchElement, normalizeSearchQuery, normalizeSearchableText, searchRecords };