@lukso/web-components 1.0.1 → 1.0.5

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./lukso-button-ab7e2769.cjs");const e=require("./lukso-test.cjs");require("./directive-619b88dd.cjs");Object.defineProperty(exports,"LuksoTest",{enumerable:!0,get:()=>e.LuksoTest});

package/dist/index.js

@@ -0,0 +1,6 @@
+import "./lukso-button-4b795065.js";
+import { LuksoTest as p } from "./lukso-test.js";
+import "./directive-76d5504a.js";
+export {
+  p as LuksoTest
+};

package/dist/lukso-button-4b795065.js

@@ -0,0 +1,57 @@
+import { e as u, i as b, t as p, a as d, b as h, T as y, y as c } from "./directive-76d5504a.js";
+class v extends b {
+  constructor(e) {
+    var t;
+    if (super(e), e.type !== p.ATTRIBUTE || e.name !== "class" || ((t = e.strings) == null ? void 0 : t.length) > 2)
+      throw new Error(
+        "`customClassMap()` can only be used in the `class` attribute and must be the only part in the attribute."
+      );
+  }
+  render(e) {
+    return " " + Object.keys(e).filter((t) => e[t]).join(" ") + " ";
+  }
+}
+const m = u(v);
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (l, e, t, s) => {
+  for (var r = s > 1 ? void 0 : s ? f(e, t) : e, n = l.length - 1, i; n >= 0; n--)
+    (i = l[n]) && (r = (s ? i(e, t, r) : i(r)) || r);
+  return s && r && g(e, t, r), r;
+};
+let a = class extends y {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.disabled = !1, this.defaultStyles = `flex justify-center items-center relative gap-2 py-3 px-6 rounded-xl
+    border border-solid cursor-pointer paragraph-16-semi-bold`, this.secondaryStyles = `bg-neutral-100 border-neutral-90 text-neutral-20 disabled:bg-neutral-90
+    disabled:border-neutral-90 disabled:text-neutral-100 hover:shadow-button-hover-secondary`, this.primaryStyles = `bg-neutral-20 border-neutral-20 text-neutral-100
+    disabled:bg-neutral-90
+    disabled:border-neutral-90
+    hover:shadow-button-hover-primary
+  `, this.landingStyles = `bg-purple-51 border-purple-51 text-neutral-100
+    disabled:bg-neutral-90 disabled:border-neutral-90
+    hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58`;
+  }
+  render() {
+    return c`
+      <button
+        data-testid="button"
+        ?disabled=${this.disabled}
+        class=${m({
+      [this.defaultStyles]: !0,
+      [this.primaryStyles]: this.variant === "primary",
+      [this.secondaryStyles]: this.variant === "secondary",
+      [this.landingStyles]: this.variant === "landing"
+    })}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+o([
+  d({ type: String })
+], a.prototype, "variant", 2);
+o([
+  d({ type: Boolean })
+], a.prototype, "disabled", 2);
+a = o([
+  h("lukso-button")
+], a);

package/dist/lukso-button-ab7e2769.cjs

@@ -0,0 +1,17 @@
+"use strict";const r=require("./directive-619b88dd.cjs");class u extends r.i{constructor(e){var t;if(super(e),e.type!==r.t.ATTRIBUTE||e.name!=="class"||((t=e.strings)==null?void 0:t.length)>2)throw new Error("`customClassMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}}const b=r.e(u);var p=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(n,e,t,a)=>{for(var s=a>1?void 0:a?h(e,t):e,i=n.length-1,o;i>=0;i--)(o=n[i])&&(s=(a?o(e,t,s):o(s))||s);return a&&s&&p(e,t,s),s};let l=class extends r.TailwindElement{constructor(){super(...arguments),this.variant="primary",this.disabled=!1,this.defaultStyles=`flex justify-center items-center relative gap-2 py-3 px-6 rounded-xl
+    border border-solid cursor-pointer paragraph-16-semi-bold`,this.secondaryStyles=`bg-neutral-100 border-neutral-90 text-neutral-20 disabled:bg-neutral-90
+    disabled:border-neutral-90 disabled:text-neutral-100 hover:shadow-button-hover-secondary`,this.primaryStyles=`bg-neutral-20 border-neutral-20 text-neutral-100
+    disabled:bg-neutral-90
+    disabled:border-neutral-90
+    hover:shadow-button-hover-primary
+  `,this.landingStyles=`bg-purple-51 border-purple-51 text-neutral-100
+    disabled:bg-neutral-90 disabled:border-neutral-90
+    hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58`}render(){return r.y`
+      <button
+        data-testid="button"
+        ?disabled=${this.disabled}
+        class=${b({[this.defaultStyles]:!0,[this.primaryStyles]:this.variant==="primary",[this.secondaryStyles]:this.variant==="secondary",[this.landingStyles]:this.variant==="landing"})}
+      >
+        <slot></slot>
+      </button>
+    `}};d([r.e$1({type:String})],l.prototype,"variant",2);d([r.e$1({type:Boolean})],l.prototype,"disabled",2);l=d([r.e$2("lukso-button")],l);

package/dist/lukso-button.cjs

@@ -0,0 +1 @@
+"use strict";require("./lukso-button-ab7e2769.cjs");require("./directive-619b88dd.cjs");

package/dist/lukso-button.js

@@ -0,0 +1,2 @@
+import "./lukso-button-4b795065.js";
+import "./directive-76d5504a.js";

package/dist/lukso-test.cjs

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("./directive-619b88dd.cjs");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var I;const O=window,g=O.trustedTypes,R=g?g.createPolicy("lit-html",{createHTML:o=>o}):void 0,m=`lit$${(Math.random()+"").slice(9)}$`,Z="?"+m,st=`<${Z}>`,_=document,k=(o="")=>_.createComment(o),C=o=>o===null||typeof o!="object"&&typeof o!="function",G=Array.isArray,nt=o=>G(o)||typeof(o==null?void 0:o[Symbol.iterator])=="function",b=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,D=/-->/g,j=/>/g,A=RegExp(`>|[ 	
+\f\r](?:([^\\s"'>=/]+)([ 	
+\f\r]*=[ 	
+\f\r]*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),B=/'/g,F=/"/g,J=/^(?:script|style|textarea|title)$/i,x=Symbol.for("lit-noChange"),u=Symbol.for("lit-nothing"),z=new WeakMap,f=_.createTreeWalker(_,129,null,!1),ot=(o,t)=>{const e=o.length-1,i=[];let s,n=t===2?"<svg>":"",r=b;for(let l=0;l<e;l++){const h=o[l];let p,a,c=-1,v=0;for(;v<h.length&&(r.lastIndex=v,a=r.exec(h),a!==null);)v=r.lastIndex,r===b?a[1]==="!--"?r=D:a[1]!==void 0?r=j:a[2]!==void 0?(J.test(a[2])&&(s=RegExp("</"+a[2],"g")),r=A):a[3]!==void 0&&(r=A):r===A?a[0]===">"?(r=s??b,c=-1):a[1]===void 0?c=-2:(c=r.lastIndex-a[2].length,p=a[1],r=a[3]===void 0?A:a[3]==='"'?F:B):r===F||r===B?r=A:r===D||r===j?r=b:(r=A,s=void 0);const H=r===A&&o[l+1].startsWith("/>")?" ":"";n+=r===b?h+st:c>=0?(i.push(p),h.slice(0,c)+"$lit$"+h.slice(c)+m+H):h+m+(c===-2?(i.push(void 0),l):H)}const d=n+(o[e]||"<?>")+(t===2?"</svg>":"");if(!Array.isArray(o)||!o.hasOwnProperty("raw"))throw Error("invalid template strings array");return[R!==void 0?R.createHTML(d):d,i]};class T{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,r=0;const d=t.length-1,l=this.parts,[h,p]=ot(t,e);if(this.el=T.createElement(h,i),f.currentNode=this.el.content,e===2){const a=this.el.content,c=a.firstChild;c.remove(),a.append(...c.childNodes)}for(;(s=f.nextNode())!==null&&l.length<d;){if(s.nodeType===1){if(s.hasAttributes()){const a=[];for(const c of s.getAttributeNames())if(c.endsWith("$lit$")||c.startsWith(m)){const v=p[r++];if(a.push(c),v!==void 0){const H=s.getAttribute(v.toLowerCase()+"$lit$").split(m),N=/([.?@])?(.*)/.exec(v);l.push({type:1,index:n,name:N[2],strings:H,ctor:N[1]==="."?lt:N[1]==="?"?at:N[1]==="@"?dt:P})}else l.push({type:6,index:n})}for(const c of a)s.removeAttribute(c)}if(J.test(s.tagName)){const a=s.textContent.split(m),c=a.length-1;if(c>0){s.textContent=g?g.emptyScript:"";for(let v=0;v<c;v++)s.append(a[v],k()),f.nextNode(),l.push({type:2,index:++n});s.append(a[c],k())}}}else if(s.nodeType===8)if(s.data===Z)l.push({type:2,index:n});else{let a=-1;for(;(a=s.data.indexOf(m,a+1))!==-1;)l.push({type:7,index:n}),a+=m.length-1}n++}}static createElement(t,e){const i=_.createElement("template");return i.innerHTML=t,i}}function y(o,t,e=o,i){var s,n,r,d;if(t===x)return t;let l=i!==void 0?(s=e._$Co)===null||s===void 0?void 0:s[i]:e._$Cl;const h=C(t)?void 0:t._$litDirective$;return(l==null?void 0:l.constructor)!==h&&((n=l==null?void 0:l._$AO)===null||n===void 0||n.call(l,!1),h===void 0?l=void 0:(l=new h(o),l._$AT(o,e,i)),i!==void 0?((r=(d=e)._$Co)!==null&&r!==void 0?r:d._$Co=[])[i]=l:e._$Cl=l),l!==void 0&&(t=y(o,l._$AS(o,t.values),l,i)),t}class rt{constructor(t,e){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var e;const{el:{content:i},parts:s}=this._$AD,n=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:_).importNode(i,!0);f.currentNode=n;let r=f.nextNode(),d=0,l=0,h=s[0];for(;h!==void 0;){if(d===h.index){let p;h.type===2?p=new E(r,r.nextSibling,this,t):h.type===1?p=new h.ctor(r,h.name,h.strings,this,t):h.type===6&&(p=new ct(r,this,t)),this.u.push(p),h=s[++l]}d!==(h==null?void 0:h.index)&&(r=f.nextNode(),d++)}return n}p(t){let e=0;for(const i of this.u)i!==void 0&&(i.strings!==void 0?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class E{constructor(t,e,i,s){var n;this.type=2,this._$AH=u,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cm=(n=s==null?void 0:s.isConnected)===null||n===void 0||n}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=y(this,t,e),C(t)?t===u||t==null||t===""?(this._$AH!==u&&this._$AR(),this._$AH=u):t!==this._$AH&&t!==x&&this.g(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):nt(t)?this.k(t):this.g(t)}O(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}g(t){this._$AH!==u&&C(this._$AH)?this._$AA.nextSibling.data=t:this.T(_.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:s}=t,n=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=T.createElement(s.h,this.options)),s);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===n)this._$AH.p(i);else{const r=new rt(n,this),d=r.v(this.options);r.p(i),this.T(d),this._$AH=r}}_$AC(t){let e=z.get(t.strings);return e===void 0&&z.set(t.strings,e=new T(t)),e}k(t){G(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new E(this.O(k()),this.O(k()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for((i=this._$AP)===null||i===void 0||i.call(this,!1,!0,e);t&&t!==this._$AB;){const s=t.nextSibling;t.remove(),t=s}}setConnected(t){var e;this._$AM===void 0&&(this._$Cm=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}}let P=class{constructor(t,e,i,s,n){this.type=1,this._$AH=u,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||i[0]!==""||i[1]!==""?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=u}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const n=this.strings;let r=!1;if(n===void 0)t=y(this,t,e,0),r=!C(t)||t!==this._$AH&&t!==x,r&&(this._$AH=t);else{const d=t;let l,h;for(t=n[0],l=0;l<n.length-1;l++)h=y(this,d[i+l],e,l),h===x&&(h=this._$AH[l]),r||(r=!C(h)||h!==this._$AH[l]),h===u?t=u:t!==u&&(t+=(h??"")+n[l+1]),this._$AH[l]=h}r&&!s&&this.j(t)}j(t){t===u?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}};class lt extends P{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===u?void 0:t}}const ht=g?g.emptyScript:"";class at extends P{constructor(){super(...arguments),this.type=4}j(t){t&&t!==u?this.element.setAttribute(this.name,ht):this.element.removeAttribute(this.name)}}class dt extends P{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){var i;if((t=(i=y(this,t,e,0))!==null&&i!==void 0?i:u)===x)return;const s=this._$AH,n=t===u&&s!==u||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==u&&(s===u||n);n&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;typeof this._$AH=="function"?this._$AH.call((i=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&i!==void 0?i:this.element,t):this._$AH.handleEvent(t)}}class ct{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){y(this,t)}}const W=O.litHtmlPolyfillSupport;W==null||W(T,E),((I=O.litHtmlVersions)!==null&&I!==void 0?I:O.litHtmlVersions=[]).push("2.5.0");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const tt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},ut=o=>(...t)=>({_$litDirective$:o,values:t});let pt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const vt=o=>o.strings===void 0;/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const w=(o,t)=>{var e,i;const s=o._$AN;if(s===void 0)return!1;for(const n of s)(i=(e=n)._$AO)===null||i===void 0||i.call(e,t,!1),w(n,t);return!0},S=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},et=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),At(t)}};function $t(o){this._$AN!==void 0?(S(this),this._$AM=o,et(this)):this._$AM=o}function mt(o,t=!1,e=0){const i=this._$AH,s=this._$AN;if(s!==void 0&&s.size!==0)if(t)if(Array.isArray(i))for(let n=e;n<i.length;n++)w(i[n],!1),S(i[n]);else i!=null&&(w(i,!1),S(i));else w(this,o)}const At=o=>{var t,e,i,s;o.type==tt.CHILD&&((t=(i=o)._$AP)!==null&&t!==void 0||(i._$AP=mt),(e=(s=o)._$AQ)!==null&&e!==void 0||(s._$AQ=$t))};class ft extends pt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,i){super._$AT(t,e,i),et(this),this.isConnected=t._$AU}_$AO(t,e=!0){var i,s;t!==this.isConnected&&(this.isConnected=t,t?(i=this.reconnected)===null||i===void 0||i.call(this):(s=this.disconnected)===null||s===void 0||s.call(this)),e&&(w(this,t),S(this))}setValue(t){if(vt(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}const it=new WeakMap;class gt{constructor(t,e){this.startPaused=!1,this.disabled=!1,this.clients=new Set,this.pendingComplete=!1,this.host=t,this.defaultOptions=e.defaultOptions||{},this.startPaused=!!e.startPaused,this.disabled=!!e.disabled,this.onComplete=e.onComplete,it.set(this.host,this)}async add(t){var e,i;this.clients.add(t),this.startPaused&&((e=t.webAnimation)===null||e===void 0||e.pause()),this.pendingComplete=!0,await t.finished,this.pendingComplete&&!this.isAnimating&&(this.pendingComplete=!1,(i=this.onComplete)===null||i===void 0||i.call(this))}remove(t){this.clients.delete(t)}pause(){this.clients.forEach(t=>{var e;return(e=t.webAnimation)===null||e===void 0?void 0:e.pause()})}play(){this.clients.forEach(t=>{var e;return(e=t.webAnimation)===null||e===void 0?void 0:e.play()})}cancel(){this.clients.forEach(t=>{var e;return(e=t.webAnimation)===null||e===void 0?void 0:e.cancel()}),this.clients.clear()}finish(){this.clients.forEach(t=>{var e;return(e=t.webAnimation)===null||e===void 0?void 0:e.finish()}),this.clients.clear()}togglePlay(){this.isPlaying?this.pause():this.play()}get isAnimating(){return this.clients.size>0}get isPlaying(){return Array.from(this.clients).some(t=>{var e;return((e=t.webAnimation)===null||e===void 0?void 0:e.playState)==="running"})}async finished(){await Promise.all(Array.from(this.clients).map(t=>t.finished))}}let V=0;const L=new Map,K=new WeakSet,Y=()=>new Promise(o=>requestAnimationFrame(o)),q=(o,t)=>{const e=o-t;return e===0?void 0:e},Q=(o,t)=>{const e=o/t;return e===1?void 0:e},U={left:(o,t)=>{const e=q(o,t);return{value:e,transform:e&&`translateX(${e}px)`}},top:(o,t)=>{const e=q(o,t);return{value:e,transform:e&&`translateY(${e}px)`}},width:(o,t)=>{const e=Q(o,t);return{value:e,transform:e&&`scaleX(${e})`}},height:(o,t)=>{const e=Q(o,t);return{value:e,transform:e&&`scaleY(${e})`}}},_t={duration:333,easing:"ease-in-out"},yt=["left","top","width","height","opacity","color","background"],X=new WeakMap;class bt extends ft{constructor(t){if(super(t),this.t=null,this.i=null,this.o=!0,this.shouldLog=!1,t.type===tt.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){var t;(t=this.resolveFinished)===null||t===void 0||t.call(this),this.finished=new Promise(e=>{this.h=e})}async resolveFinished(){var t;(t=this.h)===null||t===void 0||t.call(this),this.h=void 0}render(t){return u}getController(){return it.get(this.l)}isDisabled(){var t;return this.options.disabled||((t=this.getController())===null||t===void 0?void 0:t.disabled)}update(t,[e]){var i;const s=this.l===void 0;return s&&(this.l=(i=t.options)===null||i===void 0?void 0:i.host,this.l.addController(this),this.element=t.element,X.set(this.element,this)),this.optionsOrCallback=e,(s||typeof e!="function")&&this.u(e),this.render(e)}u(t){var e,i;t=t??{};const s=this.getController();s!==void 0&&((t={...s.defaultOptions,...t}).keyframeOptions={...s.defaultOptions.keyframeOptions,...t.keyframeOptions}),(e=(i=t).properties)!==null&&e!==void 0||(i.properties=yt),this.options=t}v(){const t={},e=this.element.getBoundingClientRect(),i=getComputedStyle(this.element);return this.options.properties.forEach(s=>{var n;const r=(n=e[s])!==null&&n!==void 0?n:U[s]?void 0:i[s],d=Number(r);t[s]=isNaN(d)?r+"":d}),t}p(){let t,e=!0;return this.options.guard&&(t=this.options.guard(),e=((i,s)=>{if(Array.isArray(i)){if(Array.isArray(s)&&s.length===i.length&&i.every((n,r)=>n===s[r]))return!1}else if(s===i)return!1;return!0})(t,this.m)),this.o=this.l.hasUpdated&&!this.isDisabled()&&!this.isAnimating()&&e&&this.element.isConnected,this.o&&(this.m=Array.isArray(t)?Array.from(t):t),this.o}hostUpdate(){var t;typeof this.optionsOrCallback=="function"&&this.u(this.optionsOrCallback()),this.p()&&(this.g=this.v(),this.t=(t=this.t)!==null&&t!==void 0?t:this.element.parentNode,this.i=this.element.nextSibling)}async hostUpdated(){if(!this.o||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await Y;const e=this._(),i=this.A(this.options.keyframeOptions,e),s=this.v();if(this.g!==void 0){const{from:n,to:r}=this.O(this.g,s,e);this.log("measured",[this.g,s,n,r]),t=this.calculateKeyframes(n,r)}else{const n=L.get(this.options.inId);if(n){L.delete(this.options.inId);const{from:r,to:d}=this.O(n,s,e);t=this.calculateKeyframes(r,d),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,V++,t.forEach(l=>l.zIndex=V)}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,i)}resetStyles(){var t;this.P!==void 0&&(this.element.setAttribute("style",(t=this.P)!==null&&t!==void 0?t:""),this.P=void 0)}commitStyles(){var t,e;this.P=this.element.getAttribute("style"),(t=this.webAnimation)===null||t===void 0||t.commitStyles(),(e=this.webAnimation)===null||e===void 0||e.cancel()}reconnected(){}async disconnected(){var t;if(!this.o||(this.options.id!==void 0&&L.set(this.options.id,this.g),this.options.out===void 0))return;if(this.prepare(),await Y(),(t=this.t)===null||t===void 0?void 0:t.isConnected){const i=this.i&&this.i.parentNode===this.t?this.i:null;if(this.t.insertBefore(this.element,i),this.options.stabilizeOut){const s=this.v();this.log("stabilizing out");const n=this.g.left-s.left,r=this.g.top-s.top;getComputedStyle(this.element).position!=="static"||n===0&&r===0||(this.element.style.position="relative"),n!==0&&(this.element.style.left=n+"px"),r!==0&&(this.element.style.top=r+"px")}}const e=this.A(this.options.keyframeOptions);await this.animate(this.options.out,e),this.element.remove()}prepare(){this.createFinished()}start(){var t,e;(e=(t=this.options).onStart)===null||e===void 0||e.call(t,this)}didFinish(t){var e,i;t&&((i=(e=this.options).onComplete)===null||i===void 0||i.call(e,this)),this.g=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}_(){const t=[];for(let e=this.element.parentNode;e;e=e==null?void 0:e.parentNode){const i=X.get(e);i&&!i.isDisabled()&&i&&t.push(i)}return t}get isHostRendered(){const t=K.has(this.l);return t||this.l.updateComplete.then(()=>{K.add(this.l)}),t}A(t,e=this._()){const i={..._t};return e.forEach(s=>Object.assign(i,s.options.keyframeOptions)),Object.assign(i,t),i}O(t,e,i){t={...t},e={...e};const s=i.map(d=>d.animatingProperties).filter(d=>d!==void 0);let n=1,r=1;return s!==void 0&&(s.forEach(d=>{d.width&&(n/=d.width),d.height&&(r/=d.height)}),t.left!==void 0&&e.left!==void 0&&(t.left=n*t.left,e.left=n*e.left),t.top!==void 0&&e.top!==void 0&&(t.top=r*t.top,e.top=r*e.top)),{from:t,to:e}}calculateKeyframes(t,e,i=!1){var s;const n={},r={};let d=!1;const l={};for(const h in e){const p=t[h],a=e[h];if(h in U){const c=U[h];if(p===void 0||a===void 0)continue;const v=c(p,a);v.transform!==void 0&&(l[h]=v.value,d=!0,n.transform=`${(s=n.transform)!==null&&s!==void 0?s:""} ${v.transform}`)}else p!==a&&p!==void 0&&a!==void 0&&(d=!0,n[h]=p,r[h]=a)}return n.transformOrigin=r.transformOrigin=i?"center center":"top left",this.animatingProperties=l,d?[n,r]:void 0}async animate(t,e=this.options.keyframeOptions){this.start(),this.frames=t;let i=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),t!==void 0)){this.log("animate",[t,e]),i=!0,this.webAnimation=this.element.animate(t,e);const s=this.getController();s==null||s.add(this);try{await this.webAnimation.finished}catch{}s==null||s.remove(this)}return this.didFinish(i),i}isAnimating(){var t,e;return((t=this.webAnimation)===null||t===void 0?void 0:t.playState)==="running"||((e=this.webAnimation)===null||e===void 0?void 0:e.pending)}log(t,e){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,e)}}const wt=ut(bt);/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Ct=$.e(class extends $.i{constructor(o){var t;if(super(o),o.type!==$.t.ATTRIBUTE||o.name!=="class"||((t=o.strings)===null||t===void 0?void 0:t.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(o){return" "+Object.keys(o).filter(t=>o[t]).join(" ")+" "}update(o,[t]){var e,i;if(this.nt===void 0){this.nt=new Set,o.strings!==void 0&&(this.st=new Set(o.strings.join(" ").split(/\s/).filter(n=>n!=="")));for(const n in t)t[n]&&!(!((e=this.st)===null||e===void 0)&&e.has(n))&&this.nt.add(n);return this.render(t)}const s=o.element.classList;this.nt.forEach(n=>{n in t||(s.remove(n),this.nt.delete(n))});for(const n in t){const r=!!t[n];r===this.nt.has(n)||!((i=this.st)===null||i===void 0)&&i.has(n)||(r?(s.add(n),this.nt.add(n)):(s.remove(n),this.nt.delete(n)))}return $.x}}),xt=`p{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity))}p b{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity))}
+`;var Tt=Object.defineProperty,Ht=Object.getOwnPropertyDescriptor,M=(o,t,e,i)=>{for(var s=i>1?void 0:i?Ht(t,e):t,n=o.length-1,r;n>=0;n--)(r=o[n])&&(s=(i?r(t,e,s):r(s))||s);return i&&s&&Tt(t,e,s),s};exports.LuksoTest=class extends $.TailwindStyledElement(xt){constructor(){super(...arguments),this.name="World",this.clicked=!1,this.disabled=!1,this.duration=1e3,this.controller=new gt(this,{defaultOptions:{keyframeOptions:{duration:this.duration,fill:"backwards"}}})}_onClick(){this.disabled||(this.clicked=!0,setTimeout(()=>{this.clicked=!1},2e3))}render(){const t={"text-yellow-200":!this.disabled,"p-2":!0,"rounded-full":!0,"text-24":!0,"bg-blue-800":this.clicked&&!this.disabled,"bg-blue-200":!this.clicked&&!this.disabled};return $.y`
+      <p class="heading-1">
+        Hello,
+        <b class="heading-4">${this.name}</b>
+        !
+      </p>
+      <button
+        ?disabled=${this.disabled}
+        data-testid="button"
+        @click=${this._onClick}
+        class="hover:text-yellow-700 ${Ct(t)}"
+        ${wt()}
+      >
+        Hello world! 2
+      </button>
+    `}};M([$.e$1()],exports.LuksoTest.prototype,"name",2);M([$.e$1()],exports.LuksoTest.prototype,"clicked",2);M([$.e$1({type:Boolean})],exports.LuksoTest.prototype,"disabled",2);exports.LuksoTest=M([$.e$2("lukso-test")],exports.LuksoTest);