@lostgradient/cinder 0.4.1 → 0.6.0

package/dist/server/index.server-sh2rxejg.js

@@ -0,0 +1,371 @@
+import {
+  Status_dot
+} from "./index.server-npxtkwjp.js";
+import {
+  Json_viewer
+} from "./index.server-w6k62afr.js";
+import {
+  Copy_button
+} from "./index.server-z1q7qnb8.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/event-stream-viewer/event-stream-viewer.svelte
+import * as $ from "svelte/internal/server";
+import { SvelteSet } from "svelte/reactivity";
+
+// src/components/event-stream-viewer/event-stream-viewer-keys.ts
+function streamEventKey(event) {
+  const parts = [keyType("event"), keyField("id", event.id)];
+  if (typeof event.sequence === "number")
+    parts.push(keyField("sequence", event.sequence));
+  return parts.join("|");
+}
+function reconnectedBoundaryKey(boundary) {
+  return [keyType("reconnected"), keyField("id", boundary.id)].join("|");
+}
+function sequenceGapKey(previousEventId, event, expectedSequence, actualSequence) {
+  return [
+    keyType("sequence-gap"),
+    previousEventId === undefined ? keyField("previous-missing", true) : keyField("previous", previousEventId),
+    keyField("next", event.id),
+    keyField("expected", expectedSequence),
+    keyField("actual", actualSequence)
+  ].join("|");
+}
+function uniqueRenderedKey(baseKey, occurrences) {
+  const occurrence = occurrences.get(baseKey) ?? 0;
+  occurrences.set(baseKey, occurrence + 1);
+  return occurrence === 0 ? baseKey : `${baseKey}|occurrence=${occurrence + 1}`;
+}
+function detailsIdForKey(instanceId, key) {
+  return `${escapeDomIdPart(instanceId)}-details-${hashString(key)}-${hashString(reverseString(key))}-${key.length}`;
+}
+function keyType(type) {
+  return keyField("type", type);
+}
+function keyField(name, value) {
+  const stringValue = String(value);
+  return `${name.length}:${name}:${stringValue.length}:${stringValue}`;
+}
+function escapeDomIdPart(value) {
+  let result = "";
+  for (const character of value) {
+    result += /^[A-Za-z0-9_-]$/.test(character) ? character : `_${character.codePointAt(0)?.toString(16) ?? "0"}_`;
+  }
+  return result === "" ? "empty" : result;
+}
+function reverseString(value) {
+  let result = "";
+  for (const character of value) {
+    result = character + result;
+  }
+  return result;
+}
+function hashString(value) {
+  let hash = 0;
+  for (let index = 0;index < value.length; index += 1) {
+    hash = Math.imul(31, hash) + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
+// src/components/event-stream-viewer/event-stream-viewer.svelte
+function Event_stream_viewer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const instanceId = $.props_id($$renderer2);
+    function isValidSequence(value) {
+      return Number.isInteger(value);
+    }
+    let {
+      events,
+      connectionState,
+      followLatest = true,
+      truncated = false,
+      loading = false,
+      label = "Event stream",
+      detectSequenceGaps = false,
+      oncopyvisible,
+      onfilter,
+      filterQuery = "",
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const expandedIds = new SvelteSet;
+    let scrollContainerEl = null;
+    let programmaticScroll = false;
+    let liveMessage = "";
+    const isEmpty = $.derived(() => !loading && events.length === 0);
+    const eventCount = $.derived(() => events.length);
+    const latestEvent = $.derived(() => events.at(-1));
+    const renderedEntries = $.derived(() => {
+      const entries = [];
+      const keyOccurrences = new Map;
+      let previousSequence;
+      let previousEventId;
+      const shouldDetectSequenceGaps = detectSequenceGaps && filterQuery.trim() === "";
+      for (const entry of events) {
+        if (isReconnectedBoundary(entry)) {
+          const key2 = uniqueRenderedKey(reconnectedBoundaryKey(entry), keyOccurrences);
+          entries.push({
+            type: "reconnected",
+            key: key2,
+            boundary: entry,
+            label: formatReconnectedBoundaryLabel(entry),
+            datetime: boundaryDateTime(entry)
+          });
+          previousSequence = undefined;
+          previousEventId = undefined;
+          continue;
+        }
+        const currentSequence = entry.sequence;
+        if (shouldDetectSequenceGaps && isValidSequence(previousSequence) && isValidSequence(currentSequence)) {
+          const expectedSequence = previousSequence + 1;
+          if (currentSequence !== expectedSequence) {
+            const key2 = uniqueRenderedKey(sequenceGapKey(previousEventId, entry, expectedSequence, currentSequence), keyOccurrences);
+            entries.push({
+              type: "sequence-gap",
+              key: key2,
+              expectedSequence,
+              actualSequence: currentSequence,
+              label: formatSequenceGapLabel(expectedSequence, currentSequence)
+            });
+          }
+        }
+        if (isValidSequence(currentSequence)) {
+          previousSequence = currentSequence;
+          previousEventId = entry.id;
+        } else {
+          previousSequence = undefined;
+          previousEventId = undefined;
+        }
+        const key = uniqueRenderedKey(streamEventKey(entry), keyOccurrences);
+        entries.push({
+          type: "event",
+          key,
+          detailsId: detailsIdForKey(instanceId, key),
+          event: entry
+        });
+      }
+      return entries;
+    });
+    function toggleDetails(rowKey) {
+      if (expandedIds.has(rowKey)) {
+        expandedIds.delete(rowKey);
+      } else {
+        expandedIds.add(rowKey);
+      }
+    }
+    function isReconnectedBoundary(entry) {
+      return "kind" in entry && entry.kind === "reconnected" && "replayedCount" in entry && Number.isInteger(entry.replayedCount) && entry.replayedCount >= 0;
+    }
+    function formatReconnectedBoundaryLabel(boundary) {
+      const eventWord = boundary.replayedCount === 1 ? "event" : "events";
+      return `Reconnected — ${boundary.replayedCount} ${eventWord} replayed`;
+    }
+    function formatSequenceGapLabel(expectedSequence, actualSequence) {
+      return `Sequence gap — expected ${expectedSequence}, received ${actualSequence}`;
+    }
+    function boundaryDateTime(boundary) {
+      return boundary.datetime;
+    }
+    function formatEventAsText(event) {
+      const parts = [];
+      parts.push(`[${event.timestamp ?? event.datetime}]`);
+      if (event.severity)
+        parts.push(`[${event.severity.toUpperCase()}]`);
+      if (event.source)
+        parts.push(`[${event.source}]`);
+      parts.push(event.summary);
+      if (event.details !== undefined) {
+        try {
+          parts.push(JSON.stringify(event.details, null, 2));
+        } catch {}
+      }
+      return parts.join(" ");
+    }
+    function formatReconnectedBoundaryAsText(boundary) {
+      const timeLabel = boundary.timestamp ?? boundary.datetime;
+      const markerText = formatReconnectedBoundaryLabel(boundary);
+      return timeLabel ? `[${timeLabel}] ${markerText}` : markerText;
+    }
+    function formatRenderedEntryAsText(entry) {
+      if (entry.type === "event")
+        return formatEventAsText(entry.event);
+      if (entry.type === "reconnected")
+        return formatReconnectedBoundaryAsText(entry.boundary);
+      return entry.label;
+    }
+    function formatCopyVisibleAnnouncement(entryCount) {
+      return `${entryCount} stream ${entryCount === 1 ? "entry" : "entries"} sent to copy handler`;
+    }
+    function handleCopyVisible() {
+      const text = renderedEntries().map(formatRenderedEntryAsText).join(`
+`);
+      if (!oncopyvisible)
+        return;
+      oncopyvisible(text);
+      liveMessage = formatCopyVisibleAnnouncement(renderedEntries().length);
+      setTimeout(() => {
+        liveMessage = "";
+      }, 2000);
+    }
+    function handleScroll(event) {
+      if (programmaticScroll)
+        return;
+      const target = event.target;
+      const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 2;
+      if (atBottom && !followLatest) {
+        followLatest = true;
+      } else if (!atBottom && followLatest) {
+        followLatest = false;
+      }
+    }
+    function scrollToBottom(el) {
+      programmaticScroll = true;
+      el.scrollTop = el.scrollHeight;
+      requestAnimationFrame(() => {
+        programmaticScroll = false;
+      });
+    }
+    function resumeFollowing() {
+      followLatest = true;
+      if (scrollContainerEl) {
+        scrollToBottom(scrollContainerEl);
+      }
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-event-stream-viewer", className)),
+      "data-cinder-loading": loading || undefined,
+      "data-cinder-empty": isEmpty() || undefined,
+      "data-cinder-paused": !followLatest || undefined
+    })}><div class="cinder-event-stream-viewer__toolbar" role="group" aria-label="Stream controls"><div class="cinder-event-stream-viewer__toolbar-start">`);
+    if (connectionState) {
+      $$renderer2.push("<!--[0-->");
+      Status_dot($$renderer2, { connectionState });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (!followLatest) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-event-stream-viewer__resume-button">Resume following</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__toolbar-end">`);
+    if (onfilter !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<input type="search" class="cinder-event-stream-viewer__filter-input" placeholder="Filter events…" aria-label="Filter events"${$.attr("value", filterQuery)}/>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (oncopyvisible !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-event-stream-viewer__copy-all-button" aria-label="Copy all visible events"${$.attr("disabled", events.length === 0, true)}>Copy visible</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></div> `);
+    if (truncated) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-event-stream-viewer__truncation-notice" role="status" aria-live="polite">Stream truncated — only the most recent events are shown.</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    $.element($$renderer2, "div", () => {
+      $$renderer2.push(` class="cinder-event-stream-viewer__viewport" role="log"${$.attr("aria-label", label)}${$.attr("tabindex", 0)}`);
+    }, () => {
+      if (loading) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-event-stream-viewer__loading" role="status" aria-label="Loading events"><div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__skeleton" aria-hidden="true"></div></div>`);
+      } else if (isEmpty()) {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`<div class="cinder-event-stream-viewer__empty" role="status"><p class="cinder-event-stream-viewer__empty-message">No events to display.</p></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<ol class="cinder-event-stream-viewer__list"><!--[-->`);
+        const each_array = $.ensure_array_like(renderedEntries());
+        for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+          let entry = each_array[$$index];
+          if (entry.type === "reconnected") {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__boundary-marker"><div class="cinder-event-stream-viewer__marker-content" role="separator"${$.attr("aria-label", entry.label)}>`);
+            if (entry.boundary.datetime) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<time class="cinder-event-stream-viewer__marker-time"${$.attr("datetime", entry.boundary.datetime)}${$.attr("title", entry.boundary.datetime)}>${$.escape(entry.boundary.timestamp ?? entry.boundary.datetime)}</time>`);
+            } else if (entry.boundary.timestamp) {
+              $$renderer2.push("<!--[1-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__marker-time">${$.escape(entry.boundary.timestamp)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> <span>${$.escape(entry.label)}</span></div></li>`);
+          } else if (entry.type === "sequence-gap") {
+            $$renderer2.push("<!--[1-->");
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__sequence-gap-marker"><div class="cinder-event-stream-viewer__marker-content" role="note"${$.attr("aria-label", entry.label)}><span>${$.escape(entry.label)}</span></div></li>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+            const event = entry.event;
+            const isExpanded = expandedIds.has(entry.key);
+            const detailsId = entry.detailsId;
+            $$renderer2.push(`<li class="cinder-event-stream-viewer__event"${$.attr("data-cinder-severity", event.severity ?? "info")}><div class="cinder-event-stream-viewer__event-bar" aria-hidden="true"></div> <div class="cinder-event-stream-viewer__event-body"><div class="cinder-event-stream-viewer__event-meta"><time class="cinder-event-stream-viewer__event-time"${$.attr("datetime", event.datetime)}${$.attr("title", event.datetime)}>${$.escape(event.timestamp ?? event.datetime)}</time> `);
+            if (event.severity) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-severity"${$.attr("aria-label", `Severity: ${event.severity}`)}>${$.escape(event.severity)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> `);
+            if (event.source) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="cinder-event-stream-viewer__event-source">${$.escape(event.source)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <p class="cinder-event-stream-viewer__event-summary">${$.escape(event.summary)}</p> `);
+            if (event.details !== undefined) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<div class="cinder-event-stream-viewer__event-details-section"><button type="button" class="cinder-event-stream-viewer__details-toggle"${$.attr("aria-expanded", isExpanded)}${$.attr("aria-controls", detailsId)}${$.attr("aria-label", `${isExpanded ? "Hide" : "Show"} details for ${event.severity ? `${event.severity}: ` : ""}${event.summary}`)}>${$.escape(isExpanded ? "Hide details" : "Show details")}</button> <div${$.attr("id", detailsId)} class="cinder-event-stream-viewer__event-details"${$.attr("hidden", !isExpanded)}>`);
+              if (isExpanded) {
+                $$renderer2.push("<!--[0-->");
+                Json_viewer($$renderer2, { value: event.details });
+              } else {
+                $$renderer2.push("<!--[-1-->");
+              }
+              $$renderer2.push(`<!--]--></div></div>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div> <div class="cinder-event-stream-viewer__event-actions">`);
+            Copy_button($$renderer2, {
+              value: formatEventAsText(event),
+              label: `Copy event: ${event.summary}`,
+              copiedLabel: "Event copied",
+              class: "cinder-event-stream-viewer__copy-event-button"
+            });
+            $$renderer2.push(`<!----></div></li>`);
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]--></ol>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    });
+    $$renderer2.push(` <span class="cinder-event-stream-viewer__live-region" role="status" aria-live="polite" aria-atomic="true">${$.escape(liveMessage)}</span></div>`);
+    $.bind_props($$props, { followLatest });
+  }, Event_stream_viewer);
+}
+
+// src/components/event-stream-viewer/index.ts
+var event_stream_viewer_default = Event_stream_viewer;
+export { Event_stream_viewer, event_stream_viewer_default };
+
+//# debugId=C8A50BBE029B9E9764756E2164756E21

package/dist/server/index.server-smw54qtg.js

@@ -0,0 +1,22 @@
+import {
+  getTabsContext
+} from "./index.server-js3eva86.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/tab-list/tab-list.svelte
+import * as $ from "svelte/internal/server";
+function Tab_list($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { label, labelledBy, class: className, children } = $$props;
+    const tabs = getTabsContext();
+    $$renderer2.push(`<div role="tablist"${$.attr_class($.clsx(classNames("cinder-tab-list", className)))}${$.attr("data-cinder-orientation", tabs.orientation)}${$.attr("aria-label", label)}${$.attr("aria-labelledby", labelledBy)}${$.attr("aria-orientation", tabs.orientation)}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  }, Tab_list);
+}
+
+export { Tab_list };
+
+//# debugId=5642DD0255B4937A64756E2164756E21

package/dist/server/index.server-sq3b57v4.js

@@ -0,0 +1,9 @@
+import {
+  Dropdown_label
+} from "./index.server-z7tyy8gh.js";
+
+// src/components/dropdown-label/index.ts
+var dropdown_label_default = Dropdown_label;
+export { dropdown_label_default };
+
+//# debugId=E3CD56A4ECCBFEAE64756E2164756E21

package/dist/server/index.server-srawp0s9.js

@@ -0,0 +1,81 @@
+import {
+  Spinner
+} from "./index.server-d2nn25sg.js";
+import {
+  X
+} from "./index.server-vzc1j5mq.js";
+import {
+  _visually_hidden_live_region
+} from "./index.server-44vrcbhz.js";
+import {
+  Check
+} from "./index.server-wwk0f944.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/inline-loading/inline-loading.svelte
+import * as $ from "svelte/internal/server";
+import { untrack } from "svelte";
+function Inline_loading($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const fallbackStatusLabel = { active: "Loading", finished: "Success", error: "Error" };
+    let {
+      status = "inactive",
+      description,
+      iconDescription,
+      successDelay = 1500,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let visualStatus = status;
+    let successTimer = null;
+    const normalizedDescription = $.derived(() => description?.trim() ? description.trim() : undefined);
+    const normalizedIconDescription = $.derived(() => iconDescription?.trim() ? iconDescription.trim() : undefined);
+    const fallbackText = $.derived(() => visualStatus === "inactive" ? "" : fallbackStatusLabel[visualStatus]);
+    const visibleDescription = $.derived(() => visualStatus === "inactive" ? "" : normalizedDescription() ?? fallbackText());
+    const spokenDescription = $.derived(() => visualStatus === "inactive" ? "" : normalizedDescription() ?? normalizedIconDescription() ?? fallbackText());
+    const announcementMessage = $.derived(() => visualStatus === "inactive" ? "" : spokenDescription() === fallbackText() ? spokenDescription() : `${fallbackText()}. ${spokenDescription()}`);
+    function clearSuccessTimer() {
+      if (successTimer !== null) {
+        clearTimeout(successTimer);
+        successTimer = null;
+      }
+    }
+    $$renderer2.push(`<span${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-inline-loading", className)),
+      "data-cinder-status": visualStatus,
+      "aria-hidden": visualStatus === "inactive" ? "true" : undefined
+    })}>`);
+    if (visualStatus !== "inactive") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-inline-loading__indicator" aria-hidden="true">`);
+      if (visualStatus === "active") {
+        $$renderer2.push("<!--[0-->");
+        Spinner($$renderer2, { size: "sm", label: spokenDescription() });
+      } else if (visualStatus === "finished") {
+        $$renderer2.push("<!--[1-->");
+        Check($$renderer2, { size: 14, strokeWidth: 2.25 });
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        X($$renderer2, { size: 14, strokeWidth: 2.25 });
+      }
+      $$renderer2.push(`<!--]--></span> <span class="cinder-inline-loading__label">${$.escape(visibleDescription())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></span> `);
+    _visually_hidden_live_region($$renderer2, { message: announcementMessage() });
+    $$renderer2.push(`<!---->`);
+    $.bind_props($$props, { status });
+  }, Inline_loading);
+}
+
+// src/components/inline-loading/index.ts
+var inline_loading_default = Inline_loading;
+export { Inline_loading, inline_loading_default };
+
+//# debugId=386F184EC6BB99D164756E2164756E21

package/dist/server/index.server-t3hknp1c.js

@@ -0,0 +1,137 @@
+import {
+  restoreFocusTo
+} from "./index.server-zwjp26z8.js";
+import {
+  overflowFade
+} from "./index.server-1vsv7ngz.js";
+import {
+  lockBodyScroll,
+  pushEscapeHandler
+} from "./index.server-mc6vc1pm.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/modal/modal.svelte
+import * as $ from "svelte/internal/server";
+import { onDestroy } from "svelte";
+function Modal($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const titleId = $.props_id($$renderer2);
+    let {
+      open = false,
+      title,
+      role = "dialog",
+      dismissOnBackdropClick = true,
+      dismissOnEscape = true,
+      showCloseButton = true,
+      class: className,
+      children,
+      footer,
+      triggerRef = null,
+      describedById,
+      ondismiss
+    } = $$props;
+    let dialogElement = undefined;
+    let bodyElement = undefined;
+    let mounted = false;
+    let capturedFocus = null;
+    let releaseBodyScrollLock = null;
+    let releaseEscapeHandler = null;
+    function acquireLock() {
+      if (releaseBodyScrollLock !== null)
+        return;
+      releaseBodyScrollLock = lockBodyScroll();
+    }
+    function releaseLock() {
+      releaseBodyScrollLock?.();
+      releaseBodyScrollLock = null;
+    }
+    function acquireEscapeHandler() {
+      if (releaseEscapeHandler !== null)
+        return;
+      releaseEscapeHandler = pushEscapeHandler(() => {});
+    }
+    function releaseEscape() {
+      releaseEscapeHandler?.();
+      releaseEscapeHandler = null;
+    }
+    const bodyOverflowFade = overflowFade();
+    function returnFocus() {
+      const candidates = [triggerRef, capturedFocus];
+      for (const candidate of candidates) {
+        if (restoreFocusTo(candidate))
+          break;
+      }
+      capturedFocus = null;
+    }
+    function dismiss() {
+      open = false;
+      ondismiss?.();
+    }
+    function handleClose() {
+      open = false;
+      releaseLock();
+      releaseEscape();
+      returnFocus();
+    }
+    onDestroy(() => {
+      releaseLock();
+      releaseEscape();
+    });
+    function handleBackdropClick(event) {
+      if (dismissOnBackdropClick && event.target === dialogElement) {
+        dismiss();
+      }
+    }
+    function handleNativeCancel(event) {
+      event.preventDefault();
+      if (!dismissOnEscape)
+        return;
+      dismiss();
+    }
+    if (mounted || open) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<dialog${$.attributes({
+        class: $.clsx(classNames("cinder-modal", className)),
+        role,
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        ...describedById ? { "aria-describedby": describedById } : {}
+      })}>`);
+      if (open) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="cinder-modal__panel"><div class="cinder-modal__header"><h2${$.attr("id", titleId)} class="cinder-modal__title">${$.escape(title)}</h2></div> <div class="cinder-modal__body" tabindex="-1">`);
+        children($$renderer2);
+        $$renderer2.push(`<!----></div> `);
+        if (footer) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<div class="cinder-modal__footer">`);
+          footer($$renderer2);
+          $$renderer2.push(`<!----></div>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (showCloseButton) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<button type="button" class="cinder-modal__close" aria-label="Close dialog"><svg class="cinder-modal__close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></dialog>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    $.bind_props($$props, { open });
+  }, Modal);
+}
+
+export { Modal };
+
+//# debugId=EBD7DEFE0FF4F3A864756E2164756E21