@zumer/orbit 1.0.0 → 1.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Juan Martín Muda - ZumerLab
+Copyright (c) 2023 - 2025 Juan Martín Muda - ZumerLab
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -26,11 +26,23 @@ place your ⭐ in Orbit! <a href="https://github.com/zumerlab/orbit/stargazers">
 
 **Orbit** is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.
 
-
 ## Why Orbit?
 
 Creating radial UIs generally involves using JavaScript or other programming languages to calculate angles, radii, distances, and more. **Orbit** saves you time and effort by enabling you to build these UIs with just CSS.
 
+## Features
+
+With **Orbit**, you can:
+
+- Build any kind of radial UI using predefined CSS classes that do the heavy lifting.  
+- Easily compose simple or complex radial designs by combining **Orbit** elements.  
+- Use **Orbit** alongside other traditional CSS frameworks.  
+- Get started quickly with our detailed documentation, examples, and guides.  
+
+## Documentation
+
+Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
+
 ## What is radial UI?
 
 Radial UI refers to a design paradigm where elements are organized in a circular or radial pattern, diverging from traditional grid-based or linear layouts. This design approach is particularly effective for applications that involve:
@@ -42,32 +54,19 @@ Radial UI refers to a design paradigm where elements are organized in a circular
 - **Creative art and structures:** mandalas, sci-fi-inspired art, chemical structures  
 - **Interactive interfaces:** watch faces, dynamic controls for games or tools  
 
-**Characteristics of radial UI:**
+**Characteristics:**
 
 - **Circular layout:** elements are arranged in a circular or curved pattern.  
 - **Center-focused:** the center often serves as a focal point.  
 - **Symmetry:** radial UIs frequently exhibit symmetry, fostering a sense of balance.  
 - **Angular relationships:** elements are positioned at specific angles relative to one another.  
 
-**Benefits of radial UI:**
+**Benefits:**
 
 - **Aesthetics:** radial designs are visually striking and engaging.  
 - **Intuitive navigation:** circular layouts simplify navigation and reduce cognitive load.  
 - **Space efficiency:** radial UIs make efficient use of available screen, ideal for both compact and expansive interfaces.  
 
-## Features
-
-With **Orbit**, you can:
-
-- Build any kind of radial UI using predefined CSS classes that do the heavy lifting.  
-- Easily compose simple or complex radial designs by combining **Orbit** elements.  
-- Use **Orbit** alongside other traditional CSS frameworks.  
-- Get started quickly with our detailed documentation, examples, and guides.  
-
-## Documentation
-
-Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
-
 ## Installation
 
 **Orbit** comes with just two files: `orbit.css` (or `orbit.min.css`) and `orbit.js` (or `orbit.min.js`).
@@ -128,10 +127,11 @@ Or via CDN:
 ```html
 <div class="bigbang">
   <div class="gravity-spot">
-    <div class="orbit">
-      <div class="satellite">1</div>
-      <div class="satellite">2</div>
-      <div class="satellite">3</div>
+    <div class="orbit-2 range-180 from-180">
+      <o-arc shape="circle" class="shrink-50"></o-arc>
+    </div>
+    <div class="orbit-3 range-270 ">
+      <o-arc shape="circle" class="shrink-50"></o-arc>
     </div>
   </div>
 </div>
@@ -155,6 +155,11 @@ 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.
 
+## Special thanks to our contributors
+
+<a href="https://github.com/zumerlab/orbit-docs/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=zumerlab/orbit-docs" />
+</a>
 
 ## License 
 

package/dist/orbit.css

@@ -1,13 +1,13 @@
 
 /*
 * orbit
-* v.1.0.0
+* v.1.2.0
 * Author Juan Martin Muda - Zumerlab
 * License MIT
 **/
 @charset "UTF-8";
 
-/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-71826-jluxOtrlBV0O/orbit/src/orbit.css */
+/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-26480-lsyT2XJtmvqw/orbit/src/orbit.css */
 .gravity-spot * {
   box-sizing: border-box;
   margin: 0;
@@ -1216,35 +1216,10 @@ o-arc {
   border-radius: 50%;
   position: absolute;
   pointer-events: none;
-  fill: currentColor;
   width: 100%;
   r: var(--o-radius);
-  stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
   transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
 }
-o-arc[flip]:not([value]),
-o-arc.flip:not([value]) {
-  --o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
-}
-o-text {
-  --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
-  container-name: otext;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  position: absolute;
-  pointer-events: none;
-  width: 100%;
-  fill: currentColor;
-  r: var(--o-radius);
-  stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
-  transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
-}
-o-text[flip],
-o-text.flip {
-  --o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
-}
 o-progress {
   container-name: oprogress;
   --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
@@ -6130,69 +6105,153 @@ o-arc.gap-29 {
 o-arc.gap-30 {
   --o-gap: 30;
 }
+.orbit.shrink-0,
+[class*=orbit-].shrink-0 {
+  --o-orbit-ratio: 0;
+}
+.orbit.shrink-5,
+[class*=orbit-].shrink-5 {
+  --o-orbit-ratio: 0.05;
+}
 .orbit.shrink-10,
 [class*=orbit-].shrink-10 {
   --o-orbit-ratio: 0.1;
 }
+.orbit.shrink-15,
+[class*=orbit-].shrink-15 {
+  --o-orbit-ratio: 0.15;
+}
 .orbit.shrink-20,
 [class*=orbit-].shrink-20 {
   --o-orbit-ratio: 0.2;
 }
+.orbit.shrink-25,
+[class*=orbit-].shrink-25 {
+  --o-orbit-ratio: 0.25;
+}
 .orbit.shrink-30,
 [class*=orbit-].shrink-30 {
   --o-orbit-ratio: 0.3;
 }
+.orbit.shrink-35,
+[class*=orbit-].shrink-35 {
+  --o-orbit-ratio: 0.35;
+}
 .orbit.shrink-40,
 [class*=orbit-].shrink-40 {
   --o-orbit-ratio: 0.4;
 }
+.orbit.shrink-45,
+[class*=orbit-].shrink-45 {
+  --o-orbit-ratio: 0.45;
+}
 .orbit.shrink-50,
 [class*=orbit-].shrink-50 {
   --o-orbit-ratio: 0.5;
 }
+.orbit.shrink-55,
+[class*=orbit-].shrink-55 {
+  --o-orbit-ratio: 0.55;
+}
 .orbit.shrink-60,
 [class*=orbit-].shrink-60 {
   --o-orbit-ratio: 0.6;
 }
+.orbit.shrink-65,
+[class*=orbit-].shrink-65 {
+  --o-orbit-ratio: 0.65;
+}
 .orbit.shrink-70,
 [class*=orbit-].shrink-70 {
   --o-orbit-ratio: 0.7;
 }
+.orbit.shrink-75,
+[class*=orbit-].shrink-75 {
+  --o-orbit-ratio: 0.75;
+}
 .orbit.shrink-80,
 [class*=orbit-].shrink-80 {
   --o-orbit-ratio: 0.8;
 }
+.orbit.shrink-85,
+[class*=orbit-].shrink-85 {
+  --o-orbit-ratio: 0.85;
+}
 .orbit.shrink-90,
 [class*=orbit-].shrink-90 {
   --o-orbit-ratio: 0.9;
 }
+.orbit.shrink-95,
+[class*=orbit-].shrink-95 {
+  --o-orbit-ratio: 0.95;
+}
+.orbit.shrink-100,
+[class*=orbit-].shrink-100 {
+  --o-orbit-ratio: 1;
+}
+.shrink-0 {
+  --o-size-ratio: 1 !important;
+}
+.shrink-5 {
+  --o-size-ratio: 0.95 !important;
+}
 .shrink-10 {
   --o-size-ratio: 0.9 !important;
 }
+.shrink-15 {
+  --o-size-ratio: 0.85 !important;
+}
 .shrink-20 {
   --o-size-ratio: 0.8 !important;
 }
+.shrink-25 {
+  --o-size-ratio: 0.75 !important;
+}
 .shrink-30 {
   --o-size-ratio: 0.7 !important;
 }
+.shrink-35 {
+  --o-size-ratio: 0.65 !important;
+}
 .shrink-40 {
   --o-size-ratio: 0.6 !important;
 }
+.shrink-45 {
+  --o-size-ratio: 0.55 !important;
+}
 .shrink-50 {
   --o-size-ratio: 0.5 !important;
 }
+.shrink-55 {
+  --o-size-ratio: 0.45 !important;
+}
 .shrink-60 {
   --o-size-ratio: 0.4 !important;
 }
+.shrink-65 {
+  --o-size-ratio: 0.35 !important;
+}
 .shrink-70 {
   --o-size-ratio: 0.3 !important;
 }
+.shrink-75 {
+  --o-size-ratio: 0.25 !important;
+}
 .shrink-80 {
   --o-size-ratio: 0.2 !important;
 }
+.shrink-85 {
+  --o-size-ratio: 0.15 !important;
+}
 .shrink-90 {
   --o-size-ratio: 0.1 !important;
 }
+.shrink-95 {
+  --o-size-ratio: 0.05 !important;
+}
+.shrink-100 {
+  --o-size-ratio: 0 !important;
+}
 .grow-0\.1x {
   --o-size-ratio: 1.1 !important;
 }
@@ -6855,46 +6914,82 @@ o-arc.gap-30 {
   background: currentcolor;
 }
 o-progress {
-  --o-color: currentcolor;
-  --o-hover-color: unset;
-  --o-background-color: transparent;
+  --o-fill: var(--o-gray-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
+  --o-back-fill: transparent;
+  --o-back-stroke: none;
+  --o-back-stroke-width: 1;
+}
+o-progress:hover {
+  --o-fill: var(--o-gray-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
+  --o-back-fill: transparent;
+  --o-back-stroke: none;
+  --o-back-stroke-width: 1;
 }
 o-arc {
-  --o-color: unset;
-  --o-hover-color: unset;
+  --o-fill: var(--o-gray-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
+}
+o-arc:hover {
+  --o-fill: var(--o-gray-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
 }
 .dev-orbit.gravity-spot {
   background: none;
-  border: 0.2px dashed var(--o-red-light);
+  border: 1px dashed var(--o-red-light);
 }
 .dev-orbit .gravity-spot {
   background: none;
-  border: 0.2px dashed var(--o-red-light);
+  border: 1px dashed var(--o-red-light);
 }
 .dev-orbit .orbit,
 .dev-orbit [class*=orbit-] {
-  border: 0.2px solid var(--o-red-light);
+  border: 1px dashed var(--o-red-light);
 }
 .dev-orbit .satellite {
   background-color: transparent;
-  border: 1px solid currentColor;
+  border: 1px dashed var(--o-red-light);
 }
 .dev-orbit .vector {
   border: none;
-  background: currentColor;
+  background: var(--o-red-light);
 }
 .dev-orbit .side {
   border: none;
-  background: currentColor;
+  background: var(--o-red-light);
 }
 .dev-orbit o-progress {
-  --o-color: currentColor;
-  --o-hover-color: unset;
-  --o-background-color: transparent;
+  --o-fill: var(--o-red-lighter);
+  --o-stroke: var(--o-red-lighter);
+  --o-stroke-width: 1;
+  --o-back-fill: var(--o-red-lighter);
+  --o-back-stroke: var(--o-red-lighter);
+  --o-back-stroke-width: 1;
+  fill-opacity: 0.5;
+}
+.dev-orbit o-progress:hover {
+  --o-fill: var(--o-red-light);
+  --o-stroke: var(--o-red-light);
+  --o-stroke-width: 2;
+  --o-back-fill: var(--o-red-light);
+  --o-back-stroke: var(--o-red-light);
+  --o-back-stroke-width: 2;
 }
 .dev-orbit o-arc {
-  --o-color: currentColor;
-  --o-hover-color: unset;
+  --o-fill: var(--o-red-lighter);
+  --o-stroke: var(--o-red-lighter);
+  --o-stroke-width: 1;
+  fill-opacity: 0.5;
+}
+.dev-orbit o-arc:hover {
+  --o-fill: var(--o-red-light);
+  --o-stroke: var(--o-red-light);
+  --o-stroke-width: 2;
 }
 .theme-cyan .gravity-spot {
   background: none;
@@ -6917,11 +7012,28 @@ o-arc {
   background: var(--o-cyan);
 }
 .theme-cyan o-progress {
-  --o-color: var(--o-cyan);
-  --o-hover-color: var(--o-cyan);
-  --o-background-color: transparent;
+  --o-fill: var(--o-cyan-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
+  --o-back-fill: transparent;
+  --o-back-stroke: none;
+  --o-back-stroke-width: 1;
+}
+.theme-cyan o-progress:hover {
+  --o-fill: var(--o-cyan-lighter);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 2;
+  --o-back-fill: transparent;
+  --o-back-stroke: none;
+  --o-back-stroke-width: 2;
 }
 .theme-cyan o-arc {
-  --o-color: var(--o-cyan);
-  --o-hover-color: unset;
+  --o-fill: var(--o-cyan-light);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 1;
+}
+.theme-cyan o-arc:hover {
+  --o-fill: var(--o-cyan-lighter);
+  --o-stroke: var(--o-fill);
+  --o-stroke-width: 2;
 }