@pixelated-tech/components 3.13.0 → 3.13.1

package/dist/components/admin/site-health/site-health-dependency-vulnerabilities.js

@@ -37,6 +37,8 @@ export function SiteHealthDependencyVulnerabilities({ siteName }) {
                                                     data.status === 'Moderate Risk' ? '#f59e0b' :
                                                         data.status === 'High Risk' ? '#ef4444' :
                                                             data.status === 'Critical' ? '#ef4444' : '#6b7280'
-                                        } }) })] }) }), _jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsxs("span", { className: "health-audit-title", children: ["Dependencies: ", data.totalDependencies || data.dependencies || 0] }) })] }), data.vulnerabilities && data.vulnerabilities.length > 0 && (_jsxs("div", { children: [_jsxs("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: ["Vulnerabilities (", data.summary.total, ")"] }), _jsx("div", { className: "health-audit-list", children: data.vulnerabilities.map((vuln, index) => (_jsx("div", { className: `health-vulnerability-item health-vulnerability-${vuln.severity}`, children: _jsxs("div", { className: "health-vulnerability-header", children: [_jsx("span", { className: "health-vulnerability-severity", children: vuln.severity }), _jsxs("div", { children: [_jsx("span", { className: "health-vulnerability-name", children: vuln.name }), vuln.title && (_jsx("p", { className: "health-vulnerability-details", children: vuln.title })), _jsxs("div", { className: "health-vulnerability-meta", children: [_jsxs("span", { className: "health-vulnerability-range", children: ["Range: ", vuln.range] }), vuln.fixAvailable && (_jsx("span", { className: "health-vulnerability-fix", children: "\u2713 Fix available" }))] }), vuln.url && (_jsx("a", { href: vuln.url, target: "_blank", rel: "noopener noreferrer", className: "health-vulnerability-link", children: "View details \u2192" }))] })] }) }, index))) })] })), (!data.vulnerabilities || data.vulnerabilities.length === 0) && data.status === 'Secure' && (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsx("span", { className: "health-audit-title", children: "No vulnerabilities found" }) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));
+                                        } }) })] }) }), _jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsxs("span", { className: "health-audit-title", children: ["Dependencies: ", data.totalDependencies || data.dependencies || 0] }) })] }), data.vulnerabilities && data.vulnerabilities.length > 0 && (_jsxs("div", { children: [_jsxs("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: ["Vulnerabilities (", data.summary.total, ")"] }), _jsx("div", { className: "health-audit-list", children: data.vulnerabilities.map((vuln, index) => (
+                                // eslint-disable-next-line pixelated/class-name-kebab-case
+                                _jsx("div", { className: `health-vulnerability-item health-vulnerability-${vuln.severity}`, children: _jsxs("div", { className: "health-vulnerability-header", children: [_jsx("span", { className: "health-vulnerability-severity", children: vuln.severity }), _jsxs("div", { children: [_jsx("span", { className: "health-vulnerability-name", children: vuln.name }), vuln.title && (_jsx("p", { className: "health-vulnerability-details", children: vuln.title })), _jsxs("div", { className: "health-vulnerability-meta", children: [_jsxs("span", { className: "health-vulnerability-range", children: ["Range: ", vuln.range] }), vuln.fixAvailable && (_jsx("span", { className: "health-vulnerability-fix", children: "\u2713 Fix available" }))] }), vuln.url && (_jsx("a", { href: vuln.url, target: "_blank", rel: "noopener noreferrer", className: "health-vulnerability-link", children: "View details \u2192" }))] })] }) }, index))) })] })), (!data.vulnerabilities || data.vulnerabilities.length === 0) && data.status === 'Secure' && (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", style: { color: '#10b981' }, children: "\u2713" }), _jsx("div", { className: "health-audit-content", children: _jsx("span", { className: "health-audit-title", children: "No vulnerabilities found" }) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));
         } }));
 }

package/dist/components/general/buzzwordbingo.css

@@ -2,15 +2,15 @@
 ============  BUZZWORD BINGO   ============
 ======================================== */
 
-.bingoCard {
+.bingo-card {
 	border: 1px solid #AAA;
 	max-width: 640px;
 	margin: 0 auto;
 }
 
-.bingoCard {
+.bingo-card {
 
-	.bingoHeader{
+	.bingo-header{
 		border: 1px solid #AAA;
 		background-color: #CCC;
 		font-size: 2em;
@@ -18,24 +18,24 @@
 		aspect-ratio : 3 / 1;
 	}
 
-	.bingoBox {
+	.bingo-box {
 		border: 1px solid #AAA;
 		aspect-ratio : 1 / 1;
 		width: 100%;
 		height: 100%;
 	}
 
-	.bingoBoxText, 
-	.bingoBoxFreeSpace {
+	.bingo-box-text, 
+	.bingo-box-free-space {
 		text-align:center;
 		margin: auto 0;
 		/* word-spacing: 1000px; */ /* force wrap after each word */
 	}
 
-	.bingoBoxFreeSpace {
+	.bingo-box-free-space {
 		font-size: 1.1em;
 		font-weight: bold;
 	}
 	
-}
+} 
 

package/dist/components/general/buzzwordbingo.js

@@ -26,7 +26,7 @@ export function BuzzwordBingo(props) {
     useEffect(() => {
         setBingoWords(getBingoWords(buzzwords, 24));
     }, [buzzwords]);
-    return (_jsxs("div", { className: "bingoCard rowfix-5col", children: [myBingoHeaders.map((word) => (_jsx(BingoHeader, { word: word }, word))), bingoWords.map((word) => (_jsx(BingoBox, { word: word }, word)))] }));
+    return (_jsxs("div", { className: "bingo-card rowfix-5col", children: [myBingoHeaders.map((word) => (_jsx(BingoHeader, { word: word }, word))), bingoWords.map((word) => (_jsx(BingoBox, { word: word }, word)))] }));
 }
 /**
  * BingoHeader — renders a single header cell for the bingo card (letters B I N G O).
@@ -38,7 +38,7 @@ BingoHeader.propTypes = {
     word: PropTypes.string.isRequired,
 };
 function BingoHeader({ word }) {
-    return (_jsx("div", { className: "bingoHeader gridItem", children: _jsx("div", { className: "bingoBoxText", children: word }) }));
+    return (_jsx("div", { className: "bingo-header grid-item", children: _jsx("div", { className: "bingo-box-text", children: word }) }));
 }
 /**
  * BingoBox — renders an individual bingo cell (word or 'FREE SPACE').
@@ -50,5 +50,5 @@ BingoBox.propTypes = {
     word: PropTypes.string.isRequired,
 };
 function BingoBox({ word }) {
-    return (_jsx("div", { className: "bingoBox gridItem", children: _jsx("div", { className: (word == "FREE SPACE") ? "bingoBoxFreeSpace" : "bingoBoxText", children: word }) }));
+    return (_jsx("div", { className: "bingo-box grid-item", children: _jsx("div", { className: (word == "FREE SPACE") ? "bingo-box-free-space bingo-box-free-space bingoBoxFreeSpace" : "bingo-box-text bingo-box-text bingoBoxText", children: word }) }));
 }

package/dist/components/general/countup.css

@@ -0,0 +1,19 @@
+.countup {
+	text-align: center;
+
+	.countup-pre,  .countup-counter,  .countup-post {
+		font-size: var(--font-size1);
+		font-family: var(--header-font);
+		font-weight: 800;
+		color: var(--primary-color);
+	}
+	.countup-pre {
+		--do-nothing: true;
+	}
+	.countup-counter {
+		--do-nothing: true;
+	}
+	.countup-post {
+		--do-nothing: true;
+	}
+}

package/dist/components/general/countup.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntersectionObserver } from '@pixelated-tech/components';
+import "./countup.css";
+/**
+ * CountUp Component - Animates a count from a starting number to an ending number over a specified duration.
+ * @param id - The ID for the count element.
+ * @param pre - Text to display before the count.
+ * @param post - Text to display after the count.
+ * @param start - The starting number of the count.
+ * @param end - The ending number of the count.
+ * @param duration - The duration of the count in milliseconds.
+ * @param decimals - Number of decimal places to display.
+ * @param content - Additional content to display below the count.
+ */
+CountUp.propTypes = {
+    id: PropTypes.string.isRequired,
+    pre: PropTypes.string,
+    post: PropTypes.string,
+    start: PropTypes.number.isRequired,
+    end: PropTypes.number.isRequired,
+    duration: PropTypes.number.isRequired,
+    decimals: PropTypes.number,
+    content: PropTypes.string,
+};
+export function CountUp({ id, pre = '', post = '', start, end, duration, decimals = 0, content }) {
+    const decimalize = (val) => decimalPlaces > 0 ? val.toFixed(decimalPlaces) : Math.floor(val).toString();
+    const decimalPlaces = decimals ?? 0;
+    const [counter, setCounter] = useState(decimalize(start));
+    const intervalMs = 16; // ~60fps
+    const [isVisible, setIsVisible] = useState(false);
+    const containerRef = useIntersectionObserver((entry) => {
+        if (entry.isIntersecting)
+            setIsVisible(true);
+    }, {
+        rootMargin: "0px 0px -100px 0px", // same as scrollfade
+        threshold: 0, // same as scrollfade
+        disconnectAfterIntersection: true
+    } // fires once
+    );
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const steps = Math.max(1, Math.round(duration / intervalMs));
+        const step = (end - start) / steps;
+        let current = start;
+        const timer = setInterval(() => {
+            current += step;
+            const done = (step >= 0) ? current >= end : current <= end;
+            if (done) {
+                setCounter(decimalize(end));
+                clearInterval(timer);
+            }
+            else {
+                setCounter(decimalize(current));
+            }
+        }, intervalMs);
+    }, [isVisible]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: containerRef, className: "countup", children: [_jsx("span", { className: 'countup-pre', children: pre }), _jsx("span", { id: id, className: 'countup-counter', children: counter }), _jsx("span", { className: 'countup-post', children: post }), _jsx("p", { children: content })] }) }));
+}

package/dist/components/general/global-error.css

@@ -32,7 +32,7 @@
 
 .ge-actions { display: flex; gap: var(--ge-gap); justify-content: center; margin-top: 20px; flex-wrap: wrap; }
 .ge-btn { border-radius: var(--ge-radius); padding: 0.6rem 1rem; cursor: pointer; border: none; background: transparent; }
-.ge-btn--primary { background: var(--ge-foreground); color: #fff; }
+.ge-btn-primary { background: var(--ge-foreground); color: #fff; }
 .ge-link { color: var(--ge-foreground); text-decoration: underline; align-self: center; }
 .ge-toggle { background: transparent; border: 1px solid #ddd; padding: 0.5rem 0.85rem; border-radius: var(--ge-radius); }
 

package/dist/components/general/global-error.js

@@ -27,5 +27,5 @@ export function GlobalErrorUI({ error = null, reset, siteInfo, className = '' })
     const contactHref = typeof si?.email === 'string'
         ? `mailto:${si.email}`
         : undefined;
-    return (_jsx("main", { role: "alert", "aria-live": "polite", className: `global-error ${className}`, children: _jsxs("div", { className: "ge-inner", children: [_jsx("h1", { className: "ge-title", children: "Something went wrong" }), _jsx("p", { className: "ge-lead", children: "We encountered an unexpected error. Please try again or contact the site maintainer." }), _jsxs("div", { className: "ge-actions", children: [_jsx("button", { onClick: () => reset?.(), className: "ge-btn ge-btn--primary", children: "Try again" }), contactHref ? (_jsx("a", { href: contactHref, rel: "noopener noreferrer", className: "ge-link", children: "Contact support" })) : (_jsx("span", { className: "ge-unavailable", children: "Contact info unavailable" })), _jsx("button", { onClick: () => setShowDetails(s => !s), "aria-pressed": showDetails, className: "ge-btn ge-toggle", children: showDetails ? 'Hide details' : 'Show details' })] }), showDetails && (_jsxs("pre", { "data-testid": "error-details", className: "ge-details", children: [String(error?.message ?? 'Unknown error'), '\n', error?.stack ?? ''] })), _jsx("p", { className: "ge-note", children: "If this keeps happening, please file an issue or reach out to the maintainer." })] }) }));
+    return (_jsx("main", { role: "alert", "aria-live": "polite", className: `global-error ${className}`, children: _jsxs("div", { className: "ge-inner", children: [_jsx("h1", { className: "ge-title", children: "Something went wrong" }), _jsx("p", { className: "ge-lead", children: "We encountered an unexpected error. Please try again or contact the site maintainer." }), _jsxs("div", { className: "ge-actions", children: [_jsx("button", { onClick: () => reset?.(), className: "ge-btn ge-btn-primary", children: "Try again" }), contactHref ? (_jsx("a", { href: contactHref, rel: "noopener noreferrer", className: "ge-link", children: "Contact support" })) : (_jsx("span", { className: "ge-unavailable", children: "Contact info unavailable" })), _jsx("button", { onClick: () => setShowDetails(s => !s), "aria-pressed": showDetails, className: "ge-btn ge-toggle", children: showDetails ? 'Hide details' : 'Show details' })] }), showDetails && (_jsxs("pre", { "data-testid": "error-details", className: "ge-details", children: [String(error?.message ?? 'Unknown error'), '\n', error?.stack ?? ''] })), _jsx("p", { className: "ge-note", children: "If this keeps happening, please file an issue or reach out to the maintainer." })] }) }));
 }

package/dist/components/general/menu-accordion.css

@@ -3,7 +3,7 @@
 =====      SLIDING PANEL MENU         =====
 ======================================== */
 
-.panelMenuButton {
+.panel-menu-button {
 	/* background-color: rgba(255,255,255,0.7); */
 	/* display: none; */
 	/* display: inline; */
@@ -23,7 +23,7 @@
 }
 
 
-.panelMenuButton .hamburger{
+.panel-menu-button .hamburger{
     cursor: pointer;
    	font-family: Verdana;
 	font-size: 1.75rem;
@@ -31,7 +31,7 @@
 
 }
 
-.panelMenuButton .hamburger2{
+.panel-menu-button .hamburger2{
 	/* 3 lines instead of unicode hamburger (U+2261) */
     /* the tricks */
 	/* display: block; */
@@ -51,12 +51,12 @@
 }
 
 /* hamburger hover style */
-/* .accordionMenu .hamburger:hover {
+/* .accordion-menu .hamburger:hover {
     color: #FFC75F;
 } */
 
 @media screen and (max-width: 480px) {
-	.panelMenuButton {
+	.panel-menu-button {
 		display: inline;
 	}
 }
@@ -77,7 +77,7 @@
 ============  ACCORDION MENU   ============
 ======================================== */
 
-.accordionMenuWrapper {
+.accordion-menu-wrapper {
 	/* background: #FFF; */
 	background: rgba(150, 190, 250, 0.7);
 	border-right: 1px solid #ccc;
@@ -91,33 +91,33 @@
     padding: 5px;
 }
 
-.accordionIn {
+.accordion-in {
 	left: 0px;
 	transition: transform 0.5s ease-out 0.0s;
 	transform: translateX(0px);
 }
 
-.accordionOut {
+.accordion-out {
 	left: 0px;
 	transition: transform 0.5s ease-out 0.0s;
 	transform: translateX(-250px);
 }
 
-.accordionDown {
+.accordion-down {
 	top: 60px;
 	transition: transform 0.5s ease-out 0.0s;
 	transform: translateY(0px);
 }
 
-.accordionUp {
+.accordion-up {
 	/* bottom: 0px; */
 	top: 60px;
 	transition: transform 0.55s ease-out 0.0s;
 	transform: translateY(-150%);
 }
 
-.accordionMenu,
-.accordionMenu ul {
+.accordion-menu,
+.accordion-menu ul {
 	/* ALL LIST LEVELS */
 	display: inline-block;
 	list-style-type: none;
@@ -125,17 +125,17 @@
 	width: 200px;
 }
 
-.accordionMenu li {
+.accordion-menu li {
 	/* ALL LIST ITEM LEVELS */
 	border-bottom: 1px solid #FFF;
 }
 
-.accordionMenu li:first-child {
+.accordion-menu li:first-child {
 	/* ALL LIST ITEM LEVELS */
 	border-top: 1px solid #FFF;
 }
 
-.accordionMenu a {
+.accordion-menu a {
 	color: #000;
 	display: block;
 	text-decoration: none;
@@ -143,13 +143,13 @@
 
 /* ===== LEVEL 1 ===== */
 
-.accordionMenu > ul {
+.accordion-menu > ul {
 	margin: 0px 0px 0px 5px;
 	padding: 0;
 	width: 200px;
 }
 
-.accordionMenu > ul > li > a {
+.accordion-menu > ul > li > a {
 	/* this is the button */
 	color: black;
 	background: #CCC;
@@ -160,24 +160,24 @@
 	padding-left: 10px;
 }
 
-.accordionMenu > ul > li > a:hover {
+.accordion-menu > ul > li > a:hover {
 	background: #EDD;
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
 }
 
 /* ===== LEVEL 2 ===== */
 
-.accordionMenu > ul > ul {
+.accordion-menu > ul > ul {
 	margin: 0px 0px 0px 20px;
 	padding: 0;
 	width: 180px;
 }
 
-.menuHide { 
+.menu-hide { 
 	animation: hide 0.25s linear;
    	animation-fill-mode: forwards;
 }
-.menuShow { 
+.menu-show { 
 	animation: show 0.25s linear;
    	animation-fill-mode: forwards;
 }
@@ -193,12 +193,12 @@
 }
 
 
-.accordionMenu ul > ul > li:first-child {
+.accordion-menu ul > ul > li:first-child {
 	/* ALL LIST ITEM LEVELS */
 	border-top: 0px;
 }
 
-.accordionMenu > ul > ul > li > a {
+.accordion-menu > ul > ul > li > a {
 	/* this is the button */
 	color: black;
 	background: #CCC;
@@ -208,7 +208,7 @@
 	line-height:30px;
 }
 
-.accordionMenu > ul > ul > li > a:hover {
+.accordion-menu > ul > ul > li > a:hover {
 	background: #EDD;
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
 }

package/dist/components/general/menu-accordion.js

@@ -81,15 +81,15 @@ export function MenuAccordion(props) {
         if (left.current === 0) {
             if (debug)
                 console.log("Moving Menu Out");
-            menuParent?.classList.remove('accordionDown'); /* accordionIn */
-            menuParent?.classList.add('accordionUp'); /* accordionOut */
+            menuParent?.classList.remove('accordion-down'); /* accordionIn */
+            menuParent?.classList.add('accordion-up'); /* accordionOut */
             setLeft(-250);
         }
         else {
             if (debug)
                 console.log("Moving Menu In");
-            menuParent?.classList.remove('accordionUp'); /* accordionOut */
-            menuParent?.classList.add('accordionDown'); /* accordionIn */
+            menuParent?.classList.remove('accordion-up'); /* accordionOut */
+            menuParent?.classList.add('accordion-down'); /* accordionIn */
             setLeft(0);
         }
     }
@@ -99,26 +99,26 @@ export function MenuAccordion(props) {
             console.log("Expanding Menu Item...");
         const parent = clickedItem.parentElement;
         const subMenu = parent?.nextElementSibling;
-        if (subMenu && subMenu.classList.contains('menuHide')) {
+        if (subMenu && subMenu.classList.contains('menu-hide')) {
             if (debug)
                 console.log("Opening Submenu");
-            subMenu.classList.add('menuShow');
-            subMenu.classList.remove('menuHide');
+            subMenu.classList.add('menu-show');
+            subMenu.classList.remove('menu-hide');
         }
         else {
             if (debug)
                 console.log("Closing Submenu");
             if (subMenu)
-                subMenu.classList.add('menuHide');
+                subMenu.classList.add('menu-hide');
             if (subMenu)
-                subMenu.classList.remove('menuShow');
+                subMenu.classList.remove('menu-show');
         }
     }
     useEffect(() => {
         window.moveMenu = moveMenu; // attach moveMenu function to the window object for use in MenuAccordionButton
         documentRef.current = document; // for moveMenu
         const menu = document.getElementById('accordionMenu');
-        const menuBtn = document.getElementById('panelMenuButton');
+        const menuBtn = document.getElementById('panel-menu-button');
         function handleMenuClick(event) {
             if (debug)
                 console.log("event : ", event, "target : ", event.target);
@@ -157,7 +157,7 @@ export function MenuAccordion(props) {
             document.removeEventListener('click', handleMenuClick);
         };
     }, []);
-    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", suppressHydrationWarning: true, children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
+    return (_jsx("div", { className: "accordion-menu-wrapper accordion-up", suppressHydrationWarning: true, children: _jsx("div", { className: "accordion-menu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
 }
 /* ========== MENU GROUP ========== */
 /**
@@ -177,7 +177,7 @@ MenuAccordionGroup.propTypes = {
 };
 export function MenuAccordionGroup(props) {
     const myMenuItems = (props.menuItems.routes) ? props.menuItems.routes : props.menuItems;
-    return (_jsx("ul", { className: (props.state === "hide" ? "menuHide" : "menuShow"), children: generateMenuItems({ menuData: myMenuItems, state: props.state ?? "hide" }) }, "menu-group-" + props.menuItems.name));
+    return (_jsx("ul", { className: (props.state === "hide" ? "menu-hide" : "menu-show"), children: generateMenuItems({ menuData: myMenuItems, state: props.state ?? "hide" }) }, "menu-group-" + props.menuItems.name));
 }
 /* ========== MENU ITEM ========== */
 /**
@@ -215,5 +215,5 @@ export function MenuAccordionButton(props) {
         }
     }
     // suppressHydrationWarning suppresses hydration mismatch warnings for this button
-    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: hamburgerIcon }) }));
+    return (_jsx("button", { className: "panel-menu-button", id: "panel-menu-button", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: hamburgerIcon }) }));
 }

package/dist/components/general/menu-expando.css

@@ -4,7 +4,7 @@
 =====    MENU EXPANDO COMPONENT       =====
 ======================================== */
 
-.menuExpando {
+.menu-expando {
 	display: inline-block;
 }
 
@@ -72,7 +72,7 @@ details.menu-expando-wrapper a:hover {
 }
 
 /* ========== NESTED MENU STYLING ========== */
-details.menuExpandoNested {
+details.menu-expando-nested {
 	display: block;
 }
 
@@ -118,7 +118,7 @@ details.menuExpandoNested li {
 }
 
 /* ========== ANIMATIONS ========== */
-@keyframes menuExpandoSlideDown {
+@keyframes menu-expando-slide-down {
 	from {
 		opacity: 0;
 	}
@@ -127,7 +127,7 @@ details.menuExpandoNested li {
 	}
 }
 
-@keyframes menuExpandoSlideUp {
+@keyframes menu-expando-slide-up {
 	from {
 		opacity: 1;
 	}

package/dist/components/general/menu-expando.js

@@ -38,7 +38,7 @@ export function MenuExpando(props) {
         if (!summary)
             return;
         // Initialize nested menus to be closed
-        const nestedDetails = details.querySelectorAll('details.menuExpandoNested');
+        const nestedDetails = details.querySelectorAll('details.menu-expando-nested');
         nestedDetails.forEach((nested) => {
             const nestedUl = nested.querySelector('ul');
             if (nestedUl) {
@@ -57,7 +57,7 @@ export function MenuExpando(props) {
             isAnimating = true;
             if (details.open) {
                 // Closing animation
-                ul.style.animation = 'menuExpandoSlideUp 0.3s ease-out forwards';
+                ul.style.animation = 'menu-expando-slide-up 0.3s ease-out forwards';
                 setTimeout(() => {
                     details.open = false;
                     ul.style.animation = '';
@@ -67,7 +67,7 @@ export function MenuExpando(props) {
             else {
                 // Opening animation
                 details.open = true;
-                ul.style.animation = 'menuExpandoSlideDown 0.3s ease-out forwards';
+                ul.style.animation = 'menu-expando-slide-down 0.3s ease-out forwards';
                 setTimeout(() => {
                     ul.style.animation = '';
                     isAnimating = false;
@@ -75,7 +75,7 @@ export function MenuExpando(props) {
             }
         });
         // Handle nested menu animations
-        const nestedDetailsForAnimation = details.querySelectorAll('details.menuExpandoNested');
+        const nestedDetailsForAnimation = details.querySelectorAll('details.menu-expando-nested');
         nestedDetailsForAnimation.forEach((nested) => {
             nested.addEventListener('toggle', (e) => {
                 const nestedUl = nested.querySelector('ul');
@@ -115,7 +115,7 @@ export function MenuExpando(props) {
             for (const item of props.menuItems) {
                 if (item && item.routes && item.routes.length > 0) {
                     // Item has nested routes - create expandable submenu
-                    myItems.push(_jsx("li", { children: _jsxs("details", { className: "menuExpandoNested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
+                    myItems.push(_jsx("li", { children: _jsxs("details", { className: "menu-expando-nested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
                 }
                 else if (item) {
                     // Regular item without nested routes
@@ -134,7 +134,7 @@ export function MenuExpando(props) {
         }
         return myItems;
     }
-    return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menu-expando-wrapper", id: "menu-expando-wrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
+    return (_jsx("div", { className: "menu-expando", id: "menu-expando", children: _jsxs("details", { className: "menu-expando-wrapper", id: "menu-expando-wrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
 }
 /**
  * MenuExpandoItem — simple menu item renderer for `MenuExpando`.
@@ -169,5 +169,5 @@ export function MenuExpandoButton(props) {
             handleMenuExpandoButtonClick(event);
         }
     }
-    return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Toggle mobile menu", children: _jsx(SmartImage, { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
+    return (_jsx("div", { className: "menu-expando-button", id: "menu-expando-button", onClick: handleMenuExpandoButtonClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Toggle mobile menu", children: _jsx(SmartImage, { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
 }

package/dist/components/general/microinteractions.css

@@ -43,7 +43,7 @@ body.buttonring {
         box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
     }
 }
-body.cartpulse .pixCart #pixCartButton {
+body.cartpulse .pix-cart #pix-cart-button {
     animation: pulse-glow 2s infinite;
 }
 

package/dist/components/general/nerdjoke.css

@@ -3,12 +3,12 @@
 ===============  NERDJOKE   ===============
 ======================================== */
 
-.nerdJoke {
+.nerd-joke {
 	padding-bottom: 20px;
 	font-size: 24px;
 }
 
-.nerdJoke .jokeText div {
+.nerd-joke .joke-text div {
 	padding-bottom: 15px;
 }
 
@@ -20,7 +20,7 @@
 	font-weight: bold;
 }
 
-.jokeButton {
+.joke-button {
 	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
     border: 1px solid #999;
     display: inline-block;
@@ -44,14 +44,14 @@
 }
 
 
-.jokeTimer {
+.joke-timer {
     border: 1px solid #AAA;
 	position: relative;
 	/* height: 25px;
 	width: 100%; */
 }
 
-.jokeTimerSvg {
+.joke-timer-svg {
 	width: 100%;
 	height: 10px;
 	fill: rgb(190,190,190);

package/dist/components/general/nerdjoke.js

@@ -103,7 +103,7 @@ export function NerdJoke(props) {
             }
         };
     }, [loadJoke, startTimer]);
-    return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: formatTimeLeft(timeLeftRef.current) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", joke.answer, " "] })] })] })] }) }));
+    return (_jsx("div", { className: "nerd-joke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "joke-timer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "joke-timer-svg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: formatTimeLeft(timeLeftRef.current) })] }) }), _jsxs("div", { className: "joke-text grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", joke.answer, " "] })] })] })] }) }));
 }
 JokeButton.propTypes = {
     /** Click handler invoked when the button is pressed (e.g., pause or fetch next). */
@@ -115,5 +115,5 @@ function JokeButton(props) {
     /* <div className="jokeButton" onClick={props.clickFunction}>
             {props.buttonText}
         </div> */
-    return (_jsx("button", { className: "jokeButton", onClick: props.clickFunction, children: props.buttonText }));
+    return (_jsx("button", { className: "joke-button", onClick: props.clickFunction, children: props.buttonText }));
 }

package/dist/components/general/recipe.css

@@ -86,7 +86,7 @@
 ==========    BACK TO TOP    ==============
 ======================================== */
 
-.backToTop {
+.back-to-top {
 	background: #FFF;
 	border: 1px solid #CCC;
 	color: #000;

package/dist/components/general/recipe.js

@@ -259,5 +259,5 @@ export function BackToTop() {
         return false;
     }
     const config = usePixelatedConfig();
-    return (_jsx("div", { className: "backToTop", children: _jsxs("a", { href: "#top", onClick: scrollToTop, children: [_jsx("div", { children: _jsx(SmartImage, { src: "/images/icons/up.jpg", title: "Back To Top", alt: "Back To Top", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { children: "Back To Top" })] }) }));
+    return (_jsx("div", { className: "back-to-top", children: _jsxs("a", { href: "#top", onClick: scrollToTop, children: [_jsx("div", { children: _jsx(SmartImage, { src: "/images/icons/up.jpg", title: "Back To Top", alt: "Back To Top", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { children: "Back To Top" })] }) }));
 }

package/dist/components/general/semantic.js

@@ -243,7 +243,7 @@ export function PageGridItem({ id, className, columnSpan, rowSpan, columnStart,
     return (
     /* THIS IS AN OLD STYLE */
     /* <div className={"grid-item" + */
-    _jsx("div", { className: "gridItem" +
+    _jsx("div", { className: "grid-item" +
             (className ? ` ${className}` : '') +
             (columnStart && columnSpan && !columnEnd ? ` grid-s${columnStart}-w${columnSpan}` : '') +
             (columnStart && columnEnd && !columnSpan ? ` grid-s${columnStart}-e${columnEnd}` : ''), id: (id) ? id : undefined, style: itemStyle, children: children }));