tailjng 0.1.7 → 0.1.9

package/README.md

@@ -151,7 +151,21 @@ Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`**
 | `colors.config.ts` | Lista de variantes (incluye las 77 por defecto) + las tuyas (`brand`, etc.) |
 | `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
 
-**`init:app`** y **`sync:app`** crean esa carpeta (sin sobrescribir si ya existe), importan `colors.safelist.css` en `styles.css` y registran `tailjngColorsProvider`.
+**`init:app`** y **`sync:app`** crean esa carpeta (sin sobrescribir si ya existe), importan `colors.safelist.css` en tus estilos globales y registran `tailjngColorsProvider`.
+
+Import del safelist según el lenguaje de estilos del proyecto:
+
+```css
+/* styles.css */
+@import "tailwindcss";
+@import "./app/tailjng/.config/colors/colors.safelist.css";
+```
+
+```scss
+/* styles.scss — todos los @use van antes de otras reglas */
+@use "tailwindcss";
+@use "./app/tailjng/.config/colors/colors.safelist.css";
+```
 
 Si falta la carpeta en un proyecto existente:
 

package/cli/settings/colors-config-utils.js

@@ -39,6 +39,14 @@ function migrateLegacyColorsPaths(content) {
     .replaceAll('tailjng/colors/colors.safelist.css', COLORS_SAFELIST_SEGMENT);
 }
 
+function isScssStyleEntry(styleEntry) {
+  return /\.(scss|sass)$/i.test(styleEntry);
+}
+
+function getSafelistDirective(styleEntry) {
+  return isScssStyleEntry(styleEntry) ? '@use' : '@import';
+}
+
 function getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject) {
   const appRoot = path.join(workspaceRoot, appProject.root || '');
   const colorsSafelist = path.join(getProjectColorsDir(appRoot), 'colors.safelist.css');
@@ -58,7 +66,7 @@ function getColorsSafelistImportLine(workspaceRoot, styleEntry, appProject) {
 
   let rel = path.relative(path.dirname(stylePath), targetSafelist).split(path.sep).join('/');
   if (!rel.startsWith('.')) rel = `./${rel}`;
-  return `@import "${rel}";`;
+  return `${getSafelistDirective(styleEntry)} "${rel}";`;
 }
 
 function ensureProjectColorsConfig(workspaceRoot, appRoot, overwrite = false) {
@@ -102,11 +110,26 @@ function ensureColorsSafelistImport(styleFilePath, importLine) {
     return { changed: true, migrated: true };
   }
 
+  const isScss = /\.(scss|sass)$/i.test(styleFilePath);
+  const expectedDirective = isScss ? '@use' : '@import';
   const projectImport = new RegExp(COLORS_SAFELIST_SEGMENT.replace(/\./g, '\\.'));
   const npmImport = /node_modules\/tailjng\/src\/colors\.safelist\.css/;
-  const anySafelistImport = /@import\s+"[^"]*colors\.safelist\.css";?/;
+  const anySafelistImport = /@(?:import|use)\s+"[^"]*colors\.safelist\.css";?/;
+
+  const wrongDirectivePattern = isScss
+    ? /@import\s+"([^"]*colors\.safelist\.css)";?/
+    : /@use\s+"([^"]*colors\.safelist\.css)";?/;
+
+  if (wrongDirectivePattern.test(content)) {
+    content = content.replace(
+      wrongDirectivePattern,
+      (_, safelistPath) => `${expectedDirective} "${safelistPath}";`,
+    );
+    fs.writeFileSync(styleFilePath, content, 'utf8');
+    return { changed: true, migrated: true };
+  }
 
-  if (projectImport.test(content)) {
+  if (projectImport.test(content) && anySafelistImport.test(content)) {
     return { changed: false };
   }
 

package/cli/templates/app.generator.js

@@ -70,16 +70,19 @@ ${buildDefaultThemeBlock()}
 
 .dark {
   --tw-bg-opacity: 1;
-  color: var(--white);
+  color: var(--color-dark-foreground);
 }
 `;
 }
 
 function buildStylesScss(safelistImport = '') {
+  const safelistUse = safelistImport
+    ? safelistImport.replace(/^@import\s+/, '@use ')
+    : '';
   return `@use "tailwindcss";
-${safelistImport ? `${safelistImport}\n` : ''}
 @use "./scss/scroll";
 @use "./scss/input";
+${safelistUse ? `${safelistUse}\n` : ''}
 
 html,
 body {
@@ -104,7 +107,7 @@ ${buildDefaultThemeBlock()}
 
 .dark {
   --tw-bg-opacity: 1;
-  color: var(--white);
+  color: var(--color-dark-foreground);
 }
 `;
 }

package/package.json

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

package/src/colors.safelist.css

@@ -1,5 +1,5 @@
 /* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
-/* npm fallback — prefer src/app/tailjng/.config/colors/colors.safelist.css in projects */
+/* CSS: @import after @import "tailwindcss" · SCSS: @use after @use "tailwindcss". */
 
 @layer utilities {
   .__tailjng_colors_safelist_1__ {

package/src/lib/components/.config/colors/README.md

@@ -9,6 +9,8 @@ Folder generated at `src/app/tailjng/.config/colors/` by `init:app`, `sync:app`,
 | `colors.config.ts` | Variants (`primary`, `success_soft`, …) plus your own (`brand`, etc.) |
 | `colors.safelist.css` | Tailwind classes the build must generate (`@apply`) |
 
+Import in global styles after Tailwind: **`@import`** in `.css`, **`@use`** in `.scss`.
+
 ## Add a custom color
 
 **1.** In `colors.config.ts`:

package/src/lib/components/.config/colors/colors.safelist.css

@@ -1,5 +1,5 @@
 /* AUTO-GENERATED — do not edit blocks 1-N. Run: node scripts/generate-colors-safelist.mjs */
-/* Import in styles.css AFTER @import "tailwindcss". */
+/* CSS: @import after @import "tailwindcss" · SCSS: @use after @use "tailwindcss". */
 
 @layer utilities {
   .__tailjng_colors_safelist_1__ {

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

@@ -2,29 +2,10 @@
   display: contents;
 }
 
-.j-alert-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 999999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background-color: rgb(0 0 0 / 0.45);
-  backdrop-filter: blur(2px);
-}
-
 .j-alert-dialog-card {
-  position: relative;
-  width: 100%;
-  max-width: 28rem;
-  min-height: 5.5rem;
-  overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
-  border-radius: 0.75rem;
   background-color: color-mix(in srgb, var(--color-background) 92%, transparent);
   box-shadow: 0 20px 48px rgb(0 0 0 / 0.14);
-  backdrop-filter: blur(16px);
 }
 
 :host-context(.dark) .j-alert-dialog-card,
@@ -196,64 +177,12 @@
   }
 }
 
-.j-alert-dialog-body {
-  position: relative;
-  z-index: 10;
-  padding: 1rem 1rem 1rem 1.25rem;
-}
-
-.j-alert-dialog-body--with-actions {
-  padding-bottom: 0.5rem;
-}
-
-.j-alert-dialog-title {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .j-alert-dialog-title,
-:host-context(html.dark) .j-alert-dialog-title {
-  color: var(--color-dark-foreground);
-}
-
-.j-alert-dialog-description {
-  margin: 0.375rem 0 0;
-  font-size: 0.75rem;
-  line-height: 1.55;
-  color: var(--color-muted-foreground);
-}
-
 .j-alert-dialog-description :is(b, strong) {
   font-weight: 600;
   color: var(--color-foreground);
 }
 
-:host-context(.dark) .j-alert-dialog-description,
-:host-context(html.dark) .j-alert-dialog-description {
-  color: var(--color-dark-muted-foreground);
-}
-
 :host-context(.dark) .j-alert-dialog-description :is(b, strong),
 :host-context(html.dark) .j-alert-dialog-description :is(b, strong) {
   color: var(--color-dark-foreground);
 }
-
-.j-alert-dialog-actions {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.375rem;
-  padding: 0 1rem 1rem 1.25rem;
-}
-
-@media (max-width: 450px) {
-  .j-alert-dialog-card {
-    max-width: 100%;
-  }
-}

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

@@ -1,13 +1,13 @@
 @for (dialog of dialogs(); track dialog.config.title) {
   <div
-    class="j-alert-dialog"
+    class="fixed inset-0 z-[999999] flex items-center justify-center p-4 bg-black/45 backdrop-blur-[2px]"
     role="dialog"
     aria-modal="true"
     [attr.aria-label]="dialog.config.title"
   >
     <div
       @modalTransition
-      class="j-alert-dialog-card"
+      class="j-alert-dialog-card relative w-full max-w-md min-h-[5.5rem] overflow-hidden rounded-xl backdrop-blur-[16px] max-[450px]:max-w-full"
       [ngClass]="cardClasses(dialog.config.type)"
     >
       <div [ngClass]="accentClasses(dialog.config.type)"></div>
@@ -31,21 +31,21 @@
       </div>
 
       <div
-        class="j-alert-dialog-body"
-        [class.j-alert-dialog-body--with-actions]="hasActions(dialog)"
+        class="relative z-10 p-4 pl-5"
+        [class.pb-2]="hasActions(dialog)"
       >
-        <h3 class="j-alert-dialog-title">{{ dialog.config.title }}</h3>
+        <h3 class="m-0 text-sm font-semibold leading-[1.3] tracking-[-0.01em] text-foreground dark:text-dark-foreground">{{ dialog.config.title }}</h3>
 
         @if (dialog.config.description) {
           <p
-            class="j-alert-dialog-description"
+            class="j-alert-dialog-description mt-1.5 mb-0 text-xs leading-[1.55] text-muted-foreground dark:text-dark-muted-foreground"
             [innerHTML]="dialog.config.description"
           ></p>
         }
       </div>
 
       @if (hasActions(dialog)) {
-        <div class="j-alert-dialog-actions">
+        <div class="relative z-10 flex flex-wrap justify-end gap-1.5 py-0 pr-4 pb-4 pl-5">
           @if (showRetryButton(dialog.config)) {
             <JButton
               size="sm"

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

@@ -74,12 +74,6 @@
     overflow-y 0s linear 0.32s;
 }
 
-.j-alert-toast-scroll-shell {
-  position: relative;
-  width: 100%;
-  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
 .j-alert-toast-scroll-shell--expanded {
   max-height: min(70vh, 28rem);
 }
@@ -210,32 +204,6 @@
     opacity 0.24s ease;
 }
 
-.j-alert-toast-stack-hint {
-  position: absolute;
-  top: -0.35rem;
-  right: -0.35rem;
-  z-index: 50;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  padding: 0 0.3rem;
-  border-radius: 999px;
-  background-color: var(--color-primary);
-  color: var(--color-primary-foreground, #fff);
-  font-size: 0.625rem;
-  font-weight: 700;
-  line-height: 1;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
-  pointer-events: none;
-  opacity: 0;
-  transform: scale(0.85);
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-}
-
 .j-alert-toast-stack--bottom-left .j-alert-toast-stack-hint,
 .j-alert-toast-stack--top-left .j-alert-toast-stack-hint {
   right: auto;
@@ -273,17 +241,9 @@
 }
 
 .j-alert-toast-card {
-  position: relative;
-  width: 100%;
-  min-height: 4.5rem;
-  margin-left: auto;
-  overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
-  border-radius: 0.75rem;
   background-color: color-mix(in srgb, var(--color-background) 92%, transparent);
   box-shadow: 0 12px 32px rgb(0 0 0 / 0.1);
-  backdrop-filter: blur(16px);
-  pointer-events: auto;
 }
 
 :host-context(.dark) .j-alert-toast-card,
@@ -485,116 +445,21 @@
   padding-bottom: calc(0.5rem + var(--j-toast-timeline-height));
 }
 
-.j-alert-toast-title {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .j-alert-toast-title,
-:host-context(html.dark) .j-alert-toast-title {
-  color: var(--color-dark-foreground);
-}
-
-.j-alert-toast-description {
-  margin: 0.25rem 0 0;
-  font-size: 0.75rem;
-  line-height: 1.55;
-  color: var(--color-muted-foreground);
-}
-
 .j-alert-toast-description :is(b, strong) {
   font-weight: 600;
   color: var(--color-foreground);
 }
 
-:host-context(.dark) .j-alert-toast-description,
-:host-context(html.dark) .j-alert-toast-description {
-  color: var(--color-dark-muted-foreground);
-}
-
 :host-context(.dark) .j-alert-toast-description :is(b, strong),
 :host-context(html.dark) .j-alert-toast-description :is(b, strong) {
   color: var(--color-dark-foreground);
 }
 
-.j-alert-toast-close {
-  position: absolute;
-  top: 0.625rem;
-  right: 0.625rem;
-  z-index: 20;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: 0.5rem;
-  background-color: transparent;
-  color: var(--color-muted-foreground);
-  line-height: 0;
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease,
-    transform 0.15s ease;
-}
-
-.j-alert-toast-close:hover {
-  color: var(--color-foreground);
-  background-color: color-mix(in srgb, var(--color-muted) 45%, transparent);
-}
-
-.j-alert-toast-close:active {
-  transform: scale(0.94);
-}
-
-.j-alert-toast-close:focus-visible {
-  outline: 2px solid var(--color-ring);
-  outline-offset: 2px;
-}
-
-:host-context(.dark) .j-alert-toast-close,
-:host-context(html.dark) .j-alert-toast-close {
-  color: var(--color-dark-muted-foreground);
-}
-
-:host-context(.dark) .j-alert-toast-close:hover,
-:host-context(html.dark) .j-alert-toast-close:hover {
-  color: var(--color-dark-foreground);
-  background-color: color-mix(in srgb, var(--color-dark-muted) 45%, transparent);
-}
-
-.j-alert-toast-actions {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.375rem;
-  padding: 0 1rem 0.875rem 1.25rem;
-}
-
 .j-alert-toast-actions--with-timeline {
   padding-bottom: calc(0.875rem + var(--j-toast-timeline-height));
 }
 
 .j-alert-toast-timeline {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 30;
-  height: var(--j-toast-timeline-height);
-  margin: 0;
-  overflow: hidden;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
   background-color: color-mix(in srgb, var(--color-muted) 35%, transparent);
 }
 
@@ -604,9 +469,6 @@
 }
 
 .j-alert-toast-progress {
-  width: 100%;
-  height: 100%;
-  transform-origin: left center;
   animation-name: j-alert-toast-progress-shrink;
   animation-timing-function: linear;
   animation-fill-mode: forwards;

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

@@ -5,13 +5,16 @@
   (mouseleave)="onStackLeave()"
 >
   @if (stackable && toasts().length > 1 && !expanded) {
-    <span class="j-alert-toast-stack-hint" aria-hidden="true">
+    <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"
+      aria-hidden="true"
+    >
       {{ toasts().length }}
     </span>
   }
 
   <div
-    class="j-alert-toast-scroll-shell"
+    class="j-alert-toast-scroll-shell relative w-full transition-[max-height] duration-[320ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
     [class.j-alert-toast-scroll-shell--expanded]="stackable && toasts().length > 1 && expanded"
   >
     <div
@@ -24,7 +27,7 @@
     @for (toast of displayToasts(); track toast.id) {
       <div
         @toastTransition
-        class="j-alert-toast-card"
+        class="j-alert-toast-card relative w-full min-h-[4.5rem] ml-auto overflow-hidden rounded-xl backdrop-blur-[16px] pointer-events-auto"
         [ngClass]="cardClasses(toast.config.type, toastIndex(toast), toasts().length)"
         [ngStyle]="cardAnchorStyle(toastIndex(toast), toasts().length)"
         [style.z-index]="cardZIndex(toastIndex(toast), toasts().length)"
@@ -52,11 +55,11 @@
         </div>
 
         <div [ngClass]="bodyClasses(toast)">
-          <h3 class="j-alert-toast-title">{{ toast.config.title }}</h3>
+          <h3 class="m-0 text-sm font-semibold leading-[1.3] tracking-[-0.01em] text-foreground dark:text-dark-foreground">{{ toast.config.title }}</h3>
 
           @if (toast.config.description) {
             <p
-              class="j-alert-toast-description"
+              class="j-alert-toast-description mt-1 mb-0 text-xs leading-[1.55] text-muted-foreground dark:text-dark-muted-foreground"
               [innerHTML]="toast.config.description"
             ></p>
           }
@@ -64,7 +67,7 @@
           @if (toast.btnClose) {
             <button
               type="button"
-              class="j-alert-toast-close"
+              class="absolute top-2.5 right-2.5 z-20 inline-flex items-center justify-center w-7 h-7 m-0 p-0 border-0 rounded-lg bg-transparent text-muted-foreground dark:text-dark-muted-foreground leading-none cursor-pointer transition-[color,background-color,transform] duration-150 ease-in-out hover:text-foreground hover:bg-muted/45 dark:hover:text-dark-foreground dark:hover:bg-dark-muted/45 active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
               aria-label="Cerrar notificación"
               (click)="closeToast(toast.id)"
             >
@@ -75,7 +78,7 @@
 
         @if (hasActions(toast)) {
           <div
-            class="j-alert-toast-actions"
+            class="j-alert-toast-actions relative z-10 flex flex-wrap justify-end gap-1.5 py-0 pr-4 pb-3.5 pl-5"
             [class.j-alert-toast-actions--with-timeline]="hasAutoClose(toast)"
           >
             @if (toast.config.type !== 'success' && toast.onCancelCallback) {
@@ -105,9 +108,9 @@
         }
 
         @if (hasAutoClose(toast)) {
-          <div class="j-alert-toast-timeline">
+          <div class="j-alert-toast-timeline absolute inset-x-0 bottom-0 z-30 h-[var(--j-toast-timeline-height)] m-0 overflow-hidden rounded-b-[inherit]">
             <div
-              class="j-alert-toast-progress"
+              class="j-alert-toast-progress w-full h-full origin-left"
               [ngClass]="progressClasses(toast.config.type)"
               [ngStyle]="progressStyle(toast)"
             ></div>

package/src/lib/components/checkbox/checkbox-input/input-checkbox.component.css

@@ -1,63 +1,8 @@
-.j-checkbox-root {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.j-checkbox-label {
-  display: inline-flex;
-  gap: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.j-checkbox-control {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.j-checkbox-input {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.j-checkbox-input:disabled {
-  cursor: not-allowed;
-}
-
 .j-checkbox-input:focus-visible + .j-checkbox-box {
   outline: 2px solid var(--color-ring);
   outline-offset: 2px;
 }
 
-.j-checkbox-box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  border: 1.5px solid var(--color-border);
-  border-radius: 0.375rem;
-  background-color: var(--color-background);
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-:host-context(.dark) .j-checkbox-box,
-:host-context(html.dark) .j-checkbox-box {
-  border-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-}
-
 .j-checkbox-box--checked {
   border-color: var(--color-primary);
   background-color: var(--color-primary);
@@ -76,18 +21,6 @@
   cursor: not-allowed;
 }
 
-.j-checkbox-title {
-  font-size: 0.75rem;
-  line-height: 1.25;
-  color: var(--color-foreground);
-  opacity: 0.85;
-}
-
-:host-context(.dark) .j-checkbox-title,
-:host-context(html.dark) .j-checkbox-title {
-  color: var(--color-dark-foreground);
-}
-
 .j-checkbox-title--disabled {
   opacity: 0.45;
 }

package/src/lib/components/checkbox/checkbox-input/input-checkbox.component.html

@@ -1,29 +1,33 @@
 <div
-  class="j-checkbox-root"
+  class="inline-flex flex-col items-center justify-center"
   [jTooltip]="tooltip"
   [jTooltipPosition]="tooltipPosition"
 >
-  <label class="j-checkbox-label" [ngClass]="layoutClasses">
+  <label class="j-checkbox-label inline-flex gap-2 cursor-pointer select-none" [ngClass]="layoutClasses">
     @if (showTitleBefore) {
       <span
-        class="j-checkbox-title"
         [ngClass]="titleClasses"
+        class="text-xs leading-tight text-foreground/85 dark:text-dark-foreground"
         [style.font-size]="titleSize"
       >
         {{ title }}
       </span>
     }
 
-    <span class="j-checkbox-control" [class]="classes">
+    <span class="relative inline-flex items-center justify-center" [class]="classes">
       <input
         type="checkbox"
-        class="j-checkbox-input"
+        class="j-checkbox-input absolute inset-0 z-[1] m-0 opacity-0 cursor-pointer disabled:cursor-not-allowed"
         [checked]="checked"
         [disabled]="isDisabled"
         (change)="onCheckboxChangeHandler($event)"
       />
 
-      <span [ngClass]="boxClasses" aria-hidden="true">
+      <span
+        [ngClass]="boxClasses"
+        class="inline-flex items-center justify-center w-[1.375rem] h-[1.375rem] border-[1.5px] border-border dark:border-dark-border rounded-md bg-background dark:bg-dark-background transition-[background-color,border-color,box-shadow] duration-150 ease-in-out"
+        aria-hidden="true"
+      >
         @if (isLoading) {
           <JIcon
             [icon]="Icons.Loader2"
@@ -49,8 +53,8 @@
 
     @if (showTitleAfter) {
       <span
-        class="j-checkbox-title"
         [ngClass]="titleClasses"
+        class="text-xs leading-tight text-foreground/85 dark:text-dark-foreground"
         [style.font-size]="titleSize"
       >
         {{ title }}