@hashrytech/quick-components-kit 0.17.2 → 0.17.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.17.4
+
+### Patch Changes
+
+- patch: adding higher z-index for modal and drawer
+
+## 0.17.3
+
+### Patch Changes
+
+- refactor: Drawers, Modals, Tables, trap focus etc
+
 ## 0.17.2
 
 ### Patch Changes

package/dist/actions/portal.d.ts

@@ -1,7 +1,7 @@
 export type PortalOptions = {
     target?: HTMLElement;
-    prepend?: boolean;
+    append?: boolean;
 };
-export declare function portalAction(node: HTMLElement, { target, prepend }?: PortalOptions): {
+export declare function portalAction(node: HTMLElement, { target, append }?: PortalOptions): {
     destroy(): void;
 };

package/dist/actions/portal.js

@@ -21,15 +21,15 @@
  * @param node - The HTML element to be portaled.
  * @param options - Optional config:
  *   - `target`: The DOM node to portal into (defaults to `document.body`)
- *   - `prepend`: Whether to insert at the beginning instead of appending (default: true)
+ *   - `append`: Whether to insert at the end instead of appending to the begining (default: true)
  */
 import { browser } from '$app/environment';
-export function portalAction(node, { target = browser ? document.body : undefined, prepend = true } = {}) {
-    if (prepend) {
-        target?.prepend(node);
+export function portalAction(node, { target = browser ? document.body : undefined, append = true } = {}) {
+    if (append) {
+        target?.appendChild(node);
     }
     else {
-        target?.appendChild(node);
+        target?.prepend(node);
     }
     return {
         destroy() {

package/dist/actions/trap-focus.d.ts

@@ -0,0 +1,25 @@
+export declare const FOCUSABLE_ELEMENTS: string[];
+/**
+ * @action trapFocus
+ *
+ * A Svelte action to trap keyboard focus within a DOM node.
+ * Useful for modals, dialogs, and overlays to ensure accessibility and usability.
+ *
+ * Automatically focuses the first focusable element inside the node when mounted.
+ * Prevents `Tab` and `Shift+Tab` from leaving the focusable area.
+ * Restores focus to the previously focused element when destroyed.
+ *
+ * @example
+ * ```svelte
+ * <div use:trapFocus>
+ *   <button>First</button>
+ *   <button>Second</button>
+ * </div>
+ * ```
+ *
+ * @param node HTMLElement to trap focus within
+ * @returns An object with a `destroy` method to clean up listeners and restore previous focus
+ */
+export declare function trapFocus(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/actions/trap-focus.js

@@ -0,0 +1,91 @@
+export const FOCUSABLE_ELEMENTS = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+    'select:not([disabled]):not([aria-hidden])',
+    'textarea:not([disabled]):not([aria-hidden])',
+    'button:not([disabled]):not([aria-hidden])',
+    'iframe',
+    'object',
+    'embed',
+    '[contenteditable]',
+    '[tabindex]:not([tabindex^="-"])',
+];
+/**
+ * @action trapFocus
+ *
+ * A Svelte action to trap keyboard focus within a DOM node.
+ * Useful for modals, dialogs, and overlays to ensure accessibility and usability.
+ *
+ * Automatically focuses the first focusable element inside the node when mounted.
+ * Prevents `Tab` and `Shift+Tab` from leaving the focusable area.
+ * Restores focus to the previously focused element when destroyed.
+ *
+ * @example
+ * ```svelte
+ * <div use:trapFocus>
+ *   <button>First</button>
+ *   <button>Second</button>
+ * </div>
+ * ```
+ *
+ * @param node HTMLElement to trap focus within
+ * @returns An object with a `destroy` method to clean up listeners and restore previous focus
+ */
+export function trapFocus(node) {
+    const previous = document.activeElement;
+    function focusable() {
+        return Array.from(node.querySelectorAll('button, [href], input, select, textarea, iframe, object, embed, [contenteditable], [tabindex]:not([tabindex="-1"])')).filter(el => {
+            // Skip if disabled
+            if (el.hasAttribute('disabled'))
+                return false;
+            // Skip if hidden attribute is present
+            if (el.hidden)
+                return false;
+            // Skip if any parent is aria-hidden
+            let current = el;
+            while (current) {
+                if (current.getAttribute('aria-hidden') === 'true')
+                    return false;
+                current = current.parentElement;
+            }
+            // Skip if not visible via CSS
+            const style = getComputedStyle(el);
+            if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0')
+                return false;
+            return true;
+        });
+    }
+    function handleKeydown(event) {
+        if (event.key !== 'Tab')
+            return;
+        const elements = focusable();
+        if (elements.length === 0)
+            return;
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey) {
+            if (active === first || !elements.includes(active)) {
+                last.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (active === last || !elements.includes(active)) {
+                first.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    // Focus the first element and add keydown listener
+    const elements = focusable();
+    elements[0]?.focus();
+    node.addEventListener('keydown', handleKeydown);
+    return {
+        destroy() {
+            node.removeEventListener('keydown', handleKeydown);
+            previous?.focus();
+        }
+    };
+}

package/dist/components/button/Button.svelte

@@ -20,7 +20,7 @@
 
 </script>
 
-<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 bg-primary-button hover:bg-primary-button-hover rounded-primary w-fit cursor-pointer text-white focus:outline-focus-primary", 
+<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 focus:outline-primary-focus bg-primary-button hover:bg-primary-button-hover rounded-primary w-fit cursor-pointer text-white focus:ring-primary-focus focus:ring", 
   "disabled:bg-primary-button/60 disabled:cursor-default", props.class)}
   {onclick}>
   {#if icon}<span class="w-10">{@render icon()}</span>{/if}

package/dist/components/drawer/Drawer.svelte

@@ -1,65 +1,60 @@
 <!--
 @component Drawer
 
-A flexible slide-in drawer component built with Svelte 5 and Tailwind CSS. Supports positional rendering (`left`, `right`, `top`, `bottom`), transition control, accessibility, and optional background overlay. Typically used for side menus, filters, or modal-like panels.
+A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS and transitions. Includes focus trapping, overlay support, inert background, and escape key handling.
 
 ## Props
 
 - `open?`: `boolean` — Whether the drawer is visible. Bindable.
-- `escapeKeyClose?`: `boolean` — If true, pressing Escape closes the drawer. Default: `true`.
-- `disableBodyScroll?`: `boolean` — Prevents body scrolling when drawer is open. Default: `true`.
-- `ariaLabel?`: `string` — Accessibility label for the drawer. Default: `"Drawer"`.
-- `position?`: `"left" | "right" | "top" | "bottom"` — Direction the drawer slides from. Default: `"left"`.
-- `transitionDuration?`: `number` — Duration of fly transition in milliseconds. Defaults to `config.transitionDuration`.
-- `transitionDistance?`: `number` — Distance the drawer slides in from. Default: `240`.
-- `overlayClasses?`: `string` — Additional classes passed to the background overlay.
-- `class?`: `ClassNameValue` — Tailwind classes for the drawer content container.
-- `children?`: `Snippet` — Svelte fragment rendered inside the drawer content.
-
-## Slots
-
-This component uses `children` as a rendered snippet via `{@render}`.
-
-## Overlay
-
-The `<Overlay>` component is used to darken the background and optionally block interaction. It is clickable and will trigger the drawer to close unless stopped by event propagation. You can customize its styling using the `overlayClasses` prop.
+- `escapeKeyClose?`: `boolean` — If `true`, allows closing the drawer via the Escape key. Default: `true`.
+- `disableBodyScroll?`: `boolean` — Prevents body scroll while drawer is open. Default: `true`.
+- `inertId?`: `string` — DOM element ID to set `inert` while the drawer is open (for accessibility).
+- `ariaLabel?`: `string` — ARIA label for screen readers. Default: `"Drawer"`.
+- `position?`: `"left" | "right" | "top" | "bottom"` — Drawer slide direction. Default: `"left"`.
+- `transitionDuration?`: `number` — Drawer animation duration in milliseconds.
+- `transitionDistance?`: `number` — Distance the drawer flies in from (px).
+- `overlayClasses?`: `string` — Custom Tailwind classes for the backdrop overlay.
+- `class?`: `ClassNameValue` — Classes passed to the drawer container.
+- `children?`: `Snippet` — Svelte content rendered inside the drawer.
 
 ## Usage
 
 ```svelte
 <script>
-  import Drawer from '@hashrytech/quick-components-kit';
-  let isOpen = false;
+  import { Drawer } from '@your-lib';
+  let open = false;
 </script>
 
-<Drawer bind:open={isOpen} position="right" ariaLabel="Menu" transitionDuration={300}>
+<Drawer bind:open={open} position="right" inertId="main-content">
   <p class="p-4">Drawer content goes here</p>
 </Drawer>
 ```
 -->
 
 <script lang="ts" module>
-	  import { type Snippet } from 'svelte';
-    import type { ClassNameValue } from 'tailwind-merge';
-    import { fly } from 'svelte/transition';
-    import {twMerge} from 'tailwind-merge';
-    import Overlay from '../overlay/Overlay.svelte';
-    import { onKeydown } from '../../actions/on-keydown.js';
-    import { stopInteraction } from '../../actions/stop-interaction.js';
-    import { config } from '../../configs/config.js';
+  import { type Snippet } from 'svelte';
+  import type { ClassNameValue } from 'tailwind-merge';
+  import { fly } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
+  import { Overlay } from '../overlay/index.js';
+  import { onKeydown } from '../../actions/on-keydown.js';
+  import { config } from '../../configs/config.js';	
+	import { Portal } from "../portal/index.js";
+  import { trapFocus } from '../../actions/trap-focus.js';
     
-    export type DrawerProps = {
-      open?: boolean;
-      escapeKeyClose?: boolean;
-      disableBodyScroll?: boolean;
-      ariaLabel?: string;
-      transitionDuration?: number;
-      transitionDistance?: number;
-      position?: "left" | "right" | "top" | "bottom";
-      overlayClasses?: string;
-      children?: Snippet;
-      class?: ClassNameValue;
-    };
+  export type DrawerProps = {
+    open?: boolean;
+    escapeKeyClose?: boolean;
+    disableBodyScroll?: boolean;
+    inertId?: string;
+    ariaLabel?: string;
+    transitionDuration?: number;
+    transitionDistance?: number;
+    position?: "left" | "right" | "top" | "bottom";
+    overlayClasses?: string;
+    children?: Snippet;
+    class?: ClassNameValue;
+  };
 
 </script>
 
@@ -68,6 +63,7 @@ The `<Overlay>` component is used to darken the background and optionally block
     open=$bindable(false), 
     escapeKeyClose=true, 
     disableBodyScroll=true, 
+    inertId,
     ariaLabel="Drawer", 
     position="left", 
     transitionDuration=config.transitionDuration, 
@@ -77,6 +73,8 @@ The `<Overlay>` component is used to darken the background and optionally block
     ...props
   }: DrawerProps = $props();
 
+  let drawerElement: HTMLDivElement | undefined = $state();
+
   const transitionProperties = {
     x: position == "left" ? -transitionDistance : position == "right" ? transitionDistance : 0,
     y: position == "top" ? -transitionDistance : position == "bottom" ? transitionDistance : 0,
@@ -90,6 +88,15 @@ The `<Overlay>` component is used to darken the background and optionally block
     bottom: "bottom-0 left-0 right-0 h-60",
   };
 
+  $effect(() => {
+    if (open && drawerElement) {
+      if(inertId)
+        document.getElementById(inertId)?.setAttribute("inert", "true");
+      drawerElement?.focus();
+      
+    }
+  });
+
   function handleKeydown() {
     if(open && escapeKeyClose) {
       closeDrawer();
@@ -97,21 +104,23 @@ The `<Overlay>` component is used to darken the background and optionally block
   };
 
   export function closeDrawer() {
-    open = false;
+    if(inertId)
+      document.getElementById(inertId)?.removeAttribute("inert");
+    open = false;    
   };  
 
 </script>
 
 {#if open}
-<div class="fixed inset-0">
-  <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
-  <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}"
-    class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto z-50", postionClasses[position], props.class)}
+<Portal class="fixed z-50">
+  <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={closeDrawer} />
+  <div bind:this={drawerElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
+    class={twMerge("fixed bg-white overflow-y-auto focus:outline-none", postionClasses[position], props.class)}
     in:fly={transitionProperties}
     out:fly={transitionProperties}
     use:onKeydown={{key: "Escape", callback: handleKeydown}}>
     {@render children?.()}
   </div>
-</div>
+</Portal>
 {/if}
 

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -4,6 +4,7 @@ export type DrawerProps = {
     open?: boolean;
     escapeKeyClose?: boolean;
     disableBodyScroll?: boolean;
+    inertId?: string;
     ariaLabel?: string;
     transitionDuration?: number;
     transitionDistance?: number;
@@ -15,38 +16,31 @@ export type DrawerProps = {
 /**
  * Drawer
  *
- * A flexible slide-in drawer component built with Svelte 5 and Tailwind CSS. Supports positional rendering (`left`, `right`, `top`, `bottom`), transition control, accessibility, and optional background overlay. Typically used for side menus, filters, or modal-like panels.
+ * A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS and transitions. Includes focus trapping, overlay support, inert background, and escape key handling.
  *
  * ## Props
  *
  * - `open?`: `boolean` — Whether the drawer is visible. Bindable.
- * - `escapeKeyClose?`: `boolean` — If true, pressing Escape closes the drawer. Default: `true`.
- * - `disableBodyScroll?`: `boolean` — Prevents body scrolling when drawer is open. Default: `true`.
- * - `ariaLabel?`: `string` — Accessibility label for the drawer. Default: `"Drawer"`.
- * - `position?`: `"left" | "right" | "top" | "bottom"` — Direction the drawer slides from. Default: `"left"`.
- * - `transitionDuration?`: `number` — Duration of fly transition in milliseconds. Defaults to `config.transitionDuration`.
- * - `transitionDistance?`: `number` — Distance the drawer slides in from. Default: `240`.
- * - `overlayClasses?`: `string` — Additional classes passed to the background overlay.
- * - `class?`: `ClassNameValue` — Tailwind classes for the drawer content container.
- * - `children?`: `Snippet` — Svelte fragment rendered inside the drawer content.
- *
- * ## Slots
- *
- * This component uses `children` as a rendered snippet via `{@render}`.
- *
- * ## Overlay
- *
- * The `<Overlay>` component is used to darken the background and optionally block interaction. It is clickable and will trigger the drawer to close unless stopped by event propagation. You can customize its styling using the `overlayClasses` prop.
+ * - `escapeKeyClose?`: `boolean` — If `true`, allows closing the drawer via the Escape key. Default: `true`.
+ * - `disableBodyScroll?`: `boolean` — Prevents body scroll while drawer is open. Default: `true`.
+ * - `inertId?`: `string` — DOM element ID to set `inert` while the drawer is open (for accessibility).
+ * - `ariaLabel?`: `string` — ARIA label for screen readers. Default: `"Drawer"`.
+ * - `position?`: `"left" | "right" | "top" | "bottom"` — Drawer slide direction. Default: `"left"`.
+ * - `transitionDuration?`: `number` — Drawer animation duration in milliseconds.
+ * - `transitionDistance?`: `number` — Distance the drawer flies in from (px).
+ * - `overlayClasses?`: `string` — Custom Tailwind classes for the backdrop overlay.
+ * - `class?`: `ClassNameValue` — Classes passed to the drawer container.
+ * - `children?`: `Snippet` — Svelte content rendered inside the drawer.
  *
  * ## Usage
  *
  * ```svelte
  * <script>
- * import Drawer from '@hashrytech/quick-components-kit';
- * let isOpen = false;
+ * import { Drawer } from '@your-lib';
+ * let open = false;
  * </script>
  *
- * <Drawer bind:open={isOpen} position="right" ariaLabel="Menu" transitionDuration={300}>
+ * <Drawer bind:open={open} position="right" inertId="main-content">
  * <p class="p-4">Drawer content goes here</p>
  * </Drawer>
  * ```

package/dist/components/modal/Modal.svelte

@@ -2,15 +2,20 @@
 	  import { type Snippet } from 'svelte';
     import type { ClassNameValue } from 'tailwind-merge';    
     import {twMerge} from 'tailwind-merge';
-	  import Overlay from '../overlay/Overlay.svelte';
+	  import { Overlay } from '../overlay/index.js';
 	  import { onKeydown } from '../../actions/on-keydown.js';
+    import { Portal } from "../portal/index.js";
+	  import { config } from '../../configs/config.js';	
+	  import { fly } from 'svelte/transition';
+    import { trapFocus } from '../../actions/trap-focus.js';
     
     export type ModalProps = {
       open?: boolean;
       escapeKeyClose?: boolean;
       disableBodyScroll?: boolean;
       ariaLabel?: string;
-      overlayTransitionDuration?: number;
+      inertId?: string;
+      transitionDuration?: number;
       overlayClasses?: string;
       children?: Snippet;
       class?: ClassNameValue;
@@ -19,10 +24,24 @@
 </script>
 
 <script lang="ts">
-  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, overlayTransitionDuration=100, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
+  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, transitionDuration=config.transitionDuration, inertId, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
+
+  let modalElement: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    if (open && modalElement) {
+      if(inertId)
+        document.getElementById(inertId)?.setAttribute("inert", "true");
+      modalElement?.focus();
+      
+    }
+  });
   
   export function closeModal() {
     open = false;
+    if(inertId)
+      document.getElementById(inertId)?.removeAttribute("inert");
+    
   };
 
   function handleKeydown() {
@@ -34,15 +53,18 @@
 </script>
 
 {#if open}
-<Overlay transitionDuration={overlayTransitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false}>
-
-<div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" 
-  class={twMerge("fixed bg-white rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96 z-50", props.class)}
-  use:onKeydown={{key: "Escape", callback: handleKeydown}}>
-  {@render children?.()}
-</div>
+<Portal class="fixed z-50">
+  <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={closeModal} />
+  <div bind:this={modalElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
+    class={twMerge("fixed w-full max-w-2xl top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-6/12 overflow-y-auto focus:outline-none bg-white rounded-primary", props.class)}
+    use:onKeydown={{key: "Escape", callback: handleKeydown}}
+    in:fly={{y: 150, duration: transitionDuration}}
+    out:fly={{y: 150, duration: transitionDuration}}>       
+    
+      {@render children?.()}
 
-</Overlay>
+  </div>
+</Portal>
 {/if}
 
 

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

@@ -5,7 +5,8 @@ export type ModalProps = {
     escapeKeyClose?: boolean;
     disableBodyScroll?: boolean;
     ariaLabel?: string;
-    overlayTransitionDuration?: number;
+    inertId?: string;
+    transitionDuration?: number;
     overlayClasses?: string;
     children?: Snippet;
     class?: ClassNameValue;

package/dist/components/overlay/Overlay.svelte

@@ -11,7 +11,7 @@
       ariaLabel?: string;
       transitionDuration?: number;
       children?: Snippet;
-      onclick?: (event: MouseEvent) => void;
+      onclick?: (event: Event) => void;
       class?: ClassNameValue;
     };
 
@@ -21,7 +21,7 @@
   let { disableBodyScroll=true, transitionDuration=config.transitionDuration, ariaLabel="Overlay", onclick, children, ...props }: OverlayProps = $props();
 </script>
 
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-primary-overlay z-40", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll}>
+<div  transition:fade={{duration: transitionDuration}} class={twMerge("fixed inset-0 bg-primary-overlay", props.class)} role="presentation" {onclick} use:disableScroll={disableBodyScroll} >
   {@render children?.()}
 </div>
 

package/dist/components/overlay/Overlay.svelte.d.ts

@@ -5,7 +5,7 @@ export type OverlayProps = {
     ariaLabel?: string;
     transitionDuration?: number;
     children?: Snippet;
-    onclick?: (event: MouseEvent) => void;
+    onclick?: (event: Event) => void;
     class?: ClassNameValue;
 };
 declare const Overlay: import("svelte").Component<OverlayProps, {}, "">;

package/dist/components/overlay/index.d.ts

@@ -1 +1 @@
-export { default as Overlay } from './Overlay.svelte';
+export { default as Overlay } from "./Overlay.svelte";

package/dist/components/overlay/index.js

@@ -1 +1 @@
-export { default as Overlay } from './Overlay.svelte';
+export { default as Overlay } from "./Overlay.svelte";

package/dist/components/portal/Portal.svelte

@@ -1,12 +1,12 @@
 <!--
 @component Portal
 
-A utility component that renders its children outside the current DOM hierarchy by prepending them into a target DOM element (e.g., `document.body`). Useful for modals, drawers, toasts, and overlays to avoid z-index and layout conflicts.
+A utility component that renders its children outside the current DOM hierarchy by appending or prepending them into a target DOM element (e.g., `document.body`). Useful for modals, drawers, toasts, and overlays to avoid z-index and layout conflicts.
 
 ## Props
 
 - `target?`: `HTMLElement` — The DOM node to render the content into. Defaults to `document.body` if not provided. Useful for directing content to a specific container.
-- `prepend?: boolean` — If true (default), the portal will be prepended to the target node. If false, it will be appended. This controls the render order of layered content.
+- `append?: boolean` — If true (default), the portal will be appended to the end of the target node. If false, it will be prepended to the begining. This controls the render order of layered content.
 - `children?`: `Snippet` — The Svelte children content to render inside the portal. Use `{@render}` to render dynamic fragments.
 - `class?`: `ClassNameValue` — Tailwind CSS or custom classes applied to the outer container div.
 
@@ -36,30 +36,30 @@ A utility component that renders its children outside the current DOM hierarchy
 
 <script lang="ts" module>    
 	import { type Snippet } from 'svelte';
-    import type { ClassNameValue } from 'tailwind-merge';    
-    import {twMerge} from 'tailwind-merge';
-    import { onMount, onDestroy } from 'svelte';
-    import { browser } from '$app/environment';
-    
-    export type PortalProps = {
-      target?: HTMLElement;
-      prepend?: boolean;    
-      children?: Snippet;
-      class?: ClassNameValue;
-    };
+  import type { ClassNameValue } from 'tailwind-merge';    
+  import {twMerge} from 'tailwind-merge';
+  import { onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+  
+  export type PortalProps = {
+    target?: HTMLElement;
+    append?: boolean;    
+    children?: Snippet;
+    class?: ClassNameValue;
+  };
 
 </script>
 
 <script lang="ts">
-  let { target = browser ? document.body : undefined, prepend = true, children, ...props }: PortalProps = $props();  
+  let { target = browser ? document.body : undefined, append = true, children, ...props }: PortalProps = $props();  
   let el: HTMLDivElement;
 
   onMount(() => {    
     if (!browser || !el) return;
-    if(prepend)
-        target?.prepend(el);
-    else
+    if(append)
         target?.append(el);
+    else        
+      target?.prepend(el);
   });
 
   onDestroy(() => {

package/dist/components/portal/Portal.svelte.d.ts

@@ -2,19 +2,19 @@ import { type Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type PortalProps = {
     target?: HTMLElement;
-    prepend?: boolean;
+    append?: boolean;
     children?: Snippet;
     class?: ClassNameValue;
 };
 /**
  * Portal
  *
- * A utility component that renders its children outside the current DOM hierarchy by prepending them into a target DOM element (e.g., `document.body`). Useful for modals, drawers, toasts, and overlays to avoid z-index and layout conflicts.
+ * A utility component that renders its children outside the current DOM hierarchy by appending or prepending them into a target DOM element (e.g., `document.body`). Useful for modals, drawers, toasts, and overlays to avoid z-index and layout conflicts.
  *
  * ## Props
  *
  * - `target?`: `HTMLElement` — The DOM node to render the content into. Defaults to `document.body` if not provided. Useful for directing content to a specific container.
- * - `prepend?: boolean` — If true (default), the portal will be prepended to the target node. If false, it will be appended. This controls the render order of layered content.
+ * - `append?: boolean` — If true (default), the portal will be appended to the end of the target node. If false, it will be prepended to the begining. This controls the render order of layered content.
  * - `children?`: `Snippet` — The Svelte children content to render inside the portal. Use `{@render}` to render dynamic fragments.
  * - `class?`: `ClassNameValue` — Tailwind CSS or custom classes applied to the outer container div.
  *

package/dist/components/table/Table.svelte

@@ -99,7 +99,7 @@ Supports both desktop and mobile rendering, multi-select checkboxes, and custom
 -->
   
 <script lang="ts" module>
-    import type { Snippet } from 'svelte';
+    import { onMount, type Snippet } from 'svelte';
     import type { ClassNameValue } from 'tailwind-merge';    
 
     /**
@@ -171,6 +171,8 @@ Supports both desktop and mobile rendering, multi-select checkboxes, and custom
   let { showMultiSelect=$bindable(false), selected=$bindable([]), rows=$bindable([]), getKey, headings, tableRow, tableRowMobile, multiSelectTh, multiSelectTd,
     tableMobileTdClass, outerDivClass, headingsRowClass, multiSelectThClass, tableRowClass, multiSelectTdClass, tableRowMobileClass, checkboxClass, ...props }: TableProps<T> = $props();
 
+  let tableElement: HTMLTableElement | undefined = $state();
+
   function addSelected(rowkey: string){
       if(selected.includes(rowkey)){
           selected = selected.filter((item) => item !== rowkey);
@@ -181,27 +183,48 @@ Supports both desktop and mobile rendering, multi-select checkboxes, and custom
 
   function handleSelectAll(event: any){
       if (event.target.checked) {
-          for(let i = 0; i < rows.length; i++){
-              selected.push(getKey(rows[i]));
-          }
+        for(let i = 0; i < rows.length; i++){
+            selected.push(getKey(rows[i]));
+        }
       }
       else{
           selected = [];
       }
   }
 
+  /*function applyStickyToSecondColumn(table: HTMLTableElement) {
+    if (!table) return;
+
+    const toAdd = showMultiSelect ? 'left-[3rem]' : "left-0"; // 3 rem is the width of the checkbox column
+    const toRemove = showMultiSelect ? 'left-0' : "left-[3rem]";
+
+    // thead > tr > th:nth-child(2)
+    const headCells = table.querySelectorAll('thead tr > th:nth-child(2)');
+    for (const cell of headCells) {
+      cell.classList.remove(toRemove);
+      cell.classList.add('sticky', toAdd);
+    }
+
+    // tbody > tr > td:nth-child(2)
+    const bodyCells = table.querySelectorAll('tbody tr > td:nth-child(2)');
+    for (const cell of bodyCells) {
+      cell.classList.remove(toRemove);
+      cell.classList.add('sticky', toAdd);
+    }
+  }*/
+
 </script>
 
 
 <div class={twMerge("rounded-lg border-primary-table-border w-full overflow-x-auto", tableRowMobile ? "border-0 md:border bg-transparent" : "border bg-white",  outerDivClass)}>
-    <table class={twMerge("table-fixed w-full text-sm", tableRowMobile ? "border-separate border-spacing-y-2 md:border-collapse md:border-spacing-y-0": "", props.class)} cellpadding="10px">
+    <table bind:this={tableElement} class={twMerge("table-fixed w-full text-sm", tableRowMobile ? "border-separate border-spacing-y-2 md:border-collapse md:border-spacing-y-0": "", props.class)} cellpadding="10px">
         <thead class={twMerge("bg-primary-table-heading", tableRowMobile ? "hidden md:table-header-group" : "")}>
             <tr class={twMerge("text-xs text-primary-table-heading-text whitespace-nowrap bg-inherit", headingsRowClass)}>
                 {#if showMultiSelect}
                 {#if multiSelectTh}
                   {@render multiSelectTh()}
                 {:else}
-                <th class={twMerge("w-12 px-4 py-2 text-center bg-inherit", multiSelectThClass)}>
+                <th class={twMerge("w-12 px-4 py-2 text-center bg-inherit sticky left-0", multiSelectThClass)}>
                     <Checkbox id="header-multiselect-checkbox" onchange={handleSelectAll} checked={ rows ? selected.length === rows.length: false} class={checkboxClass} />
                 </th>
                 {/if}
@@ -222,7 +245,7 @@ Supports both desktop and mobile rendering, multi-select checkboxes, and custom
                   {#if multiSelectTd}
                   {@render multiSelectTd(row)}
                   {:else}
-                  <td class={twMerge("text-center px-4 py-2 bg-inherit", multiSelectTdClass )}>
+                  <td class={twMerge("text-center px-4 py-2 bg-inherit sticky left-0", multiSelectTdClass )}>
                       <Checkbox id={"checkbox-" + rowKey} value={rowKey} checked={isSelected} onchange={()=>{addSelected(rowKey)}} class={checkboxClass} />
                   </td>
                   {/if}

package/dist/components/table/Table.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 /**
  * Props for the generic Table component

package/dist/components/table/TableTh.svelte

@@ -16,4 +16,4 @@
 
 </script>
 
-<th scope="col" class={twMerge("p-3 text-left uppercase font-semibold", props.class)}>{@render children?.()}</th>
+<th scope="col" class={twMerge("p-3 text-left uppercase font-semibold bg-inherit", props.class)}>{@render children?.()}</th>

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.17.2",
+  "version": "0.17.4",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [