rettangoli-ui 0.1.0-rc1 → 0.1.0-rc3

package/src/components/sidebar/sidebar.view.yaml

@@ -0,0 +1,186 @@
+elementName: rtgl-sidebar
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    mode:
+      type: string
+      enum: ['full', 'shrunk', 'shrunk-lg']
+      default: 'full'
+    sidebarWidth:
+      type: number
+    headerAlign:
+      type: string
+    itemAlign:
+      type: string
+    headerPadding:
+      type: string
+    itemPadding:
+      type: string
+    itemHeight:
+      type: number
+    iconSize:
+      type: number
+    firstLetterSize:
+      type: string
+    showLabels:
+      type: boolean
+    showGroupLabels:
+      type: boolean
+    itemContentAlign:
+      type: string
+    itemAlignAttr:
+      type: string
+    itemWidth:
+      type: string
+    headerWidth:
+      type: string
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          active:
+            type: boolean
+          icon:
+            type: string
+
+propsSchema:
+  type: object
+  properties:
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          items:
+            type: array
+
+refs:
+  header-image:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header-label:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  item-*:
+    eventListeners:
+      click:
+        handler: handleItemClick
+
+events:
+  headerClick:
+    type: object
+    properties:
+      path:
+        type: string
+
+anchors:
+  - &headerContent
+    - $if header.image && header.image.src:
+      - $if header.image.href:
+          - a href=${header.image.href}:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $elif header.image.path:
+          - rtgl-view#header-image cur=p:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $else:
+          - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+    - $if header.label && showLabels:
+      - $if header.labelHref:
+          - rtgl-text href=${header.labelHref} s=lg: "${header.label}"
+        $elif header.labelPath:
+          - rtgl-view#header-label cur=p:
+            - rtgl-text s=lg: "${header.label}"
+        $else:
+          - rtgl-text s=lg: "${header.label}"
+
+template:
+  - rtgl-view h=f w=${sidebarWidth} bwr=xs ${containerAttrString}:
+    - rtgl-view ph=${headerPadding} pv=lg:
+      - $if header.href:
+          - rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
+            - *headerContent
+        $else:
+            - rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=p:
+              - *headerContent
+
+    - rtgl-view w=f ph=${headerPadding} pb=lg g=xs:
+      - $for item, i in items:
+        - $if item.type == "groupLabel":
+            - $if showGroupLabels:
+                - rtgl-view mt=md h=32 av=c ph=md:
+                  - rtgl-text s=xs c=mu-fg: "${item.title}"
+              $else:
+                - rtgl-view mt=md h=1 bgc=mu-bg:
+          $else:
+            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=mu br=lg bgc=bg cur=p title="${item.title}":
+              - $if item.icon:
+                  - $if showLabels:
+                      - rtgl-view d=h ah=${itemContentAlign} g=sm:
+                        - rtgl-svg wh=16 svg=${item.icon} c=fg:
+                        - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg:
+                $else:
+                  - $if showLabels:
+                      - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-view wh=${iconSize} br=f bgc=mu av=c ah=c:
+                        - rtgl-text s=${firstLetterSize} c=fg: "${item.title.charAt(0).toUpperCase()}"

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,18 @@
+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({}));
+
+// 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,263 @@
+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-sm);
+          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;
+        }
+
+        ${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"];
+  }
+
+  connectedCallback() {
+    this._updateButton();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateButton();
+  }
+
+  _updateButton() {
+    // Clear shadow DOM
+    this.shadow.innerHTML = '';
+    
+    // Update icon
+    this._updateIcon();
+    
+    // Update width styling
+    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';
+      const 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 before slot
+      this._buttonElement.insertBefore(this._iconElement, this._slotElement);
+    }
+  }
+
+  _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;
+};