@decidables/discountable-elements 0.6.3 → 0.6.4

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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() {
@@ -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) {
           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 => {