update

examples/analog-watch.html

@@ -44,8 +44,10 @@
       <section id="one">
         <div class="orbital-zone"  >
           <div class="orbit-0">
-              <div class="spoke outer-orbit grow-4x angle-76"></div>
-              <div class="spoke outer-orbit grow-2x"></div>
+              <div class="spoke quarter-outer-orbit grow-4x angle-76">
+               <img src="../assets/arrow.png" alt="">
+              </div>
+              <div class="spoke quarter-outer-orbit grow-2x"></div>
               <div class="satellite reduce-70 at-center"></div> 
             </div>
             <div class="orbit-3">

src/scss/_orbit-class.scss

@@ -97,6 +97,8 @@ Please see **Radial Layout section**.
 * bug alineacion gaps ... 180 on mas de un sector/ o-label
 * separar vector de constellation... o vector to spoke / vector.is-poligon to segment
 * ornit-nth cambiar nombre
+* trabajar con spoke as container... tiene que alinearse siempre a la mitad asi, si tiene una imagen dentro queda
+alineada tambien.
 
 
 */

src/scss/_radial-layout.scss

@@ -96,9 +96,9 @@ There are some modifiers to adjust orbit child distribution:
 }
 
 @for $i from 1 through $max-orbiters {
-    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke)),
-    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .segment), 
-    > :nth-child(#{$i} of o-label)) {
+    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)), 
+    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .spoke), > :nth-child(#{$i} of .segment), > :nth-child(#{$i} of o-label)) {
     --o-angle: calc(var(--o-range) / #{$i});
     }
 }
+

src/scss/_spoke.scss

@@ -49,12 +49,12 @@ It has some special classes and css variables to customize it:
   );
   width: calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
   position: absolute;
-  padding: 0;
+  display: flex;
+  align-items: center;
   transform: var(--o-transform);
   height: 1px; /*use vars latter */
   pointer-events: none;
   border: none;
-  background: rgb(0, 0, 0);
 }
 
 .spoke.at-center {

src/scss/_spoke_theme.scss

@@ -1,7 +1,7 @@
 /* 
   .vector theme
 */
-.spoke, .segment {
+.spoke {
   border: none;
   background: rgb(0, 0, 0);
 }

src/scss/_utilities.scss

@@ -78,7 +78,7 @@ $max-grade: 360;
 }
 @for $i from 0 through $max-grade {
   .angle-#{$i} {
-    --o-angle-composite: #{$i}deg !important; 
+    --o-angle-composite: calc(#{$i}deg - 90deg) !important; 
   }
 }
 
@@ -124,6 +124,17 @@ Can be used in parent elements or in each orbiter class
     var(--o-radius) / var(--o-orbit-number, 1) * var(--o-size-ratio, 1)
   ) / 2;
 }
+.quarter-inner-orbit {
+  --o-aligment: calc(
+    var(--o-radius) / var(--o-orbit-number, 1) * var(--o-size-ratio, 1)
+  ) / 3.75;
+}
+.quarter-outer-orbit {
+  --o-aligment: calc(
+    var(--o-radius) / var(--o-orbit-number, 1) * var(--o-size-ratio, 1)
+  ) / -3.75;
+}
+
 .outer-orbit {
   --o-aligment: calc(
     var(--o-radius) / var(--o-orbit-number, 1) * var(--o-size-ratio, 1)