@decidables/discountable-elements 0.6.3 → 0.6.5

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.5](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.6.4...@decidables/discountable-elements@0.6.5) (2026-01-18)
+
+
+### Bug Fixes
+
+* **discountable-elements:** fix style in `htd-curves` due to `stylelint` changes ([2593dcb](https://github.com/decidables/decidables/commit/2593dcb432d21027ebc1dd65cc4f169cbae1fbec))
+
+
+
+## [0.6.4](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.6.3...@decidables/discountable-elements@0.6.4) (2026-01-14)
+
+
+### Bug Fixes
+
+* **discountable-elements:** update starting location of bar in `htd-curves` ([983159c](https://github.com/decidables/decidables/commit/983159c3ddb76cfdff856ee7108d1840247001a6)), closes [#10](https://github.com/decidables/decidables/issues/10)
+* **libraries:** add hacks to get Safari to render shadows properly ([120b73c](https://github.com/decidables/decidables/commit/120b73c2e771d59cf43de8dbe8a064a4902b6bd4)), closes [#11](https://github.com/decidables/decidables/issues/11)
+
+
+
 ## [0.6.3](https://github.com/decidables/decidables/compare/@decidables/discountable-elements@0.6.2...@decidables/discountable-elements@0.6.3) (2025-11-30)
 
 **Note:** Version bump only for package @decidables/discountable-elements

package/lib/discountableElements.esm.js

@@ -10350,54 +10350,12 @@ class DecidablesElement extends i$2 {
     const ambientS = rotate ? `${-ambientM.y}px ${ambientM.y / 2}px ${ambientM.b}px ${ambientM.s}px` : `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
     return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
   }
-  static get svgDefs() {
-    const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
-
-    const filters = shadows.elevations.map(z => {
-      return `
-        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
-          <feComponentTransfer in="SourceAlpha" result="solid">
-            <feFuncA type="table" tableValues="0 1 1"/>
-          </feComponentTransfer>
-          <feOffset in="solid" result="offU" dx=${shadows.mapUmbra[z].y / 2} dy=${shadows.mapUmbra[z].y} />
-          <feOffset in="solid" result="offP" dx=${shadows.mapPenumbra[z].y / 2} dy=${shadows.mapPenumbra[z].y} />
-          <feOffset in="solid" result="offA" dx=${shadows.mapAmbient[z].y / 2} dy=${shadows.mapAmbient[z].y} />
-          ${shadows.mapUmbra[z].s === 0 ? '' : `<feMorphology in="offU" result="spreadU" operator=${shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapUmbra[z].s)} />`}
-          ${shadows.mapPenumbra[z].s === 0 ? '' : `<feMorphology in="offP" result="spreadP" operator=${shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapPenumbra[z].s)} />`}
-          ${shadows.mapAmbient[z].s === 0 ? '' : `<feMorphology in="offA" result="spreadA" operator=${shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapAmbient[z].s)} />`}
-          <feGaussianBlur in=${shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU'} result="blurU" stdDeviation=${shadows.mapUmbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP'} result="blurP" stdDeviation=${shadows.mapPenumbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA'} result="blurA" stdDeviation=${shadows.mapAmbient[z].b / 2} />
-          <feFlood in="SourceGraphic" result="opU" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityUmbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opP" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityPenumbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opA" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityAmbient + shadows.opacityBoost} />
-          <feComposite in="opU" in2="blurU" result="shU" operator="in" />
-          <feComposite in="opP" in2="blurP" result="shP" operator="in" />
-          <feComposite in="opA" in2="blurA" result="shA" operator="in" />
-          <feMorphology in="solid" result="smaller" operator="erode" radius="1" />
-          <feComposite in="shU" in2="smaller" result="finalU" operator="out" />
-          <feComposite in="shP" in2="smaller" result="finalP" operator="out" />
-          <feComposite in="shA" in2="smaller" result="finalA" operator="out" />
-          <feMerge>
-            <feMergeNode in="finalU" />
-            <feMergeNode in="finalP" />
-            <feMergeNode in="finalA" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>`;
-    });
-    return `
-      <defs>
-        ${filters}
-      </defs>
-    `;
-  }
   static get svgFilters() {
     const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
 
     const filters = shadows.elevations.map(z => {
       return b$1`
-        <filter id=${`shadow-${z}`} x="-250%" y="-250%" width="600%" height="600%">
+        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
           <feComponentTransfer in="SourceAlpha" result="solid">
             <feFuncA type="table" tableValues="0 1 1"/>
           </feComponentTransfer>
@@ -10429,11 +10387,9 @@ class DecidablesElement extends i$2 {
         </filter>`;
     });
     return b$1`
-      <svg class="defs">
-        <defs>
-          ${filters}
-        </defs>
-      </svg>
+      <defs class="filtersUser">
+        ${filters}
+      </defs>
     `;
   }
   static get styles() {
@@ -12208,9 +12164,9 @@ class x extends f {
   }
   update(t, [i]) {
     const s = void 0 === this.u;
-    return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.p(i), this.render(i);
+    return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.m(i), this.render(i);
   }
-  p(t) {
+  m(t) {
     t = t ?? {};
     const i = this.getController();
     void 0 !== i && ((t = {
@@ -12221,7 +12177,7 @@ class x extends f {
       ...t.keyframeOptions
     }), t.properties ??= b, this.options = t;
   }
-  m() {
+  p() {
     const t = {},
       i = this.element.getBoundingClientRect(),
       s = getComputedStyle(this.element);
@@ -12242,20 +12198,20 @@ class x extends f {
     })(t, this._)), this.h = this.t && !this.isDisabled() && !this.isAnimating() && i && this.element.isConnected, this.h && (this._ = Array.isArray(t) ? Array.from(t) : t), this.h;
   }
   hostUpdate() {
-    "function" == typeof this.optionsOrCallback && this.p(this.optionsOrCallback()), this.v() && (this.A = this.m(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
+    "function" == typeof this.optionsOrCallback && this.m(this.optionsOrCallback()), this.v() && (this.A = this.p(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
   }
   async hostUpdated() {
     if (!this.h || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered) return;
     let t;
     this.prepare(), await a;
-    const i = this.O(),
-      s = this.j(this.options.keyframeOptions, i),
-      e = this.m();
+    const i = this.P(),
+      s = this.V(this.options.keyframeOptions, i),
+      e = this.p();
     if (void 0 !== this.A) {
       const {
         from: s,
         to: h
-      } = this.N(this.A, e, i);
+      } = this.O(this.A, e, i);
       this.log("measured", [this.A, e, s, h]), t = this.calculateKeyframes(s, h);
     } else {
       const s = r.get(this.options.inId);
@@ -12264,7 +12220,7 @@ class x extends f {
         const {
           from: h,
           to: n
-        } = this.N(s, e, i);
+        } = this.O(s, e, i);
         t = this.calculateKeyframes(h, n), t = this.options.in ? [{
           ...this.options.in[0],
           ...t[0]
@@ -12274,10 +12230,10 @@ class x extends f {
     this.animate(t, s);
   }
   resetStyles() {
-    void 0 !== this.P && (this.element.setAttribute("style", this.P ?? ""), this.P = void 0);
+    void 0 !== this.j && (this.element.setAttribute("style", this.j ?? ""), this.j = void 0);
   }
   commitStyles() {
-    this.P = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
+    this.j = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
   }
   reconnected() {}
   async disconnected() {
@@ -12286,14 +12242,14 @@ class x extends f {
     if (this.prepare(), await a(), this.i?.isConnected) {
       const t = this.o && this.o.parentNode === this.i ? this.o : null;
       if (this.i.insertBefore(this.element, t), this.options.stabilizeOut) {
-        const t = this.m();
+        const t = this.p();
         this.log("stabilizing out");
         const i = this.A.left - t.left,
           s = this.A.top - t.top;
         !("static" === getComputedStyle(this.element).position) || 0 === i && 0 === s || (this.element.style.position = "relative"), 0 !== i && (this.element.style.left = i + "px"), 0 !== s && (this.element.style.top = s + "px");
       }
     }
-    const t = this.j(this.options.keyframeOptions);
+    const t = this.V(this.options.keyframeOptions);
     await this.animate(this.options.out, t), this.element.remove();
   }
   prepare() {
@@ -12305,7 +12261,7 @@ class x extends f {
   didFinish(t) {
     t && this.options.onComplete?.(this), this.A = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
   }
-  O() {
+  P() {
     const t = [];
     for (let i = this.element.parentNode; i; i = i?.parentNode) {
       const s = j.get(i);
@@ -12319,13 +12275,13 @@ class x extends f {
       n.add(this.u);
     }), t;
   }
-  j(t, i = this.O()) {
+  V(t, i = this.P()) {
     const s = {
       ...A
     };
     return i.forEach(t => Object.assign(s, t.options.keyframeOptions)), Object.assign(s, t), s;
   }
-  N(t, i, s) {
+  O(t, i, s) {
     t = {
       ...t
     }, i = {
@@ -13066,26 +13022,45 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
 
         .option .interactive:hover {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
+          transform: translateX(0);
         }
 
         .option .interactive:active {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
         :host(.keyboard) .option .interactive:focus-within {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateX(0);
         }
 
         .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
-        :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
+        :host(.keyboard) .body.interactive:has(~ .point:focus-within) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .gradient.sooner stop {
@@ -13251,16 +13226,18 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
       rem: this.rem
     }]);
     //  ENTER
-    const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
-    svgEnter.html(DiscountableElement.svgDefs);
+    const svgEnter = svgUpdate.enter().append('svg').classed('main', true).each((datum, index, nodes) => {
+      // Filters for shadows
+      B$1(DiscountableElement.svgFilters, nodes[index]);
+    });
     // Gradients for fill animations
-    const svgDefs = svgEnter.append('defs');
-    const soonerGradient = svgDefs.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
+    const svgGradients = svgEnter.append('defs').classed('gradients', true);
+    const soonerGradient = svgGradients.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
     soonerGradient.append('stop').classed('stop-0', true).attr('offset', '0');
     soonerGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
     soonerGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
     soonerGradient.append('stop').classed('stop-100', true).attr('offset', '1');
-    const laterGradient = svgDefs.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
+    const laterGradient = svgGradients.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
     laterGradient.append('stop').classed('stop-0', true).attr('offset', '0');
     laterGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
     laterGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
@@ -13808,7 +13785,7 @@ class HTDCurves extends DecidablesMixinResizeable(DiscountableElement) {
         element.d = interpolateD(time);
         return `${xScale(element.d)}`;
       };
-    }).attrTween('y2', (datum, index, elements) => {
+    }).attr('y1', yScale(0)).attrTween('y2', (datum, index, elements) => {
       const element = elements[index];
       const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
       return time => {