@rettangoli/ui 0.1.30 → 0.1.32-rc1

package/src/primitives/input.js

@@ -2,16 +2,26 @@ import {
   css,
   dimensionWithUnit,
   convertObjectToCssString,
-  styleMapKeys,
   permutateBreakpoints,
+  createResponsiveStyleBuckets,
+  responsiveStyleSizes,
+  applyDimensionToStyleBucket,
 } from "../common.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 
+const inputStyleMapKeys = ["mt", "mr", "mb", "ml", "m", "mh", "mv", "cur"];
+
 // Internal implementation without uhtml
 class RettangoliInputElement extends HTMLElement {
   static styleSheet = null;
 
+  static inputSpecificAttributes = [
+    "type",
+    "disabled",
+    "s",
+  ];
+
   static initializeStyleSheet() {
     if (!RettangoliInputElement.styleSheet) {
       RettangoliInputElement.styleSheet = new CSSStyleSheet();
@@ -61,13 +71,7 @@ class RettangoliInputElement extends HTMLElement {
     this.shadow.adoptedStyleSheets = [RettangoliInputElement.styleSheet];
 
     // Initialize style tracking properties
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
+    this._styles = createResponsiveStyleBuckets();
     this._lastStyleString = "";
 
     // Create initial DOM structure
@@ -77,8 +81,9 @@ class RettangoliInputElement extends HTMLElement {
     this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._inputElement);
 
-    // Bind event handler
-    this._inputElement.addEventListener('input', this._onChange);
+    // Bind event handlers
+    this._inputElement.addEventListener('input', this._onInput);
+    this._inputElement.addEventListener('change', this._onChange);
   }
 
   static get observedAttributes() {
@@ -90,7 +95,7 @@ class RettangoliInputElement extends HTMLElement {
       "value",
       "s",
       ...permutateBreakpoints([
-        ...styleMapKeys,
+        ...inputStyleMapKeys,
         "wh",
         "w",
         "h",
@@ -114,49 +119,58 @@ class RettangoliInputElement extends HTMLElement {
     this._inputElement.focus();
   }
 
-  _onChange = (event) => {
-    this.dispatchEvent(new CustomEvent('input-change', {
+  _onInput = () => {
+    this.dispatchEvent(new CustomEvent('value-input', {
       detail: {
         value: this._inputElement.value,
       },
+      bubbles: true,
+    }));
+  };
+
+  _onChange = () => {
+    this.dispatchEvent(new CustomEvent('value-change', {
+      detail: {
+        value: this._inputElement.value,
+      },
+      bubbles: true,
     }));
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'value') {
-      requestAnimationFrame((() => {
-        const value = this.getAttribute("value");
-        this._inputElement.value = value ?? "";
-      }))
+    if (oldValue === newValue) {
+      return;
     }
 
-    if (name === 'placeholder') {
-      requestAnimationFrame((() => {
-        const placeholder = this.getAttribute("placeholder");
-        if (placeholder === undefined || placeholder === 'null') {
-          this._inputElement.removeAttribute('placeholder');
-        } else {
-          this._inputElement.setAttribute('placeholder', placeholder ?? "");
-        }
-      }))
+    if (name === "key") {
+      this._syncValueAttribute();
+      return;
+    }
+
+    if (name === "value") {
+      this._syncValueAttribute();
+      return;
+    }
+
+    if (name === "placeholder") {
+      this._syncPlaceholderAttribute();
+      return;
     }
 
     // Handle input-specific attributes first
-    if (["type", "disabled", "step", "s"].includes(name)) {
+    if (RettangoliInputElement.inputSpecificAttributes.includes(name)) {
       this._updateInputAttributes();
       return;
     }
 
+    this.updateStyles();
+  }
+
+  updateStyles() {
     // Reset styles for fresh calculation
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
-
-    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+    this._styles = createResponsiveStyleBuckets();
+
+    responsiveStyleSizes.forEach((size) => {
       const addSizePrefix = (tag) => {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
@@ -179,28 +193,26 @@ class RettangoliInputElement extends HTMLElement {
         this._styles[size].opacity = opacity;
       }
 
-      if (width === "f") {
-        this._styles[size].width = "var(--width-stretch)";
-      } else if (width !== undefined) {
-        this._styles[size].width = width;
-        this._styles[size]["min-width"] = width;
-        this._styles[size]["max-width"] = width;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "width",
+        dimension: width,
+        fillValue: "var(--width-stretch)",
+      });
 
-      if (height === "f") {
-        this._styles[size].height = "100%";
-      } else if (height !== undefined) {
-        this._styles[size].height = height;
-        this._styles[size]["min-height"] = height;
-        this._styles[size]["max-height"] = height;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "height",
+        dimension: height,
+        fillValue: "100%",
+      });
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
-        this._styles[size].display = "none !important";
+        this._styles[size].display = "none";
       }
 
       if (this.hasAttribute(addSizePrefix("show"))) {
-        this._styles[size].display = "block !important";
+        this._styles[size].display = "block";
       }
     });
 
@@ -212,20 +224,28 @@ class RettangoliInputElement extends HTMLElement {
     }
   }
 
+  _setOrRemoveInputAttribute(name, value) {
+    if (value === null || value === undefined || value === "null") {
+      this._inputElement.removeAttribute(name);
+      return;
+    }
+    this._inputElement.setAttribute(name, value);
+  }
+
+  _syncValueAttribute() {
+    this._inputElement.value = this.getAttribute("value") ?? "";
+  }
+
+  _syncPlaceholderAttribute() {
+    this._setOrRemoveInputAttribute("placeholder", this.getAttribute("placeholder"));
+  }
+
   _updateInputAttributes() {
-    const type = this.getAttribute("type") || "text";
-    // const placeholder = this.getAttribute("placeholder");
-    // const value = this.getAttribute("value");
-    const step = this.getAttribute("step");
+    const requestedType = this.getAttribute("type");
+    const type = requestedType === "password" ? "password" : "text";
     const isDisabled = this.hasAttribute('disabled');
 
-    this._inputElement.setAttribute("type", type);
-
-    if (step !== null) {
-      this._inputElement.setAttribute("step", step);
-    } else {
-      this._inputElement.removeAttribute("step");
-    }
+    this._setOrRemoveInputAttribute("type", type);
 
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");
@@ -236,6 +256,9 @@ class RettangoliInputElement extends HTMLElement {
 
   connectedCallback() {
     this._updateInputAttributes();
+    this._syncValueAttribute();
+    this._syncPlaceholderAttribute();
+    this.updateStyles();
   }
 }
 

package/src/primitives/popover.js

@@ -83,9 +83,7 @@ class RettangoliPopoverElement extends HTMLElement {
         (path[0].nodeName === 'DIALOG' && path[0] === this._dialogElement);
 
       if (clickedOnBackdrop) {
-        this.dispatchEvent(new CustomEvent('close', {
-          detail: {}
-        }));
+        this._emitClose();
       }
     });
 
@@ -98,18 +96,14 @@ class RettangoliPopoverElement extends HTMLElement {
 
       if (clickedOnBackdrop) {
         e.preventDefault();
-        this.dispatchEvent(new CustomEvent('close', {
-          detail: {}
-        }));
+        this._emitClose();
       }
     });
 
     // Handle ESC key - prevent native close and emit custom event
     this._dialogElement.addEventListener('cancel', (e) => {
       e.preventDefault();
-      this.dispatchEvent(new CustomEvent('close', {
-        detail: {}
-      }));
+      this._emitClose();
     });
 
     // Create popover container
@@ -124,8 +118,15 @@ class RettangoliPopoverElement extends HTMLElement {
     this._isOpen = false;
   }
 
+  _emitClose() {
+    this.dispatchEvent(new CustomEvent('close', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
   static get observedAttributes() {
-    return ["open", "x", "y", "placement"];
+    return ["open", "x", "y", "place", "no-overlay"];
   }
 
   connectedCallback() {
@@ -152,8 +153,11 @@ class RettangoliPopoverElement extends HTMLElement {
       } else if (newValue === null && this._isOpen) {
         this._hide();
       }
-    } else if ((name === 'x' || name === 'y' || name === 'placement') && this._isOpen) {
+    } else if ((name === 'x' || name === 'y' || name === 'place') && this._isOpen) {
       this._updatePosition();
+    } else if (name === 'no-overlay' && oldValue !== newValue && this._isOpen) {
+      this._hide();
+      this._show();
     }
   }
 
@@ -208,16 +212,16 @@ class RettangoliPopoverElement extends HTMLElement {
   _updatePosition() {
     const x = parseFloat(this.getAttribute('x') || '0');
     const y = parseFloat(this.getAttribute('y') || '0');
-    const placement = this.getAttribute('placement') || 'bottom-start';
+    const place = this.getAttribute('place') || 'bs';
 
     // Remove positioned attribute to hide during repositioning
     this.removeAttribute('positioned');
 
-    // Calculate position based on placement
+    // Calculate position based on place
     // We'll position after the popover is rendered to get its dimensions
     requestAnimationFrame(() => {
       const rect = this._popoverContainer.getBoundingClientRect();
-      const { left, top } = this._calculatePosition(x, y, rect.width, rect.height, placement);
+      const { left, top } = this._calculatePosition(x, y, rect.width, rect.height, place);
 
       // Set position first
       this._popoverContainer.style.left = `${left}px`;
@@ -230,60 +234,64 @@ class RettangoliPopoverElement extends HTMLElement {
     });
   }
 
-  _calculatePosition(x, y, width, height, placement) {
+  _calculatePosition(x, y, width, height, place) {
     const offset = 8; // Small offset from the cursor
     let left = x;
     let top = y;
 
-    switch (placement) {
-      case 'top':
+    switch (place) {
+      case 't':
         left = x - width / 2;
         top = y - height - offset;
         break;
-      case 'top-start':
+      case 'ts':
         left = x;
         top = y - height - offset;
         break;
-      case 'top-end':
+      case 'te':
         left = x - width;
         top = y - height - offset;
         break;
-      case 'right':
+      case 'r':
         left = x + offset;
         top = y - height / 2;
         break;
-      case 'right-start':
+      case 'rs':
         left = x + offset;
         top = y;
         break;
-      case 'right-end':
+      case 're':
         left = x + offset;
         top = y - height;
         break;
-      case 'bottom':
+      case 'b':
         left = x - width / 2;
         top = y + offset;
         break;
-      case 'bottom-start':
+      case 'bs':
         left = x;
         top = y + offset;
         break;
-      case 'bottom-end':
+      case 'be':
         left = x - width;
         top = y + offset;
         break;
-      case 'left':
+      case 'l':
         left = x - width - offset;
         top = y - height / 2;
         break;
-      case 'left-start':
+      case 'ls':
         left = x - width - offset;
         top = y;
         break;
-      case 'left-end':
+      case 'le':
         left = x - width - offset;
         top = y - height;
         break;
+      default:
+        left = x;
+        top = y + offset;
+        break;
     }
 
     // Ensure popover stays within viewport

package/src/primitives/slider.js

@@ -132,18 +132,20 @@ class RettangoliSliderElement extends HTMLElement {
   }
 
   _onInput = () => {
-    this.dispatchEvent(new CustomEvent('slider-input', {
+    this.dispatchEvent(new CustomEvent('value-input', {
       detail: {
         value: Number(this._inputElement.value),
       },
+      bubbles: true,
     }));
   };
 
   _onChange = () => {
-    this.dispatchEvent(new CustomEvent('slider-change', {
+    this.dispatchEvent(new CustomEvent('value-change', {
       detail: {
         value: Number(this._inputElement.value),
       },
+      bubbles: true,
     }));
   };
 
@@ -213,11 +215,11 @@ class RettangoliSliderElement extends HTMLElement {
       }
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
-        this._styles[size].display = "none !important";
+        this._styles[size].display = "none";
       }
 
       if (this.hasAttribute(addSizePrefix("show"))) {
-        this._styles[size].display = "block !important";
+        this._styles[size].display = "block";
       }
     });
 

package/src/primitives/svg.js

@@ -1,5 +1,4 @@
 import { css, dimensionWithUnit } from "../common.js";
-import flexChildStyles from "../styles/flexChildStyles.js";
 import paddingSvgStyles from "../styles/paddingSvgStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
@@ -21,7 +20,6 @@ class RettangoliSvgElement extends HTMLElement {
         ${textColorStyles}
         ${paddingSvgStyles}
         ${marginStyles}
-        ${flexChildStyles}
         ${cursorStyles}
       `);
     }
@@ -58,18 +56,19 @@ class RettangoliSvgElement extends HTMLElement {
 
   _updateSizing() {
     const wh = this.getAttribute("wh");
-    const width = dimensionWithUnit(
-      wh === null ? this.getAttribute("w") : wh
-    );
-    const height = dimensionWithUnit(
-      wh === null ? this.getAttribute("h") : wh
-    );
+    const width = dimensionWithUnit(wh === null ? this.getAttribute("w") : wh);
+    const height = dimensionWithUnit(wh === null ? this.getAttribute("h") : wh);
 
-    if (width) {
+    if (width != null) {
       this.style.width = width;
+    } else {
+      this.style.width = "";
     }
-    if (height) {
+
+    if (height != null) {
       this.style.height = height;
+    } else {
+      this.style.height = "";
     }
   }
 

package/src/primitives/text.js

@@ -1,4 +1,10 @@
-import { css, dimensionWithUnit } from "../common.js";
+import {
+  css,
+  dimensionWithUnit,
+  overlayLinkStyles,
+  syncLinkOverlay,
+  applyInlineWidthDimension,
+} from "../common.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import textStyles from "../styles/textStyles.js";
 import textColorStyles from "../styles/textColorStyles.js";
@@ -30,18 +36,7 @@ class RettangoliTextElement extends HTMLElement {
           text-decoration: var(--anchor-text-decoration-hover);
           color: var(--anchor-color-hover);
         }
-        :host([href]) {
-          cursor: pointer;
-          position: relative;
-        }
-        :host([href]) a {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 1;
-        }
+        ${overlayLinkStyles}
         ${textStyles}
         ${textColorStyles}
         ${marginStyles}
@@ -63,7 +58,7 @@ class RettangoliTextElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["key", "w", "ellipsis", "href", "target"];
+    return ["key", "w", "ellipsis", "href", "new-tab", "rel"];
   }
 
   connectedCallback() {
@@ -72,7 +67,7 @@ class RettangoliTextElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "href" || name === "target") {
+    if (name === "href" || name === "new-tab" || name === "rel") {
       this._updateDOM();
     } else {
       this._updateStyling();
@@ -93,43 +88,27 @@ class RettangoliTextElement extends HTMLElement {
       this.style.whiteSpace = "";
     }
 
-    if (width === "f") {
-      this.style.width = "var(--width-stretch)";
-    } else if (width !== undefined) {
-      this.style.width = width;
-    } else {
-      this.style.width = "";
-    }
+    // Allow shrinking in flex layouts so ellipsis and wrapping constraints work predictably.
+    applyInlineWidthDimension({
+      style: this.style,
+      width,
+      flexMinWidth: "0",
+    });
   }
 
   _updateDOM() {
     const href = this.getAttribute("href");
-    const target = this.getAttribute("target");
+    const newTab = this.hasAttribute("new-tab");
+    const rel = this.getAttribute("rel");
 
-    // Ensure slot is always in the shadow DOM
-    if (this._slotElement.parentNode !== this.shadow) {
-      this.shadow.appendChild(this._slotElement);
-    }
-
-    if (href) {
-      if (!this._linkElement) {
-        // Create link overlay only if it doesn't exist
-        this._linkElement = document.createElement("a");
-        this.shadow.appendChild(this._linkElement);
-      }
-
-      // Update link attributes
-      this._linkElement.href = href;
-      if (target) {
-        this._linkElement.target = target;
-      } else {
-        this._linkElement.removeAttribute("target");
-      }
-    } else if (this._linkElement) {
-      // Remove link overlay
-      this.shadow.removeChild(this._linkElement);
-      this._linkElement = null;
-    }
+    this._linkElement = syncLinkOverlay({
+      shadowRoot: this.shadow,
+      slotElement: this._slotElement,
+      linkElement: this._linkElement,
+      href,
+      newTab,
+      rel,
+    });
   }
 }
 

package/src/primitives/textarea.js

@@ -62,34 +62,42 @@ class RettangoliTextAreaElement extends HTMLElement {
 
     // Create initial DOM structure
     this._textareaElement = document.createElement('textarea');
-    this._textareaElement.setAttribute('type', 'text');
     this._styleElement = document.createElement('style');
 
     this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._textareaElement);
 
-    // Bind event handler
-    this._textareaElement.addEventListener('input', this._onChange);
+    // Bind event handlers
+    this._textareaElement.addEventListener('input', this._onInput);
+    this._textareaElement.addEventListener('change', this._onChange);
   }
 
-  _onChange = (event) => {
-    this.dispatchEvent(new CustomEvent('textarea-change', {
+  _onInput = () => {
+    this.dispatchEvent(new CustomEvent('value-input', {
       detail: {
         value: this._textareaElement.value,
       },
+      bubbles: true,
+    }));
+  };
+
+  _onChange = () => {
+    this.dispatchEvent(new CustomEvent('value-change', {
+      detail: {
+        value: this._textareaElement.value,
+      },
+      bubbles: true,
     }));
   };
 
   static get observedAttributes() {
     return [
       "key",
-      "type",
       "placeholder",
       "disabled",
       "value",
       "cols",
       "rows",
-      "ellipsis",
       ...permutateBreakpoints([
         ...styleMapKeys,
         "wh",
@@ -129,6 +137,14 @@ class RettangoliTextAreaElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "key") {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._textareaElement.value = value ?? "";
+      });
+      return;
+    }
+
     if (name === 'value') {
       requestAnimationFrame((() => {
         const value = this.getAttribute("value");
@@ -202,11 +218,11 @@ class RettangoliTextAreaElement extends HTMLElement {
       }
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
-        this._styles[size].display = "none !important";
+        this._styles[size].display = "none";
       }
 
       if (this.hasAttribute(addSizePrefix("show"))) {
-        this._styles[size].display = "block !important";
+        this._styles[size].display = "block";
       }
     });