plasma-svelte 0.0.1

package/dist/modal/ConfirmDialog.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../button/Button.svelte";
+
+  type ConfirmVariant = "primary" | "danger" | "default";
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: ConfirmVariant;
+    loading?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+    onconfirm?: () => void | Promise<void>;
+    oncancel?: () => void;
+    onclose?: () => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title = "Confirm Action",
+    message = "",
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    confirmVariant = "primary",
+    loading = false,
+    icon,
+    children,
+    onconfirm,
+    oncancel,
+    onclose,
+  }: Props = $props();
+
+  async function handleConfirm() {
+    if (loading) return;
+    await onconfirm?.();
+  }
+
+  function handleCancel() {
+    if (loading) return;
+    open = false;
+    oncancel?.();
+  }
+</script>
+
+<Modal
+  bind:open
+  {title}
+  size="sm"
+  closeOnEsc={!loading}
+  closeOnBackdrop={!loading}
+  {onclose}
+>
+  <div class="plasma-confirm-body">
+    {#if icon}
+      <div class="plasma-confirm-icon plasma-confirm-icon--{confirmVariant}">
+        {@render icon()}
+      </div>
+    {:else if confirmVariant === "danger"}
+      <div class="plasma-confirm-icon plasma-confirm-icon--danger">
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          width="28"
+          height="28"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+      </div>
+    {/if}
+
+    <div class="plasma-confirm-text">
+      {#if message}
+        <p class="plasma-confirm-message">{message}</p>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+
+  {#snippet footer()}
+    <Button
+      variant="flat"
+      disabled={loading}
+      onclick={handleCancel}
+    >
+      {cancelText}
+    </Button>
+    <Button
+      variant={confirmVariant === "danger" ? "danger" : "primary"}
+      {loading}
+      onclick={handleConfirm}
+    >
+      {confirmText}
+    </Button>
+  {/snippet}
+</Modal>
+
+<style>
+  .plasma-confirm-body {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--plasma-space-md);
+  }
+
+  .plasma-confirm-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .plasma-confirm-icon--danger {
+    color: var(--plasma-color-negative);
+  }
+
+  .plasma-confirm-icon--primary {
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-confirm-icon--default {
+    color: var(--plasma-color-text-muted);
+  }
+
+  .plasma-confirm-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--plasma-space-xs);
+  }
+
+  .plasma-confirm-message {
+    margin: 0;
+    font-size: var(--plasma-font-size-base);
+    line-height: var(--plasma-line-height-base);
+    color: var(--plasma-color-text);
+  }
+</style>

package/dist/modal/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+type ConfirmVariant = "primary" | "danger" | "default";
+interface Props {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: ConfirmVariant;
+    loading?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+    onconfirm?: () => void | Promise<void>;
+    oncancel?: () => void;
+    onclose?: () => void;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/modal/Modal.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ModalSize = "sm" | "md" | "lg" | "fullscreen";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    title?: string;
+    size?: ModalSize;
+    inline?: boolean;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+  }
+
+  let {
+    open = $bindable(false),
+    title = "",
+    size = "md",
+    inline = false,
+    closeOnEsc = true,
+    closeOnBackdrop = true,
+    header,
+    footer,
+    children,
+    onclose,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (!inline && closeOnBackdrop && e.target === e.currentTarget) {
+      close();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (open && !inline && closeOnEsc && e.key === "Escape") {
+      e.stopPropagation();
+      close();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- biome-ignore lint/a11y/noStaticElementInteractions: false positive -->
+  <div
+    class="plasma-modal-backdrop"
+    class:plasma-modal-backdrop--inline={inline}
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? "plasma-modal-title" : undefined}
+      class="plasma-modal plasma-modal--{size} {customClass}"
+      {...restProps}
+    >
+      <!-- Title Bar -->
+      <div class="plasma-modal-header">
+        {#if header}
+          {@render header()}
+        {:else}
+          <h2 id="plasma-modal-title" class="plasma-modal-title">{title}</h2>
+        {/if}
+
+        <button
+          type="button"
+          class="plasma-modal-close-btn"
+          onclick={close}
+          aria-label="Close dialog"
+        >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 16 16"
+            width="12"
+            height="12"
+            fill="currentColor"
+          >
+            <path
+              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Body -->
+      {#if children}
+        <div class="plasma-modal-body">
+          {@render children()}
+        </div>
+      {/if}
+
+      <!-- Footer -->
+      {#if footer}
+        <div class="plasma-modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* --------------------------------------------------------------------------
+     Backdrop
+     -------------------------------------------------------------------------- */
+  .plasma-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--plasma-space-lg);
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    animation: plasma-fade-in var(--plasma-duration-base)
+      var(--plasma-ease-default);
+  }
+
+  .plasma-modal-backdrop--inline {
+    position: relative;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    z-index: auto;
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--plasma-space-md);
+    background-color: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    animation: none;
+  }
+
+  /* --------------------------------------------------------------------------
+     Modal Frame (KDE Breeze Floating Window)
+     -------------------------------------------------------------------------- */
+  .plasma-modal {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 0 auto;
+    max-height: calc(100vh - 4rem);
+    background-color: var(--plasma-color-surface);
+    color: var(--plasma-color-text);
+    font-family: var(--plasma-font-sans);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-xl);
+    box-shadow: var(--plasma-shadow-lg);
+    overflow: hidden;
+    animation: plasma-scale-in var(--plasma-duration-base)
+      var(--plasma-ease-default);
+  }
+
+  /* Sizing */
+  .plasma-modal--sm {
+    max-width: 400px;
+  }
+  .plasma-modal--md {
+    max-width: 540px;
+  }
+  .plasma-modal--lg {
+    max-width: 760px;
+  }
+  .plasma-modal--fullscreen {
+    max-width: calc(100vw - 2rem);
+    height: calc(100vh - 2rem);
+  }
+
+  /* --------------------------------------------------------------------------
+     Header / Title Bar
+     -------------------------------------------------------------------------- */
+  .plasma-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--plasma-space-md) var(--plasma-space-lg);
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface);
+  }
+
+  .plasma-modal-title {
+    margin: 0;
+    font-size: var(--plasma-font-size-md);
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-modal-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--plasma-radius-full);
+    border: none;
+    background: transparent;
+    color: var(--plasma-color-text-muted);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-modal-close-btn:hover {
+    color: #ffffff;
+    background-color: var(--plasma-color-negative);
+  }
+
+  .plasma-modal-close-btn:focus-visible {
+    outline: 2px solid var(--plasma-color-highlight);
+  }
+
+  /* --------------------------------------------------------------------------
+     Body & Footer
+     -------------------------------------------------------------------------- */
+  .plasma-modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--plasma-space-lg);
+    font-size: var(--plasma-font-size-base);
+    line-height: var(--plasma-line-height-base);
+  }
+
+  .plasma-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--plasma-space-sm);
+    padding: var(--plasma-space-md) var(--plasma-space-lg);
+    border-top: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  /* --------------------------------------------------------------------------
+     Animations
+     -------------------------------------------------------------------------- */
+  @keyframes plasma-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes plasma-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96) translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+</style>

package/dist/modal/Modal.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ModalSize = "sm" | "md" | "lg" | "fullscreen";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    title?: string;
+    size?: ModalSize;
+    inline?: boolean;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;