energy-visualization-sankey 1.0.7 → 1.0.9

package/dist/sankey.css

@@ -620,7 +620,7 @@ input[type="checkbox"].switch_1 {
     appearance: none;
     width: 3.5em;
     height: 1.5em;
-    background: black;
+    background: #666666;
     border-radius: 3em;
     position: relative;
     cursor: pointer;
@@ -630,7 +630,7 @@ input[type="checkbox"].switch_1 {
 }
 
 input[type="checkbox"].switch_1:checked {
-    background: black;
+    background: #e49942;
 }
 
 input[type="checkbox"].switch_1:after {
@@ -653,6 +653,22 @@ input[type="checkbox"].switch_1:checked:after {
     left: calc(100% - 1.5em);
 }
 
+/* Hover effects for better interactivity */
+
+input[type="checkbox"].switch_1:hover {
+    background: #555555;
+}
+
+input[type="checkbox"].switch_1:checked:hover {
+    background: #e49942;
+}
+
+/* Focus states for accessibility */
+
+input[type="checkbox"].switch_1:focus {
+    box-shadow: 0 0 0 3px #F5DBBC;
+}
+
 /* Milestone Tick Markers */
 
 #testTick .tick text {

package/dist/sankey.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.css","sankey.css","controls.css"],"names":[],"mappings":"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","file":"sankey.css","sourcesContent":["/* Energy Visualization Sankey - Combined Styles */\n\n/* Import core Sankey diagram styles */\n@import './sankey.css';\n\n/* Import UI controls styles */\n@import './controls.css';\n","/* US Energy Sankey - Core Styles */\n\n/* Typography */\ntext, tspan {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 16px;\n}\n\n/* Flow Styles */\n.flow {\n    fill: none;\n    stroke-opacity: 0.8;\n}\n\n.flow:hover {\n    stroke-opacity: 0.9;\n}\n\n.flow.heat {\n    stroke: #98002e;\n}\n\n.flow.elec, .flow.waste.heat {\n    stroke: #e49942;\n}\n\n.flow.waste {\n    stroke: #e49942;\n    opacity: 0.4 !important;\n}\n\n.flow.solar {\n    stroke: #fed530;\n}\n\n.flow.nuclear {\n    stroke: #ca0813;\n}\n\n.flow.hydro {\n    stroke: #0b24fb;\n}\n\n.flow.wind {\n    stroke: #901d8f;\n}\n\n.flow.geo {\n    stroke: #905a1c;\n}\n\n.flow.gas {\n    stroke: #4cabf2;\n}\n\n.flow.coal {\n    stroke: #000000;\n}\n\n.flow.bio {\n    stroke: #46be48;\n}\n\n.flow.petro {\n    stroke: #095f0b;\n}\n\n/* Box Styles */\n.box.sector {\n    fill: #cccccc;\n}\n\n.box.solar {\n    fill: #fed530;\n}\n\n.box.nuclear {\n    fill: #ca0813;\n}\n\n.box.hydro {\n    fill: #0b24fb;\n}\n\n.box.wind {\n    fill: #901d8f;\n}\n\n.box.geo {\n    fill: #905a1c;\n}\n\n.box.gas {\n    fill: #4cabf2;\n}\n\n.box.coal {\n    fill: #000000;\n}\n\n.box.bio {\n    fill: #46be48;\n}\n\n.box.petro {\n    fill: #095f0b;\n}\n\n/* Other Elements */\n.maxline {\n    stroke: #cccccc;\n    stroke-width: 1px;\n}\n\n.bkgd {\n    fill: #000000;\n}\n\n/* Title Container - Responsive Header Layout */\n.title_container {\n    border-top: 2px solid #000000;\n    border-bottom: 1px solid #000000;\n    position: relative;\n    min-height: 58px;\n    padding: 8px 16px;\n    background: white;\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 20px;\n    flex-wrap: nowrap;\n}\n\n/* Logo Section */\n.header-logo {\n    flex: 0 0 auto;\n    min-width: 60px;\n}\n\n.header-logo img {\n    max-height: 45px;\n    height: auto;\n    display: block;\n}\n\n/* Main Title Section - Contains title and energy usage */\n.header-main {\n    flex: 1;\n    text-align: center;\n    min-width: 160px;\n    position: relative;\n}\n\n.header-title-section {\n    position: relative;\n    min-height: 45px;\n}\n\n.main-title {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 1em;\n    font-weight: normal;\n    color: black;\n    margin: 0;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.energy-usage-overlay {\n    position: absolute;\n    top: 22px;\n    left: 0;\n    width: 100%;\n    height: 25px;\n    pointer-events: none;\n}\n\n/* Year Section - Separate section for year display */\n.header-year {\n    flex: 1;\n    min-width: 80px;\n    height: 45px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.year-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n/* Info Section */\n.header-info {\n    flex: 1.9;\n    min-width: 160px;\n    text-align: left;\n}\n\n.subtitle {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: bolder;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.attribution {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* Affiliation Section */\n.header-affiliation {\n    flex: 1.7;\n    text-align: center;\n    min-width: 140px;\n}\n\n.affiliation-text {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* SVG Overlay Styles */\n.energy-svg-overlay,\n.year-svg-overlay {\n    z-index: 10;\n}\n\n.energy-svg-overlay text,\n.year-svg-overlay text {\n    font-family: Fieldwork, Futura, sans-serif;\n    fill: black;\n}\n\n/* Legacy SVG styles for compatibility */\n.title_container svg {\n    font-size: 15px;\n}\n\n.title_container .title {\n    font-size: 1em;\n    fill: black;\n}\n\n.title_container .title .unit {\n    font-size: .9em;\n    font-weight: bold;\n}\n\n.title_container .title .year {\n    font-size: 3.1em;\n    font-weight: bold;\n    clear: left;\n    letter-spacing: .05em;\n    font-variant-numeric: tabular-nums;\n}\n\n/* Mobile Responsive Design */\n@media (max-width: 1024px) {\n    .header-content {\n        gap: 15px;\n    }\n\n    .main-title {\n        font-size: 0.9em;\n    }\n\n    .header-logo {\n        min-width: 50px;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 120px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.9em;\n    }\n}\n\n@media (max-width: 768px) {\n    .title_container {\n        padding: 6px 12px;\n    }\n\n    .header-content {\n        gap: 10px;\n    }\n\n    .header-logo {\n        min-width: 40px;\n    }\n\n    .header-logo img {\n        max-height: 35px;\n    }\n\n    .main-title {\n        font-size: 0.8em;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 100px;\n    }\n\n    .header-year {\n        height: 40px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.5em !important;\n    }\n\n    .energy-svg-overlay text {\n        font-size: 0.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.8em;\n    }\n}\n\n@media (max-width: 600px) {\n    .header-content {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .header-main {\n        order: 1;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-year {\n        order: 2;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n        justify-content: center;\n        height: 50px;\n    }\n\n    .header-logo {\n        order: 3;\n        flex: 1 1 50%;\n    }\n\n    .header-info {\n        order: 4;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-affiliation {\n        order: 5;\n        flex: 1 1 50%;\n        text-align: left;\n    }\n\n    .main-title {\n        text-align: center;\n        margin-bottom: 5px;\n    }\n\n    .energy-usage-overlay {\n        position: relative;\n        top: 0;\n        text-align: center;\n        margin-top: 5px;\n    }\n}\n\n/* Totals */\n.total.sector {\n    font-size: 0.7em;\n    font-weight: bold;\n}\n\n.total.waste-level {\n    fill: #e49942;\n    opacity: 0.4;\n}\n\n/* Visibility */\n.hidden {\n    visibility: hidden;\n}\n\n/* Tooltip */\n.tooltip {\n    color: #000000;\n    position: absolute;\n    text-align: justify;\n    width: auto;\n    padding: 5px;\n    background: #efefef;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 3;\n}\n\n.fuel_value {\n    text-align: center;\n    vertical-align: middle;\n}\n\n/* Waste Heat Visibility Control */\n.waste-heat-hidden .flow.waste {\n    display: none !important;\n}\n\n.waste-heat-hidden .total.waste-level {\n    display: none !important;\n}\n\n/* Smooth transition for waste heat toggle (optional) */\n.flow.waste,\n.total.waste-level {\n    transition: opacity 0.3s ease;\n}","/* US Energy Sankey - Controls Styles */\n\n/* Range Slider */\n.range-slider {\n    width: 100%;\n    margin-top: 5px;\n    position: relative;\n    overflow: visible;\n    padding-top: 40px;\n}\n\n.range-slider__range {\n    -webkit-appearance: none;\n    width: 100%;\n    border-radius: 5px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n}\n\n.range-slider__range:first-child {\n    background: #d7dcdf;\n}\n\n.range-slider__range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 11px;\n    height: 11px;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n.range-slider__range::-moz-range-thumb {\n    width: 11px;\n    height: 11px;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n/* Dynamic Year Display */\n#dynamicYear {\n    color: black;\n    position: absolute;\n    height: 25px;\n    width: 50px;\n    text-align: center;\n    border: 1px solid black;\n    border-radius: 3px;\n    display: block;\n    font-size: 16px;\n    top: 40%;\n    /*bottom: 100%;*/\n    background: white;\n    padding: 3px 5px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Add downward arrow pointing to slider */\n#dynamicYear::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    margin-left: -4px;\n    width: 0;\n    height: 0;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 6px solid black;\n}\n\n/* Play/Pause Button */\n#play-button {\n    border-radius: 0;\n    display: block;\n    height: 0;\n}\n\n#play-button:hover {\n    background: transparent !important;\n}\n\n#play-button.playbutton {\n    outline: 0;\n    background: transparent;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: solid;\n    border-width: 13px 0 13px 20px;\n}\n\n#play-button.playpaused {\n    outline: 0;\n    background: transparent;\n    height: 26px;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: double;\n    border-width: 0px 0 0px 20px;\n}\n\n#play-button.playbutton:hover {\n    border-color: transparent transparent transparent #404040;\n}\n\n/* Waste Heat Toggle Switch */\n.switch_box {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 200px;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n}\n\n.box_1 {\n    background: #ffffff;\n}\n\ninput[type=\"checkbox\"].switch_1 {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: 3.5em;\n    height: 1.5em;\n    background: black;\n    border-radius: 3em;\n    position: relative;\n    cursor: pointer;\n    outline: none;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked {\n    background: black;\n}\n\ninput[type=\"checkbox\"].switch_1:after {\n    position: absolute;\n    content: \"\";\n    width: 1.5em;\n    height: 1.5em;\n    border-radius: 50%;\n    background: #fff;\n    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    -webkit-transform: scale(.7);\n    transform: scale(.7);\n    left: 0;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked:after {\n    left: calc(100% - 1.5em);\n}\n\n/* Milestone Tick Markers */\n#testTick .tick text {\n    cursor: pointer;\n}\n\n#testTick .tick text:hover {\n    color: grey;\n    transition: color 250ms;\n}\n"]}
+{"version":3,"sources":["index.css","sankey.css","controls.css"],"names":[],"mappings":"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","file":"sankey.css","sourcesContent":["/* Energy Visualization Sankey - Combined Styles */\n\n/* Import core Sankey diagram styles */\n@import './sankey.css';\n\n/* Import UI controls styles */\n@import './controls.css';\n","/* US Energy Sankey - Core Styles */\n\n/* Typography */\ntext, tspan {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 16px;\n}\n\n/* Flow Styles */\n.flow {\n    fill: none;\n    stroke-opacity: 0.8;\n}\n\n.flow:hover {\n    stroke-opacity: 0.9;\n}\n\n.flow.heat {\n    stroke: #98002e;\n}\n\n.flow.elec, .flow.waste.heat {\n    stroke: #e49942;\n}\n\n.flow.waste {\n    stroke: #e49942;\n    opacity: 0.4 !important;\n}\n\n.flow.solar {\n    stroke: #fed530;\n}\n\n.flow.nuclear {\n    stroke: #ca0813;\n}\n\n.flow.hydro {\n    stroke: #0b24fb;\n}\n\n.flow.wind {\n    stroke: #901d8f;\n}\n\n.flow.geo {\n    stroke: #905a1c;\n}\n\n.flow.gas {\n    stroke: #4cabf2;\n}\n\n.flow.coal {\n    stroke: #000000;\n}\n\n.flow.bio {\n    stroke: #46be48;\n}\n\n.flow.petro {\n    stroke: #095f0b;\n}\n\n/* Box Styles */\n.box.sector {\n    fill: #cccccc;\n}\n\n.box.solar {\n    fill: #fed530;\n}\n\n.box.nuclear {\n    fill: #ca0813;\n}\n\n.box.hydro {\n    fill: #0b24fb;\n}\n\n.box.wind {\n    fill: #901d8f;\n}\n\n.box.geo {\n    fill: #905a1c;\n}\n\n.box.gas {\n    fill: #4cabf2;\n}\n\n.box.coal {\n    fill: #000000;\n}\n\n.box.bio {\n    fill: #46be48;\n}\n\n.box.petro {\n    fill: #095f0b;\n}\n\n/* Other Elements */\n.maxline {\n    stroke: #cccccc;\n    stroke-width: 1px;\n}\n\n.bkgd {\n    fill: #000000;\n}\n\n/* Title Container - Responsive Header Layout */\n.title_container {\n    border-top: 2px solid #000000;\n    border-bottom: 1px solid #000000;\n    position: relative;\n    min-height: 58px;\n    padding: 8px 16px;\n    background: white;\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 20px;\n    flex-wrap: nowrap;\n}\n\n/* Logo Section */\n.header-logo {\n    flex: 0 0 auto;\n    min-width: 60px;\n}\n\n.header-logo img {\n    max-height: 45px;\n    height: auto;\n    display: block;\n}\n\n/* Main Title Section - Contains title and energy usage */\n.header-main {\n    flex: 1;\n    text-align: center;\n    min-width: 160px;\n    position: relative;\n}\n\n.header-title-section {\n    position: relative;\n    min-height: 45px;\n}\n\n.main-title {\n    font-family: Fieldwork, Futura, sans-serif;\n    font-size: 1em;\n    font-weight: normal;\n    color: black;\n    margin: 0;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.energy-usage-overlay {\n    position: absolute;\n    top: 22px;\n    left: 0;\n    width: 100%;\n    height: 25px;\n    pointer-events: none;\n}\n\n/* Year Section - Separate section for year display */\n.header-year {\n    flex: 1;\n    min-width: 80px;\n    height: 45px;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.year-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n}\n\n/* Info Section */\n.header-info {\n    flex: 1.9;\n    min-width: 160px;\n    text-align: left;\n}\n\n.subtitle {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: bolder;\n    line-height: 1.2;\n    margin-bottom: 2px;\n}\n\n.attribution {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* Affiliation Section */\n.header-affiliation {\n    flex: 1.7;\n    text-align: center;\n    min-width: 140px;\n}\n\n.affiliation-text {\n    font-family: Fieldwork-HumThin, Futura, sans-serif;\n    font-size: 1em;\n    color: #000000;\n    font-weight: normal;\n    line-height: 1.2;\n}\n\n/* SVG Overlay Styles */\n.energy-svg-overlay,\n.year-svg-overlay {\n    z-index: 10;\n}\n\n.energy-svg-overlay text,\n.year-svg-overlay text {\n    font-family: Fieldwork, Futura, sans-serif;\n    fill: black;\n}\n\n/* Legacy SVG styles for compatibility */\n.title_container svg {\n    font-size: 15px;\n}\n\n.title_container .title {\n    font-size: 1em;\n    fill: black;\n}\n\n.title_container .title .unit {\n    font-size: .9em;\n    font-weight: bold;\n}\n\n.title_container .title .year {\n    font-size: 3.1em;\n    font-weight: bold;\n    clear: left;\n    letter-spacing: .05em;\n    font-variant-numeric: tabular-nums;\n}\n\n/* Mobile Responsive Design */\n@media (max-width: 1024px) {\n    .header-content {\n        gap: 15px;\n    }\n\n    .main-title {\n        font-size: 0.9em;\n    }\n\n    .header-logo {\n        min-width: 50px;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 120px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.9em;\n    }\n}\n\n@media (max-width: 768px) {\n    .title_container {\n        padding: 6px 12px;\n    }\n\n    .header-content {\n        gap: 10px;\n    }\n\n    .header-logo {\n        min-width: 40px;\n    }\n\n    .header-logo img {\n        max-height: 35px;\n    }\n\n    .main-title {\n        font-size: 0.8em;\n    }\n\n    .header-main,\n    .header-year,\n    .header-info,\n    .header-affiliation {\n        flex: 1;\n        min-width: 100px;\n    }\n\n    .header-year {\n        height: 40px;\n    }\n\n    .year-svg-overlay text {\n        font-size: 2.5em !important;\n    }\n\n    .energy-svg-overlay text {\n        font-size: 0.8em !important;\n    }\n\n    .subtitle, .attribution, .affiliation-text {\n        font-size: 0.8em;\n    }\n}\n\n@media (max-width: 600px) {\n    .header-content {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .header-main {\n        order: 1;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-year {\n        order: 2;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n        justify-content: center;\n        height: 50px;\n    }\n\n    .header-logo {\n        order: 3;\n        flex: 1 1 50%;\n    }\n\n    .header-info {\n        order: 4;\n        flex: 1 1 100%;\n        margin-bottom: 8px;\n    }\n\n    .header-affiliation {\n        order: 5;\n        flex: 1 1 50%;\n        text-align: left;\n    }\n\n    .main-title {\n        text-align: center;\n        margin-bottom: 5px;\n    }\n\n    .energy-usage-overlay {\n        position: relative;\n        top: 0;\n        text-align: center;\n        margin-top: 5px;\n    }\n}\n\n/* Totals */\n.total.sector {\n    font-size: 0.7em;\n    font-weight: bold;\n}\n\n.total.waste-level {\n    fill: #e49942;\n    opacity: 0.4;\n}\n\n/* Visibility */\n.hidden {\n    visibility: hidden;\n}\n\n/* Tooltip */\n.tooltip {\n    color: #000000;\n    position: absolute;\n    text-align: justify;\n    width: auto;\n    padding: 5px;\n    background: #efefef;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 3;\n}\n\n.fuel_value {\n    text-align: center;\n    vertical-align: middle;\n}\n\n/* Waste Heat Visibility Control */\n.waste-heat-hidden .flow.waste {\n    display: none !important;\n}\n\n.waste-heat-hidden .total.waste-level {\n    display: none !important;\n}\n\n/* Smooth transition for waste heat toggle (optional) */\n.flow.waste,\n.total.waste-level {\n    transition: opacity 0.3s ease;\n}","/* US Energy Sankey - Controls Styles */\n\n/* Range Slider */\n.range-slider {\n    width: 100%;\n    margin-top: 5px;\n    position: relative;\n    overflow: visible;\n    padding-top: 40px;\n}\n\n.range-slider__range {\n    -webkit-appearance: none;\n    width: 100%;\n    border-radius: 5px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n}\n\n.range-slider__range:first-child {\n    background: #d7dcdf;\n}\n\n.range-slider__range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 11px;\n    height: 11px;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n.range-slider__range::-moz-range-thumb {\n    width: 11px;\n    height: 11px;\n    border: 0;\n    border-radius: 50%;\n    background: #fff;\n    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);\n    cursor: pointer;\n    transition: background 0.15s ease-in-out;\n}\n\n/* Dynamic Year Display */\n#dynamicYear {\n    color: black;\n    position: absolute;\n    height: 25px;\n    width: 50px;\n    text-align: center;\n    border: 1px solid black;\n    border-radius: 3px;\n    display: block;\n    font-size: 16px;\n    top: 40%;\n    /*bottom: 100%;*/\n    background: white;\n    padding: 3px 5px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Add downward arrow pointing to slider */\n#dynamicYear::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    margin-left: -4px;\n    width: 0;\n    height: 0;\n    border-left: 4px solid transparent;\n    border-right: 4px solid transparent;\n    border-top: 6px solid black;\n}\n\n/* Play/Pause Button */\n#play-button {\n    border-radius: 0;\n    display: block;\n    height: 0;\n}\n\n#play-button:hover {\n    background: transparent !important;\n}\n\n#play-button.playbutton {\n    outline: 0;\n    background: transparent;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: solid;\n    border-width: 13px 0 13px 20px;\n}\n\n#play-button.playpaused {\n    outline: 0;\n    background: transparent;\n    height: 26px;\n    border-color: transparent transparent transparent #202020;\n    transition: 100ms all ease;\n    cursor: pointer;\n    border-style: double;\n    border-width: 0px 0 0px 20px;\n}\n\n#play-button.playbutton:hover {\n    border-color: transparent transparent transparent #404040;\n}\n\n/* Waste Heat Toggle Switch */\n.switch_box {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 200px;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    align-items: center;\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n}\n\n.box_1 {\n    background: #ffffff;\n}\n\ninput[type=\"checkbox\"].switch_1 {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: 3.5em;\n    height: 1.5em;\n    background: #666666;\n    border-radius: 3em;\n    position: relative;\n    cursor: pointer;\n    outline: none;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked {\n    background: #e49942;\n}\n\ninput[type=\"checkbox\"].switch_1:after {\n    position: absolute;\n    content: \"\";\n    width: 1.5em;\n    height: 1.5em;\n    border-radius: 50%;\n    background: #fff;\n    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);\n    -webkit-transform: scale(.7);\n    transform: scale(.7);\n    left: 0;\n    -webkit-transition: all .2s ease-in-out;\n    transition: all .2s ease-in-out;\n}\n\ninput[type=\"checkbox\"].switch_1:checked:after {\n    left: calc(100% - 1.5em);\n}\n\n/* Hover effects for better interactivity */\ninput[type=\"checkbox\"].switch_1:hover {\n    background: #555555;\n}\n\ninput[type=\"checkbox\"].switch_1:checked:hover {\n    background: #e49942;\n}\n\n/* Focus states for accessibility */\ninput[type=\"checkbox\"].switch_1:focus {\n    box-shadow: 0 0 0 3px #F5DBBC;\n}\n\n/* Milestone Tick Markers */\n#testTick .tick text {\n    cursor: pointer;\n}\n\n#testTick .tick text:hover {\n    color: grey;\n    transition: color 250ms;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "energy-visualization-sankey",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A modern TypeScript library for creating interactive Sankey diagrams that visualize energy flows from sources to consumption sectors.",
   "keywords": [
     "sankey",

package/scripts/validate-optimization.sh

@@ -0,0 +1,147 @@
+#!/bin/bash
+
+# Master Validation Script for US Energy Sankey v5
+# Comprehensive validation with real data (1800-2021)
+# Ensures pixel-perfect accuracy during optimization
+
+echo "Energy Sankey - Comprehensive Validation"
+echo "================================================="
+echo "Testing with real US energy data: 1800-2021 (222 years)"
+echo ""
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Track validation results
+NUMERICAL_RESULT=0
+VISUAL_RESULT=0
+PERFORMANCE_RESULT=0
+BUILD_RESULT=0
+
+# Function to print status
+print_status() {
+    if [ $1 -eq 0 ]; then
+        echo -e "${GREEN} $2 PASSED${NC}"
+    else
+        echo -e "${RED} $2 FAILED${NC}"
+    fi
+}
+
+# Function to cleanup background processes
+cleanup() {
+    echo -e "\n🧹 Cleaning up..."
+    if [ ! -z "$SERVER_PID" ]; then
+        kill $SERVER_PID 2>/dev/null
+        wait $SERVER_PID 2>/dev/null
+        echo "   Server stopped"
+    fi
+}
+
+# Trap to ensure cleanup on exit
+trap cleanup EXIT INT TERM
+
+# Step 1: Build the project
+echo -e "${BLUE}Step 1: Building project...${NC}"
+npm run build
+BUILD_RESULT=$?
+print_status $BUILD_RESULT "Build"
+
+if [ $BUILD_RESULT -ne 0 ]; then
+    echo -e "${RED}Build failed. Cannot proceed with validation.${NC}"
+    exit 1
+fi
+
+# Verify required build files exist
+echo "🔍 Verifying build artifacts..."
+if [ ! -f "dist/us-energy-sankey-v5.standalone.esm.js" ]; then
+    echo -e "${RED}Required standalone ESM build not found${NC}"
+    exit 1
+fi
+if [ ! -f "examples/data/data.json" ]; then
+    echo -e "${RED}Required data file not found${NC}"
+    exit 1
+fi
+echo -e "${GREEN}All required files present${NC}"
+
+# Step 2: Run numerical validation
+echo -e "\n${BLUE}Step 2: Running numerical validation...${NC}"
+echo "Testing mathematical consistency with real data"
+npm run test:numerical
+NUMERICAL_RESULT=$?
+print_status $NUMERICAL_RESULT "Numerical Validation"
+
+# Step 3: Start server for visual/performance tests
+echo -e "\n${BLUE}🌐 Step 3: Starting local server...${NC}"
+npm run serve &
+SERVER_PID=$!
+echo "Server PID: $SERVER_PID"
+
+# Wait for server to start
+echo "Waiting for server to start..."
+sleep 3
+
+# Check if server is running
+if ! curl -s http://localhost:8080 > /dev/null; then
+    echo -e "${RED} Server failed to start${NC}"
+    exit 1
+fi
+echo -e "${GREEN} Server running on http://localhost:8080${NC}"
+
+# Step 4: Run visual validation
+echo -e "\n${BLUE} Step 4: Running visual validation...${NC}"
+echo "Testing pixel-perfect accuracy across energy eras"
+npm run test:visual
+VISUAL_RESULT=$?
+print_status $VISUAL_RESULT "Visual Validation"
+
+# Step 5: Run performance validation
+echo -e "\n${BLUE} Step 5: Running performance validation...${NC}"
+echo "Testing performance with 222 years of real data"
+npm run test:performance
+PERFORMANCE_RESULT=$?
+print_status $PERFORMANCE_RESULT "Performance Validation"
+
+# Generate final report
+echo -e "\nVALIDATION SUMMARY"
+echo "===================="
+print_status $BUILD_RESULT "Build"
+print_status $NUMERICAL_RESULT "Numerical Validation (Real Data Calculations)"
+print_status $VISUAL_RESULT "Visual Validation (Pixel-Perfect Screenshots)"
+print_status $PERFORMANCE_RESULT "Performance Validation (Speed & Memory)"
+
+# Calculate overall result
+OVERALL_RESULT=$((BUILD_RESULT + NUMERICAL_RESULT + VISUAL_RESULT + PERFORMANCE_RESULT))
+
+if [ $OVERALL_RESULT -eq 0 ]; then
+    echo -e "\n${GREEN} ALL VALIDATIONS PASSED!${NC}"
+    echo -e "${GREEN} Your optimization maintains identical results${NC}"
+    echo -e "${GREEN} Ready for production deployment${NC}"
+else
+    echo -e "\n${RED} VALIDATION FAILURES DETECTED${NC}"
+    echo -e "${RED}  Do not proceed with optimization until all tests pass${NC}"
+    
+    # Provide specific guidance
+    if [ $NUMERICAL_RESULT -ne 0 ]; then
+        echo -e "${YELLOW} Numerical failures: Check mathematical calculations and constants${NC}"
+    fi
+    if [ $VISUAL_RESULT -ne 0 ]; then
+        echo -e "${YELLOW} Visual failures: Check validation/diffs/ for pixel differences${NC}"
+    fi
+    if [ $PERFORMANCE_RESULT -ne 0 ]; then
+        echo -e "${YELLOW} Performance failures: Check if performance thresholds were exceeded${NC}"
+    fi
+fi
+
+# Show validation artifacts
+echo -e "\n VALIDATION ARTIFACTS"
+echo "======================"
+echo " Numerical test results: Jest output above"
+echo " Visual baselines: validation/baselines/"
+echo " Visual differences: validation/diffs/"
+echo " Performance data: validation/performance/"
+
+exit $OVERALL_RESULT

package/src/styles/controls.css

@@ -140,7 +140,7 @@ input[type="checkbox"].switch_1 {
     appearance: none;
     width: 3.5em;
     height: 1.5em;
-    background: black;
+    background: #666666;
     border-radius: 3em;
     position: relative;
     cursor: pointer;
@@ -150,7 +150,7 @@ input[type="checkbox"].switch_1 {
 }
 
 input[type="checkbox"].switch_1:checked {
-    background: black;
+    background: #e49942;
 }
 
 input[type="checkbox"].switch_1:after {
@@ -173,6 +173,20 @@ input[type="checkbox"].switch_1:checked:after {
     left: calc(100% - 1.5em);
 }
 
+/* Hover effects for better interactivity */
+input[type="checkbox"].switch_1:hover {
+    background: #555555;
+}
+
+input[type="checkbox"].switch_1:checked:hover {
+    background: #e49942;
+}
+
+/* Focus states for accessibility */
+input[type="checkbox"].switch_1:focus {
+    box-shadow: 0 0 0 3px #F5DBBC;
+}
+
 /* Milestone Tick Markers */
 #testTick .tick text {
     cursor: pointer;