@rettangoli/ui 0.1.0

package/src/entry-iife-layout.js

@@ -0,0 +1,15 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+
+customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-view", RettangoliView({}));
+customElements.define("rtgl-text", RettangoliText({}));
+customElements.define("rtgl-image", RettangoliImage({}));
+customElements.define("rtgl-svg", RettangoliSvg({}));
+customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-textarea", RettangoliTextArea({}));

package/src/entry-iife-ui.js

@@ -0,0 +1,22 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliColorPicker from './primitives/colorPicker.js';
+import RettangoliSlider from './primitives/slider.js';
+
+customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-view", RettangoliView({}));
+customElements.define("rtgl-text", RettangoliText({}));
+customElements.define("rtgl-image", RettangoliImage({}));
+customElements.define("rtgl-svg", RettangoliSvg({}));
+customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-textarea", RettangoliTextArea({}));
+customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
+customElements.define("rtgl-slider", RettangoliSlider({}));
+
+// built from rettangoli cli fe
+import '../.temp/dynamicImport.js'

package/src/index.js

@@ -0,0 +1,17 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+
+export {
+    RettangoliButton,
+    RettangoliView,
+    RettangoliText,
+    RettangoliImage,
+    RettangoliSvg,
+    RettangoliInput,
+    RettangoliTextArea,
+}

package/src/lib/uhtml.js

@@ -0,0 +1,9 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/uhtml@4.7.0/keyed.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+const{isArray:e}=Array,{getPrototypeOf:t,getOwnPropertyDescriptor:n}=Object,r=[],s=()=>document.createRange(),l=(e,t,n)=>(e.set(t,n),n),i=(e,t)=>t.reduceRight(o,e),o=(e,t)=>e.childNodes[t],{setPrototypeOf:c}=Object;let a;var u=(e,t,n)=>(a||(a=s()),n?a.setStartAfter(e):a.setStartBefore(e),a.setEndAfter(t),a.deleteContents(),e);const h=({firstChild:e,lastChild:t},n)=>u(e,t,n);let d=!1;const f=(e,t)=>d&&11===e.nodeType?1/t<0?t?h(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,p=e=>document.createComment(e);class g extends((e=>{function t(e){return c(e,new.target.prototype)}return t.prototype=e.prototype,t})(DocumentFragment)){#e=p("<>");#t=p("</>");#n=r;constructor(e){super(e),this.replaceChildren(this.#e,...e.childNodes,this.#t),d=!0}get firstChild(){return this.#e}get lastChild(){return this.#t}get parentNode(){return this.#e.parentNode}remove(){h(this,!1)}replaceWith(e){h(this,!0).replaceWith(e)}valueOf(){const{parentNode:e}=this;if(e===this)this.#n===r&&(this.#n=[...this.childNodes]);else{if(e){let{firstChild:e,lastChild:t}=this;for(this.#n=[e];e!==t;)this.#n.push(e=e.nextSibling)}this.replaceChildren(...this.#n)}return this}}const m=(e,t,n)=>e.setAttribute(t,n),b=(e,t)=>e.removeAttribute(t);let v;const C=(t,n,r)=>{r=r.slice(1),v||(v=new WeakMap);const s=v.get(t)||l(v,t,{});let i=s[r];return i&&i[0]&&t.removeEventListener(r,...i),i=e(n)?n:[n,!1],s[r]=i,i[0]&&t.addEventListener(r,...i),n},w=(e,t)=>{const{t:n,n:r}=e;let s=!1;switch(typeof t){case"object":if(null!==t){(r||n).replaceWith(e.n=t.valueOf());break}case"undefined":s=!0;default:n.data=s?"":t,r&&(e.n=null,r.replaceWith(n))}return t},x=(e,t,n)=>e[n]=t,$=(e,t,n)=>x(e,t,n.slice(1)),y=(e,t,n)=>null==t?(b(e,n),t):x(e,t,n),N=(e,t)=>("function"==typeof t?t(e):t.current=e,t),O=(e,t,n)=>(null==t?b(e,n):m(e,n,t),t),k=(e,t,n)=>(e.toggleAttribute(n.slice(1),t),t),A=(e,t,n)=>{const{length:s}=t;if(e.data=`[${s}]`,s)return((e,t,n,r,s)=>{const l=n.length;let i=t.length,o=l,c=0,a=0,u=null;for(;c<i||a<o;)if(i===c){const t=o<l?a?r(n[a-1],-0).nextSibling:r(n[o],0):s;for(;a<o;)e.insertBefore(r(n[a++],1),t)}else if(o===a)for(;c<i;)u&&u.has(t[c])||e.removeChild(r(t[c],-1)),c++;else if(t[c]===n[a])c++,a++;else if(t[i-1]===n[o-1])i--,o--;else if(t[c]===n[o-1]&&n[a]===t[i-1]){const s=r(t[--i],-0).nextSibling;e.insertBefore(r(n[a++],1),r(t[c++],-0).nextSibling),e.insertBefore(r(n[--o],1),s),t[i]=n[o]}else{if(!u){u=new Map;let e=a;for(;e<o;)u.set(n[e],e++)}if(u.has(t[c])){const s=u.get(t[c]);if(a<s&&s<o){let l=c,h=1;for(;++l<i&&l<o&&u.get(t[l])===s+h;)h++;if(h>s-a){const l=r(t[c],0);for(;a<s;)e.insertBefore(r(n[a++],1),l)}else e.replaceChild(r(n[a++],1),r(t[c++],-1))}else c++}else e.removeChild(r(t[c++],-1))}return n})(e.parentNode,n,t,f,e);switch(n.length){case 1:n[0].remove();case 0:break;default:u(f(n[0],0),f(n.at(-1),-0),!1)}return r},M=new Map([["aria",(e,t)=>{for(const n in t){const r=t[n],s="role"===n?n:`aria-${n}`;null==r?b(e,s):m(e,s,r)}return t}],["class",(e,t)=>y(e,t,null==t?"class":"className")],["data",(e,t)=>{const{dataset:n}=e;for(const e in t)null==t[e]?delete n[e]:n[e]=t[e];return t}],["ref",N],["style",(e,t)=>null==t?y(e,t,"style"):x(e.style,t,"cssText")]]),W=(e,r,s)=>{switch(r[0]){case".":return $;case"?":return k;case"@":return C;default:return s||"ownerSVGElement"in e?"ref"===r?N:O:M.get(r)||(r in e?r.startsWith("on")?x:((e,r)=>{let s;do{s=n(e,r)}while(!s&&(e=t(e)));return s})(e,r)?.set?y:O:O)}},S=(e,t)=>(e.textContent=null==t?"":t,t),E=(e,t,n)=>({a:e,b:t,c:n}),T=()=>E(null,null,r);var B=e=>(t,n)=>{const{a:s,b:l,c:o}=e(t,n),c=document.importNode(s,!0);let a=r;if(l!==r){a=[];for(let e,t,n=0;n<l.length;n++){const{a:s,b:o,c:p}=l[n],g=s===t?e:e=i(c,t=s);a[n]=(u=o,h=g,d=p,f=o===A?[]:o===w?T():null,{v:r,u:u,t:h,n:d,c:f})}}var u,h,d,f;return((e,t)=>({b:e,c:t}))(o?c.firstChild:new g(c),a)};const D=/^(?:plaintext|script|style|textarea|title|xmp)$/i,j=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,L=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,P=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,z=/[\x01\x02]/g;let F,R,Z=document.createElement("template");var G=(e,t)=>{if(t)return F||(F=document.createElementNS("http://www.w3.org/2000/svg","svg"),R=s(),R.selectNodeContents(F)),R.createContextualFragment(e);Z.innerHTML=e;const{content:n}=Z;return Z=Z.cloneNode(!1),n};const H=e=>{const t=[];let n;for(;n=e.parentNode;)t.push(t.indexOf.call(n.childNodes,e)),e=n;return t},V=()=>document.createTextNode(""),_=(t,n,s)=>{const i=G(((e,t,n)=>{let r=0;return e.join("
").trim().replace(L,((e,t,r,s)=>`<${t}${r.replace(P,"=$2$1").trimEnd()}${s?n||j.test(t)?" /":`></${t}`:""}>`)).replace(z,(e=>"
"===e?`\x3c!--${t+r++}--\x3e`:t+r++))})(t,I,s),s),{length:o}=t;let c=r;if(o>1){const t=[],r=document.createTreeWalker(i,129);let l=0,a=`${I}${l++}`;for(c=[];l<o;){const i=r.nextNode();if(8===i.nodeType){if(i.data===a){const r=e(n[l-1])?A:w;r===w&&t.push(i),c.push(E(H(i),r,null)),a=`${I}${l++}`}}else{let e;for(;i.hasAttribute(a);){e||(e=H(i));const t=i.getAttribute(a);c.push(E(e,W(i,t,s),t)),b(i,a),a=`${I}${l++}`}!s&&D.test(i.localName)&&i.textContent.trim()===`\x3c!--${a}--\x3e`&&(c.push(E(e||H(i),S,null)),a=`${I}${l++}`)}}for(l=0;l<t.length;l++)t[l].replaceWith(V())}const{childNodes:a}=i;let{length:u}=a;return u<1?(u=1,i.appendChild(V())):1===u&&1!==o&&1!==a[0].nodeType&&(u=0),l(q,t,E(i,c,1===u))},q=new WeakMap,I="isµ";var J=e=>(t,n)=>q.get(t)||_(t,n,e);const K=B(J(!1)),Q=B(J(!0)),U=(e,{s:t,t:n,v:r})=>{if(e.a!==n){const{b:s,c:l}=(t?Q:K)(n,r);e.a=n,e.b=s,e.c=l}for(let{c:t}=e,n=0;n<t.length;n++){const e=r[n],s=t[n];switch(s.u){case A:s.v=A(s.t,X(s.c,e),s.v);break;case w:const t=e instanceof Y?U(s.c||(s.c=T()),e):(s.c=null,e);t!==s.v&&(s.v=w(s,t));break;default:e!==s.v&&(s.v=s.u(s.t,e,s.n,s.v))}}return e.b},X=(e,t)=>{let n=0,{length:r}=t;for(r<e.length&&e.splice(r);n<r;n++){const r=t[n];r instanceof Y?t[n]=U(e[n]||(e[n]=T()),r):e[n]=null}return t};class Y{constructor(e,t,n){this.s=e,this.t=t,this.v=n}toDOM(e=T()){return U(e,this)}}
+/*! (c) Andrea Giammarchi - MIT */const ee=e=>(t,...n)=>new Y(e,t,n),te=ee(!1),ne=ee(!0),re=new WeakMap;var se=(e,t)=>((e,t)=>{const n=re.get(e)||l(re,e,T()),{b:r}=n,s="function"==typeof t?t():t,i=s instanceof Y?s.toDOM(n):s;return r!==i&&e.replaceChildren((n.b=i).valueOf()),e})(e,t)
+/*! (c) Andrea Giammarchi - MIT */;const le=new WeakMap,ie=e=>(t,n)=>{const r=le.get(t)||l(le,t,new Map);return r.get(n)||l(r,n,function(t,...n){return new Y(e,t,n).toDOM(this)}.bind(T()))},oe=ie(!1),ce=ie(!0);export{Y as Hole,M as attr,te as html,oe as htmlFor,se as render,ne as svg,ce as svgFor};

package/src/primitives/button.js

@@ -0,0 +1,306 @@
+import { css, dimensionWithUnit } from "../common.js";
+import flexChildStyles from "../styles/flexChildStyles.js";
+import buttonMarginStyles from "../styles/buttonMarginStyles.js";
+import anchorStyles from "../styles/anchorStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliButtonElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliButtonElement.styleSheet) {
+      RettangoliButtonElement.styleSheet = new CSSStyleSheet();
+      RettangoliButtonElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        slot {
+          display: contents;
+        }
+
+        button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-lg);
+          border-width: 0px;
+          border-style: solid;
+          border-color: var(--border);
+          padding: 0px;
+          height: 32px;
+          padding-left: 16px;
+          padding-right: 16px;
+          border-radius: 4px;
+
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+
+          background-color: var(--primary);
+          color: var(--primary-foreground);
+        }
+
+        button:hover {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 85%,
+            white 15%
+          );
+        }
+
+        button:disabled {
+          cursor: not-allowed;
+        }
+
+        button:active {
+          cursor: pointer;
+          background-color: color-mix(
+            in srgb,
+            var(--primary) 80%,
+            white 20%
+          );
+        }
+
+        :host([v="pr"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="pr"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--primary) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="se"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="se"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--secondary) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="de"]) button:hover {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 85%,
+              white 15%
+            );
+        }
+
+        :host([v="de"]) button:active {
+          background-color: color-mix(
+              in srgb,
+              var(--destructive) 80%,
+              white 20%
+            );
+        }
+
+        :host([v="ol"]) button:hover {
+          background-color: var(--accent);
+        }
+
+        :host([v="gh"]) button:hover {
+          background-color: var(--accent);
+        }
+
+        :host([v="lk"]) button:hover {
+          text-decoration: underline;
+        }
+
+        /* Square button styles */
+        :host([sq]) button {
+          width: 32px;
+          height: 32px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="sm"]) button {
+          width: 24px;
+          height: 24px;
+          padding: 0;
+          gap: 0;
+        }
+
+        :host([sq][s="lg"]) button {
+          width: 40px;
+          height: 40px;
+          padding: 0;
+          gap: 0;
+        }
+
+        ${anchorStyles}
+        
+        a {
+          display: contents;
+        }
+
+        ${buttonMarginStyles}
+        ${flexChildStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliButtonElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliButtonElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._containerElement = null;
+    this._buttonElement = document.createElement('button');
+    this._slotElement = document.createElement('slot');
+    this._iconElement = null;
+    
+    this._buttonElement.appendChild(this._slotElement);
+  }
+
+  static get observedAttributes() {
+    return ["key", "href", "target", "w", "t", "icon", "disabled", "v", "s", "sq", "ip"];
+  }
+
+  connectedCallback() {
+    this._updateButton();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateButton();
+  }
+
+  _updateButton() {
+    // Clear shadow DOM
+    this.shadow.innerHTML = '';
+    
+    // Update icon
+    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');
+    }
+    
+    // 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;
+    } else {
+      // Direct button
+      this.shadow.appendChild(this._buttonElement);
+      this._containerElement = this._buttonElement;
+    }
+  }
+
+  _updateIcon() {
+    // Remove existing icon if any
+    if (this._iconElement) {
+      this._iconElement.remove();
+      this._iconElement = 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 sizeMap = {
+        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 = sizeMap[this.getAttribute("t")] || 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);
+      }
+    }
+  }
+
+  _updateWidth() {
+    const width = dimensionWithUnit(this.getAttribute("w"));
+    
+    if (width === "f") {
+      this._buttonElement.style.width = "var(--width-stretch)";
+    } else if (width !== undefined && width !== null) {
+      this._buttonElement.style.width = width;
+      this._buttonElement.style.minWidth = width;
+      this._buttonElement.style.maxWidth = width;
+    } else {
+      this._buttonElement.style.width = "";
+      this._buttonElement.style.minWidth = "";
+      this._buttonElement.style.maxWidth = "";
+    }
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliButtonElement;
+};

package/src/primitives/colorPicker.js

@@ -0,0 +1,213 @@
+import { 
+  css, 
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliColorPickerElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliColorPickerElement.styleSheet) {
+      RettangoliColorPickerElement.styleSheet = new CSSStyleSheet();
+      RettangoliColorPickerElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        input[type="color"] {
+          background-color: var(--background);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding: 2px;
+          height: 32px;
+          width: 32px;
+          cursor: pointer;
+          outline: none;
+        }
+        input[type="color"]:focus {
+          border-color: var(--foreground);
+        }
+        input[type="color"]:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliColorPickerElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliColorPickerElement.styleSheet];
+    
+    // Initialize style tracking properties
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+    this._lastStyleString = "";
+    
+    // Create initial DOM structure
+    this._inputElement = document.createElement('input');
+    this._inputElement.type = 'color';
+    this._styleElement = document.createElement('style');
+    
+    this.shadow.appendChild(this._styleElement);
+    this.shadow.appendChild(this._inputElement);
+
+    // Bind event handlers
+    this._inputElement.addEventListener('change', this._onChange);
+    this._inputElement.addEventListener('input', this._onInput);
+  }
+
+  static get observedAttributes() {
+    return [
+      "key", 
+      "value", 
+      "disabled",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hidden",
+        "visible",
+        "op",
+        "z",
+      ])
+    ];
+  }
+
+  get value() {
+    return this._inputElement.value;
+  }
+
+  set value(newValue) {
+    this._inputElement.value = newValue;
+  }
+
+  _onChange = (event) => {
+    this.dispatchEvent(new CustomEvent('colorpicker-change', {
+      detail: {
+        value: this._inputElement.value,
+      },
+    }));
+  };
+
+  _onInput = (event) => {
+    this.dispatchEvent(new CustomEvent('colorpicker-input', {
+      detail: {
+        value: this._inputElement.value,
+      },
+    }));
+  };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle input-specific attributes first
+    if (["value", "disabled"].includes(name)) {
+      this._updateInputAttributes();
+      return;
+    }
+
+    // Reset styles for fresh calculation
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        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;
+      }
+
+      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;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hidden"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("visible"))) {
+        this._styles[size].display = "block !important";
+      }
+    });
+
+    // Update styles only if changed - targeting input element
+    const newStyleString = convertObjectToCssString(this._styles, 'input[type="color"]');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  _updateInputAttributes() {
+    const value = this.getAttribute("value");
+    const isDisabled = this.hasAttribute('disabled');
+
+    if (value !== null) {
+      this._inputElement.value = value;
+    }
+    
+    if (isDisabled) {
+      this._inputElement.setAttribute("disabled", "");
+    } else {
+      this._inputElement.removeAttribute("disabled");
+    }
+  }
+
+  connectedCallback() {
+    this._updateInputAttributes();
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliColorPickerElement;
+};