@rettangoli/ui 1.0.1 → 1.0.2

package/dist/rettangoli-iife-ui.min.js

@@ -940,7 +940,7 @@ var rettangoli=(()=>{var fa=Object.defineProperty;var N=(e,t)=>{for(var r in t)f
         }
         ${z}
         ${j}
-      `))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="checkbox",this._wrapperElement=document.createElement("label"),this._wrapperElement.className="checkbox-wrapper",this._labelElement=document.createElement("span"),this._labelElement.className="checkbox-label",this._labelSlotElement=document.createElement("slot"),this._labelSlotElement.addEventListener("slotchange",()=>{this._updateLabelState()}),this._labelElement.appendChild(this._labelSlotElement),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this._wrapperElement.appendChild(this._inputElement),this._wrapperElement.appendChild(this._labelElement),this.shadow.appendChild(this._wrapperElement),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","checked","disabled","label",...J([...ue,"wh","w","h","hide","show","op","z"])]}get checked(){return this._inputElement.checked}set checked(t){this._inputElement.checked=!!t}get value(){return this._inputElement.checked}set value(t){this._inputElement.checked=!!t}_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._inputElement.checked},bubbles:!0}))};attributeChangedCallback(t,r,s){if(t==="key"&&r!==s){requestAnimationFrame(()=>{let n=this.hasAttribute("checked");this._inputElement.checked=n});return}if(t==="checked"){this._inputElement.checked=s!==null;return}if(t==="disabled"){s!==null?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled");return}if(t==="label"){this._updateLabelState();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(n=>{let a=d=>`${n==="default"?"":`${n}-`}${d}`,l=this.getAttribute(a("wh")),p=V(l===null?this.getAttribute(a("w")):l),o=V(l===null?this.getAttribute(a("h")):l),u=this.getAttribute(a("op")),c=this.getAttribute(a("z"));c!==null&&(this._styles[n]["z-index"]=c),u!==null&&(this._styles[n].opacity=u),p==="f"?this._styles[n].width="var(--width-stretch)":p!==void 0&&(this._styles[n].width=p,this._styles[n]["min-width"]=p,this._styles[n]["max-width"]=p),o==="f"?this._styles[n].height="100%":o!==void 0&&(this._styles[n].height=o,this._styles[n]["min-height"]=o,this._styles[n]["max-height"]=o),this.hasAttribute(a("hide"))&&(this._styles[n].display="none"),this.hasAttribute(a("show"))&&(this._styles[n].display="block")});let i=X(this._styles,'input[type="checkbox"]');i!==this._lastStyleString&&(this._styleElement.textContent=i,this._lastStyleString=i)}connectedCallback(){let t=this.hasAttribute("checked");this._inputElement.checked=t,this.hasAttribute("disabled")&&this._inputElement.setAttribute("disabled",""),this._updateLabelState()}_updateLabelState(){let t=this.getAttribute("label");this._labelSlotElement.textContent=t??"";let s=this._labelSlotElement.assignedNodes({flatten:!0}).some(n=>n.nodeType===Node.TEXT_NODE?n.textContent.trim().length>0:n.nodeType===Node.ELEMENT_NODE),i=typeof t=="string"&&t.trim().length>0;s||i?this.setAttribute("has-label",""):this.removeAttribute("has-label")}},Os=({render:e,html:t})=>qt;var Jt=40,Ba=6,Yt=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(T`
+      `))}constructor(){super(),this._isSyncingLabelState=!1,e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._styles={default:{},sm:{},md:{},lg:{},xl:{}},this._lastStyleString="",this._inputElement=document.createElement("input"),this._inputElement.type="checkbox",this._wrapperElement=document.createElement("label"),this._wrapperElement.className="checkbox-wrapper",this._labelElement=document.createElement("span"),this._labelElement.className="checkbox-label",this._labelSlotElement=document.createElement("slot"),this._labelSlotElement.addEventListener("slotchange",()=>{this._updateLabelState()}),this._labelElement.appendChild(this._labelSlotElement),this._styleElement=document.createElement("style"),this.shadow.appendChild(this._styleElement),this._wrapperElement.appendChild(this._inputElement),this._wrapperElement.appendChild(this._labelElement),this.shadow.appendChild(this._wrapperElement),this._inputElement.addEventListener("change",this._onChange)}static get observedAttributes(){return["key","checked","disabled","label",...J([...ue,"wh","w","h","hide","show","op","z"])]}get checked(){return this._inputElement.checked}set checked(t){this._inputElement.checked=!!t}get value(){return this._inputElement.checked}set value(t){this._inputElement.checked=!!t}_onChange=()=>{this.dispatchEvent(new CustomEvent("value-change",{detail:{value:this._inputElement.checked},bubbles:!0}))};attributeChangedCallback(t,r,s){if(t==="key"&&r!==s){requestAnimationFrame(()=>{let n=this.hasAttribute("checked");this._inputElement.checked=n});return}if(t==="checked"){this._inputElement.checked=s!==null;return}if(t==="disabled"){s!==null?this._inputElement.setAttribute("disabled",""):this._inputElement.removeAttribute("disabled");return}if(t==="label"){this._updateLabelState();return}this._styles={default:{},sm:{},md:{},lg:{},xl:{}},["default","sm","md","lg","xl"].forEach(n=>{let a=d=>`${n==="default"?"":`${n}-`}${d}`,l=this.getAttribute(a("wh")),p=V(l===null?this.getAttribute(a("w")):l),o=V(l===null?this.getAttribute(a("h")):l),u=this.getAttribute(a("op")),c=this.getAttribute(a("z"));c!==null&&(this._styles[n]["z-index"]=c),u!==null&&(this._styles[n].opacity=u),p==="f"?this._styles[n].width="var(--width-stretch)":p!==void 0&&(this._styles[n].width=p,this._styles[n]["min-width"]=p,this._styles[n]["max-width"]=p),o==="f"?this._styles[n].height="100%":o!==void 0&&(this._styles[n].height=o,this._styles[n]["min-height"]=o,this._styles[n]["max-height"]=o),this.hasAttribute(a("hide"))&&(this._styles[n].display="none"),this.hasAttribute(a("show"))&&(this._styles[n].display="block")});let i=X(this._styles,'input[type="checkbox"]');i!==this._lastStyleString&&(this._styleElement.textContent=i,this._lastStyleString=i)}connectedCallback(){let t=this.hasAttribute("checked");this._inputElement.checked=t,this.hasAttribute("disabled")&&this._inputElement.setAttribute("disabled",""),this._updateLabelState()}_updateLabelState(){if(!this._isSyncingLabelState){this._isSyncingLabelState=!0;try{let t=this.getAttribute("label"),r=t??"";this._labelSlotElement.textContent!==r&&(this._labelSlotElement.textContent=r);let i=this._labelSlotElement.assignedNodes({flatten:!0}).some(l=>l.nodeType===Node.TEXT_NODE?l.textContent.trim().length>0:l.nodeType===Node.ELEMENT_NODE),n=typeof t=="string"&&t.trim().length>0,a=i||n;a&&!this.hasAttribute("has-label")?this.setAttribute("has-label",""):!a&&this.hasAttribute("has-label")&&this.removeAttribute("has-label")}finally{this._isSyncingLabelState=!1}}}},Os=({render:e,html:t})=>qt;var Jt=40,Ba=6,Yt=class e extends HTMLElement{static styleSheet=null;static initializeStyleSheet(){e.styleSheet||(e.styleSheet=new CSSStyleSheet,e.styleSheet.replaceSync(T`
         :host {
           display: contents;
         }

package/package.json

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

package/src/primitives/checkbox.js

@@ -89,6 +89,7 @@ class RettangoliCheckboxElement extends HTMLElement {
 
   constructor() {
     super();
+    this._isSyncingLabelState = false;
     RettangoliCheckboxElement.initializeStyleSheet();
     this.shadow = this.attachShadow({ mode: "open" });
     this.shadow.adoptedStyleSheets = [RettangoliCheckboxElement.styleSheet];
@@ -270,22 +271,33 @@ class RettangoliCheckboxElement extends HTMLElement {
   }
 
   _updateLabelState() {
-    const fallbackLabel = this.getAttribute("label");
-    this._labelSlotElement.textContent = fallbackLabel ?? "";
-
-    const assignedNodes = this._labelSlotElement.assignedNodes({ flatten: true });
-    const hasAssignedLabel = assignedNodes.some((node) => {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent.trim().length > 0;
+    if (this._isSyncingLabelState) return;
+    this._isSyncingLabelState = true;
+    try {
+      const fallbackLabel = this.getAttribute("label");
+      const fallbackText = fallbackLabel ?? "";
+      if (this._labelSlotElement.textContent !== fallbackText) {
+        this._labelSlotElement.textContent = fallbackText;
       }
-      return node.nodeType === Node.ELEMENT_NODE;
-    });
-    const hasFallbackLabel = typeof fallbackLabel === "string" && fallbackLabel.trim().length > 0;
 
-    if (hasAssignedLabel || hasFallbackLabel) {
-      this.setAttribute("has-label", "");
-    } else {
-      this.removeAttribute("has-label");
+      const assignedNodes = this._labelSlotElement.assignedNodes({ flatten: true });
+      const hasAssignedLabel = assignedNodes.some((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          return node.textContent.trim().length > 0;
+        }
+        return node.nodeType === Node.ELEMENT_NODE;
+      });
+      const hasFallbackLabel =
+        typeof fallbackLabel === "string" && fallbackLabel.trim().length > 0;
+
+      const shouldHaveLabel = hasAssignedLabel || hasFallbackLabel;
+      if (shouldHaveLabel && !this.hasAttribute("has-label")) {
+        this.setAttribute("has-label", "");
+      } else if (!shouldHaveLabel && this.hasAttribute("has-label")) {
+        this.removeAttribute("has-label");
+      }
+    } finally {
+      this._isSyncingLabelState = false;
     }
   }
 }