@decidables/accumulable-elements 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.7](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.6...@decidables/accumulable-elements@0.3.7) (2026-01-14)
+
+
+### Bug Fixes
+
+* **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.3.6](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.5...@decidables/accumulable-elements@0.3.6) (2025-11-30)
+
+**Note:** Version bump only for package @decidables/accumulable-elements
+
+
+
+
+
 ## [0.3.5](https://github.com/decidables/decidables/compare/@decidables/accumulable-elements@0.3.4...@decidables/accumulable-elements@0.3.5) (2025-11-21)
 
 

package/README.md

@@ -1079,7 +1079,7 @@ export default class AccumulableElementSomething extends AccumulableElement {
   - `gulpfile.js` (Tasks for *gulp*)
   - `package.json` (Package config for *yarn* and *npm*)
   - `README.md` (This file)
-  - `rollup-stats.html` (Report on js bundle composition and size) **\[autogenerated\]**
+  - `rollup-stats.auto.html` (Report on js bundle composition and size) **\[autogenerated\]**
 
 ## [License](https://github.com/decidables/decidables/blob/main/LICENSE.md)
 

package/lib/accumulableElements.esm.js

@@ -4736,54 +4736,12 @@ class DecidablesElement extends i {
     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`
-        <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>
@@ -4815,11 +4773,9 @@ class DecidablesElement extends i {
         </filter>`;
     });
     return b`
-      <svg class="defs">
-        <defs>
-          ${filters}
-        </defs>
-      </svg>
+      <defs class="filtersUser">
+        ${filters}
+      </defs>
     `;
   }
   static get styles() {
@@ -8036,31 +7992,50 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
         /*
           OVERLAYER
         */
-        .interactive {
+        .boundary.interactive {
+          cursor: ns-resize;
+        }
+
+        .t0z.interactive {
+          cursor: move;
+        }
+
+        .boundary.interactive,
+        .t0z.interactive {
           filter: url("#shadow-2");
           outline: none;
         }
 
-        .interactive:hover {
+        .boundary.interactive:hover,
+        .t0z.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);
         }
 
-        .interactive:active {
+        .boundary.interactive:active,
+        .t0z.interactive:active {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
-        :host(.keyboard) .interactive:focus {
+        :host(.keyboard) .boundary.interactive:focus,
+        :host(.keyboard) .t0z.interactive:focus {
           filter: url("#shadow-8");
-        }
 
-        .boundary {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
-        .boundary.interactive {
-          cursor: ns-resize;
+        .t0z .point {
+          fill: var(---color-element-emphasis);
+          stroke-width: 0;
+
+          r: 6px;
         }
 
         .drift {
@@ -8074,21 +8049,38 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
 
         .drift.interactive {
           cursor: ns-resize;
+
+          filter: url("#shadow-2");
+          outline: none;
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #000000;
+          fill-opacity: 0;
         }
 
-        .drift .arrow {
-          stroke-dasharray: none;
+        .drift.interactive:hover {
+          filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #ff0000;
         }
 
-        .t0z.interactive {
-          cursor: move;
+        .drift.interactive:active {
+          filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #00ff00;
         }
 
-        .t0z .point {
-          fill: var(---color-element-emphasis);
-          stroke-width: 0;
+        :host(.keyboard) .drift.interactive:focus {
+          filter: url("#shadow-8");
 
-          r: 6px;
+          /* HACK: This gets Safari to correctly apply the filter! */
+          fill: #0000ff;
+        }
+
+        .drift .arrow {
+          stroke-dasharray: none;
         }
 
         /* Make larger targets for touch users */
@@ -8450,16 +8442,19 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
       rem: this.rem
     }]);
     //  ENTER
-    const svgEnter = svgUpdate.enter().append('svg').classed('main', true).html(AccumulableElement.svgDefs);
-    const svgDefs = svgEnter.append('defs');
+    const svgEnter = svgUpdate.enter().append('svg').classed('main', true).each((datum, index, nodes) => {
+      // Filters for shadows
+      B(AccumulableElement.svgFilters, nodes[index]);
+    });
+    const svgMarkers = svgEnter.append('defs').classed('markers', true);
     // Arrowhead marker for measures
     const measureArrow = parameter => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      svgDefs.append('marker').attr('id', `measure-arrow-${parameter}`).attr('class', `measure-arrow ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12').append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+      svgMarkers.append('marker').attr('id', `measure-arrow-${parameter}`).attr('class', `measure-arrow ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12').append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
     };
     const measureCappedArrow = parameter => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      const marker = svgDefs.append('marker').attr('id', `measure-capped-arrow-${parameter}`).attr('class', `measure-arrow capped ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12');
+      const marker = svgMarkers.append('marker').attr('id', `measure-capped-arrow-${parameter}`).attr('class', `measure-arrow capped ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12');
       marker.append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
       marker.append('path').attr('class', 'cap').attr('d', 'M 0 -4 l 0 8');
     };
@@ -8471,12 +8466,12 @@ class DDMModel extends DecidablesMixinResizeable(AccumulableElement) {
     // Flat markers for SDs
     const sdCap = outcome => {
       /* Hack to avoid lack of context-stroke and context-fill in Safari */
-      svgDefs.append('marker').attr('id', `model-sd-cap-${outcome}`).attr('class', `model-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
-      svgDefs.append('marker').attr('id', `data-sd-cap-${outcome}`).attr('class', `data-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
+      svgMarkers.append('marker').attr('id', `model-sd-cap-${outcome}`).attr('class', `model-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
+      svgMarkers.append('marker').attr('id', `data-sd-cap-${outcome}`).attr('class', `data-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
     };
     sdCap('error');
     sdCap('correct');
-    const gradient = svgDefs.append('linearGradient').attr('id', 'path-animate').attr('gradientUnits', 'userSpaceOnUse').attr('color-interpolation', 'linearRGB').attr('x1', '0').attr('x2', '0').attr('y1', evidenceScale(this.bounds.upper)).attr('y2', evidenceScale(this.bounds.lower));
+    const gradient = svgMarkers.append('linearGradient').attr('id', 'path-animate').attr('gradientUnits', 'userSpaceOnUse').attr('color-interpolation', 'linearRGB').attr('x1', '0').attr('x2', '0').attr('y1', evidenceScale(this.bounds.upper)).attr('y2', evidenceScale(this.bounds.lower));
     gradient.append('stop').classed('stop-0', true).attr('offset', '0%');
     gradient.append('stop').classed('stop-100', true).attr('offset', '100%');
     //  MERGE