@ppg_pl/tinting 0.0.7 → 0.0.8

package/dist/components/my-backdrop.js

@@ -1,4 +1,4 @@
-import { M as MyBackdrop$1, d as defineCustomElement$1 } from './index6.js';
+import { M as MyBackdrop$1, d as defineCustomElement$1 } from './index7.js';
 
 const MyBackdrop = MyBackdrop$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/my-colorbox.js

@@ -1,4 +1,4 @@
-import { M as MyColorBox, d as defineCustomElement$1 } from './index7.js';
+import { M as MyColorBox, d as defineCustomElement$1 } from './index8.js';
 
 const MyColorbox = MyColorBox;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/my-colorinfo.js

@@ -1,4 +1,4 @@
-import { M as MyColorInfo, d as defineCustomElement$1 } from './index8.js';
+import { M as MyColorInfo, d as defineCustomElement$1 } from './index9.js';
 
 const MyColorinfo = MyColorInfo;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/my-component.js

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$9 } from './index2.js';
-import { d as defineCustomElement$8 } from './index6.js';
-import { d as defineCustomElement$7 } from './index7.js';
-import { d as defineCustomElement$6 } from './index8.js';
-import { d as defineCustomElement$5 } from './index10.js';
+import { d as defineCustomElement$8 } from './index7.js';
+import { d as defineCustomElement$7 } from './index8.js';
+import { d as defineCustomElement$6 } from './index9.js';
+import { d as defineCustomElement$5 } from './index11.js';
 import { d as defineCustomElement$4 } from './index3.js';
 import { d as defineCustomElement$3 } from './index4.js';
-import { d as defineCustomElement$2 } from './index9.js';
+import { d as defineCustomElement$2 } from './index10.js';
 
 const isObject = (val) => !Array.isArray(val) && val !== null && typeof val === 'object';
 const hasAttributes = ({ vattrs }, requiredAttrs = []) => isObject(vattrs) && requiredAttrs.every(vattrs.hasOwnProperty.bind(vattrs));

package/dist/components/my-modal.js

@@ -1,4 +1,4 @@
-import { M as Modal, d as defineCustomElement$1 } from './index10.js';
+import { M as Modal, d as defineCustomElement$1 } from './index11.js';
 
 const MyModal = Modal;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/my-slider.js

@@ -1,4 +1,4 @@
-import { J as JcSwiper, d as defineCustomElement$1 } from './index9.js';
+import { J as JcSwiper, d as defineCustomElement$1 } from './index10.js';
 
 const MySlider = JcSwiper;
 const defineCustomElement = defineCustomElement$1;

package/dist/esm/modal-header_9.entry.js

@@ -2733,6 +2733,35 @@ const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
+/**
+ * Returns true when a hex color is so light it is hard to distinguish from a
+ * white background (e.g. NCS S 0300-N ≈ #fafaf8). Uses perceived luminance.
+ * Accepts values with or without a leading '#', in 3- or 6-digit form.
+ */
+function isVeryLightColor(hex) {
+  var _a;
+  const cleaned = (_a = hex === null || hex === void 0 ? void 0 : hex.replace('#', '')) !== null && _a !== void 0 ? _a : '';
+  if (cleaned.length !== 6 && cleaned.length !== 3)
+    return false;
+  const short = cleaned.length === 3;
+  const r = parseInt(short ? cleaned[0] + cleaned[0] : cleaned.slice(0, 2), 16) / 255;
+  const g = parseInt(short ? cleaned[1] + cleaned[1] : cleaned.slice(2, 4), 16) / 255;
+  const b = parseInt(short ? cleaned[2] + cleaned[2] : cleaned.slice(4, 6), 16) / 255;
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+  return luminance > 0.96;
+}
+function debounce$1(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 const indexCss$5 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
 
 const MyColorBox = class {
@@ -2759,6 +2788,21 @@ const MyColorBox = class {
       const blue = parseInt(color[5] + color[6], 16) - 20;
       return `rgb(${red},${green},${blue})`;
     };
+    this.isLightSwatch = () => { var _a; return !((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) && isVeryLightColor(this.color); };
+    // Active category keeps its 5px solid border (all active swatches share it, so
+    // alignment is consistent). In the normal grid we use an inset box-shadow
+    // instead of a border so light swatches gain a visible edge without changing
+    // their box size and skewing the grid.
+    this.getBorder = () => {
+      if (!this.isCategoryActive)
+        return '';
+      return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;
+    };
+    this.getBoxShadow = () => {
+      if (this.isCategoryActive)
+        return '';
+      return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';
+    };
     this.color = undefined;
     this.name = undefined;
     this.shop = undefined;
@@ -2773,7 +2817,8 @@ const MyColorBox = class {
         backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
         backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
         background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
-        border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
+        border: this.getBorder(),
+        boxShadow: this.getBoxShadow(),
       } }, h("div", { class: "color-name" }, this.name)));
   }
 };
@@ -2822,17 +2867,9 @@ const MyColorInfo = class {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
     };
     this.isVeryLightBackground = () => {
-      var _a, _b;
       if (this.currentColor.imageInsteadHex)
         return true;
-      const hex = (_b = (_a = this.currentColor.hex) === null || _a === void 0 ? void 0 : _a.replace('#', '')) !== null && _b !== void 0 ? _b : '';
-      if (hex.length !== 6 && hex.length !== 3)
-        return false;
-      const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;
-      const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;
-      const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;
-      const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-      return luminance > 0.96;
+      return isVeryLightColor(this.currentColor.hex);
     };
     this.getButtonClass = () => {
       if (this.currentColor.imageInsteadHex)
@@ -3083,18 +3120,6 @@ const MyModalBundle = class {
 };
 MyModalBundle.style = indexCss$4;
 
-function debounce$1(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
 const { min: min$4, max: max$4 } = Math;
 
 const limit = (x, low = 0, high = 1) => {