@rettangoli/ui 0.1.31 → 1.0.0-rc1

package/src/primitives/button.js

@@ -1,7 +1,12 @@
-import { css, dimensionWithUnit } from "../common.js";
-import flexChildStyles from "../styles/flexChildStyles.js";
+import { css, dimensionWithUnit, applyLinkAttributes } from "../common.js";
 import buttonMarginStyles from "../styles/buttonMarginStyles.js";
-import anchorStyles from "../styles/anchorStyles.js";
+
+const responsiveSizeBreakpoints = [
+  { prefix: "sm", maxWidth: 640 },
+  { prefix: "md", maxWidth: 768 },
+  { prefix: "lg", maxWidth: 1024 },
+  { prefix: "xl", maxWidth: 1280 },
+];
 
 // Internal implementation without uhtml
 class RettangoliButtonElement extends HTMLElement {
@@ -12,13 +17,13 @@ class RettangoliButtonElement extends HTMLElement {
       RettangoliButtonElement.styleSheet = new CSSStyleSheet();
       RettangoliButtonElement.styleSheet.replaceSync(css`
         :host {
-          display: contents;
+          display: inline-flex;
         }
         slot {
           display: contents;
         }
 
-        button {
+        .surface {
           display: flex;
           flex-direction: row;
           align-items: center;
@@ -40,9 +45,19 @@ class RettangoliButtonElement extends HTMLElement {
 
           background-color: var(--primary);
           color: var(--primary-foreground);
+          text-decoration: none;
+        }
+
+        a.surface,
+        a.surface:link,
+        a.surface:visited,
+        a.surface:hover,
+        a.surface:active {
+          color: inherit;
+          text-decoration: none;
         }
 
-        button:hover {
+        .surface:hover {
           cursor: pointer;
           background-color: color-mix(
             in srgb,
@@ -51,11 +66,11 @@ class RettangoliButtonElement extends HTMLElement {
           );
         }
 
-        button:disabled {
+        :host([disabled]) .surface {
           cursor: not-allowed;
         }
 
-        button:active {
+        .surface:active {
           cursor: pointer;
           background-color: color-mix(
             in srgb,
@@ -64,7 +79,7 @@ class RettangoliButtonElement extends HTMLElement {
           );
         }
 
-        :host([v="pr"]) button:hover {
+        :host([v="pr"]) .surface:hover {
           background-color: color-mix(
               in srgb,
               var(--primary) 85%,
@@ -72,7 +87,7 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="pr"]) button:active {
+        :host([v="pr"]) .surface:active {
           background-color: color-mix(
               in srgb,
               var(--primary) 80%,
@@ -80,7 +95,7 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="se"]) button:hover {
+        :host([v="se"]) .surface:hover {
           background-color: color-mix(
               in srgb,
               var(--secondary) 85%,
@@ -88,7 +103,7 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="se"]) button:active {
+        :host([v="se"]) .surface:active {
           background-color: color-mix(
               in srgb,
               var(--secondary) 80%,
@@ -96,7 +111,7 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="de"]) button:hover {
+        :host([v="de"]) .surface:hover {
           background-color: color-mix(
               in srgb,
               var(--destructive) 85%,
@@ -104,7 +119,7 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="de"]) button:active {
+        :host([v="de"]) .surface:active {
           background-color: color-mix(
               in srgb,
               var(--destructive) 80%,
@@ -112,48 +127,45 @@ class RettangoliButtonElement extends HTMLElement {
             );
         }
 
-        :host([v="ol"]) button:hover {
+        :host([v="ol"]) .surface:hover {
           background-color: var(--accent);
         }
 
-        :host([v="gh"]) button:hover {
+        :host([v="gh"]) .surface:hover {
           background-color: var(--accent);
         }
 
-        :host([v="lk"]) button:hover {
+        :host([v="lk"]) .surface:hover {
           text-decoration: underline;
         }
 
         /* Square button styles */
-        :host([sq]) button {
+        :host([sq]) .surface {
           width: 32px;
           height: 32px;
           padding: 0;
           gap: 0;
         }
 
-        :host([sq][s="sm"]) button {
+        :host([sq][s="sm"]) .surface {
           width: 24px;
           height: 24px;
           padding: 0;
           gap: 0;
         }
 
-        :host([sq][s="lg"]) button {
+        :host([sq][s="lg"]) .surface {
           width: 40px;
           height: 40px;
           padding: 0;
           gap: 0;
         }
 
-        ${anchorStyles}
-        
-        a {
-          display: contents;
+        .surface rtgl-svg {
+          color: inherit;
         }
 
         ${buttonMarginStyles}
-        ${flexChildStyles}
       `);
     }
   }
@@ -166,118 +178,181 @@ class RettangoliButtonElement extends HTMLElement {
     
     // Create initial DOM structure
     this._containerElement = null;
-    this._buttonElement = document.createElement('button');
+    this._surfaceElement = document.createElement('button');
     this._slotElement = document.createElement('slot');
-    this._iconElement = null;
+    this._prefixIcon = null;
+    this._suffixIcon = null;
     
-    this._buttonElement.appendChild(this._slotElement);
+    this._surfaceElement.className = 'surface';
+    this._surfaceElement.appendChild(this._slotElement);
+
+    this._onWindowResize = this._onWindowResize.bind(this);
   }
 
   static get observedAttributes() {
-    return ["key", "href", "target", "w", "icon", "disabled", "v", "s", "sq", "ip"];
+    return [
+      "key",
+      "href",
+      "new-tab",
+      "rel",
+      "w",
+      "pre",
+      "suf",
+      "disabled",
+      "v",
+      "s",
+      "sq",
+      "sm-s",
+      "md-s",
+      "lg-s",
+      "xl-s",
+    ];
   }
 
   connectedCallback() {
+    window.addEventListener("resize", this._onWindowResize);
     this._updateButton();
   }
 
+  disconnectedCallback() {
+    window.removeEventListener("resize", this._onWindowResize);
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     this._updateButton();
   }
 
+  _onWindowResize() {
+    if (
+      this.hasAttribute("sm-s") ||
+      this.hasAttribute("md-s") ||
+      this.hasAttribute("lg-s") ||
+      this.hasAttribute("xl-s")
+    ) {
+      this._updateIcon();
+    }
+  }
+
+  _resolveResponsiveSizeToken() {
+    const viewportWidth = window.innerWidth;
+
+    for (const { prefix, maxWidth } of responsiveSizeBreakpoints) {
+      const responsiveAttrName = `${prefix}-s`;
+      if (viewportWidth <= maxWidth && this.hasAttribute(responsiveAttrName)) {
+        return this.getAttribute(responsiveAttrName);
+      }
+    }
+
+    return this.getAttribute("s");
+  }
+
   _updateButton() {
     // Clear shadow DOM
     this.shadow.innerHTML = '';
-    
-    // Update icon
+
+    // Update disabled state
+    const isDisabled = this.hasAttribute('disabled');
+    const href = this.getAttribute("href");
+    const newTab = this.hasAttribute("new-tab");
+    const rel = this.getAttribute("rel");
+
+    const shouldUseAnchor = href && !isDisabled;
+    const requiredTag = shouldUseAnchor ? "a" : "button";
+    if (this._surfaceElement.tagName.toLowerCase() !== requiredTag) {
+      const nextSurfaceElement = document.createElement(requiredTag);
+      nextSurfaceElement.className = 'surface';
+      nextSurfaceElement.appendChild(this._slotElement);
+      this._surfaceElement = nextSurfaceElement;
+    }
+
+    // Update icon after surface element is finalized so icons are attached
+    // to the active tag (<button> or <a>) consistently.
     this._updateIcon();
-    
-    // Update width styling (skip for square buttons)
+
     if (!this.hasAttribute('sq')) {
       this._updateWidth();
-    }
-    
-    // Update disabled state
-    const isDisabled = this.hasAttribute('disabled');
-    if (isDisabled) {
-      this._buttonElement.setAttribute('disabled', '');
     } else {
-      this._buttonElement.removeAttribute('disabled');
+      this.style.width = "";
+      this.style.minWidth = "";
+      this.style.maxWidth = "";
+      this._surfaceElement.style.width = "";
+      this._surfaceElement.style.minWidth = "";
+      this._surfaceElement.style.maxWidth = "";
     }
-    
-    // Handle href (link) vs button
-    const href = this.getAttribute("href");
-    if (href) {
-      // Create anchor wrapper
-      const anchorElement = document.createElement('a');
-      anchorElement.setAttribute('href', href);
-      
-      const target = this.getAttribute("target");
-      if (target) {
-        anchorElement.setAttribute('target', target);
-      }
-      
-      anchorElement.appendChild(this._buttonElement);
-      this.shadow.appendChild(anchorElement);
-      this._containerElement = anchorElement;
+
+    if (shouldUseAnchor) {
+      applyLinkAttributes({
+        linkElement: this._surfaceElement,
+        href,
+        newTab,
+        rel,
+      });
+      this._surfaceElement.removeAttribute("disabled");
     } else {
-      // Direct button
-      this.shadow.appendChild(this._buttonElement);
-      this._containerElement = this._buttonElement;
+      this._surfaceElement.removeAttribute("href");
+      this._surfaceElement.removeAttribute("target");
+      this._surfaceElement.removeAttribute("rel");
+      if (isDisabled) {
+        this._surfaceElement.setAttribute("disabled", "");
+      } else {
+        this._surfaceElement.removeAttribute("disabled");
+      }
     }
+
+    this.shadow.appendChild(this._surfaceElement);
+    this._containerElement = this._surfaceElement;
   }
 
   _updateIcon() {
-    // Remove existing icon if any
-    if (this._iconElement) {
-      this._iconElement.remove();
-      this._iconElement = null;
+    // Remove existing icons if any
+    if (this._prefixIcon) {
+      this._prefixIcon.remove();
+      this._prefixIcon = null;
     }
-    
-    const icon = this.getAttribute("icon");
-    if (icon) {
-      const colorMap = {
-        pr: 'pr-fg',
-        se: 'ac-fg',
-        de: 'pr-fg',
-        ol: 'ac-fg',
-        gh: 'ac-fg',
-        lk: 'ac-fg'
-      };
-      const iconSizeMap = {
+    if (this._suffixIcon) {
+      this._suffixIcon.remove();
+      this._suffixIcon = null;
+    }
+
+    const iconSizeMap = {
+      sm: 14,
+      md: 18,
+      lg: 22
+    };
+
+    // For square buttons, use button size token, otherwise use icon size token.
+    const resolvedSizeToken = this._resolveResponsiveSizeToken();
+    let size = 18; // default
+    if (this.hasAttribute('sq')) {
+      const buttonSizeMap = {
         sm: 14,
-        md: 18,
         lg: 22
       };
-      const color = colorMap[this.getAttribute("v")] || 'pr-fg';
-      
-      // For square buttons, use button size (s attribute), otherwise use icon size (t attribute)
-      let size = 18; // default
-      if (this.hasAttribute('sq')) {
-        const buttonSizeMap = {
-          sm: 14,
-          lg: 22
-        };
-        const buttonSize = this.getAttribute("s");
-        size = buttonSizeMap[buttonSize] || 18;
-      } else {
-        size = iconSizeMap[this.getAttribute("s")] || 18;
-      }
-      
-      this._iconElement = document.createElement('rtgl-svg');
-      this._iconElement.setAttribute('svg', icon);
-      this._iconElement.setAttribute('c', color);
-      this._iconElement.setAttribute('wh', size.toString());
-      
-      // Insert icon based on position (default is right, 's' means start/left)
-      const iconPosition = this.getAttribute("ip");
-      if (iconPosition === 's') {
-        // Insert icon before slot (left position)
-        this._buttonElement.insertBefore(this._iconElement, this._slotElement);
-      } else {
-        // Insert icon after slot (right position - default)
-        this._buttonElement.appendChild(this._iconElement);
-      }
+      size = buttonSizeMap[resolvedSizeToken] || 18;
+    } else {
+      size = iconSizeMap[resolvedSizeToken] || 18;
+    }
+
+    // Create prefix icon (before text)
+    const prefixIcon = this.getAttribute("pre");
+    if (prefixIcon) {
+      this._prefixIcon = document.createElement('rtgl-svg');
+      this._prefixIcon.setAttribute('svg', prefixIcon);
+      this._prefixIcon.setAttribute('wh', size.toString());
+      this._prefixIcon.style.color = "inherit";
+      // Insert before slot (left position)
+      this._surfaceElement.insertBefore(this._prefixIcon, this._slotElement);
+    }
+
+    // Create suffix icon (after text)
+    const suffixIcon = this.getAttribute("suf");
+    if (suffixIcon) {
+      this._suffixIcon = document.createElement('rtgl-svg');
+      this._suffixIcon.setAttribute('svg', suffixIcon);
+      this._suffixIcon.setAttribute('wh', size.toString());
+      this._suffixIcon.style.color = "inherit";
+      // Insert after slot (right position)
+      this._surfaceElement.appendChild(this._suffixIcon);
     }
   }
 
@@ -285,23 +360,34 @@ class RettangoliButtonElement extends HTMLElement {
     const width = dimensionWithUnit(this.getAttribute("w"));
     
     if (width === "f") {
-      this._buttonElement.style.width = "var(--width-stretch)";
+      this.style.width = "var(--width-stretch)";
+      this.style.minWidth = "";
+      this.style.maxWidth = "";
+      this._surfaceElement.style.width = "100%";
+      this._surfaceElement.style.minWidth = "";
+      this._surfaceElement.style.maxWidth = "";
     } else if (width !== undefined && width !== null) {
-      this._buttonElement.style.width = width;
-      this._buttonElement.style.minWidth = width;
-      this._buttonElement.style.maxWidth = width;
+      this.style.width = width;
+      this.style.minWidth = width;
+      this.style.maxWidth = width;
+      this._surfaceElement.style.width = "100%";
+      this._surfaceElement.style.minWidth = "";
+      this._surfaceElement.style.maxWidth = "";
     } else {
-      this._buttonElement.style.width = "";
-      this._buttonElement.style.minWidth = "";
-      this._buttonElement.style.maxWidth = "";
+      this.style.width = "";
+      this.style.minWidth = "";
+      this.style.maxWidth = "";
+      this._surfaceElement.style.width = "";
+      this._surfaceElement.style.minWidth = "";
+      this._surfaceElement.style.maxWidth = "";
     }
   }
   
   // Public method to get the actual button's bounding rect
   // This is needed because the host element has display: contents
   getBoundingClientRect() {
-    if (this._buttonElement) {
-      return this._buttonElement.getBoundingClientRect();
+    if (this._surfaceElement) {
+      return this._surfaceElement.getBoundingClientRect();
     }
     // Fallback to host element
     return super.getBoundingClientRect();

package/src/primitives/colorPicker.js

@@ -1,13 +1,18 @@
-import { 
-  css, 
+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 colorPickerStyleMapKeys = ["mt", "mr", "mb", "ml", "m", "mh", "mv", "cur"];
+const HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
+
 // Internal implementation without uhtml
 class RettangoliColorPickerElement extends HTMLElement {
   static styleSheet = null;
@@ -49,13 +54,7 @@ class RettangoliColorPickerElement extends HTMLElement {
     this.shadow.adoptedStyleSheets = [RettangoliColorPickerElement.styleSheet];
     
     // Initialize style tracking properties
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
+    this._styles = createResponsiveStyleBuckets();
     this._lastStyleString = "";
     
     // Create initial DOM structure
@@ -77,7 +76,7 @@ class RettangoliColorPickerElement extends HTMLElement {
       "value", 
       "disabled",
       ...permutateBreakpoints([
-        ...styleMapKeys,
+        ...colorPickerStyleMapKeys,
         "wh",
         "w",
         "h",
@@ -97,29 +96,32 @@ class RettangoliColorPickerElement extends HTMLElement {
     this._inputElement.value = newValue;
   }
 
-  _onChange = (event) => {
-    this.dispatchEvent(new CustomEvent('colorpicker-change', {
+  _onChange = () => {
+    this.dispatchEvent(new CustomEvent('value-change', {
       detail: {
         value: this._inputElement.value,
       },
+      bubbles: true,
     }));
   };
 
-  _onInput = (event) => {
-    this.dispatchEvent(new CustomEvent('colorpicker-input', {
+  _onInput = () => {
+    this.dispatchEvent(new CustomEvent('value-input', {
       detail: {
         value: this._inputElement.value,
       },
+      bubbles: true,
     }));
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
     // Handle key attribute change - reset value
-    if (name === "key" && oldValue !== newValue) {
-      requestAnimationFrame(() => {
-        const value = this.getAttribute("value");
-        this._inputElement.value = value ?? "#000000";
-      });
+    if (name === "key") {
+      this._syncValueAttribute();
       return;
     }
 
@@ -129,16 +131,14 @@ class RettangoliColorPickerElement extends HTMLElement {
       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}`;
       };
@@ -161,28 +161,26 @@ class RettangoliColorPickerElement 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";
       }
     });
 
@@ -194,13 +192,20 @@ class RettangoliColorPickerElement extends HTMLElement {
     }
   }
 
-  _updateInputAttributes() {
+  _syncValueAttribute() {
     const value = this.getAttribute("value");
+    if (value === null) {
+      this._inputElement.value = "#000000";
+      return;
+    }
+
+    this._inputElement.value = HEX_COLOR_REGEX.test(value) ? value : "#000000";
+  }
+
+  _updateInputAttributes() {
     const isDisabled = this.hasAttribute('disabled');
 
-    if (value !== null) {
-      this._inputElement.value = value;
-    }
+    this._syncValueAttribute();
     
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");
@@ -211,6 +216,7 @@ class RettangoliColorPickerElement extends HTMLElement {
 
   connectedCallback() {
     this._updateInputAttributes();
+    this.updateStyles();
   }
 }
 
@@ -219,4 +225,4 @@ export default ({ render, html }) => {
   // Note: render and html parameters are accepted but not used
   // This maintains backward compatibility with existing code
   return RettangoliColorPickerElement;
-};
+};

package/src/primitives/dialog.js

@@ -131,7 +131,8 @@ class RettangoliDialogElement extends HTMLElement {
 
   _attemptClose() {
     this.dispatchEvent(new CustomEvent('close', {
-      detail: {}
+      detail: {},
+      bubbles: true,
     }));
   }