@rettangoli/ui 0.1.2-rc31 → 0.1.2-rc33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc31",
+  "version": "0.1.2-rc33",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/common.js

@@ -159,14 +159,23 @@ const spacing = {
 
 function convertObjectToCssString(styleObject, selector = ':host') {
   let result = "";
-  for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
+  // Process in correct order for max-width media queries: default first, then largest to smallest
+  const orderedSizes = ["default", "xl", "lg", "md", "sm"];
+  
+  for (const size of orderedSizes) {
+    const mediaQuery = mediaQueries[size];
+    if (!styleObject[size] || Object.keys(styleObject[size]).length === 0) {
+      continue;
+    }
+    
     if (size !== "default") {
       result += `${mediaQuery} {\n`;
     }
     let cssString = "";
     for (const [key, value] of Object.entries(styleObject[size])) {
       if (value !== undefined && value !== null) {
-        cssString += `${key}: ${value};\n`;
+        // Add !important to override imported styles
+        cssString += `${key}: ${value} !important;\n`;
       }
     }
     result += `${selector} {

package/src/components/waveform/waveform.handlers.js

@@ -51,11 +51,11 @@ async function renderWaveform(waveformData, canvas) {
   ctx.fillStyle = "#1a1a1a";
   ctx.fillRect(0, 0, width, height);
 
-  if (!waveformData || !waveformData.data) {
+  if (!waveformData || !waveformData.amplitudes) {
     return;
   }
 
-  const data = waveformData.data;
+  const amplitudes = waveformData.amplitudes;
   const centerY = height / 2;
 
   // Create gradient for waveform
@@ -65,11 +65,11 @@ async function renderWaveform(waveformData, canvas) {
   gradient.addColorStop(1, "#404040");
 
   // Draw waveform bars
-  const barWidth = Math.max(1, width / data.length);
+  const barWidth = Math.max(1, width / amplitudes.length);
   const barSpacing = 0.2; // 20% spacing between bars
 
-  for (let i = 0; i < data.length; i++) {
-    const amplitude = data[i];
+  for (let i = 0; i < amplitudes.length; i++) {
+    const amplitude = amplitudes[i];
     const barHeight = amplitude * (height * 0.85);
     const x = i * barWidth;
     const y = centerY - barHeight / 2;

package/src/primitives/colorPicker.js

@@ -81,8 +81,8 @@ class RettangoliColorPickerElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -177,11 +177,11 @@ class RettangoliColorPickerElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/image.js

@@ -85,7 +85,8 @@ class RettangoliImageElement extends HTMLElement {
       "wh",
       "w",
       "h",
-      "hidden",
+      "hide",
+      "show",
       "height",
       "width",
       "z",
@@ -198,11 +199,11 @@ class RettangoliImageElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/input.js

@@ -94,8 +94,8 @@ class RettangoliInputElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -186,11 +186,11 @@ class RettangoliInputElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/slider.js

@@ -115,8 +115,8 @@ class RettangoliSliderElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -212,11 +212,11 @@ class RettangoliSliderElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/view.js

@@ -89,10 +89,17 @@ class RettangoliViewElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
+        "hide",
+        "show",
         "sh",
         "sv",
-        "z"
+        "z",
+        "d",
+        "ah",
+        "av",
+        "flex",
+        "fw",
+        "overflow"
       ]),
     ];
   }
@@ -136,14 +143,13 @@ class RettangoliViewElement extends HTMLElement {
       this._linkElement = null;
     }
   }
+  
+  connectedCallback() {
+    // Force update styles when connected to ensure responsive attributes are processed
+    this.updateStyles();
+  }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    // Handle href and target changes
-    if (name === "href" || name === "target") {
-      this._updateDOM();
-      return;
-    }
-    
+  updateStyles() {
     // Reset styles for fresh calculation
     this._styles = {
       default: {},
@@ -158,6 +164,7 @@ class RettangoliViewElement extends HTMLElement {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
 
+
       const wh = this.getAttribute(addSizePrefix("wh"));
       const width = dimensionWithUnit(
         wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
@@ -192,12 +199,110 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
-        this._styles[size].display = "none !important";
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "flex";
+      }
+
+      // Handle flex direction and alignment
+      const direction = this.getAttribute(addSizePrefix("d"));
+      const alignHorizontal = this.getAttribute(addSizePrefix("ah"));
+      const alignVertical = this.getAttribute(addSizePrefix("av"));
+
+
+      if (direction === "h") {
+        this._styles[size]["flex-direction"] = "row";
+      } else if (direction === "v") {
+        this._styles[size]["flex-direction"] = "column";
+      } else if (size === "default" && !direction) {
+        // Check if any responsive direction attributes exist
+        const hasResponsiveDirection = ["sm", "md", "lg", "xl"].some(
+          breakpoint => this.hasAttribute(`${breakpoint}-d`)
+        );
+        if (hasResponsiveDirection) {
+          // Explicitly set column for default to ensure responsive overrides work
+          this._styles[size]["flex-direction"] = "column";
+        }
+      }
+
+      // Handle alignment based on direction
+      const isHorizontal = direction === "h";
+      const isVerticalOrDefault = direction === "v" || !direction;
+
+      // For horizontal direction: ah controls justify-content, av controls align-items
+      if (isHorizontal) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["align-items"] = "center";
+          this._styles[size]["align-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+          this._styles[size]["align-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+      }
+
+      // For vertical/default direction: ah controls align-items, av controls justify-content
+      if (isVerticalOrDefault && (alignHorizontal !== null || alignVertical !== null)) {
+        if (alignHorizontal === "c") {
+          this._styles[size]["align-items"] = "center";
+        } else if (alignHorizontal === "e") {
+          this._styles[size]["align-items"] = "flex-end";
+        } else if (alignHorizontal === "s") {
+          this._styles[size]["align-items"] = "flex-start";
+        }
+
+        if (alignVertical === "c") {
+          this._styles[size]["justify-content"] = "center";
+        } else if (alignVertical === "e") {
+          this._styles[size]["justify-content"] = "flex-end";
+        } else if (alignVertical === "s") {
+          this._styles[size]["justify-content"] = "flex-start";
+        }
+      }
+
+      // Handle flex property
+      const flex = this.getAttribute(addSizePrefix("flex"));
+      if (flex !== null) {
+        this._styles[size]["flex"] = flex;
+      }
+
+      // Handle flex-wrap
+      const flexWrap = this.getAttribute(addSizePrefix("fw"));
+      if (flexWrap === "w") {
+        this._styles[size]["flex-wrap"] = "wrap";
+      }
+
+      // Handle scroll properties
+      const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
+      const scrollVertical = this.hasAttribute(addSizePrefix("sv"));
+      const overflow = this.getAttribute(addSizePrefix("overflow"));
+
+      if (scrollHorizontal && scrollVertical) {
+        this._styles[size]["overflow"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollHorizontal) {
+        this._styles[size]["overflow-x"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
+      } else if (scrollVertical) {
+        this._styles[size]["overflow-y"] = "scroll";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
-        this._styles[size].display = "flex !important";
+      if (overflow === "hidden") {
+        this._styles[size]["overflow"] = "hidden";
+        this._styles[size]["flex-wrap"] = "nowrap";
       }
     });
 
@@ -207,6 +312,20 @@ class RettangoliViewElement extends HTMLElement {
       this._styleElement.textContent = newStyleString;
       this._lastStyleString = newStyleString;
     }
+    
+  }
+  
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      return;
+    }
+    
+    // Update styles for all other attributes
+    if (oldValue !== newValue) {
+      this.updateStyles();
+    }
   }
 }