closes #18

zumerlab · Oct 4, 2024 · 631af17 · 631af17
1 parent 2a7aa23
commit 631af17
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -156,7 +156,7 @@ In case you are using CDN:
 
 ### Basic Orbit layout
 
-Just add `.bigbang` CSS class in a HTML element like `<div>`. Then use `.gravity-spot` class, and within it, add another element with `.orbit` class. Finally, inside `.orbit` element, add radial elements, such us: `.satellite`, `.vector`, `.side`, or `<o-text>`, `<o-slice>`, `<o-progress>` web components . Here’s a minimal working example:
+Just add `.bigbang` CSS class in a HTML element like `<div>`. Then use `.gravity-spot` class, and within it, add another element with `.orbit` class. Finally, inside `.orbit` element, add radial elements, such us: `.satellite`, `.vector`, `.side`, or `<o-text>`, `<o-arc>`, `<o-progress>` web components . Here’s a minimal working example:
 
 ```html
 <!DOCTYPE html>
@@ -196,7 +196,7 @@ The parent container for organizing Orbit elements within a radial layout.
 
 ### Orbit
 
-Defines a circular path around a .gravity-spot, with variations from .orbit-0 to .orbit-24. Within .orbit element, various Orbit elements such as `satellites`, `o-slices`, `o-progress`, `vectors`, `sides`, and `o-texts` can be positioned.
+Defines a circular path around a .gravity-spot, with variations from .orbit-0 to .orbit-24. Within .orbit element, various Orbit elements such as `satellites`, `o-arcs`, `o-progress`, `vectors`, `sides`, and `o-texts` can be positioned.
 
 ### Satellite
  
@@ -214,7 +214,7 @@ Generates a regular polygon figure when used with other sides.
 
 A web-component for rendering curved text.
 
-### O-Slice
+### o-arc
 
 A web-component for rendering radial slices, arcs, or pies.
 
@@ -276,9 +276,6 @@ There are many ways to **contribute** to **Orbit** development:
 - [**GitHub discussions**](https://github.com/zumerlab/orbit/discussions): Engage with other contributors, ask questions, and share your experiences.
 - [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates.
 
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=zumerlab/orbit&type=Date)](https://star-history.com/#zumerlab/orbit&Date)
 
 
 ## License 

diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/src/js/orbit-slice.js b/src/js/orbit-slice.js
@@ -14,13 +14,13 @@
           pointer-events: stroke;
         }
        .slice {
-          stroke: var(--o-slice-color, var(--o-cyan-light));
+          stroke: var(--o-arc-color, var(--o-cyan-light));
           stroke-width:  calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
           transition: stroke 0.3s;
         }
         
         :host(:hover) .slice {
-          stroke: var(--o-hover-slice-color, var(--o-slice-color));
+          stroke: var(--o-hover-slice-color, var(--o-arc-color));
           
         }
    </style>

diff --git a/src/orbit.js b/src/orbit.js
@@ -4,7 +4,7 @@ import { OrbitText } from './js/orbit-text.js'
 import { Orbit } from './js/orbit-resize.js'
 
 customElements.define('o-progress', OrbitProgress)
-customElements.define('o-slice', OrbitSlice)
+customElements.define('o-arc', OrbitSlice)
 customElements.define('o-text', OrbitText)
 
 window.Orbit = Orbit
diff --git a/src/orbit.scss b/src/orbit.scss
@@ -9,7 +9,7 @@
 @import './scss/_satellite.scss';
 @import './scss/_vector.scss';
 @import './scss/_side.scss';
-@import './scss/_slice.scss';
+@import './scss/_arc.scss';
 @import './scss/_text.scss';
 @import './scss/_progress.scss';
 @import './scss/_capsule.scss';

diff --git a/src/scss/_slice.scss → src/scss/_arc.scss b/src/scss/_slice.scss → src/scss/_arc.scss
@@ -1,6 +1,6 @@
 @use './variables' as *;
 
-o-slice {
+o-arc {
   --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
   //--o-angle-composite: (var(--o-angle) * var(--o-orbit-child-number) var(--o-offset, + 90deg)) * var(--o-direction, 1);
   --o-gap: 1;

diff --git a/src/scss/_radial-layout.scss b/src/scss/_radial-layout.scss
@@ -18,14 +18,14 @@
 }
 
 @for $i from 1 through $max-orbiters {
-  :nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-slice), :nth-child(#{$i} of .vector) ,:nth-child(#{$i} of o-text) {
+  :nth-child(#{$i} of .satellite),:nth-child(#{$i} of o-arc), :nth-child(#{$i} of .vector) ,:nth-child(#{$i} of o-text) {
     --o-orbit-child-number: #{$i - 1}; // Uses - 1 to start from 0 deg.
     }
 }
 
 @for $i from 1 through $max-orbiters {
-    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-slice), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)), 
-    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-slice), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)) {
+    .orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-arc), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)), 
+    [class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-arc), > :nth-child(#{$i} of .vector), > :nth-child(#{$i} of .side), > :nth-child(#{$i} of o-text)) {
     --o-angle: calc(var(--o-range) / (#{$i} - var(--o-fit-range, 0)));
     }
 }

diff --git a/src/scss/_support.scss b/src/scss/_support.scss
@@ -55,13 +55,13 @@
 
 @container oslice not style(--o-ellipse-x: 1) {
   /* Shown if ratio equals 1*/
-  o-slice, o-progress, o-text {
+  o-arc, o-progress, o-text {
     display: none;
   }
 }
 @container oslice not style(--o-ellipse-y: 1) {
   /* Shown if ratio equals 1*/
-  o-slice, o-progress, o-text {
+  o-arc, o-progress, o-text {
     display: none;
   }
 }

diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
@@ -30,8 +30,8 @@ o-progress {
   --o-bg-color: transparent;
 }
 
-o-slice {
-  --o-slice-color: currentcolor;
+o-arc {
+  --o-arc-color: currentcolor;
   --o-hover-sector-color: currentcolor;
 }
 
@@ -78,8 +78,8 @@ o-text {
     --o-bg-color: transparent;
   }
 
-  o-slice {
-    --o-slice-color: currentColor;
+  o-arc {
+    --o-arc-color: currentColor;
     --o-hover-sector-color: currentColor;
   }
 
@@ -123,8 +123,8 @@ o-progress {
   --o-bg-color: transparent;
 }
 
-o-slice {
-  --o-slice-color: var(--o-cyan);
+o-arc {
+  --o-arc-color: var(--o-cyan);
   --o-hover-sector-color: var(--o-cyan);
 }
 

diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
@@ -65,7 +65,7 @@ $max-grade: 360;
   }
 }
 @for $i from 0 through $max-grade {
-  o-slice.angle-#{$i}, o-progress.angle-#{$i}, o-text.angle-#{$i} {
+  o-arc.angle-#{$i}, o-progress.angle-#{$i}, o-text.angle-#{$i} {
     --o-angle-composite: calc(#{$i}deg) !important; 
   }
 }
@@ -80,7 +80,7 @@ $max-grade: 360;
 
 $max-gaps: calc($max-orbiters / 2);
 @for $i from 0 through  $max-gaps {
-  o-slice.gap-#{$i}, o-text.gap-#{$i} {
+  o-arc.gap-#{$i}, o-text.gap-#{$i} {
     --o-gap: #{$i};
   }
 }