tailjng 0.1.15 → 0.1.17

package/cli/file-operations.js

@@ -86,7 +86,8 @@ function findTailjngPackageRoot() {
 
 async function copySharedFolderIfNeeded(componentPath, isDependency = false, options = {}) {
     const { forceSync = false } = options
-    const sharedInfo = getSharedFolderInfo(componentPath)
+    const packageRoot = findTailjngPackageRoot()
+    const sharedInfo = getSharedFolderInfo(componentPath, packageRoot)
     if (!sharedInfo) {
         return true
     }
@@ -95,15 +96,7 @@ async function copySharedFolderIfNeeded(componentPath, isDependency = false, opt
         return true
     }
 
-    const packageRoot = findTailjngPackageRoot()
     const sharedSrc = path.join(packageRoot, ...sharedInfo.sourceRelative.split("/"))
-    if (!fs.existsSync(sharedSrc)) {
-        console.error(
-            `${COLORS.red}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.red}ERROR: Shared utilities ${COLORS.bright}"${sharedInfo.groupKey}/shared"${COLORS.reset} ${COLORS.red}not found in package.${COLORS.reset}`,
-        )
-        console.error(`${COLORS.dim}   Expected: ${sharedSrc}${COLORS.reset}`)
-        return false
-    }
 
     const projectRoot = process.cwd()
     const sharedDest = buildSharedFolderTargetPath(projectRoot, componentPath)
@@ -189,10 +182,7 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
 
     fs.mkdirSync(targetPath, { recursive: true })
     copyDirectoryRecursive(nodeModulesPath, targetPath, projectRoot)
-    const sharedOk = await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: true })
-    if (!sharedOk) {
-        process.exit(1)
-    }
+    await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: true })
 
     return true
 }

package/cli/settings/path-utils.js

@@ -59,14 +59,22 @@ function isComponentInstalled(projectRoot, componentName, componentPath) {
 }
 
 /**
- * When a registry path is nested (e.g. toggle-radio/toggle-radio), returns sibling `shared/` info.
- * Used by the CLI to copy group-level utilities alongside the component folder.
+ * When a registry path is nested (e.g. toggle-radio/toggle-radio), returns sibling `shared/` info
+ * only if that group actually ships a `shared/` folder in the package (e.g. toggle-radio).
+ * Nested paths like `.config/colors` or `select/select-dropdown` have no group shared folder.
+ *
+ * @param {string} componentPath
+ * @param {string | null} [packageRoot] When set, returns null unless shared exists in the package.
  */
-function getSharedFolderInfo(componentPath) {
+function getSharedFolderInfo(componentPath, packageRoot = null) {
     if (!componentPath.startsWith(COMPONENTS_SOURCE_PREFIX)) {
         return null
     }
 
+    if (isConfigPath(componentPath)) {
+        return null
+    }
+
     const relativePath = componentPath.slice(COMPONENTS_SOURCE_PREFIX.length)
     const pathParts = relativePath.split("/")
     if (pathParts.length < 2) {
@@ -74,10 +82,18 @@ function getSharedFolderInfo(componentPath) {
     }
 
     const groupKey = pathParts.slice(0, -1).join("/")
+    const sourceRelative = `${COMPONENTS_SOURCE_PREFIX}${groupKey}/shared`
+
+    if (packageRoot) {
+        const sharedSrc = path.join(packageRoot, ...sourceRelative.split("/"))
+        if (!fs.existsSync(sharedSrc)) {
+            return null
+        }
+    }
 
     return {
         groupKey,
-        sourceRelative: `${COMPONENTS_SOURCE_PREFIX}${groupKey}/shared`,
+        sourceRelative,
         targetRelative: `${groupKey}/shared`,
     }
 }

package/cli/templates/app.generator.js

@@ -115,63 +115,72 @@ ${buildDefaultThemeBlock()}
 function buildScrollScss() {
   return `.scroll-element {
   padding-right: 5px;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: var(--color-primary);
-    transition: 0.5s;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--color-dark-primary);
-  }
-
-  &::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
+  -webkit-overflow-scrolling: touch;
+
+  @media (hover: hover) and (pointer: fine) {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: var(--color-primary);
+      transition: 0.5s;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--color-dark-primary);
+    }
+
+    &::-webkit-scrollbar-button {
+      width: 0;
+      height: 0;
+    }
   }
 }
 
 .scroll-screen {
-  &::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--color-dark-primary);
-    border: 3px solid var(--color-primary);
-    transition: 0.5s;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--color-primary);
-  }
-
-  &::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
+  -webkit-overflow-scrolling: touch;
+
+  @media (hover: hover) and (pointer: fine) {
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--color-dark-primary);
+      border: 3px solid var(--color-primary);
+      transition: 0.5s;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--color-primary);
+    }
+
+    &::-webkit-scrollbar-button {
+      width: 0;
+      height: 0;
+    }
   }
 }
 
-.dark .scroll-screen {
-  &::-webkit-scrollbar-thumb {
-    background: var(--color-dark-primary);
-    border: 3px solid var(--color-primary);
-    transition: 0.5s;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--color-primary);
+@media (hover: hover) and (pointer: fine) {
+  .dark .scroll-screen {
+    &::-webkit-scrollbar-thumb {
+      background: var(--color-dark-primary);
+      border: 3px solid var(--color-primary);
+      transition: 0.5s;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--color-primary);
+    }
   }
 }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/registry/components.json

@@ -132,13 +132,17 @@
       "path": "src/lib/components/filter/filter-complete",
       "dependencies": ["select-dropdown", "select-multi-table", "button", "dialog", "checkbox-switch"]
     },
+    "card-skeleton": {
+      "path": "src/lib/components/card/card-skeleton",
+      "dependencies": []
+    },
     "card-crud-complete": {
       "path": "src/lib/components/card/card-crud-complete",
-      "dependencies": ["paginator-complete", "filter-complete"]
+      "dependencies": ["paginator-complete", "filter-complete", "card-skeleton"]
     },
     "card-complete": {
       "path": "src/lib/components/card/card-complete",
-      "dependencies": ["paginator-complete", "filter-complete"]
+      "dependencies": ["paginator-complete", "filter-complete", "card-skeleton"]
     },
     "menu-options-table": {
       "path": "src/lib/components/menu/menu-options-table",
@@ -148,6 +152,10 @@
       "path": "src/lib/components/menu/options-coach-menu",
       "dependencies": ["button", "coach-mark"]
     },
+    "table-skeleton": {
+      "path": "src/lib/components/table/table-skeleton",
+      "dependencies": []
+    },
     "table-crud-complete": {
       "path": "src/lib/components/table/table-crud-complete",
       "dependencies": [
@@ -159,7 +167,8 @@
         "dialog",
         "viewer-image",
         "select-dropdown",
-        "input"
+        "input",
+        "table-skeleton"
       ]
     },
     "table-complete": {

package/src/lib/components/alert/alert-toast/toast-alert.component.css

@@ -512,6 +512,13 @@
   }
 }
 
+@media (max-width: 400px) {
+  .j-alert-toast-stack--top-left,
+  .j-alert-toast-stack--top-right {
+    top: 3.25rem;
+  }
+}
+
 @media (max-width: 450px) {
   .j-alert-toast-stack {
     max-width: calc(100vw - 2rem);

package/src/lib/components/alert/alert-toast/toast-alert.component.html

@@ -6,7 +6,7 @@
 >
   @if (stackable && toasts().length > 1 && !expanded) {
     <span
-      class="j-alert-toast-stack-hint absolute -top-[0.35rem] -right-[0.35rem] z-50 inline-flex items-center justify-center min-w-5 h-5 px-[0.3rem] rounded-full bg-primary text-primary-foreground text-[0.625rem] font-bold leading-none shadow-[0_2px_8px_rgb(0_0_0/0.18)] pointer-events-none opacity-0 scale-[0.85] transition-[opacity,transform] duration-200 ease-in-out"
+      class="j-alert-toast-stack-hint absolute -top-[0.35rem] max-[400px]:-top-[1rem] -right-[0.35rem] z-50 inline-flex items-center justify-center min-w-5 h-5 px-[0.3rem] rounded-full bg-primary text-primary-foreground text-[0.625rem] font-bold leading-none shadow-[0_2px_8px_rgb(0_0_0/0.18)] pointer-events-none opacity-0 scale-[0.85] transition-[opacity,transform] duration-200 ease-in-out"
       aria-hidden="true"
     >
       {{ toasts().length }}

package/src/lib/components/alert/alert-toast/toast-alert.component.ts

@@ -1,3 +1,4 @@
+
 import {
   Component,
   computed,

package/src/lib/components/card/card-complete/complete-card.component.html

@@ -43,12 +43,11 @@
     </div>
   }
 
-  @if (isLoading('initialLoad') && displayData.length === 0) {
-    <div class="w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border">
-      <div class="flex flex-col gap-3 items-center justify-center py-4">
-        <JIcon [icon]="Icons.Loader2" size="30" iconClass="text-primary animate-spin" [ariaHidden]="true" />
-        <p>Cargando datos...</p>
-      </div>
+  @if (showCardSkeletons()) {
+    <div class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 items-start gap-4 my-4">
+      @for (slot of skeletonSlots; track slot) {
+        <JCardSkeleton />
+      }
     </div>
   } @else if (displayData.length > 0) {
 

package/src/lib/components/card/card-complete/complete-card.component.ts

@@ -8,11 +8,12 @@ import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
+import { JCardSkeletonComponent } from '../card-skeleton/card-skeleton.component';
 
 @Component({
   selector: 'JCompleteCard',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent, JCardSkeletonComponent],
   templateUrl: './complete-card.component.html',
   styleUrl: './complete-card.component.scss',
   animations: [
@@ -566,6 +567,16 @@ export class JCompleteCardComponent implements OnInit {
   // Loading parameters
   // =====================================================
 
+  /** Cantidad de placeholders skeleton durante la carga inicial. */
+  get skeletonSlots(): number[] {
+    const count = Math.min(this.itemsPerPage, 8);
+    return Array.from({ length: count }, (_, index) => index);
+  }
+
+  showCardSkeletons(): boolean {
+    return this.isLoading('initialLoad') && this.displayData.length === 0;
+  }
+
   // MMethod to check if a specific state is loading
   isLoading(state: keyof LoadingStates): boolean {
     return this.loadingStates[state] === 'loading';

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.html

@@ -43,12 +43,21 @@
     </div>
   }
 
-  @if (isLoading('initialLoad') && displayData.length === 0) {
-    <div class="w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border">
-      <div class="flex flex-col gap-3 items-center justify-center py-4">
-        <JIcon [icon]="Icons.Loader2" size="30" iconClass="text-primary animate-spin" [ariaHidden]="true" />
-        <p>Cargando datos...</p>
-      </div>
+  @if (showCardSkeletons()) {
+    <div
+      class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 gap-4 my-4"
+      [class.items-stretch]="useStretchCards"
+      [class.items-start]="!useStretchCards"
+    >
+      @for (slot of skeletonSlots; track slot) {
+        <div
+          class="flex w-full flex-col"
+          [class.h-full]="useStretchCards"
+          [class.self-start]="!useStretchCards"
+        >
+          <JCardSkeleton />
+        </div>
+      }
     </div>
   } @else if (displayData.length > 0) {
 
@@ -94,7 +103,7 @@
 
   } @else if (!isLoading('pagination')) {
     <div class="j-crud-card w-full flex flex-col gap-3 justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
-      <JIcon [icon]="Icons.Info" size="35" iconClass="text-primary" [ariaHidden]="true" />
+      <JIcon [icon]="Icons.Info" size="35" iconClass="text-primary" [ariaHidden]="true" [inheritParentColor]="true" />
       <p class="text-black dark:text-white">No hay datos disponibles</p>
     </div>
   }

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.ts

@@ -8,11 +8,12 @@ import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
+import { JCardSkeletonComponent } from '../card-skeleton/card-skeleton.component';
 
 @Component({
   selector: 'JCompleteCrudCard',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent, JCardSkeletonComponent],
   templateUrl: './complete-crud-card.component.html',
   styleUrl: './complete-crud-card.component.scss',
   animations: [
@@ -572,6 +573,16 @@ export class JCompleteCrudCardComponent implements OnInit {
   // Loading parameters
   // =====================================================
 
+  /** Cantidad de placeholders skeleton durante la carga inicial. */
+  get skeletonSlots(): number[] {
+    const count = Math.min(this.itemsPerPage, 8);
+    return Array.from({ length: count }, (_, index) => index);
+  }
+
+  showCardSkeletons(): boolean {
+    return this.isLoading('initialLoad') && this.displayData.length === 0;
+  }
+
   // MMethod to check if a specific state is loading
   isLoading(state: keyof LoadingStates): boolean {
     return this.loadingStates[state] === 'loading';

package/src/lib/components/card/card-skeleton/card-skeleton.component.html

@@ -0,0 +1,47 @@
+<article
+  class="flex min-h-[10.5rem] w-full overflow-hidden rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground animate-pulse"
+  aria-hidden="true"
+>
+  <div class="w-1 shrink-0 rounded-l-xl bg-muted/50 dark:bg-dark-muted/40"></div>
+
+  <div class="flex min-w-0 flex-1 flex-col gap-2.5 p-3.5">
+    <header class="flex min-w-0 items-start gap-2">
+      <div
+        class="h-8 w-8 shrink-0 rounded-lg border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+      ></div>
+      <div class="min-w-0 flex-1 space-y-2">
+        <div class="flex flex-wrap gap-1">
+          <div class="h-4 w-14 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+          <div class="h-4 w-16 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+        </div>
+        <div class="h-4 w-[80%] max-w-[12rem] rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+      </div>
+    </header>
+
+    <div class="space-y-2">
+      <div class="h-3 w-full rounded bg-muted/30 dark:bg-dark-muted/25"></div>
+      <div class="h-3 w-[92%] rounded bg-muted/30 dark:bg-dark-muted/25"></div>
+      <div class="h-3 w-[66%] rounded bg-muted/30 dark:bg-dark-muted/25"></div>
+    </div>
+
+    <div
+      class="mt-auto flex items-center justify-between gap-2 border-t border-border/50 pt-2.5 dark:border-dark-border/50"
+    >
+      <div class="flex items-center gap-1.5">
+        <div class="h-3 w-3 rounded-full bg-muted/40 dark:bg-dark-muted/30"></div>
+        <div class="h-3 w-20 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+      </div>
+      <div class="flex shrink-0 gap-1">
+        <div
+          class="h-7 w-7 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+        ></div>
+        <div
+          class="h-7 w-7 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+        ></div>
+        <div
+          class="h-7 w-7 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+        ></div>
+      </div>
+    </div>
+  </div>
+</article>

package/src/lib/components/card/card-skeleton/card-skeleton.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'JCardSkeleton',
+  standalone: true,
+  templateUrl: './card-skeleton.component.html',
+})
+export class JCardSkeletonComponent {}

package/src/lib/components/dialog/dialog.component.css

@@ -6,3 +6,15 @@
   margin: 0 !important;
   border-radius: 0;
 }
+
+.jdialog-header-drag {
+  touch-action: none;
+}
+
+.jdialog-close {
+  touch-action: manipulation;
+}
+
+.jdialog-panel--dragging {
+  transition: none !important;
+}

package/src/lib/components/dialog/dialog.component.html

@@ -24,20 +24,25 @@
       [style.min-height]="!isFullScreen ? '40px' : null"
     >
       <div
-        class="jdialog-header flex min-h-[3.25rem] select-none items-center gap-3 border-b border-border bg-primary py-2.5 pr-3 pl-4 dark:border-dark-border dark:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--color-dark-muted)_35%,var(--color-dark-background))_0%,var(--color-dark-background)_100%)]"
+        class="jdialog-header flex min-h-[3rem] select-none items-center gap-3 border-b border-border bg-primary py-1.5 pr-3 pl-4 dark:border-dark-border dark:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--color-dark-muted)_35%,var(--color-dark-background))_0%,var(--color-dark-background)_100%)]"
         [class.jdialog-header--draggable]="draggable"
-        [class.cursor-move]="draggable"
-        (mousedown)="draggable && startDrag($event)"
       >
         <h3
           class="jdialog-title m-0 min-w-0 flex-1 text-[0.9375rem] font-semibold leading-[1.3] tracking-[-0.015em] text-white dark:text-dark-foreground"
+          [class.jdialog-header-drag]="draggable"
+          [class.cursor-move]="draggable"
+          (mousedown)="onDragMouseDown($event)"
+          (touchstart)="onDragTouchStart($event)"
         >
           {{ title }}
         </h3>
 
         <button
           type="button"
-          class="inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-dark-primary/30 dark:bg-primary/30 p-0 leading-none text-white/70 transition-[color,background-color,transform] duration-150 hover:bg-dark-primary/80 hover:dark:bg-primary/80 hover:text-white active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring dark:hover:text-dark-foreground"
+          class="jdialog-close inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-dark-primary/30 dark:bg-primary/30 p-0 leading-none text-white/70 transition-[color,background-color,transform] duration-150 hover:bg-dark-primary/80 hover:dark:bg-primary/80 hover:text-white active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring dark:hover:text-dark-foreground"
+          (mousedown)="$event.stopPropagation()"
+          (touchstart)="$event.stopPropagation()"
+          (pointerdown)="$event.stopPropagation()"
           (click)="$event.stopPropagation(); onClose()"
           aria-label="Cerrar"
         >

package/src/lib/components/dialog/dialog.component.ts

@@ -5,6 +5,7 @@ import {
   HostListener,
   Input,
   OnChanges,
+  OnDestroy,
   Output,
   SimpleChanges,
   TemplateRef,
@@ -50,7 +51,10 @@ const POSITION_CLASS_MAP: Record<DialogPosition, string> = {
     ]),
   ],
 })
-export class JDialogComponent implements OnChanges {
+export class JDialogComponent implements OnChanges, OnDestroy {
+  private static readonly TOUCH_DRAG_HOLD_MS = 400;
+  private static readonly TOUCH_DRAG_CANCEL_PX = 12;
+
   readonly Icons = Icons;
 
   @Input() position: DialogPosition = 'center';
@@ -75,11 +79,26 @@ export class JDialogComponent implements OnChanges {
   private isDragging = false;
   private hasMoved = false;
   private dragOffset = { x: 0, y: 0 };
+  private touchHoldTimer: ReturnType<typeof setTimeout> | null = null;
+  private touchStartPoint = { x: 0, y: 0 };
+  private releaseDocumentListeners: (() => void) | null = null;
+  private touchHoldCleanup: (() => void) | null = null;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['openModal']?.currentValue === true) {
       this.hasMoved = false;
     }
+
+    if (changes['openModal']?.currentValue === false) {
+      this.clearTouchHold();
+      this.clearDocumentListeners();
+      this.isDragging = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearTouchHold();
+    this.clearDocumentListeners();
   }
 
   /**
@@ -169,6 +188,7 @@ export class JDialogComponent implements OnChanges {
       'border': true,
       'border-border': true,
       'dark:border-dark-border': true,
+      'jdialog-panel--dragging': this.isDragging,
       ...this.ngClasses,
     };
   }
@@ -190,27 +210,141 @@ export class JDialogComponent implements OnChanges {
   }
 
   /**
-   * Starts dragging when `draggable` is enabled.
+   * Starts dragging from the title handle (mouse).
    */
-  startDrag(event: MouseEvent): void {
-    if (!this.draggable) {
+  onDragMouseDown(event: MouseEvent): void {
+    if (!this.draggable || event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const dialogElement = this.getDialogElement(event.currentTarget as HTMLElement);
+    if (!dialogElement) {
+      return;
+    }
+
+    this.beginDragSession(dialogElement, event.clientX, event.clientY);
+
+    const mouseMoveHandler = (moveEvent: MouseEvent) => {
+      if (!this.isDragging) {
+        return;
+      }
+
+      this.applyDragPosition(dialogElement, moveEvent.clientX, moveEvent.clientY);
+    };
+
+    const mouseUpHandler = () => {
+      this.isDragging = false;
+      this.clearDocumentListeners();
+    };
+
+    this.setDocumentListeners(() => {
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+    });
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
+
+  /**
+   * Long-press on the title handle, then drag (touch / tablet).
+   */
+  onDragTouchStart(event: TouchEvent): void {
+    if (!this.draggable || event.touches.length !== 1) {
       return;
     }
 
     event.stopPropagation();
-    this.isDragging = true;
 
-    const dialogElement = (event.currentTarget as HTMLElement).closest(
-      '[data-draggable-dialog]',
-    ) as HTMLElement | null;
+    const dialogElement = this.getDialogElement(event.currentTarget as HTMLElement);
     if (!dialogElement) {
       return;
     }
 
+    const touch = event.touches[0];
+    this.touchStartPoint = { x: touch.clientX, y: touch.clientY };
+    this.clearTouchHold();
+
+    const cancelHoldIfMoved = (moveEvent: TouchEvent) => {
+      const activeTouch = moveEvent.touches[0];
+      if (!activeTouch) {
+        return;
+      }
+
+      const dx = Math.abs(activeTouch.clientX - this.touchStartPoint.x);
+      const dy = Math.abs(activeTouch.clientY - this.touchStartPoint.y);
+
+      if (dx > JDialogComponent.TOUCH_DRAG_CANCEL_PX || dy > JDialogComponent.TOUCH_DRAG_CANCEL_PX) {
+        this.clearTouchHold();
+      }
+    };
+
+    const cancelHold = () => {
+      this.clearTouchHold();
+    };
+
+    document.addEventListener('touchmove', cancelHoldIfMoved, { passive: true });
+    document.addEventListener('touchend', cancelHold);
+    document.addEventListener('touchcancel', cancelHold);
+
+    this.touchHoldCleanup = () => {
+      document.removeEventListener('touchmove', cancelHoldIfMoved);
+      document.removeEventListener('touchend', cancelHold);
+      document.removeEventListener('touchcancel', cancelHold);
+    };
+
+    this.touchHoldTimer = setTimeout(() => {
+      this.touchHoldCleanup?.();
+      this.touchHoldCleanup = null;
+      this.touchHoldTimer = null;
+
+      this.beginDragSession(dialogElement, touch.clientX, touch.clientY);
+
+      const touchMoveHandler = (moveEvent: TouchEvent) => {
+        if (!this.isDragging || moveEvent.touches.length !== 1) {
+          return;
+        }
+
+        moveEvent.preventDefault();
+        const activeTouch = moveEvent.touches[0];
+        this.applyDragPosition(dialogElement, activeTouch.clientX, activeTouch.clientY);
+      };
+
+      const touchEndHandler = () => {
+        this.isDragging = false;
+        this.clearDocumentListeners();
+      };
+
+      this.setDocumentListeners(() => {
+        document.removeEventListener('touchmove', touchMoveHandler);
+        document.removeEventListener('touchend', touchEndHandler);
+        document.removeEventListener('touchcancel', touchEndHandler);
+      });
+
+      document.addEventListener('touchmove', touchMoveHandler, { passive: false });
+      document.addEventListener('touchend', touchEndHandler);
+      document.addEventListener('touchcancel', touchEndHandler);
+    }, JDialogComponent.TOUCH_DRAG_HOLD_MS);
+  }
+
+  private getDialogElement(handle: HTMLElement): HTMLElement | null {
+    return handle.closest('[data-draggable-dialog]') as HTMLElement | null;
+  }
+
+  private beginDragSession(
+    dialogElement: HTMLElement,
+    clientX: number,
+    clientY: number,
+  ): void {
+    this.isDragging = true;
+
     const rect = dialogElement.getBoundingClientRect();
     this.dragOffset = {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: clientX - rect.left,
+      y: clientY - rect.top,
     };
 
     if (!this.hasMoved) {
@@ -226,29 +360,40 @@ export class JDialogComponent implements OnChanges {
 
       this.hasMoved = true;
     }
+  }
 
-    const mouseMoveHandler = (moveEvent: MouseEvent) => {
-      if (!this.isDragging) {
-        return;
-      }
+  private applyDragPosition(
+    dialogElement: HTMLElement,
+    clientX: number,
+    clientY: number,
+  ): void {
+    const newLeft = clientX - this.dragOffset.x;
+    const newTop = clientY - this.dragOffset.y;
 
-      const newLeft = moveEvent.clientX - this.dragOffset.x;
-      const newTop = moveEvent.clientY - this.dragOffset.y;
+    const maxLeft = window.innerWidth - dialogElement.offsetWidth;
+    const maxTop = window.innerHeight - dialogElement.offsetHeight;
 
-      const maxLeft = window.innerWidth - dialogElement.offsetWidth;
-      const maxTop = window.innerHeight - dialogElement.offsetHeight;
+    dialogElement.style.left = `${Math.min(Math.max(newLeft, 0), maxLeft)}px`;
+    dialogElement.style.top = `${Math.min(Math.max(newTop, 0), maxTop)}px`;
+  }
 
-      dialogElement.style.left = `${Math.min(Math.max(newLeft, 0), maxLeft)}px`;
-      dialogElement.style.top = `${Math.min(Math.max(newTop, 0), maxTop)}px`;
-    };
+  private setDocumentListeners(release: () => void): void {
+    this.clearDocumentListeners();
+    this.releaseDocumentListeners = release;
+  }
 
-    const mouseUpHandler = () => {
-      this.isDragging = false;
-      document.removeEventListener('mousemove', mouseMoveHandler);
-      document.removeEventListener('mouseup', mouseUpHandler);
-    };
+  private clearDocumentListeners(): void {
+    this.releaseDocumentListeners?.();
+    this.releaseDocumentListeners = null;
+  }
 
-    document.addEventListener('mousemove', mouseMoveHandler);
-    document.addEventListener('mouseup', mouseUpHandler);
+  private clearTouchHold(): void {
+    if (this.touchHoldTimer) {
+      clearTimeout(this.touchHoldTimer);
+      this.touchHoldTimer = null;
+    }
+
+    this.touchHoldCleanup?.();
+    this.touchHoldCleanup = null;
   }
 }

package/src/lib/components/form/form-sidebar/sidebar-form.component.css

@@ -18,28 +18,31 @@
 
 .scroll-element {
   margin-right: 2px;
+  -webkit-overflow-scrolling: touch;
+}
 
-  &::-webkit-scrollbar {
+@media (hover: hover) and (pointer: fine) {
+  .scroll-element::-webkit-scrollbar {
     width: 8px !important;
   }
 
-  &::-webkit-scrollbar-thumb {
+  .scroll-element::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: color-mix(in srgb, var(--color-primary) 65%, transparent);
     transition: background-color 0.5s ease;
   }
 
-  &::-webkit-scrollbar-thumb:hover {
+  .scroll-element::-webkit-scrollbar-thumb:hover {
     background: var(--color-primary);
   }
-}
 
-:host-context(.dark) .scroll-element::-webkit-scrollbar-thumb,
-:host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--color-dark-primary) 45%, transparent);
-}
+  :host-context(.dark) .scroll-element::-webkit-scrollbar-thumb,
+  :host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-dark-primary) 45%, transparent);
+  }
 
-:host-context(.dark) .scroll-element::-webkit-scrollbar-thumb:hover,
-:host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--color-dark-primary) 70%, transparent);
+  :host-context(.dark) .scroll-element::-webkit-scrollbar-thumb:hover,
+  :host-context(html.dark) .scroll-element::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-dark-primary) 70%, transparent);
+  }
 }

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.html

@@ -182,23 +182,18 @@
         </thead>
 
         <tbody class="bg-white dark:bg-foreground text-black dark:text-white">
-          @if (isLoading("initialLoad") && displayData.length === 0) {
-            <!-- Loading state -->
-            <tr>
-              <td
-                [attr.colspan]="getVisibleColumnsCount() + 3"
-                class="px-4 py-8 text-center text-sm text-black dark:text-white"
-              >
-                <div
-                  class="flex flex-col gap-3 items-center justify-center py-4"
-                >
-                  <JIcon [icon]="Icons.Loader2"
-                    size="30"
-                    iconClass="text-primary animate-spin" [ariaHidden]="true" />
-                  <p>Cargando datos...</p>
-                </div>
-              </td>
-            </tr>
+          @if (showTableSkeletons()) {
+            @for (slot of skeletonSlots; track slot) {
+              <tr
+                jTableSkeletonDesktopRow
+                [columnCount]="getVisibleColumnsCount()"
+                [columnSlots]="skeletonColumnSlots"
+                [isNumbering]="isNumbering"
+                [isOptions]="isOptions"
+                [hasExpandable]="hasExpandable()"
+                [variant]="skeletonDesktopVariant"
+              ></tr>
+            }
           } @else if (displayData.length > 0) {
             <!-- Data rows -->
             @for (item of displayData; track $index) {
@@ -944,20 +939,8 @@
       </table>
     </div>
 
-    <!-- Add pause of charge with avoid flickering -->
-    @if (isLoading("initialLoad") && displayData.length === 0) {
-      <div
-        class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none"
-      >
-        <JIcon [icon]="Icons.Loader2"
-          size="35"
-          iconClass="text-primary animate-spin" [ariaHidden]="true" />
-        <p class="text-black dark:text-white">Cargando datos...</p>
-      </div>
-    }
-
     <!-- Not found data message -->
-    @else if (!displayData.length && !isLoading("pagination")) {
+    @if (!showTableSkeletons() && !displayData.length && !isLoading("pagination")) {
       <div
         class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none rounded"
       >
@@ -972,15 +955,13 @@
   <!-- TABLE MOVILE -->
   <div class="hidden max-[768px]:block">
     <div class="flex flex-col gap-3">
-      @if (isLoading("initialLoad") && displayData.length === 0) {
-        <div
-          class="flex flex-col gap-3 items-center justify-center py-10 bg-white dark:bg-foreground rounded border border-border dark:border-dark-border"
-        >
-          <JIcon [icon]="Icons.Loader2"
-            size="30"
-            iconClass="text-primary animate-spin" [ariaHidden]="true" />
-          <p class="text-black dark:text-white">Cargando datos...</p>
-        </div>
+      @if (showTableSkeletons()) {
+        @for (slot of skeletonSlots; track slot) {
+          <JTableSkeletonMobileCard
+            [isNumbering]="isNumbering"
+            [variant]="skeletonDesktopVariant"
+          />
+        }
       } @else if (displayData.length > 0) {
         @if (isGroupTable) {
           @for (item of displayData; track $index) {

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.ts

@@ -39,6 +39,8 @@ import type {
   CrudTableGroupTableConfig} from './complete-crud-table.types';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
+import { JTableSkeletonDesktopRowComponent } from '../table-skeleton/table-skeleton-desktop-row.component';
+import { JTableSkeletonMobileCardComponent } from '../table-skeleton/table-skeleton-mobile-card.component';
 import {
   applyColumnDefaults,
   applyNestedBooleanToggle,
@@ -161,6 +163,8 @@ export { CRUD_TABLE_ANIMATIONS } from './complete-crud-table.animations';
     JDropdownSelectComponent,
     JInputComponent,
     JOptionsCoachMenuComponent,
+    JTableSkeletonDesktopRowComponent,
+    JTableSkeletonMobileCardComponent,
   ],
   templateUrl: './complete-crud-table.component.html',
   styleUrl: './complete-crud-table.component.scss',
@@ -798,6 +802,23 @@ export class JCompleteCrudTableComponent implements OnInit {
   // Loading state
   // =====================================================
 
+  get skeletonSlots(): number[] {
+    const count = Math.min(this.itemsPerPage, 8);
+    return Array.from({ length: count }, (_, index) => index);
+  }
+
+  get skeletonColumnSlots(): number[] {
+    return Array.from({ length: this.getVisibleColumnsCount() }, (_, index) => index);
+  }
+
+  showTableSkeletons(): boolean {
+    return this.isLoading('initialLoad') && this.displayData.length === 0;
+  }
+
+  get skeletonDesktopVariant(): 'default' | 'group' {
+    return this.isGroupTable ? 'group' : 'default';
+  }
+
   isLoading(state: keyof LoadingStates): boolean {
     return this.loadingStates[state] === 'loading';
   }

package/src/lib/components/table/table-skeleton/table-skeleton-desktop-row.component.html

@@ -0,0 +1,74 @@
+@if (variant === 'group') {
+  <td
+    class="j-group-number-col box-border w-11 min-w-11 max-w-11 !px-[0.35rem] h-[50px] border-b border-border px-2 py-2 text-center dark:border-dark-border bg-primary/5 dark:bg-primary/10"
+  >
+    <div class="mx-auto h-4 w-4 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+  </td>
+  <td
+    [attr.colspan]="columnCount"
+    class="border-b border-border px-4 py-3 dark:border-dark-border bg-primary/5 dark:bg-primary/10"
+  >
+    <div class="flex items-center gap-5">
+      <div
+        class="h-9 w-9 shrink-0 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+      ></div>
+      <div class="min-w-0 flex-1 space-y-2">
+        <div class="h-4 w-40 max-w-[70%] rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+        <div class="h-3 w-28 max-w-[55%] rounded bg-muted/30 dark:bg-dark-muted/25"></div>
+      </div>
+    </div>
+  </td>
+
+  @if (isOptions) {
+    <td
+      class="j-table-options-col j-group-pagination-cell box-border h-[50px] w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] border-b border-border bg-primary/5 px-4 py-2 text-center dark:border-dark-border dark:bg-primary/10"
+    >
+      <div class="mx-auto flex flex-col items-center gap-1">
+        <div class="h-4 w-16 rounded-full bg-muted/30 dark:bg-dark-muted/25"></div>
+        <div class="flex gap-1">
+          <div class="h-5 w-7 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+          <div class="h-5 w-7 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+        </div>
+      </div>
+    </td>
+  }
+} @else {
+  @if (hasExpandable) {
+    <td class="h-[50px] border-b border-border px-4 py-2 text-center dark:border-dark-border">
+      <div class="mx-auto h-4 w-4 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+    </td>
+  }
+
+  @if (isNumbering) {
+    <td
+      class="j-group-number-col box-border h-[50px] w-11 min-w-11 max-w-11 border-b border-border !px-[0.35rem] px-4 py-2 text-center dark:border-dark-border"
+    >
+      <div class="mx-auto h-3 w-5 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+    </td>
+  }
+
+  @for (col of columnSlots; track col) {
+    <td class="h-[50px] border-b border-border px-4 py-2 dark:border-dark-border">
+      <div
+        class="h-3 rounded bg-muted/40 dark:bg-dark-muted/30"
+        [class.w-full]="col % 3 !== 0"
+        [class.w-[72%]]="col % 3 === 0"
+      ></div>
+    </td>
+  }
+
+  @if (isOptions) {
+    <td
+      class="j-table-options-col box-border h-[50px] w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] border-b border-border px-4 py-2 text-center dark:border-dark-border"
+    >
+      <div class="flex items-center justify-center gap-1">
+        <div
+          class="h-7 w-7 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+        ></div>
+        <div
+          class="h-7 w-7 rounded-full border border-dashed border-border/60 bg-muted/30 dark:border-dark-border/60 dark:bg-dark-muted/20"
+        ></div>
+      </div>
+    </td>
+  }
+}

package/src/lib/components/table/table-skeleton/table-skeleton-desktop-row.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'tr[jTableSkeletonDesktopRow]',
+  standalone: true,
+  templateUrl: './table-skeleton-desktop-row.component.html',
+  host: {
+    class: 'animate-pulse',
+    'aria-hidden': 'true',
+  },
+})
+export class JTableSkeletonDesktopRowComponent {
+  @Input({ required: true }) columnCount = 1;
+  @Input() columnSlots: number[] = [];
+  @Input() isNumbering = true;
+  @Input() isOptions = true;
+  @Input() hasExpandable = false;
+  @Input() variant: 'default' | 'group' = 'default';
+}

package/src/lib/components/table/table-skeleton/table-skeleton-mobile-card.component.html

@@ -0,0 +1,43 @@
+<div
+  class="max-w-full overflow-hidden rounded-[10px] border border-border bg-white animate-pulse dark:border-dark-border dark:bg-foreground"
+  aria-hidden="true"
+>
+  <div
+    class="flex items-center gap-2 p-3"
+    [ngClass]="{
+      'bg-primary/10 dark:bg-primary/20': variant === 'group',
+    }"
+  >
+    @if (isNumbering) {
+      <div
+        class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted/40 dark:bg-dark-muted/30"
+        [ngClass]="{
+          'h-[35px] w-[35px] rounded-full border border-border': variant === 'group',
+        }"
+      ></div>
+    }
+
+    <div class="min-w-0 flex-1 space-y-2">
+      <div class="h-3 w-[78%] rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+      <div class="h-3 w-[52%] rounded bg-muted/30 dark:bg-dark-muted/25"></div>
+      <div class="flex flex-wrap gap-1">
+        <div class="h-4 w-14 rounded-full bg-muted/30 dark:bg-dark-muted/25"></div>
+        <div class="h-4 w-16 rounded-full bg-muted/30 dark:bg-dark-muted/25"></div>
+      </div>
+    </div>
+
+    <div class="h-4 w-4 shrink-0 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+  </div>
+
+  @if (variant === 'group') {
+    <div
+      class="flex items-center justify-between border-t border-border bg-primary/5 px-3 py-2 dark:border-dark-border dark:bg-dark-primary/10"
+    >
+      <div class="h-5 w-24 rounded-full bg-muted/30 dark:bg-dark-muted/25"></div>
+      <div class="flex gap-1">
+        <div class="h-6 w-8 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+        <div class="h-6 w-8 rounded bg-muted/40 dark:bg-dark-muted/30"></div>
+      </div>
+    </div>
+  }
+</div>

package/src/lib/components/table/table-skeleton/table-skeleton-mobile-card.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'JTableSkeletonMobileCard',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './table-skeleton-mobile-card.component.html',
+})
+export class JTableSkeletonMobileCardComponent {
+  @Input() isNumbering = true;
+  @Input() variant: 'default' | 'group' = 'default';
+}

package/src/styles.css

@@ -1,68 +1,75 @@
 /* Scrolls */
 
 .scroll-element {
-  padding-right: 5px
+  padding-right: 5px;
+  -webkit-overflow-scrolling: touch;
 }
 
-.scroll-element::-webkit-scrollbar {
-  width: 8px;
-  height: 8px
-}
+/* Scroll personalizado solo en desktop; en móvil/touch queda el scroll nativo del sistema */
+@media (hover: hover) and (pointer: fine) {
+  .scroll-element::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-.scroll-element::-webkit-scrollbar-track {
-  border-radius: 10px
-}
+  .scroll-element::-webkit-scrollbar-track {
+    border-radius: 10px;
+  }
 
-.scroll-element::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: var(--color-primary);
-  -webkit-transition: .5s;
-  transition: .5s
-}
+  .scroll-element::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: var(--color-primary);
+    -webkit-transition: .5s;
+    transition: .5s;
+  }
 
-.scroll-element::-webkit-scrollbar-thumb:hover {
-  background: var(--color-dark-primary)
-}
+  .scroll-element::-webkit-scrollbar-thumb:hover {
+    background: var(--color-dark-primary);
+  }
 
-.scroll-element::-webkit-scrollbar-button {
-  width: 0px;
-  height: 0px
+  .scroll-element::-webkit-scrollbar-button {
+    width: 0px;
+    height: 0px;
+  }
 }
 
 .scroll-screen {
-  padding-right: 5px
-}
-
-.scroll-screen::-webkit-scrollbar {
-  width: 10px;
-  height: 10px
-}
-
-.scroll-screen::-webkit-scrollbar-thumb {
-  background: var(--color-dark-primary);
-  border: 3px solid var(--color-primary);
-  -webkit-transition: .5s;
-  transition: .5s
-}
-
-.scroll-screen::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary)
-}
-
-.scroll-screen::-webkit-scrollbar-button {
-  width: 0px;
-  height: 0px
-}
-
-.dark .scroll-screen::-webkit-scrollbar-thumb {
-  background: var(--color-dark-primary);
-  border: 3px solid var(--color-primary);
-  -webkit-transition: .5s;
-  transition: .5s
-}
-
-.dark .scroll-screen::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary)
+  padding-right: 5px;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .scroll-screen::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .scroll-screen::-webkit-scrollbar-thumb {
+    background: var(--color-dark-primary);
+    border: 3px solid var(--color-primary);
+    -webkit-transition: .5s;
+    transition: .5s;
+  }
+
+  .scroll-screen::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
+  }
+
+  .scroll-screen::-webkit-scrollbar-button {
+    width: 0px;
+    height: 0px;
+  }
+
+  .dark .scroll-screen::-webkit-scrollbar-thumb {
+    background: var(--color-dark-primary);
+    border: 3px solid var(--color-primary);
+    -webkit-transition: .5s;
+    transition: .5s;
+  }
+
+  .dark .scroll-screen::-webkit-scrollbar-thumb:hover {
+    background: var(--color-primary);
+  }
 }