update

notes.md

@@ -235,3 +235,29 @@ nombres... elimnar prefijossss
 orbit size cambiar nombre
 
 penssar en algo tipo span sectors, orbiters
+
+// Define the custom SVG progress bar element
+// todos: componente sector tiene que tener posibilidad de bordes. acomoder el angulo inicial que esta en -90
+// OK aramr un componentes de progress. 
+  // satelite... up and low tangential
+  // comoentes... up/center/low?
+// OK orbit -ratios
+// OK armar class vector
+// OK usar nth type para evitar conflictos. OJO ERROR EN ORBIT HAS
+// USAR ESBUILD para el bundle de cwc y sass. OK probar luego
+// trabajar en los satelittes NO
+// curved text component
+// label component
+// pesnar el tema de los sector/ progress con medidas desiguales para ponner el sunburst charts
+// SEPARAR BASE DE STILO
+// 
+// mostrar cada estado de cada elemento posible en los docs, chiquito minimalista
+// armar templates para descargar con $
+//    - graficos: sunburst/pie/donut/gauges/rose
+//    - knobs
+//    - futurist
+//    - menu
+//    - mandalas
+//
+//
+//

src/_orbit-class.scss

@@ -1,45 +1,42 @@
-/* .orbit class 
- This class renders a circumsference around a .orbital-zone center and allows other elements to be 
- distributed along width. By default there are 12 orbits. The number of orbits can be change on --o-max-orbits,
- or in scss source $max-orbits var.
-
- Important: .orbit is a direct child element of .orbital-zone.
-
- Usage: 
- <div class="orbital-zone">
-  <div class="orbit"></div>
-  <div class="orbit"></div>
-  ...
- </div>
-
- Examples:
- - This renders three orbits equally distributed 
-  <div class="orbit"></div>
-  <div class="orbit"></div>
-  <div class="orbit"></div>
-
- - This renders three orbits with custom distribution
-  <div class="orbit-2"></div>
-  <div class="orbit-9"></div>
-  <div class="orbit-12"></div>
-
-Customization:
-Besides css properties that user can change according his needs, there two css variables to convert .orbit into 
-an ellipse (--o-ellipse-x, and --o-ellipse-y). This will affect orbit and its childs, with an excepcion of <o-sector>
-web component that will be hide when orbit is an ellipse.
-
-There are some utility classes that are set on orbit element and affect its child radial layout (.begin-at-*, .range-*). 
-Please see Radial Layout section
-
-
+/* 
+  ORBIT CLASS
+    This class renders a circumsference around a .orbital-zone center and allows other elements to be 
+    distributed along width. By default there are 12 orbits. The number of orbits can be change on --o-max-orbits,
+    or in scss source $max-orbits var.
+
+    Important: .orbit is a direct child element of .orbital-zone.
+
+    Usage: 
+    <div class="orbital-zone">
+      <div class="orbit"></div>
+      <div class="orbit"></div>
+      ...
+    </div>
+
+    Examples:
+    - This renders three orbits equally distributed 
+      <div class="orbit"></div>
+      <div class="orbit"></div>
+      <div class="orbit"></div>
+
+    - This renders three orbits with custom distribution
+      <div class="orbit-2"></div>
+      <div class="orbit-9"></div>
+      <div class="orbit-12"></div>
+
+    Customization:
+    Besides css properties that user can change according his needs, there two css variables to convert .orbit into 
+    an ellipse (--o-ellipse-x, and --o-ellipse-y). This will affect orbit and its childs, with an excepcion of <o-sector>
+    web component that will be hide when orbit is an ellipse.
+
+    There are some utility classes that are set on orbit element and affect its child radial layout (.begin-at-*, .range-*). 
+    Please see Radial Layout section.
 */
 .orbit, [class*='orbit-'] {
-  /* Variables */
   --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--o-max-orbits));
   --o-radius: calc(var(--o-diameter) / 2);
   width: calc(var(--o-diameter) / var(--o-ellipse-x));
   height: calc(var(--o-diameter) / var(--o-ellipse-y));
-  /* Core .orbit settings */
   position: absolute;
   display: flex;
   justify-content: center;

src/_orbit-class_theme.scss

@@ -1,4 +1,6 @@
-/* Orbit class theme*/
+/* 
+  .orbit theme 
+*/
 .orbit, [class*='orbit-'] {
-  border: 1px solid #007bff; /* Orbit color and thickness */
+  border: 1px solid #007bff;
 }

src/_orbital-zone.scss

@@ -1,83 +1,39 @@
-/* .orbital-zone class 
-Orbital zone is a  funcitonal class that groups .orbit classes.
-Is a container with a lenght that is defined just once by --o-lenght when 
-Orbit app is initializated. When Orbital zone is nested in a .satellite its lenght
-will depend on .satellite's .orbit diameter.
-
-Important: orbital-zone can be only nested into a satellite
-
-Usage:
-<div class="orbital-zone">
-  <div class="orbit"></div>
-  <div class="orbit">
-    <div class="satellite">
-      <div class="orbital-zone"> <-- nested !-->
-        <div class="orbit"></div>
+/* 
+  .ORBITAL-ZONE
+    Orbital zone is a functional class that groups .orbit classes.
+    Is a container with a lenght that is defined just once by --o-lenght when 
+    Orbit app is initializated. When Orbital zone is nested in a .satellite its lenght
+    will depend on .satellite's .orbit diameter.
+
+    Important: orbital-zone can be only nested into a satellite
+
+    Usage:
+    <div class="orbital-zone">
+      <div class="orbit"></div>
+      <div class="orbit">
+        <div class="satellite">
+          <div class="orbital-zone"> <-- nested !-->
+            <div class="orbit"></div>
+          </div>
+        </div
       </div>
-    </div
-  </div>
-</div>
-
-
+    </div>
 */
 .orbital-zone {
-  /* Variables */
   --o-lenght: 500px;
   width: var(--o-lenght);
-  /* Core settings */
   aspect-ratio: 1;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none; /* To avoid event conflict with other elements */
-  /* Reset theme to default */
-  border: none;
+  border: none; /* Reset theme to default */
 }
 
-
 .satellite > .orbital-zone {
    /* When nested orbital-zone takes its lenght from the diameter of satellite's orbit */
   --o-lenght: var(--o-diameter);
   width: var(--o-lenght);
   height: auto;
 }
-
-
-/* Arrange .orbital-zone child elements*/
-.orbital-zone.top-left {
-  align-items: flex-start !important;
-  justify-content: flex-start !important;
-}
-.orbital-zone.top-center {
-  align-items: flex-start !important;
-  justify-content: center !important;
-}
-.orbital-zone.top-right {
-  align-items: flex-start !important;
-  justify-content: flex-end !important;
-}
-.orbital-zone.bottom-left {
-  align-items: flex-end !important;
-  justify-content: flex-start !important;
-}
-.orbital-zone.bottom-center {
-  align-items: flex-end !important;
-  justify-content: center !important;
-}
-.orbital-zone.bottom-right {
-  align-items: flex-end !important;
-  justify-content: flex-end !important;
-}
-.orbital-zone.center-left {
-  align-items: center !important;
-  justify-content: flex-start !important;
-}
-.orbital-zone.center {
-  align-items: center !important;
-  justify-content: center !important;
-}
-.orbital-zone.center-right {
-  align-items: center !important;
-  justify-content: flex-end !important;
-}

src/_orbital-zone_theme.scss

@@ -1,5 +1,8 @@
-/* Orbital zone class theme
-.orbital-zone {
-  // Your theme setting here
-}
+/* 
+  .orbital-zone theme
+
+  .orbital-zone {
+    Your theme setting here
+  }
+  
 */

src/_progress.scss

@@ -1,27 +1,23 @@
-/* o-progress class 
- <o-progress> is an web-component for rendering a radial progress bar. 
- It has some special attributes and css variables that user can modify:
-  
-    --o-linecap: to set ending cap of progress bar. Class .rounded can be added. Default 'butt'
-    --o-progress ||  attribute 'value'. To set progress value. Default 0
-    attribute 'progress-color'. To set color of porgress bar. Default 'orange'
-    attribute 'max-angle'. Uset defined max angle. Default 360;
-
- css properties affect <o-progress> web-component.
-
+/* 
+  O-PROGRESS
+    <o-progress> is a web-component for rendering a radial progress bar. 
+    It has some special attributes and css variables that user can modify:
+        --o-linecap: to set ending cap of progress bar. Class .rounded can be added. Default 'butt'
+        --o-progress ||  attribute 'value'. To set progress value. Default 0
+        attribute 'progress-color'. To set color of porgress bar. Default 'orange'. MAKE FRIENDLY
+        attribute 'max-angle'. Uset defined max angle. Default 360
 */
 o-progress {
-  /* Variables */
   --o-width-factor: 1;
   width: var(--o-diameter);
-  /* Core settings */
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   pointer-events: none; /* To avoid events conflicts with other elements */
 }
+
 o-progress.rounded {
   --o-linecap: round;
 }

src/_progress_theme.scss

@@ -1,5 +1,7 @@
-/* o-progress class theme
-o-progress {
-  // Your theme setting here
-}
+/* 
+  <o-progress> theme
+  
+  o-progress {
+    Your theme setting here
+  }
 */

src/_radial-layout.scss

@@ -1,26 +1,26 @@
 
 @use './variables' as *;
 
-/* Orbit radial layout 
-This is the core of Orbit library. It offers a clean and simple way to design radial apps using just css.
+/* 
+    ORBIT RADIAL LAYOUT
+        This is the core of Orbit library. It offers a clean and simple way to design radial apps using just css.
 
-.orbit and .orbit-* have --orbit-nth to individualize it place according max-orbits (ex. orbit-4 has --orbit-nth: 4). The same happens with other elements such as satellites, vectors, and sectors that use --o-position to be individualized.
+        .orbit and .orbit-* have --orbit-nth to individualize it place according max-orbits (ex. orbit-4 has --orbit-nth: 4). The same happens with other elements such as satellites, vectors, and sectors that use --o-position to be individualized.
 
-.orbit and .orbit-* hold an unique --o-angle calculated by counting their childs. This allows to perform
-some calcs to distributed such elements along an orbit.
+        .orbit and .orbit-* hold an unique --o-angle calculated by counting their childs. This allows to perform
+        some calcs to distributed such elements along an orbit.
 
-The mechanism is very simple: 
---orbit-nth gives a radius that informs where the radius of each orbit accordint both the orbital-zone lenght and max number of orbits. For instante, With a orbital-zone lenght of 500px and a maximun of 12 orbits, orbit-4 will have 166.66 pixels of radius. 
+        The mechanism is very simple: 
+        --orbit-nth gives a radius that informs where the radius of each orbit accordint both the orbital-zone lenght and max number of orbits. For instante, With a orbital-zone lenght of 500px and a maximun of 12 orbits, orbit-4 will have 166.66 pixels of radius. 
 
-According number of satellites in an orbit, a --o-angle is calculated (if orbit has 3 satellites, --o-angle is 120deg). Finally, --o-angle is multiplied by --o-positions (in the example satellite one will have 120deg, satellite two 240deg, and satellite three 360deg and each satellite will be placed along its orbit at 166.66px)
+        According number of satellites in an orbit, a --o-angle is calculated (if orbit has 3 satellites, --o-angle is 120deg). Finally, --o-angle is multiplied by --o-positions (in the example satellite one will have 120deg, satellite two 240deg, and satellite three 360deg and each satellite will be placed along its orbit at 166.66px)
 
-There are some modifiers to adjust orbit child distribution:
+        There are some modifiers to adjust orbit child distribution:
 
---o-range. This variable allows user to set an arbitrary arc lenght. Values can go from 0 to 360deg. For
-convinience exist range-* utility (.range-0 to .range-360)
-
---o-begin-at. This variable allows user to set an arbitrary starting point. Values can go from 0 to 360deg. For convinience exist begin-at-* utility (.begin-at-0 to .begin-at-360)
+        --o-range. This variable allows user to set an arbitrary arc lenght. Values can go from 0 to 360deg. For
+        convinience exist range-* utility (.range-0 to .range-360)
 
+        --o-begin-at. This variable allows user to set an arbitrary starting point. Values can go from 0 to 360deg. For convinience exist begin-at-* utility (.begin-at-0 to .begin-at-360)
 */
 
 /* Orbits layout */

src/_satellite.scss

@@ -1,11 +1,11 @@
-/* .satellite class 
-Elements with .satellite are placed along an orbit path serving as content place and or to nest an
-orbital-zone. By default a satellite provides arbitrary circle shape, but its shape varies dependeng on user needs.
-Some sizes and shapes utilities are provided (circle, box, roundex-box, bobles). Nevertheless, users can put any content and
-shapes they want.
+/* 
+  .SATELLITE 
+    Elements with .satellite are placed along an orbit path serving as content place and or to nest an
+    orbital-zone. By default a satellite provides arbitrary circle shape, but its shape varies dependeng on user needs.
+    Some sizes and shapes utilities are provided (circle, box, roundex-box, bobles). Nevertheless, users can put any content and
+    shapes they want.
 */
 .satellite {
-  /* Variables */
   --o-angle-composite: var(--o-angle) * var(--o-position);
   transform: translate(
     calc(
@@ -17,16 +17,10 @@ shapes they want.
         sin(var(--o-begin-at) + var(--o-angle-composite))
     )
   );
-  /* Core settings */
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  /* Themes */
-  width: 5px; /* Adjust satellite size */
-  height: 5px; /* Adjust satellite size */
-  background-color: yellow; /* Adjust satellite color */
-  border-radius: 50%; /* Make it a circle */
-  border: 1px solid black;
+  border-radius: 50%; /* Circle by default */
 }
 

src/_satellite_theme.scss

@@ -0,0 +1,10 @@
+/* 
+  .satellite theme
+*/
+.satellite {
+  width: 5px; 
+  height: 5px; 
+  background-color: yellow;
+  border: 1px solid black;
+}
+