@lostgradient/cinder 0.11.0 → 0.12.0

package/dist/components/confirm-dialog/index.js

@@ -320,7 +320,7 @@ import"@lostgradient/cinder/confirm-dialog/styles";
 
 // src/components/confirm-dialog/confirm-dialog.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
+import * as $6 from "svelte/internal/client";
 
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
@@ -554,9 +554,337 @@ function Button($$anchor, $$props) {
   $3.pop();
 }
 
-// src/components/modal/modal.svelte
+// src/components/input/input.svelte
 import"svelte/internal/disclose-version";
 import * as $4 from "svelte/internal/client";
+
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
+// src/components/input/input.svelte
+var calendarIcon = ($$anchor) => {
+  var svg = root3();
+  $4.append($$anchor, svg);
+};
+var rest_excludes3 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "onValueChange",
+  "label",
+  "hideLabel",
+  "description",
+  "error",
+  "disabled",
+  "required",
+  "type",
+  "class",
+  "leading",
+  "trailing",
+  "leadingInteractive",
+  "trailingInteractive",
+  "aria-describedby",
+  "aria-invalid",
+  "oninput"
+]);
+var root3 = $4.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_12 = $4.from_html(`<input/>`);
+var root_22 = $4.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_32 = $4.from_html(`<label> <!></label>`);
+var root_42 = $4.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_52 = $4.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_6 = $4.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_7 = $4.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_8 = $4.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_9 = $4.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_10 = $4.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+function Input($$anchor, $$props) {
+  $4.push($$props, true);
+  const inputElement = ($$anchor2) => {
+    var input = root_12();
+    $4.attribute_effect(input, ($0) => ({
+      id: $$props.id,
+      type: type(),
+      ...rest,
+      disabled: $4.get(resolvedDisabled),
+      required: $4.get(resolvedRequired),
+      value: value(),
+      oninput: handleInput,
+      class: $0,
+      "data-cinder-native-date": $4.get(rendersNativeDateIcon) ? "" : undefined,
+      "aria-invalid": $4.get(resolvedAriaInvalid),
+      "aria-describedby": $4.get(describedBy)
+    }), [() => classNames("cinder-input", $$props.class)], undefined, undefined, undefined, true);
+    $4.bind_this(input, ($$value) => $4.set(inputNode, $$value), () => $4.get(inputNode));
+    $4.append($$anchor2, input);
+  };
+  let value = $4.prop($$props, "value", 15, ""), hideLabel = $4.prop($$props, "hideLabel", 3, false), type = $4.prop($$props, "type", 3, "text"), leadingInteractive = $4.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $4.prop($$props, "trailingInteractive", 3, false), rest = $4.rest_props($$props, rest_excludes3);
+  const context = getFormFieldContext();
+  $4.user_effect(() => {
+    if (context && context.controlId !== $$props.id) {
+      devWarn(`[cinder/Input] id mismatch: Input id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
+    }
+  });
+  const field = $4.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "input",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const ownDescriptionId = $4.derived(() => $4.get(field).ownDescriptionId);
+  const ownErrorId = $4.derived(() => $4.get(field).ownErrorId);
+  const describedBy = $4.derived(() => $4.get(field).describedBy);
+  const resolvedAriaInvalid = $4.derived(() => $4.get(field).ariaInvalid);
+  const resolvedRequired = $4.derived(() => $4.get(field).required);
+  const resolvedDisabled = $4.derived(() => $4.get(field).disabled);
+  const isNativeDateInput = $4.derived(() => type() === "date");
+  const rendersNativeDateIcon = $4.derived(() => $4.get(isNativeDateInput) && !$$props.trailing);
+  const hasTrailing = $4.derived(() => !!$$props.trailing || $4.get(isNativeDateInput));
+  const hasGroupWrapper = $4.derived(() => !!$$props.leading || $4.get(hasTrailing));
+  const isInvalid = $4.derived(() => $4.get(resolvedAriaInvalid) === "true");
+  let inputNode = $4.state(undefined);
+  let resetSyncTimeout;
+  function syncValueAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if ($4.get(inputNode))
+        value($4.get(inputNode).value);
+    }, 0);
+  }
+  $4.user_effect(() => {
+    const form = $4.get(inputNode)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleInput(event) {
+    const target = event.currentTarget;
+    const committed = commitValue(target.value, $$props.onValueChange, (next) => {
+      value(next);
+    });
+    target.value = committed;
+    $$props.oninput?.(event);
+  }
+  var div = root_10();
+  var node = $4.child(div);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var label_1 = root_32();
+      var text2 = $4.child(label_1);
+      var node_1 = $4.sibling(text2);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_22();
+          $4.append($$anchor3, span);
+        };
+        $4.if(node_1, ($$render) => {
+          if ($4.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
+      $4.reset(label_1);
+      $4.template_effect(($0) => {
+        $4.set_attribute(label_1, "for", $$props.id);
+        $4.set_class(label_1, 1, $0);
+        $4.set_attribute(label_1, "data-disabled", $4.get(resolvedDisabled) || undefined);
+        $4.set_text(text2, `${$$props.label ?? ""} `);
+      }, [
+        () => $4.clsx(classNames("cinder-input-field__label", hideLabel() && "cinder-sr-only"))
+      ]);
+      $4.append($$anchor2, label_1);
+    };
+    $4.if(node, ($$render) => {
+      if ($$props.label)
+        $$render(consequent_1);
+    });
+  }
+  var node_2 = $4.sibling(node, 2);
+  {
+    var consequent_5 = ($$anchor2) => {
+      var div_1 = root_7();
+      var node_3 = $4.child(div_1);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var span_1 = root_42();
+          var node_4 = $4.child(span_1);
+          $4.snippet(node_4, () => $$props.leading);
+          $4.reset(span_1);
+          $4.template_effect(() => $4.set_attribute(span_1, "aria-hidden", leadingInteractive() ? undefined : "true"));
+          $4.append($$anchor3, span_1);
+        };
+        $4.if(node_3, ($$render) => {
+          if ($$props.leading)
+            $$render(consequent_2);
+        });
+      }
+      var node_5 = $4.sibling(node_3, 2);
+      inputElement(node_5);
+      var node_6 = $4.sibling(node_5, 2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var span_2 = root_52();
+          var node_7 = $4.child(span_2);
+          $4.snippet(node_7, () => $$props.trailing);
+          $4.reset(span_2);
+          $4.template_effect(() => $4.set_attribute(span_2, "aria-hidden", trailingInteractive() ? undefined : "true"));
+          $4.append($$anchor3, span_2);
+        };
+        var consequent_4 = ($$anchor3) => {
+          var span_3 = root_6();
+          var node_8 = $4.child(span_3);
+          calendarIcon(node_8);
+          $4.reset(span_3);
+          $4.append($$anchor3, span_3);
+        };
+        $4.if(node_6, ($$render) => {
+          if ($$props.trailing)
+            $$render(consequent_3);
+          else if ($4.get(rendersNativeDateIcon))
+            $$render(consequent_4, 1);
+        });
+      }
+      $4.reset(div_1);
+      $4.template_effect(() => {
+        $4.set_attribute(div_1, "data-leading", $$props.leading ? "" : undefined);
+        $4.set_attribute(div_1, "data-trailing", $4.get(hasTrailing) ? "" : undefined);
+        $4.set_attribute(div_1, "data-native-date", $4.get(rendersNativeDateIcon) ? "" : undefined);
+        $4.set_attribute(div_1, "data-disabled", $4.get(resolvedDisabled) ? "" : undefined);
+        $4.set_attribute(div_1, "data-invalid", $4.get(isInvalid) ? "" : undefined);
+      });
+      $4.append($$anchor2, div_1);
+    };
+    var alternate = ($$anchor2) => {
+      inputElement($$anchor2);
+    };
+    $4.if(node_2, ($$render) => {
+      if ($4.get(hasGroupWrapper))
+        $$render(consequent_5);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  var node_9 = $4.sibling(node_2, 2);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var p = root_8();
+      var text_1 = $4.child(p, true);
+      $4.reset(p);
+      $4.template_effect(() => {
+        $4.set_attribute(p, "id", $4.get(ownDescriptionId));
+        $4.set_text(text_1, $$props.description);
+      });
+      $4.append($$anchor2, p);
+    };
+    $4.if(node_9, ($$render) => {
+      if ($$props.description)
+        $$render(consequent_6);
+    });
+  }
+  var node_10 = $4.sibling(node_9, 2);
+  {
+    var consequent_7 = ($$anchor2) => {
+      var p_1 = root_9();
+      var text_2 = $4.child(p_1, true);
+      $4.reset(p_1);
+      $4.template_effect(() => {
+        $4.set_attribute(p_1, "id", $4.get(ownErrorId));
+        $4.set_text(text_2, $$props.error);
+      });
+      $4.append($$anchor2, p_1);
+    };
+    $4.if(node_10, ($$render) => {
+      if ($$props.error)
+        $$render(consequent_7);
+    });
+  }
+  $4.reset(div);
+  $4.append($$anchor, div);
+  $4.pop();
+}
+
+// src/components/modal/modal.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
 import { onDestroy } from "svelte";
 
 // src/_internal/overlay.ts
@@ -729,17 +1057,17 @@ function overflowFade() {
 }
 
 // src/components/modal/modal.svelte
-var root3 = $4.from_html(`<div class="cinder-modal__footer"><!></div>`);
-var root_12 = $4.from_html(`<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>`);
-var root_22 = $4.from_html(`<div class="cinder-modal__panel"><div class="cinder-modal__header"><h2 class="cinder-modal__title"> </h2></div> <div class="cinder-modal__body" tabindex="-1"><!></div> <!> <!></div>`);
-var root_32 = $4.from_html(`<dialog><!></dialog>`);
+var root4 = $5.from_html(`<div class="cinder-modal__footer"><!></div>`);
+var root_13 = $5.from_html(`<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>`);
+var root_23 = $5.from_html(`<div class="cinder-modal__panel"><div class="cinder-modal__header"><h2 class="cinder-modal__title"> </h2></div> <div class="cinder-modal__body" tabindex="-1"><!></div> <!> <!></div>`);
+var root_33 = $5.from_html(`<dialog><!></dialog>`);
 function Modal($$anchor, $$props) {
-  const titleId = $4.props_id();
-  $4.push($$props, true);
-  let open = $4.prop($$props, "open", 15, false), role = $4.prop($$props, "role", 3, "dialog"), dismissOnBackdropClick = $4.prop($$props, "dismissOnBackdropClick", 3, true), dismissOnEscape = $4.prop($$props, "dismissOnEscape", 3, true), showCloseButton = $4.prop($$props, "showCloseButton", 3, true), triggerRef = $4.prop($$props, "triggerRef", 3, null);
-  let dialogElement = $4.state(undefined);
-  let bodyElement = $4.state(undefined);
-  let mounted = $4.state(false);
+  const titleId = $5.props_id();
+  $5.push($$props, true);
+  let open = $5.prop($$props, "open", 15, false), role = $5.prop($$props, "role", 3, "dialog"), dismissOnBackdropClick = $5.prop($$props, "dismissOnBackdropClick", 3, true), dismissOnEscape = $5.prop($$props, "dismissOnEscape", 3, true), showCloseButton = $5.prop($$props, "showCloseButton", 3, true), triggerRef = $5.prop($$props, "triggerRef", 3, null);
+  let dialogElement = $5.state(undefined);
+  let bodyElement = $5.state(undefined);
+  let mounted = $5.state(false);
   let capturedFocus = null;
   let releaseBodyScrollLock = null;
   let releaseEscapeHandler = null;
@@ -762,28 +1090,28 @@ function Modal($$anchor, $$props) {
     releaseEscapeHandler = null;
   }
   const bodyOverflowFade = overflowFade();
-  $4.user_effect(() => {
-    $4.set(mounted, true);
+  $5.user_effect(() => {
+    $5.set(mounted, true);
   });
-  $4.user_effect(() => {
+  $5.user_effect(() => {
     if (role() === "alertdialog" && (dismissOnBackdropClick() !== false || dismissOnEscape() !== false || showCloseButton() !== false)) {
       devWarn('[cinder/Modal] role="alertdialog" requires dismissOnBackdropClick={false}, dismissOnEscape={false}, and showCloseButton={false}. ' + "Without these, Escape or backdrop click can bypass the mandatory acknowledgement. " + "Use <AlertDialog> instead, or pass all three companion props explicitly.");
     }
   });
-  $4.user_effect(() => {
-    if (!$4.get(dialogElement))
+  $5.user_effect(() => {
+    if (!$5.get(dialogElement))
       return;
-    if (open() && !$4.get(dialogElement).open) {
+    if (open() && !$5.get(dialogElement).open) {
       capturedFocus = captureFocus();
-      $4.get(dialogElement).showModal();
+      $5.get(dialogElement).showModal();
       acquireLock();
       acquireEscapeHandler();
-      const hasExplicitAutofocus = $4.get(dialogElement).querySelector("[autofocus]") !== null || Array.from($4.get(dialogElement).querySelectorAll("*")).some((el) => el.autofocus === true);
-      if (!hasExplicitAutofocus && $4.get(bodyElement)) {
-        $4.get(bodyElement).focus();
+      const hasExplicitAutofocus = $5.get(dialogElement).querySelector("[autofocus]") !== null || Array.from($5.get(dialogElement).querySelectorAll("*")).some((el) => el.autofocus === true);
+      if (!hasExplicitAutofocus && $5.get(bodyElement)) {
+        $5.get(bodyElement).focus();
       }
-    } else if (!open() && $4.get(dialogElement).open) {
-      $4.get(dialogElement).close();
+    } else if (!open() && $5.get(dialogElement).open) {
+      $5.get(dialogElement).close();
     }
   });
   function returnFocus() {
@@ -809,7 +1137,7 @@ function Modal($$anchor, $$props) {
     releaseEscape();
   });
   function handleBackdropClick(event) {
-    if (dismissOnBackdropClick() && event.target === $4.get(dialogElement)) {
+    if (dismissOnBackdropClick() && event.target === $5.get(dialogElement)) {
       dismiss();
     }
   }
@@ -819,12 +1147,12 @@ function Modal($$anchor, $$props) {
       return;
     dismiss();
   }
-  var fragment = $4.comment();
-  var node = $4.first_child(fragment);
+  var fragment = $5.comment();
+  var node = $5.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
-      var dialog = root_32();
-      $4.attribute_effect(dialog, ($0) => ({
+      var dialog = root_33();
+      $5.attribute_effect(dialog, ($0) => ({
         class: $0,
         role: role(),
         "aria-modal": "true",
@@ -834,86 +1162,98 @@ function Modal($$anchor, $$props) {
         onclick: handleBackdropClick,
         oncancel: handleNativeCancel
       }), [() => classNames("cinder-modal", $$props.class)]);
-      var node_1 = $4.child(dialog);
+      var node_1 = $5.child(dialog);
       {
         var consequent_2 = ($$anchor3) => {
-          var div = root_22();
-          var div_1 = $4.child(div);
-          var h2 = $4.child(div_1);
-          var text2 = $4.child(h2, true);
-          $4.reset(h2);
-          $4.reset(div_1);
-          var div_2 = $4.sibling(div_1, 2);
-          var node_2 = $4.child(div_2);
-          $4.snippet(node_2, () => $$props.children);
-          $4.reset(div_2);
-          $4.bind_this(div_2, ($$value) => $4.set(bodyElement, $$value), () => $4.get(bodyElement));
-          $4.attach(div_2, () => bodyOverflowFade);
-          var node_3 = $4.sibling(div_2, 2);
+          var div = root_23();
+          var div_1 = $5.child(div);
+          var h2 = $5.child(div_1);
+          var text2 = $5.child(h2, true);
+          $5.reset(h2);
+          $5.reset(div_1);
+          var div_2 = $5.sibling(div_1, 2);
+          var node_2 = $5.child(div_2);
+          $5.snippet(node_2, () => $$props.children);
+          $5.reset(div_2);
+          $5.bind_this(div_2, ($$value) => $5.set(bodyElement, $$value), () => $5.get(bodyElement));
+          $5.attach(div_2, () => bodyOverflowFade);
+          var node_3 = $5.sibling(div_2, 2);
           {
             var consequent = ($$anchor4) => {
-              var div_3 = root3();
-              var node_4 = $4.child(div_3);
-              $4.snippet(node_4, () => $$props.footer);
-              $4.reset(div_3);
-              $4.append($$anchor4, div_3);
+              var div_3 = root4();
+              var node_4 = $5.child(div_3);
+              $5.snippet(node_4, () => $$props.footer);
+              $5.reset(div_3);
+              $5.append($$anchor4, div_3);
             };
-            $4.if(node_3, ($$render) => {
+            $5.if(node_3, ($$render) => {
               if ($$props.footer)
                 $$render(consequent);
             });
           }
-          var node_5 = $4.sibling(node_3, 2);
+          var node_5 = $5.sibling(node_3, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var button = root_12();
-              $4.delegated("click", button, dismiss);
-              $4.append($$anchor4, button);
+              var button = root_13();
+              $5.delegated("click", button, dismiss);
+              $5.append($$anchor4, button);
             };
-            $4.if(node_5, ($$render) => {
+            $5.if(node_5, ($$render) => {
               if (showCloseButton())
                 $$render(consequent_1);
             });
           }
-          $4.reset(div);
-          $4.attach(div, () => createFocusTrap({
+          $5.reset(div);
+          $5.attach(div, () => createFocusTrap({
             active: () => open(),
             restoreFocus: false,
             manageInitialFocus: false
           }));
-          $4.template_effect(() => {
-            $4.set_attribute(h2, "id", titleId);
-            $4.set_text(text2, $$props.title);
+          $5.template_effect(() => {
+            $5.set_attribute(h2, "id", titleId);
+            $5.set_text(text2, $$props.title);
           });
-          $4.append($$anchor3, div);
+          $5.append($$anchor3, div);
         };
-        $4.if(node_1, ($$render) => {
+        $5.if(node_1, ($$render) => {
           if (open())
             $$render(consequent_2);
         });
       }
-      $4.reset(dialog);
-      $4.bind_this(dialog, ($$value) => $4.set(dialogElement, $$value), () => $4.get(dialogElement));
-      $4.append($$anchor2, dialog);
+      $5.reset(dialog);
+      $5.bind_this(dialog, ($$value) => $5.set(dialogElement, $$value), () => $5.get(dialogElement));
+      $5.append($$anchor2, dialog);
     };
-    $4.if(node, ($$render) => {
-      if ($4.get(mounted) || open())
+    $5.if(node, ($$render) => {
+      if ($5.get(mounted) || open())
         $$render(consequent_3);
     });
   }
-  $4.append($$anchor, fragment);
-  $4.pop();
+  $5.append($$anchor, fragment);
+  $5.pop();
 }
-$4.delegate(["click"]);
+$5.delegate(["click"]);
 
 // src/components/confirm-dialog/confirm-dialog.svelte
-var root4 = $5.from_html(`<!> <!>`, 1);
-var root_13 = $5.from_html(`<p class="cinder-confirm-dialog__description"> </p>`);
+var root5 = $6.from_html(`<!> <!>`, 1);
+var root_14 = $6.from_html(`<p class="cinder-confirm-dialog__description"> </p>`);
 function Confirm_dialog($$anchor, $$props) {
-  const descriptionId = $5.props_id();
-  $5.push($$props, true);
-  let open = $5.prop($$props, "open", 15, false), cancelLabel = $5.prop($$props, "cancelLabel", 3, "Cancel"), destructive = $5.prop($$props, "destructive", 3, false), triggerRef = $5.prop($$props, "triggerRef", 3, null);
-  const describedById = $5.derived(() => $$props.description ? descriptionId : undefined);
+  const descriptionId = $6.props_id();
+  $6.push($$props, true);
+  const typedConfirmationId = `${descriptionId}-typed-confirmation`;
+  let open = $6.prop($$props, "open", 15, false), cancelLabel = $6.prop($$props, "cancelLabel", 3, "Cancel"), destructive = $6.prop($$props, "destructive", 3, false), triggerRef = $6.prop($$props, "triggerRef", 3, null);
+  const describedById = $6.derived(() => $$props.description ? descriptionId : undefined);
+  const normalizedTypeToConfirm = $6.derived(() => $$props.typeToConfirm?.trim() || undefined);
+  const normalizedTypeToConfirmLabel = $6.derived(() => $$props.typeToConfirmLabel?.trim() || undefined);
+  let typedConfirmation = $6.state("");
+  let previousOpen = open();
+  const typedConfirmationMatches = $6.derived(() => $6.get(normalizedTypeToConfirm) === undefined || $6.get(typedConfirmation).trim().toLowerCase() === $6.get(normalizedTypeToConfirm).toLowerCase());
+  $6.user_effect(() => {
+    if (open() === previousOpen)
+      return;
+    previousOpen = open();
+    $6.set(typedConfirmation, "");
+  });
   function handleCancel() {
     open(false);
     $$props.oncancel?.();
@@ -924,41 +1264,45 @@ function Confirm_dialog($$anchor, $$props) {
   }
   {
     const footer = ($$anchor2) => {
-      var fragment_1 = root4();
-      var node = $5.first_child(fragment_1);
+      var fragment_1 = root5();
+      var node = $6.first_child(fragment_1);
       Button(node, {
         variant: "secondary",
         autofocus: true,
         onclick: handleCancel,
         children: ($$anchor3, $$slotProps) => {
-          $5.next();
-          var text3 = $5.text();
-          $5.template_effect(() => $5.set_text(text3, cancelLabel()));
-          $5.append($$anchor3, text3);
+          $6.next();
+          var text3 = $6.text();
+          $6.template_effect(() => $6.set_text(text3, cancelLabel()));
+          $6.append($$anchor3, text3);
         },
         $$slots: { default: true }
       });
-      var node_1 = $5.sibling(node, 2);
+      var node_1 = $6.sibling(node, 2);
       {
-        let $02 = $5.derived(() => destructive() ? "danger" : "primary");
+        let $02 = $6.derived(() => destructive() ? "danger" : "primary");
+        let $1 = $6.derived(() => !$6.get(typedConfirmationMatches));
         Button(node_1, {
           get variant() {
-            return $5.get($02);
+            return $6.get($02);
+          },
+          get disabled() {
+            return $6.get($1);
           },
           onclick: handleConfirm,
           children: ($$anchor3, $$slotProps) => {
-            $5.next();
-            var text_1 = $5.text();
-            $5.template_effect(() => $5.set_text(text_1, $$props.confirmLabel));
-            $5.append($$anchor3, text_1);
+            $6.next();
+            var text_1 = $6.text();
+            $6.template_effect(() => $6.set_text(text_1, $$props.confirmLabel));
+            $6.append($$anchor3, text_1);
           },
           $$slots: { default: true }
         });
       }
-      $5.append($$anchor2, fragment_1);
+      $6.append($$anchor2, fragment_1);
     };
-    let $0 = $5.derived(() => classNames("cinder-confirm-dialog", $$props.class));
-    Modal($$anchor, $5.spread_props({
+    let $0 = $6.derived(() => classNames("cinder-confirm-dialog", $$props.class));
+    Modal($$anchor, $6.spread_props({
       get title() {
         return $$props.title;
       },
@@ -966,9 +1310,9 @@ function Confirm_dialog($$anchor, $$props) {
         return triggerRef();
       },
       get class() {
-        return $5.get($0);
+        return $6.get($0);
       }
-    }, () => $5.get(describedById) ? { describedById: $5.get(describedById) } : {}, () => $$props.oncancel ? { ondismiss: $$props.oncancel } : {}, {
+    }, () => $6.get(describedById) ? { describedById: $6.get(describedById) } : {}, () => $$props.oncancel ? { ondismiss: $$props.oncancel } : {}, {
       get open() {
         return open();
       },
@@ -977,30 +1321,58 @@ function Confirm_dialog($$anchor, $$props) {
       },
       footer,
       children: ($$anchor2, $$slotProps) => {
-        var fragment_4 = $5.comment();
-        var node_2 = $5.first_child(fragment_4);
+        var fragment_4 = root5();
+        var node_2 = $6.first_child(fragment_4);
         {
           var consequent = ($$anchor3) => {
-            var p = root_13();
-            var text_2 = $5.child(p, true);
-            $5.reset(p);
-            $5.template_effect(() => {
-              $5.set_attribute(p, "id", descriptionId);
-              $5.set_text(text_2, $$props.description);
+            var p = root_14();
+            var text_2 = $6.child(p, true);
+            $6.reset(p);
+            $6.template_effect(() => {
+              $6.set_attribute(p, "id", descriptionId);
+              $6.set_text(text_2, $$props.description);
             });
-            $5.append($$anchor3, p);
+            $6.append($$anchor3, p);
           };
-          $5.if(node_2, ($$render) => {
+          $6.if(node_2, ($$render) => {
             if ($$props.description)
               $$render(consequent);
           });
         }
-        $5.append($$anchor2, fragment_4);
+        var node_3 = $6.sibling(node_2, 2);
+        {
+          var consequent_1 = ($$anchor3) => {
+            {
+              let $02 = $6.derived(() => $6.get(normalizedTypeToConfirmLabel) ?? `Type "${$6.get(normalizedTypeToConfirm)}" to confirm`);
+              Input($$anchor3, {
+                get id() {
+                  return typedConfirmationId;
+                },
+                class: "cinder-confirm-dialog__typed-confirmation",
+                get label() {
+                  return $6.get($02);
+                },
+                autocomplete: "off",
+                get value() {
+                  return $6.get(typedConfirmation);
+                },
+                set value($$value) {
+                  $6.set(typedConfirmation, $$value, true);
+                }
+              });
+            }
+          };
+          $6.if(node_3, ($$render) => {
+            if ($6.get(normalizedTypeToConfirm) !== undefined)
+              $$render(consequent_1);
+          });
+        }
+        $6.append($$anchor2, fragment_4);
       },
       $$slots: { footer: true, default: true }
     }));
   }
-  $5.pop();
+  $6.pop();
 }
 
 // src/components/confirm-dialog/index.ts
@@ -1010,4 +1382,4 @@ export {
   Confirm_dialog as ConfirmDialog
 };
 
-//# debugId=C6E37056E70D7F3D64756E2164756E21
+//# debugId=6A9B3E83BCDBF78764756E2164756E21