update

README.md

@@ -6,23 +6,16 @@
 
 - OK rows: rings OR orbits
 - OK columns: sectors relates to angles. quadrants... cordinal points... > ARCS
-- angles & distances: definir independientemte (a32; d453)?
-- OK initial angle: importantes para saber desde donde empieza
-- OK arc: importante para estabelcer tamano del arco 90° o 360° x ej.
+- OK offset angle: importantes para saber desde donde empieza
+- OK arc: importante para estabelcer tamano del arco 90° o 360° x ej. DESAMBIGUAR
 - OK Reverse angle...
-- OK orbit alignment> lower upper
+- OK orbit alignment> lower upper DEFAULT MIDDLE
 - OK Stationary- geostationary/gyroscope: comportamiento de lo selementos
-- responsiveness: crear dos versiones? media query & vh vw units? ...
-- OK layer para contenido dentro de los items. Todo lo referido a alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo qued aara el usuario o algo para armar especialemnte
-- OK draw rings and sectors
+- OK draw rings and ARCS
 - ~~Armar defaults~~
-- Abstraer variables de color, backgrpund etc
-- separar grid, de otras cosas
-- WIP armar progress en svg
+- ~~WIP armar progress en svg~~
 - ~~FIX offset~~
-- CHANGE NAMES
 - OK issue core.item angle
-- add manual overrride of items-n
 - OK? Rings. permitir que cada ring tenga su ---radio pueda ser cmabiada por el usuario. Default que sea como hasta ahora
 - ARC BG:
   1. OK (FALTA TESTEO) los rings tienen z-index el mas arriba siempre es el mas cercano al centro. (ver cóm osolucionar... porque es al reves, quizas ya setar en el css un orden de 10 a core y de ahi para abajo, o teneinedo en cta nro de rings...ESto :)
@@ -37,79 +30,46 @@
   Juices
   <https://garden.bradwoods.io/notes/css/3d>
   <https://garden.bradwoods.io/notes/css/blend-modes>
-
 - ~~ISSUE arc & arc-* same bug as items~~
+- angles & distances, ETC: definir independientemte (a32; d453)? TAMBIEN SIZES
+- responsiveness: crear dos versiones? media query & vh vw units? ...
+-  layer para CONTENIDO ACOMODAR dentro de los items. Todo lo referido a alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo qued aara el usuario o algo para armar especialemnte
+- Abstraer variables de color, backgrpund etc
+- separar grid, de otras cosas
+- CHANGE NAMES AVOID CONFLICTS
+- add manual overrride of items-n
+- NEST ARCS 
+- ITEMS AND ARCS HARMONIC
 
 ## ELEMENTS
 
 - items: content containers with different #shapes flavor, #sizes, #aligment. Radial positioned. Nestable
   - shapes: circle, box, rounded box, blob
   - sizes: xxl, xl, l, m, s, xs, xxs
   - alignemnt: upper, lower, middle
-- arcs: radial columns. visual support with basic interactivity and some cool customizations (gap, width, radius). Should be nestable
+- arcs: radial columns. visual support with basic interactivity and some cool customizations (gap, width, radius, POSITION). Should be nestable
 - rings: radial rows. visual support. Nestable
 - labels: item label with optional conector and predefined positions
+- MODALS
+- POPOVERS
+- PROGRESS
+- KNOB
 
 ## COMPONENTS
-
 - progress casi OK
 - knob casi OK
 - ~~sectors svg~~ css arcs OK
 - modals
 - labels OK
 - tooltips
+- ARC TEXT
 
 - cards
 - buttons
 - forms
 
 ## UTILITIES
-
-```js
-function getEllipsePoints(width, height, n, dist) {
-  const a = width / 2;
-  const b = height / 2;
-  const points = [];
-  for (let i = 1; i <= n; i++) {
-    const angle = (360 / n) * i;
-    const radians = angle * (Math.PI / 180);
-    const x = a * Math.cos(radians) + dist;
-    const y = b * Math.sin(radians) + dist;
-    console.log('angle', angle, 'radians', radians, 'xy', x,y)
-    points.push({ x, y });
-  }
-  return points;
-}
-
-@property --angle {
-  syntax: "<number>";
-  initial-value: 1;
-  inherits: false;
-}
-
-@keyframes progress {
-  50% {
-    --angle: 360;
-  }
-}
-
-.item, .label__text, .label__conector {
-  animation: 16s progress infinite;
-}
-
-article::before {
-  content: attr(data-parent);
-}
-
-You can also use the attribute selectors in CSS to change styles according to the data:
-
-article[data-columns="3"] {
-  width: 400px;
-}
-article[data-columns="4"] {
-  width: 600px;
-}
-```
+LAS MINIMAS ARC TEXT
 
 ### css first