add name spacing WIP

examples/arcgrid.html

@@ -40,8 +40,8 @@
       .sector {
 
 
-        --width:50px;
-        background-color: darkslategray;
+        --width:20px;
+        background-color: darkslategray !important;
       }
     </style>
   </head>

src/components/_label-style.scss

@@ -1,13 +1,13 @@
 /* element theme */
-.label {
+.pod .label {
   border-color: var(--info);
 }
 
-.label::before {
+.pod .label::before {
   border-bottom-color: var(--info);
 }
 
-.label > .text {
+.pod .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 */
-.label {
+.pod .label {
   display: block;
   border: 1px solid;
   border-radius: 50%;
@@ -11,7 +11,7 @@
   --x-coords: calc(var(--size) / 1.8);
 }
 
-.label::before {
+.pod .label::before {
   content: '';
   display: block;
   border-bottom: 1px solid;
@@ -30,13 +30,13 @@
 
 /* Set size variable for each orbiter */
 @each $pos, $angle in $position {
-  .label#{$pos} {
+  .pod .label#{$pos} {
       --label-angle: calc(#{$angle} * 1deg);
     }    
 
 }
 
-.label > .text {
+.pod .label > .text {
   transform-origin: 0 0;
   display: grid;
   border: 1px solid;
@@ -53,12 +53,12 @@
   transform: rotate(var(--label-angle)) translate(var(--x-coords), 0);
 }
 
-.label > .text {
+.pod .label > .text {
   transform: translate(calc(var(--connector-width) - 5px), var(--label-box))
     rotate(calc(var(--label-angle) * -1));
 }
 
 
-  .label.pos-180 > .text {
+  .pod .label.pos-180 > .text {
     --label-box: -5px;
   }

src/components/_progress-style.scss

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

src/components/_sector.scss

@@ -1,5 +1,5 @@
 
-.sector {
+.pod .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