@lukso/web-components 1.71.1 → 1.71.3

package/dist/components/lukso-icon/icons/logo-fantom.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const logoFantom: (options: IconOptions) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=logo-fantom.d.ts.map

package/dist/components/lukso-icon/icons/logo-fantom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-fantom.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/logo-fantom.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,UAAU,YAAa,WAAW,yCAwB9C,CAAA"}

package/dist/components/lukso-icon/icons/logo-polygon.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const logoPolygon: (options: IconOptions) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=logo-polygon.d.ts.map

package/dist/components/lukso-icon/icons/logo-polygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-polygon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/logo-polygon.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,WAAW,YAAa,WAAW,yCAqB/C,CAAA"}

package/dist/components/lukso-icon/index.cjs

@@ -5874,6 +5874,55 @@ const unlink = (options) => {
   </svg> `;
 };
 
+const logoPolygon = (options) => {
+  return shared_tailwindElement_index.x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M12.5 24C19.1276 24 24.5 18.6276 24.5 12C24.5 5.3724 19.1276 0 12.5 0C5.8724 0 0.5 5.3724 0.5 12C0.5 18.6276 5.8724 24 12.5 24Z"
+      fill="#863FF8"
+    />
+    <path
+      d="M9.71191 4.97714C9.31378 4.74102 8.82 4.74102 8.42187 4.97714L5.24142 6.86343C4.85284 7.09389 4.61426 7.51447 4.61426 7.96901V11.7555C4.61426 12.21 4.85284 12.6306 5.24142 12.8611L8.42187 14.7474C8.82 14.9835 9.31378 14.9835 9.71191 14.7474L16.2759 10.8543L19.0323 12.4891V15.7865L16.2759 17.4213L13.5195 15.7865V13.7103L11.8233 14.7792V16.0311C11.8233 16.4856 12.0619 16.9062 12.4504 17.1367L15.6309 19.023C16.029 19.2591 16.5228 19.2591 16.9209 19.023L20.1014 17.1367C20.49 16.9062 20.7285 16.4856 20.7285 16.0311V12.2446C20.7285 11.7901 20.49 11.3695 20.1014 11.139L16.9209 9.25272C16.5228 9.0166 16.029 9.0166 15.6309 9.25272L9.06689 13.1458L6.3105 11.511V8.21355L9.06689 6.57877L11.8233 8.21355V10.2898L13.5195 9.22093V7.96901C13.5195 7.51447 13.2809 7.09389 12.8924 6.86343L9.71191 4.97714Z"
+      fill="white"
+    />
+  </svg> `;
+};
+
+const logoFantom = (options) => {
+  return shared_tailwindElement_index.x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <circle cx="12.5" cy="12" r="12" fill="#1969FF" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.306 3.813a1.71 1.71 0 0 0-1.613 0L7.763 5.91c-.26.195-.384.407-.398.605h-.008v10.949c0 .253.14.486.363.605l3.973 2.119c.504.269 1.11.269 1.613 0l3.973-2.12a.69.69 0 0 0 .363-.604V6.514h-.007c.01-.237-.11-.474-.398-.605zm3.65 3.456-3.65 1.946-.08.04 3.73 1.99zm0 5.485-3.65 1.947a1.71 1.71 0 0 1-1.613 0l-3.65-1.947v4.709l3.973 2.119c.302.161.665.161.968 0l3.973-2.12zm-8.914-1.508 3.732-1.99-.081-.04-3.65-1.947zm3.974-6.828a1.03 1.03 0 0 1 .968 0l3.93 2.096-3.93 2.096a1.03 1.03 0 0 1-.968 0l-3.93-2.096zm.826 9.74v-4.33L16.915 12l-3.93 2.096a1 1 0 0 1-.142.062m-.685-4.33v4.33a1 1 0 0 1-.141-.062L8.086 12z"
+      fill="#fff"
+    />
+    <path
+      d="m17.481 4.338.566.353a2.06 2.06 0 0 1 .967 1.745v.421h-.686v-.421c0-.473-.243-.912-.644-1.163l-.566-.354zM6.952 19.309l.566.353.363-.581-.565-.354a1.37 1.37 0 0 1-.645-1.163v-.421h-.686v.421c0 .71.366 1.369.967 1.744"
+      fill="#fff"
+    />
+  </svg> `;
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -5944,8 +5993,10 @@ const iconMap = {
   "logo-chrome": logoChrome,
   "logo-edge": logoEdge,
   "logo-facebook": logoFacebook,
+  "logo-fantom": logoFantom,
   "logo-firefox": logoFirefox,
   "logo-opera": logoOpera,
+  "logo-polygon": logoPolygon,
   "logo-safari": logoSafari,
   "logo-x": logoX,
   mail,

package/dist/components/lukso-icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAuJA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA4J5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAyJA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA8J5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

package/dist/components/lukso-icon/index.js

@@ -5870,6 +5870,55 @@ const unlink = (options) => {
   </svg> `;
 };
 
+const logoPolygon = (options) => {
+  return x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="M12.5 24C19.1276 24 24.5 18.6276 24.5 12C24.5 5.3724 19.1276 0 12.5 0C5.8724 0 0.5 5.3724 0.5 12C0.5 18.6276 5.8724 24 12.5 24Z"
+      fill="#863FF8"
+    />
+    <path
+      d="M9.71191 4.97714C9.31378 4.74102 8.82 4.74102 8.42187 4.97714L5.24142 6.86343C4.85284 7.09389 4.61426 7.51447 4.61426 7.96901V11.7555C4.61426 12.21 4.85284 12.6306 5.24142 12.8611L8.42187 14.7474C8.82 14.9835 9.31378 14.9835 9.71191 14.7474L16.2759 10.8543L19.0323 12.4891V15.7865L16.2759 17.4213L13.5195 15.7865V13.7103L11.8233 14.7792V16.0311C11.8233 16.4856 12.0619 16.9062 12.4504 17.1367L15.6309 19.023C16.029 19.2591 16.5228 19.2591 16.9209 19.023L20.1014 17.1367C20.49 16.9062 20.7285 16.4856 20.7285 16.0311V12.2446C20.7285 11.7901 20.49 11.3695 20.1014 11.139L16.9209 9.25272C16.5228 9.0166 16.029 9.0166 15.6309 9.25272L9.06689 13.1458L6.3105 11.511V8.21355L9.06689 6.57877L11.8233 8.21355V10.2898L13.5195 9.22093V7.96901C13.5195 7.51447 13.2809 7.09389 12.8924 6.86343L9.71191 4.97714Z"
+      fill="white"
+    />
+  </svg> `;
+};
+
+const logoFantom = (options) => {
+  return x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <circle cx="12.5" cy="12" r="12" fill="#1969FF" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.306 3.813a1.71 1.71 0 0 0-1.613 0L7.763 5.91c-.26.195-.384.407-.398.605h-.008v10.949c0 .253.14.486.363.605l3.973 2.119c.504.269 1.11.269 1.613 0l3.973-2.12a.69.69 0 0 0 .363-.604V6.514h-.007c.01-.237-.11-.474-.398-.605zm3.65 3.456-3.65 1.946-.08.04 3.73 1.99zm0 5.485-3.65 1.947a1.71 1.71 0 0 1-1.613 0l-3.65-1.947v4.709l3.973 2.119c.302.161.665.161.968 0l3.973-2.12zm-8.914-1.508 3.732-1.99-.081-.04-3.65-1.947zm3.974-6.828a1.03 1.03 0 0 1 .968 0l3.93 2.096-3.93 2.096a1.03 1.03 0 0 1-.968 0l-3.93-2.096zm.826 9.74v-4.33L16.915 12l-3.93 2.096a1 1 0 0 1-.142.062m-.685-4.33v4.33a1 1 0 0 1-.141-.062L8.086 12z"
+      fill="#fff"
+    />
+    <path
+      d="m17.481 4.338.566.353a2.06 2.06 0 0 1 .967 1.745v.421h-.686v-.421c0-.473-.243-.912-.644-1.163l-.566-.354zM6.952 19.309l.566.353.363-.581-.565-.354a1.37 1.37 0 0 1-.645-1.163v-.421h-.686v.421c0 .71.366 1.369.967 1.744"
+      fill="#fff"
+    />
+  </svg> `;
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -5940,8 +5989,10 @@ const iconMap = {
   "logo-chrome": logoChrome,
   "logo-edge": logoEdge,
   "logo-facebook": logoFacebook,
+  "logo-fantom": logoFantom,
   "logo-firefox": logoFirefox,
   "logo-opera": logoOpera,
+  "logo-polygon": logoPolygon,
   "logo-safari": logoSafari,
   "logo-x": logoX,
   mail,

package/dist/components/lukso-image/index.cjs

@@ -30,7 +30,8 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
     this.hasError = false;
     this.imageStyles = index.ie({
       slots: {
-        wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
+        wrapper: "size-full bg-neutral-100",
+        placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
         image: "object-cover opacity-0 size-full"
       },
       variants: {
@@ -53,7 +54,7 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
           isLoading: true,
           hasError: false,
           class: {
-            wrapper: "animate-pulse"
+            placeholder: "animate-pulse"
           }
         },
         {
@@ -85,24 +86,26 @@ exports.LuksoImage = class LuksoImage extends shared_tailwindElement_index.Tailw
     }
   }
   render() {
-    const { wrapper, image } = this.imageStyles({
+    const { wrapper, placeholder, image } = this.imageStyles({
       isLoading: this.isLoading,
       hasError: this.hasError
     });
     return shared_tailwindElement_index.x`
-      <div
-        class=${wrapper()}
-        style=${styleMap.o({
+      <div class=${wrapper()}>
+        <div
+          class=${placeholder()}
+          style=${styleMap.o({
       backgroundImage: `url('${this.resolvedPlaceholder}')`
     })}
-      >
-        <img
-          src=${this.src}
-          class=${image()}
-          loading="lazy"
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
+        >
+          <img
+            src=${this.src}
+            class=${image()}
+            loading="lazy"
+            @load=${this.handleLoad}
+            @error=${this.handleError}
+          />
+        </div>
       </div>
     `;
   }

package/dist/components/lukso-image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,SAAS,UAAO;IAGhB,mBAAmB,SAAK;IAGxB,QAAQ,UAAQ;IAEhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAKb,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAYxD,OAAO,CAAC,WAAW,CAqCjB;IAEF,MAAM;CAuBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,SAAS,UAAO;IAGhB,mBAAmB,SAAK;IAGxB,QAAQ,UAAQ;IAEhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAKb,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAYxD,OAAO,CAAC,WAAW,CAsCjB;IAEF,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-image/index.js

@@ -26,7 +26,8 @@ let LuksoImage = class extends TailwindElement {
     this.hasError = false;
     this.imageStyles = ie({
       slots: {
-        wrapper: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
+        wrapper: "size-full bg-neutral-100",
+        placeholder: "bg-[50%] bg-no-repeat bg-cover bg-neutral-90 relative size-full",
         image: "object-cover opacity-0 size-full"
       },
       variants: {
@@ -49,7 +50,7 @@ let LuksoImage = class extends TailwindElement {
           isLoading: true,
           hasError: false,
           class: {
-            wrapper: "animate-pulse"
+            placeholder: "animate-pulse"
           }
         },
         {
@@ -81,24 +82,26 @@ let LuksoImage = class extends TailwindElement {
     }
   }
   render() {
-    const { wrapper, image } = this.imageStyles({
+    const { wrapper, placeholder, image } = this.imageStyles({
       isLoading: this.isLoading,
       hasError: this.hasError
     });
     return x`
-      <div
-        class=${wrapper()}
-        style=${o({
+      <div class=${wrapper()}>
+        <div
+          class=${placeholder()}
+          style=${o({
       backgroundImage: `url('${this.resolvedPlaceholder}')`
     })}
-      >
-        <img
-          src=${this.src}
-          class=${image()}
-          loading="lazy"
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
+        >
+          <img
+            src=${this.src}
+            class=${image()}
+            loading="lazy"
+            @load=${this.handleLoad}
+            @error=${this.handleError}
+          />
+        </div>
       </div>
     `;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.71.1",
+  "version": "1.71.3",
   "type": "module",
   "files": [
     "dist",