@ibobbyts/svelte-ui-utils 0.2.2 → 0.2.3

package/README.md

@@ -10,19 +10,19 @@ Install from the public npm registry. No GitHub Packages token is required.
 With Bun:
 
 ```bash
-bun add @ibobbyts/svelte-ui-utils@0.2.0
+bun add @ibobbyts/svelte-ui-utils@0.2.3
 ```
 
 Canonical Bun pull address:
 
 ```text
-@ibobbyts/svelte-ui-utils@0.2.0
+@ibobbyts/svelte-ui-utils@0.2.3
 ```
 
 With npm:
 
 ```bash
-npm install @ibobbyts/svelte-ui-utils@0.2.0
+npm install @ibobbyts/svelte-ui-utils@0.2.3
 ```
 
 The repository does not track `dist/`; releases and local integration builds run
@@ -41,7 +41,7 @@ import '@ibobbyts/svelte-ui-utils/style.css';
   import { ToastManager, toast } from '@ibobbyts/svelte-ui-utils/toast';
   import { Dropdown } from '@ibobbyts/svelte-ui-utils/dropdown';
   import { DropdownSearch, DropdownSearchMultiSelect } from '@ibobbyts/svelte-ui-utils/dropdown-search';
-  import { Modal, ConfirmDialog } from '@ibobbyts/svelte-ui-utils/modal';
+  import { Dialog, ConfirmDialog, InputDialog, CsvUploadDialog, ImagePreviewDialog, PasswordCopyDialog } from '@ibobbyts/svelte-ui-utils/dialog';
   import { DataTable, DateRangeFilter, FilterTable, NumberRangeFilter } from '@ibobbyts/svelte-ui-utils/table';
 </script>
 ```
@@ -49,7 +49,7 @@ import '@ibobbyts/svelte-ui-utils/style.css';
 The package root also re-exports the public modules:
 
 ```ts
-import { ToastManager, Dropdown, DropdownSearch, Modal, DataTable } from '@ibobbyts/svelte-ui-utils';
+import { ToastManager, Dropdown, DropdownSearch, Dialog, DataTable } from '@ibobbyts/svelte-ui-utils';
 ```
 
 ## Toast
@@ -153,31 +153,37 @@ In multiselect mode, the text input remains a search query. Selecting an item
 adds or removes it from `selectedItems`, clears the query, and emits both
 `onChange` and `onSelectedItemsChange`.
 
-## Modal and ConfirmDialog
+## Dialogs
 
 ```svelte
 <script lang="ts">
-  import { ConfirmDialog, Modal } from '@ibobbyts/svelte-ui-utils/modal';
+  import { ConfirmDialog, Dialog, InputDialog } from '@ibobbyts/svelte-ui-utils/dialog';
 
-  let modalOpen = false;
+  let dialogOpen = false;
   let confirmOpen = false;
+  let inputOpen = false;
+  let passwordOpen = false;
+  let name = '';
 </script>
 
-<button type="button" on:click={() => (modalOpen = true)}>Open modal</button>
+<button type="button" on:click={() => (dialogOpen = true)}>Open dialog</button>
 
-<Modal
-  open={modalOpen}
+<Dialog
+  open={dialogOpen}
   title="Edit record"
   description="Update the shared fields."
   closeLabel="Close dialog"
-  onClose={() => (modalOpen = false)}
+  blurBackdrop={true}
+  showCountdown={true}
+  countdownDurationMs={30000}
+  onClose={() => (dialogOpen = false)}
 >
   <p>Dialog body content goes here.</p>
   <svelte:fragment slot="footer">
-    <button type="button" class="suu-modal__button" on:click={() => (modalOpen = false)}>Cancel</button>
-    <button type="button" class="suu-modal__button suu-modal__button--primary">Save</button>
+    <button type="button" class="suu-dialog__button" on:click={() => (dialogOpen = false)}>Cancel</button>
+    <button type="button" class="suu-dialog__button suu-dialog__button--primary">Save</button>
   </svelte:fragment>
-</Modal>
+</Dialog>
 
 <ConfirmDialog
   open={confirmOpen}
@@ -191,11 +197,38 @@ adds or removes it from `selectedItems`, clears the query, and emits both
     confirmOpen = false;
   }}
 />
+
+<InputDialog
+  open={inputOpen}
+  title="Rename"
+  inputLabel="Name"
+  bind:inputValue={name}
+  onClose={() => (inputOpen = false)}
+  onConfirm={(value) => {
+    name = value;
+    inputOpen = false;
+  }}
+/>
+
+<PasswordCopyDialog
+  open={passwordOpen}
+  title="Temporary password"
+  message="This value is shown only once."
+  value="Abc123xy"
+  valueLabel="Password"
+  copyLabel="Copy password"
+  copiedLabel="Copied"
+  doneLabel="Done"
+  onClose={() => (passwordOpen = false)}
+/>
 ```
 
-Both components are controlled by the consuming app. `Modal` calls `onClose`
+Dialog components are controlled by the consuming app. `Dialog` calls `onClose`
 from the close button, backdrop, or Escape key when dismissible; it does not
-mutate `open` internally.
+mutate `open` internally. Set `dimBackdrop={false}` to disable background
+darkening, `blurBackdrop={true}` to blur content behind the dialog, and
+`showCountdown={true}` with `countdownDurationMs` to show a toast-style top
+countdown bar.
 
 ## Dropdown
 

package/dist/{modal → dialog}/ConfirmDialog.svelte

@@ -1,8 +1,8 @@
 <svelte:options runes={false} />
 
 <script lang="ts">
-  import Modal from './Modal.svelte';
-  import type { ConfirmDialogIntent, ModalSize } from './types.js';
+  import Dialog from './Dialog.svelte';
+  import type { ConfirmDialogIntent, DialogSize } from './types.js';
 
   export let open = false;
   export let title = 'Confirm';
@@ -11,10 +11,19 @@
   export let cancelLabel = 'Cancel';
   export let closeLabel = 'Close dialog';
   export let intent: ConfirmDialogIntent = 'default';
-  export let size: ModalSize = 'sm';
+  export let size: DialogSize = 'sm';
   export let confirmDisabled = false;
   export let cancelDisabled = false;
   export let dismissible = true;
+  export let closeOnBackdrop = true;
+  export let closeOnEscape = true;
+  export let dimBackdrop = true;
+  export let blurBackdrop = false;
+  export let backdropOpacity: number | string = 0.46;
+  export let backdropBlur = '6px';
+  export let showCountdown = false;
+  export let countdownDurationMs = 0;
+  export let countdownLabel = 'Dialog countdown';
   export let onConfirm: (() => void | Promise<void>) | undefined = undefined;
   export let onCancel: (() => void) | undefined = undefined;
   export let onClose: (() => void) | undefined = undefined;
@@ -33,13 +42,21 @@
   }
 </script>
 
-<Modal
+<Dialog
   {open}
   {title}
   {closeLabel}
   {size}
   {dismissible}
-  description={message}
+  {closeOnBackdrop}
+  {closeOnEscape}
+  {dimBackdrop}
+  {blurBackdrop}
+  {backdropOpacity}
+  {backdropBlur}
+  {showCountdown}
+  {countdownDurationMs}
+  {countdownLabel}
   onClose={handleClose}
 >
   <slot>
@@ -51,7 +68,7 @@
   <svelte:fragment slot="footer">
     <button
       type="button"
-      class="suu-modal__button"
+      class="suu-dialog__button"
       disabled={cancelDisabled}
       on:click={handleCancel}
     >
@@ -59,11 +76,11 @@
     </button>
     <button
       type="button"
-      class={`suu-modal__button suu-modal__button--primary suu-modal__button--${intent}`}
+      class={`suu-dialog__button suu-dialog__button--primary suu-dialog__button--${intent}`}
       disabled={confirmDisabled}
       on:click={handleConfirm}
     >
       {confirmLabel}
     </button>
   </svelte:fragment>
-</Modal>
+</Dialog>

package/dist/{modal → dialog}/ConfirmDialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmDialogIntent, ModalSize } from './types.js';
+import type { ConfirmDialogIntent, DialogSize } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -25,10 +25,19 @@ declare const ConfirmDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     cancelLabel?: string;
     closeLabel?: string;
     intent?: ConfirmDialogIntent;
-    size?: ModalSize;
+    size?: DialogSize;
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
     dismissible?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    dimBackdrop?: boolean;
+    blurBackdrop?: boolean;
+    backdropOpacity?: number | string;
+    backdropBlur?: string;
+    showCountdown?: boolean;
+    countdownDurationMs?: number;
+    countdownLabel?: string;
     onConfirm?: (() => void | Promise<void>) | undefined;
     onCancel?: (() => void) | undefined;
     onClose?: (() => void) | undefined;

package/dist/dialog/ConfirmDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAiElE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;;aAfqxB,mBAAmB;WAAS,UAAU;;;;;;;;sBAA8R,MAAM,GAAG,MAAM;;;;;gBAAkL,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;cAetzC,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/dialog/CsvUploadDialog.svelte

@@ -0,0 +1,207 @@
+<svelte:options runes={false} />
+
+<script lang="ts">
+  import Dialog from './Dialog.svelte';
+  import type { DialogSize } from './types.js';
+
+  export let open = false;
+  export let title = 'Upload CSV';
+  export let description = '';
+  export let closeLabel = 'Close dialog';
+  export let size: DialogSize = 'lg';
+  export let dismissible = true;
+  export let closeOnBackdrop = true;
+  export let closeOnEscape = true;
+  export let dimBackdrop = true;
+  export let blurBackdrop = false;
+  export let backdropOpacity: number | string = 0.46;
+  export let backdropBlur = '6px';
+  export let templateUrl: string | undefined = undefined;
+  export let templateDownloadName: string | undefined = undefined;
+  export let downloadTemplateLabel = 'Download template';
+  export let fileLabel = 'Select CSV file';
+  export let uploadLabel = 'Upload';
+  export let cancelLabel = 'Cancel';
+  export let doneLabel = 'Done';
+  export let uploadAnotherLabel = 'Upload another';
+  export let instructionsTitle = 'Instructions';
+  export let instructions: string[] = [];
+  export let accept = '.csv,text/csv';
+  export let missingFileMessage = 'Please select a CSV file.';
+  export let uploadFailedMessage = 'Upload failed. Please try again.';
+  export let successMessage = 'Upload completed.';
+  export let externalError = '';
+  export let disabled = false;
+  export let onUpload: ((file: File) => void | Promise<void>) | undefined = undefined;
+  export let onCancel: (() => void) | undefined = undefined;
+  export let onClose: (() => void) | undefined = undefined;
+  export let onFileChange: ((file: File | null) => void) | undefined = undefined;
+
+  let selectedFile: File | null = null;
+  let fileInput: HTMLInputElement | undefined;
+  let localError = '';
+  let localUploading = false;
+  let uploadComplete = false;
+
+  $: isBusy = disabled || localUploading;
+  $: effectiveError = externalError || localError;
+
+  function resetFileState() {
+    selectedFile = null;
+    localError = '';
+    uploadComplete = false;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+    onFileChange?.(null);
+  }
+
+  function handleClose() {
+    resetFileState();
+    onClose?.();
+  }
+
+  function handleCancel() {
+    resetFileState();
+    onCancel?.();
+    onClose?.();
+  }
+
+  function handleFileChange(event: Event) {
+    const target = event.currentTarget;
+    selectedFile = target instanceof HTMLInputElement
+      ? target.files?.[0] ?? null
+      : null;
+    localError = '';
+    uploadComplete = false;
+    onFileChange?.(selectedFile);
+  }
+
+  async function handleUpload() {
+    if (!selectedFile) {
+      localError = missingFileMessage;
+      return;
+    }
+
+    localError = '';
+    localUploading = true;
+
+    try {
+      await onUpload?.(selectedFile);
+      uploadComplete = true;
+    } catch (error) {
+      localError = error instanceof Error ? error.message : uploadFailedMessage;
+    } finally {
+      localUploading = false;
+    }
+  }
+</script>
+
+<Dialog
+  {open}
+  {title}
+  {description}
+  {closeLabel}
+  {size}
+  {dismissible}
+  {closeOnBackdrop}
+  {closeOnEscape}
+  {dimBackdrop}
+  {blurBackdrop}
+  {backdropOpacity}
+  {backdropBlur}
+  onClose={handleClose}
+>
+  <div class="suu-csv-upload-dialog">
+    {#if templateUrl}
+      <div class="suu-csv-upload-dialog__center">
+        <a
+          class="suu-dialog__button"
+          href={templateUrl}
+          download={templateDownloadName}
+        >
+          {downloadTemplateLabel}
+        </a>
+      </div>
+    {/if}
+
+    <label class="suu-csv-upload-dialog__field">
+      <span>{fileLabel}</span>
+      <input
+        bind:this={fileInput}
+        type="file"
+        {accept}
+        disabled={isBusy}
+        on:change={handleFileChange}
+      />
+    </label>
+
+    {#if selectedFile}
+      <p class="suu-csv-upload-dialog__selected">{selectedFile.name}</p>
+    {/if}
+
+    {#if $$slots.preview}
+      <slot name="preview" file={selectedFile} uploading={localUploading} complete={uploadComplete} />
+    {/if}
+
+    {#if effectiveError}
+      <div class="suu-dialog__alert suu-dialog__alert--error" role="alert">
+        {effectiveError}
+      </div>
+    {/if}
+
+    {#if localUploading}
+      <div class="suu-dialog__status" role="status">
+        <span class="suu-dialog__spinner" aria-hidden="true"></span>
+        <span>{uploadLabel}...</span>
+      </div>
+    {/if}
+
+    {#if uploadComplete}
+      <div class="suu-dialog__alert suu-dialog__alert--success" role="status">
+        {successMessage}
+      </div>
+    {/if}
+
+    {#if instructions.length > 0}
+      <section class="suu-csv-upload-dialog__instructions" aria-label={instructionsTitle}>
+        <h3>{instructionsTitle}</h3>
+        <ul>
+          {#each instructions as instruction}
+            <li>{instruction}</li>
+          {/each}
+        </ul>
+      </section>
+    {/if}
+  </div>
+
+  <svelte:fragment slot="footer">
+    <button
+      type="button"
+      class="suu-dialog__button"
+      disabled={isBusy}
+      on:click={handleCancel}
+    >
+      {uploadComplete ? doneLabel : cancelLabel}
+    </button>
+    {#if uploadComplete}
+      <button
+        type="button"
+        class="suu-dialog__button suu-dialog__button--primary"
+        disabled={isBusy}
+        on:click={resetFileState}
+      >
+        {uploadAnotherLabel}
+      </button>
+    {:else}
+      <button
+        type="button"
+        class="suu-dialog__button suu-dialog__button--primary"
+        disabled={isBusy || !selectedFile}
+        on:click={handleUpload}
+      >
+        {uploadLabel}
+      </button>
+    {/if}
+  </svelte:fragment>
+</Dialog>

package/dist/dialog/CsvUploadDialog.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { DialogSize } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CsvUploadDialog: $$__sveltets_2_IsomorphicComponent<{
+    open?: boolean;
+    title?: string;
+    description?: string;
+    closeLabel?: string;
+    size?: DialogSize;
+    dismissible?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    dimBackdrop?: boolean;
+    blurBackdrop?: boolean;
+    backdropOpacity?: number | string;
+    backdropBlur?: string;
+    templateUrl?: string | undefined;
+    templateDownloadName?: string | undefined;
+    downloadTemplateLabel?: string;
+    fileLabel?: string;
+    uploadLabel?: string;
+    cancelLabel?: string;
+    doneLabel?: string;
+    uploadAnotherLabel?: string;
+    instructionsTitle?: string;
+    instructions?: string[];
+    accept?: string;
+    missingFileMessage?: string;
+    uploadFailedMessage?: string;
+    successMessage?: string;
+    externalError?: string;
+    disabled?: boolean;
+    onUpload?: ((file: File) => void | Promise<void>) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    onFileChange?: ((file: File | null) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    preview: {
+        file: null;
+        uploading: boolean;
+        complete: boolean;
+    };
+}, {}, string>;
+type CsvUploadDialog = InstanceType<typeof CsvUploadDialog>;
+export default CsvUploadDialog;
+//# sourceMappingURL=CsvUploadDialog.svelte.d.ts.map

package/dist/dialog/CsvUploadDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CsvUploadDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/CsvUploadDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA6K7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,eAAe;;;;;WAfggC,UAAU;;;;;;sBAA4M,MAAM,GAAG,MAAM;;kBAAoD,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;;;;;;;;mBAAqS,MAAM,EAAE;;;;;;;eAAiP,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;mBAAiB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAep9D,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/{modal/Modal.svelte → dialog/Dialog.svelte}

@@ -2,29 +2,40 @@
 
 <script lang="ts">
   import { tick } from 'svelte';
-  import type { ModalSize } from './types.js';
+  import type { DialogSize } from './types.js';
 
   export let open = false;
   export let title = '';
   export let description = '';
   export let closeLabel = 'Close dialog';
-  export let size: ModalSize = 'md';
+  export let size: DialogSize = 'md';
   export let dismissible = true;
+  export let showCloseButton = true;
   export let closeOnBackdrop = true;
   export let closeOnEscape = true;
+  export let dimBackdrop = true;
+  export let blurBackdrop = false;
+  export let backdropOpacity: number | string = 0.46;
+  export let backdropBlur = '6px';
+  export let showCountdown = false;
+  export let countdownDurationMs = 0;
+  export let countdownLabel = 'Dialog countdown';
   export let labelledBy: string | undefined = undefined;
   export let describedBy: string | undefined = undefined;
   export let onClose: (() => void) | undefined = undefined;
 
   let dialogElement: HTMLElement | undefined;
-  let titleId = `suu-modal-title-${Math.random().toString(36).slice(2)}`;
-  let descriptionId = `suu-modal-description-${Math.random().toString(36).slice(2)}`;
+  let titleId = `suu-dialog-title-${Math.random().toString(36).slice(2)}`;
+  let descriptionId = `suu-dialog-description-${Math.random().toString(36).slice(2)}`;
   let wasOpen = false;
   let previouslyFocusedElement: HTMLElement | null = null;
 
   $: resolvedLabelledBy = labelledBy ?? (title ? titleId : undefined);
   $: resolvedDescribedBy =
     describedBy ?? (description ? descriptionId : undefined);
+  $: backdropStyle =
+    `--suu-dialog-backdrop-opacity: ${backdropOpacity}; --suu-dialog-backdrop-blur: ${backdropBlur};`;
+  $: countdownStyle = `--suu-dialog-countdown-duration: ${Math.max(0, countdownDurationMs)}ms;`;
   $: if (open && !wasOpen) {
     wasOpen = true;
     void focusDialog();
@@ -67,7 +78,7 @@
   }
 
   function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && closeOnEscape) {
+    if (open && event.key === 'Escape' && closeOnEscape) {
       event.preventDefault();
       requestClose();
     }
@@ -78,34 +89,45 @@
 
 {#if open}
   <div
-    class="suu-modal-backdrop"
+    class="suu-dialog-backdrop"
+    data-dimmed={dimBackdrop ? 'true' : 'false'}
+    data-blurred={blurBackdrop ? 'true' : 'false'}
+    style={backdropStyle}
     role="presentation"
     on:mousedown={handleBackdropMouseDown}
   >
     <div
       bind:this={dialogElement}
-      class={`suu-modal suu-modal--${size}`}
+      class={`suu-dialog suu-dialog--${size}`}
       role="dialog"
       aria-modal="true"
       aria-labelledby={resolvedLabelledBy}
       aria-describedby={resolvedDescribedBy}
       tabindex="-1"
     >
-      <header class="suu-modal__header">
-        <div class="suu-modal__heading">
+      {#if showCountdown && countdownDurationMs > 0}
+        <div
+          class="suu-dialog__countdown"
+          style={countdownStyle}
+          role="timer"
+          aria-label={countdownLabel}
+        ></div>
+      {/if}
+      <header class="suu-dialog__header">
+        <div class="suu-dialog__heading">
           {#if title}
-            <h2 class="suu-modal__title" id={titleId}>{title}</h2>
+            <h2 class="suu-dialog__title" id={titleId}>{title}</h2>
           {/if}
           {#if description}
-            <p class="suu-modal__description" id={descriptionId}>
+            <p class="suu-dialog__description" id={descriptionId}>
               {description}
             </p>
           {/if}
         </div>
-        {#if dismissible}
+        {#if showCloseButton && dismissible}
           <button
             type="button"
-            class="suu-modal__close"
+            class="suu-dialog__close"
             aria-label={closeLabel}
             title={closeLabel}
             on:click={requestClose}
@@ -117,12 +139,12 @@
         {/if}
       </header>
 
-      <div class="suu-modal__body">
+      <div class="suu-dialog__body">
         <slot />
       </div>
 
       {#if $$slots.footer}
-        <footer class="suu-modal__footer">
+        <footer class="suu-dialog__footer">
           <slot name="footer" />
         </footer>
       {/if}

package/dist/{modal/Modal.svelte.d.ts → dialog/Dialog.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ModalSize } from './types.js';
+import type { DialogSize } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -17,15 +17,23 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } ? Props extends Record<string, never> ? any : {
     children?: any;
 } : {});
-declare const Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     open?: boolean;
     title?: string;
     description?: string;
     closeLabel?: string;
-    size?: ModalSize;
+    size?: DialogSize;
     dismissible?: boolean;
+    showCloseButton?: boolean;
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;
+    dimBackdrop?: boolean;
+    blurBackdrop?: boolean;
+    backdropOpacity?: number | string;
+    backdropBlur?: string;
+    showCountdown?: boolean;
+    countdownDurationMs?: number;
+    countdownLabel?: string;
     labelledBy?: string | undefined;
     describedBy?: string | undefined;
     onClose?: (() => void) | undefined;
@@ -38,6 +46,6 @@ declare const Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWith
     default: {};
     footer: {};
 }, {}, string>;
-type Modal = InstanceType<typeof Modal>;
-export default Modal;
-//# sourceMappingURL=Modal.svelte.d.ts.map
+type Dialog = InstanceType<typeof Dialog>;
+export default Dialog;
+//# sourceMappingURL=Dialog.svelte.d.ts.map

package/dist/dialog/Dialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAoI7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfkoB,UAAU;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAevkC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}