@spartan-ng/cli 0.0.1-alpha.658 → 0.0.1-alpha.660

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/package.json +1 -1
  2. package/src/generators/base/lib/styles/transform-style-map.js +1 -1
  3. package/src/generators/base/lib/styles/transform-style-map.js.map +1 -1
  4. package/src/generators/ui/libs/alert/files/lib/hlm-alert-action.ts.template +1 -1
  5. package/src/generators/ui/libs/alert/files/lib/hlm-alert-description.ts.template +1 -4
  6. package/src/generators/ui/libs/alert/files/lib/hlm-alert-title.ts.template +1 -4
  7. package/src/generators/ui/libs/alert/files/lib/hlm-alert.ts.template +10 -13
  8. package/src/generators/ui/style-luma.css +1365 -0
  9. package/src/generators/ui/style-lyra.css +29 -29
  10. package/src/generators/ui/style-maia.css +28 -28
  11. package/src/generators/ui/style-mira.css +28 -28
  12. package/src/generators/ui/style-nova.css +39 -39
  13. package/src/generators/ui/style-vega.css +40 -40
  14. package/src/generators/ui/supported-ui-libraries.json +41 -41
package/src/generators/ui/style-mira.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .spartan-accordion-trigger {
12
- @apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
12
+ @apply **:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-start text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
13
13
  }
14
14
 
15
15
  .spartan-accordion-content {
@@ -30,11 +30,11 @@
30
30
  }
31
31
 
32
32
  .spartan-alert-dialog-header {
33
- @apply grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
33
+ @apply grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
34
34
  }
35
35
 
36
36
  .spartan-alert-dialog-media {
37
- @apply bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4;
37
+ @apply bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
38
38
  }
39
39
 
40
40
  .spartan-alert-dialog-title {
@@ -47,7 +47,7 @@
47
47
 
48
48
  /* MARK: Alert */
49
49
  .spartan-alert {
50
- @apply grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5;
50
+ @apply grid gap-0.5 rounded-lg border px-2 py-1.5 text-start text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-1.5 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
51
51
  }
52
52
 
53
53
  .spartan-alert-variant-default {
@@ -55,11 +55,11 @@
55
55
  }
56
56
 
57
57
  .spartan-alert-variant-destructive {
58
- @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;
58
+ @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[ng-icon]:text-current;
59
59
  }
60
60
 
61
61
  .spartan-alert-title {
62
- @apply font-medium group-has-[>svg]/alert:col-start-2;
62
+ @apply font-medium group-has-[>ng-icon]/alert:col-start-2;
63
63
  }
64
64
 
65
65
  .spartan-alert-description {
@@ -88,12 +88,12 @@
88
88
  }
89
89
 
90
90
  .spartan-avatar-group-count {
91
- @apply bg-muted text-muted-foreground size-8 rounded-full text-xs/relaxed group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3;
91
+ @apply bg-muted text-muted-foreground size-8 rounded-full text-xs/relaxed group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-[calc(var(--spacing)*4)] group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*5)] group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*3)];
92
92
  }
93
93
 
94
94
  /* MARK: Badge */
95
95
  .spartan-badge {
96
- @apply h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[--spacing(2.5)];
96
+ @apply h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[calc(var(--spacing)*2.5)];
97
97
  }
98
98
 
99
99
  .spartan-badge-variant-default {
@@ -138,16 +138,16 @@
138
138
  }
139
139
 
140
140
  .spartan-breadcrumb-separator {
141
- @apply [&>svg]:size-3.5;
141
+ @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
142
142
  }
143
143
 
144
144
  .spartan-breadcrumb-ellipsis {
145
- @apply size-4 [&>svg]:size-3.5;
145
+ @apply size-4 [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
146
146
  }
147
147
 
148
148
  /* MARK: Button */
149
149
  .spartan-button {
150
- @apply focus-visible:border-ring focus-visible:ring-ring/30 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 data-[matches-spartan-invalid=true]:ring-2 [&_ng-icon:not([class*='text-'])]:text-[--spacing(4)];
150
+ @apply focus-visible:border-ring focus-visible:ring-ring/30 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 data-[matches-spartan-invalid=true]:ring-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
151
151
  }
152
152
 
153
153
  .spartan-button-variant-default {
@@ -285,7 +285,7 @@
285
285
  }
286
286
 
287
287
  .spartan-checkbox-indicator {
288
- @apply [&>svg]:size-3.5;
288
+ @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
289
289
  }
290
290
 
291
291
  /* MARK: Combobox */
@@ -387,7 +387,7 @@
387
387
  }
388
388
 
389
389
  .spartan-command-item {
390
- @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
390
+ @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[ng-icon]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
391
391
  }
392
392
 
393
393
  .spartan-command-shortcut {
@@ -404,7 +404,7 @@
404
404
  }
405
405
 
406
406
  .spartan-context-menu-item {
407
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
407
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
408
408
  }
409
409
 
410
410
  .spartan-context-menu-checkbox-item {
@@ -486,7 +486,7 @@
486
486
  }
487
487
 
488
488
  .spartan-drawer-header {
489
- @apply gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left;
489
+ @apply gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-start;
490
490
  }
491
491
 
492
492
  .spartan-drawer-title {
@@ -511,7 +511,7 @@
511
511
  }
512
512
 
513
513
  .spartan-dropdown-menu-item {
514
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
514
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
515
515
  }
516
516
 
517
517
  .spartan-dropdown-menu-checkbox-item {
@@ -613,7 +613,7 @@
613
613
  }
614
614
 
615
615
  .spartan-field-description {
616
- @apply text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5;
616
+ @apply text-muted-foreground text-start text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5;
617
617
  }
618
618
 
619
619
  .spartan-field-separator {
@@ -717,7 +717,7 @@
717
717
  }
718
718
 
719
719
  .spartan-item-description {
720
- @apply text-muted-foreground text-left text-xs/relaxed;
720
+ @apply text-muted-foreground text-start text-xs/relaxed;
721
721
  }
722
722
 
723
723
  .spartan-item-actions {
@@ -772,7 +772,7 @@
772
772
  }
773
773
 
774
774
  .spartan-menubar-item {
775
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
775
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:ps-7.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
776
776
  }
777
777
 
778
778
  .spartan-menubar-checkbox-item {
@@ -961,7 +961,7 @@
961
961
  }
962
962
 
963
963
  .spartan-select-value {
964
- @apply flex flex-1 text-left;
964
+ @apply flex flex-1 text-start;
965
965
  }
966
966
 
967
967
  .spartan-select-trigger-icon {
@@ -1102,15 +1102,15 @@
1102
1102
  }
1103
1103
 
1104
1104
  .spartan-sidebar-group-label {
1105
- @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;
1105
+ @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1106
1106
  }
1107
1107
 
1108
1108
  .spartan-sidebar-group-action {
1109
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4;
1109
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1110
1110
  }
1111
1111
 
1112
1112
  .spartan-sidebar-menu-button {
1113
- @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1113
+ @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-start text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1114
1114
  }
1115
1115
 
1116
1116
  .spartan-sidebar-menu-button-variant-default {
@@ -1134,7 +1134,7 @@
1134
1134
  }
1135
1135
 
1136
1136
  .spartan-sidebar-menu-action {
1137
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4;
1137
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1138
1138
  }
1139
1139
 
1140
1140
  .spartan-sidebar-menu-badge {
@@ -1158,7 +1158,7 @@
1158
1158
  }
1159
1159
 
1160
1160
  .spartan-sidebar-menu-sub-button {
1161
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4;
1161
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>ng-icon]:text-[calc(var(--spacing)*4)];
1162
1162
  }
1163
1163
 
1164
1164
  /* MARK: Skeleton */
@@ -1223,7 +1223,7 @@
1223
1223
  }
1224
1224
 
1225
1225
  .spartan-table-head {
1226
- @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
1226
+ @apply text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
1227
1227
  }
1228
1228
 
1229
1229
  .spartan-table-cell {
@@ -1341,11 +1341,11 @@
1341
1341
  }
1342
1342
 
1343
1343
  .spartan-input-group-button-size-icon-xs {
1344
- @apply size-6 p-0 has-[>svg]:p-0;
1344
+ @apply size-6 p-0 has-[>ng-icon]:p-0;
1345
1345
  }
1346
1346
 
1347
1347
  .spartan-input-group-button-size-icon-sm {
1348
- @apply size-8 p-0 has-[>svg]:p-0;
1348
+ @apply size-8 p-0 has-[>ng-icon]:p-0;
1349
1349
  }
1350
1350
 
1351
1351
  .spartan-input-group-text {
package/src/generators/ui/style-nova.css CHANGED
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  .spartan-accordion-trigger {
8
- @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
8
+ @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
9
9
  }
10
10
 
11
11
  .spartan-accordion-content {
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* MARK: Alert */
20
20
  .spartan-alert {
21
- @apply grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4;
21
+ @apply grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
22
22
  }
23
23
 
24
24
  .spartan-alert-variant-default {
@@ -26,11 +26,11 @@
26
26
  }
27
27
 
28
28
  .spartan-alert-variant-destructive {
29
- @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;
29
+ @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[ng-icon]:text-current;
30
30
  }
31
31
 
32
32
  .spartan-alert-title {
33
- @apply font-medium group-has-[>svg]/alert:col-start-2;
33
+ @apply font-medium group-has-[>ng-icon]/alert:col-start-2;
34
34
  }
35
35
 
36
36
  .spartan-alert-description {
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .spartan-alert-action {
41
- @apply absolute top-2 right-2;
41
+ @apply absolute end-2 top-2;
42
42
  }
43
43
 
44
44
  /* MARK: Alert Dialog */
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .spartan-alert-dialog-header {
54
- @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
54
+ @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
55
55
  }
56
56
 
57
57
  .spartan-alert-dialog-media {
@@ -88,12 +88,12 @@
88
88
  }
89
89
 
90
90
  .spartan-avatar-group-count {
91
- @apply bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3;
91
+ @apply bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-[calc(var(--spacing)*4)] group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*5)] group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*3)];
92
92
  }
93
93
 
94
94
  /* MARK: Badge */
95
95
  .spartan-badge {
96
- @apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[--spacing(3)];
96
+ @apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[calc(var(--spacing)*3)];
97
97
  }
98
98
 
99
99
  .spartan-badge-variant-default {
@@ -138,16 +138,16 @@
138
138
  }
139
139
 
140
140
  .spartan-breadcrumb-separator {
141
- @apply [&>svg]:size-3.5;
141
+ @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
142
142
  }
143
143
 
144
144
  .spartan-breadcrumb-ellipsis {
145
- @apply size-5 [&>svg]:size-4;
145
+ @apply size-5 [&>ng-icon]:text-[calc(var(--spacing)*4)];
146
146
  }
147
147
 
148
148
  /* MARK: Button */
149
149
  .spartan-button {
150
- @apply focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[--spacing(4)];
150
+ @apply focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
151
151
  }
152
152
 
153
153
  .spartan-button-variant-default {
@@ -285,7 +285,7 @@
285
285
  }
286
286
 
287
287
  .spartan-checkbox-indicator {
288
- @apply [&>svg]:size-3.5;
288
+ @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
289
289
  }
290
290
 
291
291
  /* MARK: Combobox */
@@ -306,7 +306,7 @@
306
306
  }
307
307
 
308
308
  .spartan-combobox-item-indicator {
309
- @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;
309
+ @apply pointer-events-none absolute end-2 flex size-4 items-center justify-center;
310
310
  }
311
311
 
312
312
  .spartan-combobox-empty {
@@ -387,7 +387,7 @@
387
387
  }
388
388
 
389
389
  .spartan-command-item {
390
- @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
390
+ @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[ng-icon]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
391
391
  }
392
392
 
393
393
  .spartan-command-shortcut {
@@ -404,7 +404,7 @@
404
404
  }
405
405
 
406
406
  .spartan-context-menu-item {
407
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
407
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive focus:*:[ng-icon]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
408
408
  }
409
409
 
410
410
  .spartan-context-menu-checkbox-item {
@@ -416,7 +416,7 @@
416
416
  }
417
417
 
418
418
  .spartan-context-menu-item-indicator {
419
- @apply absolute right-2;
419
+ @apply absolute end-2;
420
420
  }
421
421
 
422
422
  .spartan-context-menu-label {
@@ -453,7 +453,7 @@
453
453
  }
454
454
 
455
455
  .spartan-dialog-close {
456
- @apply absolute top-2 right-2;
456
+ @apply absolute end-2 top-2;
457
457
  }
458
458
 
459
459
  .spartan-dialog-header {
@@ -486,7 +486,7 @@
486
486
  }
487
487
 
488
488
  .spartan-drawer-header {
489
- @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left;
489
+ @apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-start;
490
490
  }
491
491
 
492
492
  .spartan-drawer-title {
@@ -511,7 +511,7 @@
511
511
  }
512
512
 
513
513
  .spartan-dropdown-menu-item {
514
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
514
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
515
515
  }
516
516
 
517
517
  .spartan-dropdown-menu-checkbox-item {
@@ -523,7 +523,7 @@
523
523
  }
524
524
 
525
525
  .spartan-dropdown-menu-item-indicator {
526
- @apply absolute right-2 flex items-center justify-center;
526
+ @apply absolute end-2 flex items-center justify-center;
527
527
  }
528
528
 
529
529
  .spartan-dropdown-menu-label {
@@ -613,7 +613,7 @@
613
613
  }
614
614
 
615
615
  .spartan-field-description {
616
- @apply text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5;
616
+ @apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
617
617
  }
618
618
 
619
619
  .spartan-field-separator {
@@ -717,7 +717,7 @@
717
717
  }
718
718
 
719
719
  .spartan-item-description {
720
- @apply text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs;
720
+ @apply text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs;
721
721
  }
722
722
 
723
723
  .spartan-item-actions {
@@ -772,7 +772,7 @@
772
772
  }
773
773
 
774
774
  .spartan-menubar-item {
775
- @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
775
+ @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
776
776
  }
777
777
 
778
778
  .spartan-menubar-checkbox-item {
@@ -780,7 +780,7 @@
780
780
  }
781
781
 
782
782
  .spartan-menubar-checkbox-item-indicator {
783
- @apply left-1.5 size-4 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
783
+ @apply start-1.5 size-4 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
784
784
  }
785
785
 
786
786
  .spartan-menubar-radio-item {
@@ -788,7 +788,7 @@
788
788
  }
789
789
 
790
790
  .spartan-menubar-radio-item-indicator {
791
- @apply left-1.5 size-4 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
791
+ @apply start-1.5 size-4 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
792
792
  }
793
793
 
794
794
  .spartan-menubar-label {
@@ -862,7 +862,7 @@
862
862
  }
863
863
 
864
864
  .spartan-native-select-icon {
865
- @apply text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2;
865
+ @apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
866
866
  }
867
867
 
868
868
  /* MARK: Pagination */
@@ -938,7 +938,7 @@
938
938
  }
939
939
 
940
940
  .spartan-radio-group-indicator-icon {
941
- @apply bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full;
941
+ @apply bg-primary-foreground absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full;
942
942
  }
943
943
 
944
944
  /* MARK: Resizable */
@@ -961,7 +961,7 @@
961
961
  }
962
962
 
963
963
  .spartan-select-value {
964
- @apply flex flex-1 text-left;
964
+ @apply flex flex-1 text-start;
965
965
  }
966
966
 
967
967
  .spartan-select-trigger-icon {
@@ -985,7 +985,7 @@
985
985
  }
986
986
 
987
987
  .spartan-select-item-indicator {
988
- @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;
988
+ @apply pointer-events-none absolute end-2 flex size-4 items-center justify-center;
989
989
  }
990
990
 
991
991
  .spartan-select-group {
@@ -1031,7 +1031,7 @@
1031
1031
  }
1032
1032
 
1033
1033
  .spartan-sheet-close {
1034
- @apply absolute top-3 right-3;
1034
+ @apply absolute end-3 top-3;
1035
1035
  }
1036
1036
 
1037
1037
  .spartan-sheet-header {
@@ -1100,15 +1100,15 @@
1100
1100
  }
1101
1101
 
1102
1102
  .spartan-sidebar-group-label {
1103
- @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;
1103
+ @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1104
1104
  }
1105
1105
 
1106
1106
  .spartan-sidebar-group-action {
1107
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4;
1107
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-md p-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1108
1108
  }
1109
1109
 
1110
1110
  .spartan-sidebar-menu-button {
1111
- @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1111
+ @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1112
1112
  }
1113
1113
 
1114
1114
  .spartan-sidebar-menu-button-variant-default {
@@ -1132,11 +1132,11 @@
1132
1132
  }
1133
1133
 
1134
1134
  .spartan-sidebar-menu-action {
1135
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4;
1135
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1136
1136
  }
1137
1137
 
1138
1138
  .spartan-sidebar-menu-badge {
1139
- @apply text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1;
1139
+ @apply text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1;
1140
1140
  }
1141
1141
 
1142
1142
  .spartan-sidebar-menu-skeleton {
@@ -1156,7 +1156,7 @@
1156
1156
  }
1157
1157
 
1158
1158
  .spartan-sidebar-menu-sub-button {
1159
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4;
1159
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>ng-icon]:text-[calc(var(--spacing)*4)];
1160
1160
  }
1161
1161
 
1162
1162
  /* MARK: Skeleton */
@@ -1221,7 +1221,7 @@
1221
1221
  }
1222
1222
 
1223
1223
  .spartan-table-head {
1224
- @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
1224
+ @apply text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
1225
1225
  }
1226
1226
 
1227
1227
  .spartan-table-cell {
@@ -1339,11 +1339,11 @@
1339
1339
  }
1340
1340
 
1341
1341
  .spartan-input-group-button-size-icon-xs {
1342
- @apply size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0;
1342
+ @apply size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>ng-icon]:p-0;
1343
1343
  }
1344
1344
 
1345
1345
  .spartan-input-group-button-size-icon-sm {
1346
- @apply size-8 p-0 has-[>svg]:p-0;
1346
+ @apply size-8 p-0 has-[>ng-icon]:p-0;
1347
1347
  }
1348
1348
 
1349
1349
  .spartan-input-group-text {