update

examples/generic.html

@@ -67,7 +67,7 @@
         <div class="orbiter m">
         </div> 
         <div class="orbiter m">
-          <div class="label pos-45">
+          <div class="label offset-45">
             <div class="text">Tactic sat intel <br> trino</div>
           </div>
         </div>

src/components/_label-style.scss

@@ -1,13 +1,13 @@
 /* element theme */
-.pod .label {
+.label {
   border-color: var(--info);
 }
 
-.pod .label::before {
+.label::before {
   border-bottom-color: var(--info);
 }
 
-.pod .label > .text {
+.label > .text {
   background-color: var(--light);
   border-color: var(--info);
   color: var(--info);

src/components/_label.scss

@@ -2,7 +2,7 @@
 @use '../utilities/mixins' as *;
 
  /* element structure */
-.pod .label {
+.label {
   display: block;
   border: 1px solid;
   border-radius: 50%;
@@ -11,7 +11,7 @@
   --x-coords: calc(var(--size) / 1.8);
 }
 
-.pod .label::before {
+.label::before {
   content: '';
   display: block;
   border-bottom: 1px solid;
@@ -29,14 +29,20 @@
 }
 
 /* Set size variable for each orbiter */
-@each $pos, $angle in $position {
-  .pod .label#{$pos} {
+@each $pos, $angle in $offsets {
+  .label#{$pos} {
       --label-angle: calc(#{$angle} * 1deg);
+      @if $pos == '.offset-180' {
+        --label-box: -5px;
+      } @else {
+        --label-box: 5px;
+      }
+
     }    
 
 }
 
-.pod .label > .text {
+.label > .text {
   transform-origin: 0 0;
   display: grid;
   border: 1px solid;
@@ -53,12 +59,7 @@
   transform: rotate(var(--label-angle)) translate(var(--x-coords), 0);
 }
 
-.pod .label > .text {
+.label > .text {
   transform: translate(calc(var(--connector-width) - 5px), var(--label-box))
     rotate(calc(var(--label-angle) * -1));
 }
-
-
-  .pod .label.pos-180 > .text {
-    --label-box: -5px;
-  }

src/components/_progress-style.scss

@@ -1,5 +1,5 @@
 /* progress */
-.pod .progress {
+.progress {
   background-image: radial-gradient(circle, var(--light) 64%, transparent 65%),
     conic-gradient(
       var(--primary) calc((var(--percentage) - 1) * 1deg),

src/components/_progress.scss

@@ -1,6 +1,6 @@
 
 /* progress */
-.pod .progress {
+.progress {
   --percentage: calc(var(--progress) * 3.6);
   display: grid;
   border-radius: 50%;
@@ -12,7 +12,7 @@
 }
   // https://codepen.io/chandrashekhar/pen/RvMVey?editors=1100
 
-.pod .progress + .orbiter {
+.progress + .orbiter {
   --orbiter-number: 2; 
   --angle: calc(-90 + var(--progress) * 3.6);
 } 

src/components/_sector.scss

@@ -1,5 +1,5 @@
 
-.pod .sector {
+.sector {
   --half: calc(var(--diameter) / 2);
   --quarter: calc(var(--half) / 2); 
   --semi: calc(var(--angle) / 2 * 1deg); // ademas del offset el angulo debe dividirse por 2, distinto de orbiter

src/utilities/_sass-variables.scss

@@ -28,7 +28,4 @@ $offsets: '.offset-0' var(--a0), '.offset-45' var(--a45), '.offset-90' var(--a90
 $limits: '.limit-0' var(--a0),'.limit-45' var(--a45), '.limit-90' var(--a90), '.limit-135' var(--a135), '.limit-180' var(--a180),
 '.limit-225' var(--a225), '.limit-270' var(--a270), '.limit-315' var(--a315), '.limit-360' var(--a360);
 
-$position: '.pos-0' var(--a0),'.pos-45' var(--a45), '.pos-90' var(--a90), '.pos-135' var(--a135), '.pos-180' var(--a180),
-'.pos-225' var(--a225), '.pos-270' var(--a270), '.pos-315' var(--a315), '.pos-360' var(--a360);
-
 $orbit-sizes: null, '.size-1' var(--orbit-size-1),'.size-2' var(--orbit-size-2),'.size-3' var(--orbit-size-3),'.size-4' var(--orbit-size-4),'.size-5' var(--orbit-size-5),'.size-6' var(--orbit-size-6);