@cloudfour/image-compare - npm Package Compare versions

Comparing version 0.0.7 to 1.0.0

dist/index.js

@@ -31,3 +31,3 @@ const template = document.createElement("template");
 
-      --thumb-background-color: hsla(0, 0%, 100%, 0.85);
+      --thumb-background-color: hsla(0, 0%, 100%, 0.9);
       --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="${thumbSvgWidth}" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="${thumbSvgWidth}" d="M40 20 L50 30 L40 40"/></svg>');
@@ -34,0 +34,0 @@ --thumb-size: clamp(3em, 10vmin, 5em);

dist/index.min.js

@@ -1,1 +0,1 @@
-const template=document.createElement("template"),thumbStyles="\n  background-color: var(--thumb-background-color);\n  background-image: var(--thumb-background-image);\n  background-size: 90%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border-radius: var(--thumb-radius);\n  border: var(--thumb-border-size) var(--thumb-border-color) solid;\n  color: var(--thumb-border-color);\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n",thumbFocusStyles="\n  box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\n",thumbSvgWidth=4;template.innerHTML=`\n  <style>\n    :host {\n      --exposure: 50%;\n\n      --thumb-background-color: hsla(0, 0%, 100%, 0.85);\n      --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');\n      --thumb-size: clamp(3em, 10vmin, 5em);\n      --thumb-radius: 50%;\n      --thumb-border-color: hsla(0, 0%, 0%, 0.9);\n      --thumb-border-size: 2px;\n\n      --focus-width: var(--thumb-border-size);\n      --focus-color: hsl(200, 100%, 80%);\n\n      --divider-width: 2px;\n      --divider-color: hsla(0, 0%, 0%, 0.9);\n\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(img) {\n      width: 100%;\n    }\n\n    ::slotted([slot='image-2']) {\n      clip-path: polygon(\n        calc(var(--exposure) + var(--divider-width)/2) 0, \n        100% 0, \n        100% 100%, \n        calc(var(--exposure) + var(--divider-width)/2) 100%);\n    }\n\n    slot {\n      display: flex;\n      width: 100%;\n    }\n\n    slot[name='image-2'] {\n      position: absolute;\n      top:0;\n      filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));\n    }\n\n    .visually-hidden {\n      border: 0; \n      clip: rect(0 0 0 0); \n      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      height: 1px; \n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n    }\n\n    label {\n      align-items: stretch;\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n\n    input {\n      cursor: col-resize;\n      margin: 0 calc(var(--thumb-size) / -2);\n      width: calc(100% + var(--thumb-size));\n      appearance: none;\n      -webkit-appearance: none;\n      height: 100%;\n      background: none;\n      border: none;\n    }\n\n    ::-moz-range-thumb {\n      ${thumbStyles}\n    }\n\n    ::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${thumbStyles}\n    }\n\n    input:focus::-moz-range-thumb {\n      ${thumbFocusStyles}\n    }\n\n    input:focus::-webkit-slider-thumb {\n      ${thumbFocusStyles}\n    }\n  </style>\n\n  <slot name="image-1"></slot>\n  <slot name="image-2"></slot>\n  \n  <label>\n    <span class="visually-hidden js-label-text">\n      Control how much of each overlapping image is shown. \n      0 means the first image is completely hidden and the second image is fully visible.\n      100 means the first image is fully visible and the second image is completely hidden.\n      50 means both images are half-shown, half-hidden.\n    </span>\n    <input type="range" value="50" min="0" max="100"/>\n  </label>\n`;class ImageCompare extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.shadowRoot.querySelector("input").addEventListener("input",(({target:n})=>{this.shadowRoot.host.style.setProperty("--exposure",`${n.value}%`)}));const n=this.shadowRoot.host.getAttribute("label-text");n&&(this.shadowRoot.querySelector(".js-label-text").textContent=n)}}customElements.define("image-compare",ImageCompare);
+const template=document.createElement("template"),thumbStyles="\n  background-color: var(--thumb-background-color);\n  background-image: var(--thumb-background-image);\n  background-size: 90%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border-radius: var(--thumb-radius);\n  border: var(--thumb-border-size) var(--thumb-border-color) solid;\n  color: var(--thumb-border-color);\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n",thumbFocusStyles="\n  box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\n",thumbSvgWidth=4;template.innerHTML=`\n  <style>\n    :host {\n      --exposure: 50%;\n\n      --thumb-background-color: hsla(0, 0%, 100%, 0.9);\n      --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');\n      --thumb-size: clamp(3em, 10vmin, 5em);\n      --thumb-radius: 50%;\n      --thumb-border-color: hsla(0, 0%, 0%, 0.9);\n      --thumb-border-size: 2px;\n\n      --focus-width: var(--thumb-border-size);\n      --focus-color: hsl(200, 100%, 80%);\n\n      --divider-width: 2px;\n      --divider-color: hsla(0, 0%, 0%, 0.9);\n\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(img) {\n      width: 100%;\n    }\n\n    ::slotted([slot='image-2']) {\n      clip-path: polygon(\n        calc(var(--exposure) + var(--divider-width)/2) 0, \n        100% 0, \n        100% 100%, \n        calc(var(--exposure) + var(--divider-width)/2) 100%);\n    }\n\n    slot {\n      display: flex;\n      width: 100%;\n    }\n\n    slot[name='image-2'] {\n      position: absolute;\n      top:0;\n      filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));\n    }\n\n    .visually-hidden {\n      border: 0; \n      clip: rect(0 0 0 0); \n      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      height: 1px; \n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n    }\n\n    label {\n      align-items: stretch;\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n\n    input {\n      cursor: col-resize;\n      margin: 0 calc(var(--thumb-size) / -2);\n      width: calc(100% + var(--thumb-size));\n      appearance: none;\n      -webkit-appearance: none;\n      height: 100%;\n      background: none;\n      border: none;\n    }\n\n    ::-moz-range-thumb {\n      ${thumbStyles}\n    }\n\n    ::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${thumbStyles}\n    }\n\n    input:focus::-moz-range-thumb {\n      ${thumbFocusStyles}\n    }\n\n    input:focus::-webkit-slider-thumb {\n      ${thumbFocusStyles}\n    }\n  </style>\n\n  <slot name="image-1"></slot>\n  <slot name="image-2"></slot>\n  \n  <label>\n    <span class="visually-hidden js-label-text">\n      Control how much of each overlapping image is shown. \n      0 means the first image is completely hidden and the second image is fully visible.\n      100 means the first image is fully visible and the second image is completely hidden.\n      50 means both images are half-shown, half-hidden.\n    </span>\n    <input type="range" value="50" min="0" max="100"/>\n  </label>\n`;class ImageCompare extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.shadowRoot.querySelector("input").addEventListener("input",(({target:n})=>{this.shadowRoot.host.style.setProperty("--exposure",`${n.value}%`)}));const n=this.shadowRoot.host.getAttribute("label-text");n&&(this.shadowRoot.querySelector(".js-label-text").textContent=n)}}customElements.define("image-compare",ImageCompare);

package.json

 {
   "name": "@cloudfour/image-compare",
-  "version": "0.0.7",
+  "version": "1.0.0",
   "description": "A tiny, zero-dependency web component for comparing two images using a slider. Built with a focus on accessibility, performance, and progressive enhancement.",
@@ -5,0 +5,0 @@ "license": "ISC",

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

15972

decreased by-0.01%

No dependency changes