@codeforamerica/marcomms-design-system 1.14.0 → 1.15.0

package/dist/index.js

@@ -2075,7 +2075,7 @@
 
       .slide {
         background: var(--background);
-        box-shadow: var(--shadow-small);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
         color: inherit;
         display: flex;
         flex-direction: column;
@@ -2084,13 +2084,13 @@
         margin-inline: auto;
         max-width: var(--width);
         text-decoration: none;
-        transition: box-shadow 0.2s ease-in-out;
+        transition: filter 0.2s ease-in-out;
         width: 100%;
       }
 
       .slide:hover,
       .slide:focus {
-        box-shadow: var(--shadow-medium);
+        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
       }
 
       .image {
@@ -2518,7 +2518,7 @@
           min-width: calc(var(--carousel-dot-size) * 0.8);
         }
       }
-    `])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=Ft.ITEMS_PER_VIEW_DESKTOP,this.autoPlay=!0,this.autoPlayDuration=Math.max(100,Ft.AUTOPLAY_DURATION),this.autoPlayTimer=null,this.autoPlayTimeout=null,this.touchStartX=null,this.touchEndX=null,this._initialized=!1,this._resizeTimerId=null,this._mouseEnterListener=null,this._mouseLeaveListener=null}connectedCallback(){super.connectedCallback(),this.style.setProperty("--items-per-view",this.itemsPerView),this.addEventListener("keydown",t=>this._handleKeydown(t)),this.addEventListener("touchstart",t=>this._handleTouchStart(t),!1),this.addEventListener("touchend",t=>this._handleTouchEnd(t),!1),this._resizeListener=()=>{this._resizeTimerId&&clearTimeout(this._resizeTimerId),this._resizeTimerId=setTimeout(()=>{this.updateItemsPerView(),this.updateCarouselHeight()},150)},window.addEventListener("resize",this._resizeListener)}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay(),this._resizeListener&&window.removeEventListener("resize",this._resizeListener),this._resizeTimerId&&clearTimeout(this._resizeTimerId);const t=this.shadowRoot?.querySelector(".carousel-slides");t&&this._mouseEnterListener&&this._mouseLeaveListener&&(t.removeEventListener("mouseenter",this._mouseEnterListener),t.removeEventListener("mouseleave",this._mouseLeaveListener))}updated(t){t.has("itemsPerView")&&this.style.setProperty("--items-per-view",this.itemsPerView),t.has("currentPage")&&this.updateItemVisibility()}firstUpdated(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");if(t&&!this._initialized){this._initialized=!0;const e=t.assignedElements();this.totalSlides=e.length,this.updateItemsPerView(),this.updateItemVisibility(),this.startAutoPlay(),this._waitForImages(e,5e3).then(()=>{this.updateCarouselHeight()})}e&&!this._mouseEnterListener&&(this._mouseEnterListener=()=>{this.stopAutoPlay()},this._mouseLeaveListener=()=>{this.isPaused||this._scheduleNextPage()},e.addEventListener("mouseenter",this._mouseEnterListener),e.addEventListener("mouseleave",this._mouseLeaveListener))}_waitForImages(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3e3;return Promise.race([Promise.all(Array.from(t).map(t=>Promise.all(Array.from(t.querySelectorAll("img")).map(t=>t.complete?Promise.resolve():new Promise(e=>{t.addEventListener("load",e,{once:!0}),t.addEventListener("error",e,{once:!0})}))))),new Promise((t,i)=>setTimeout(()=>i(new Error("Image load timeout")),e))]).catch(()=>Promise.resolve())}get totalPages(){return Math.ceil(this.totalSlides/this.itemsPerView)}updateItemsPerView(){const t=window.innerWidth>=Ft.DESKTOP_BREAKPOINT?Ft.ITEMS_PER_VIEW_DESKTOP:Ft.ITEMS_PER_VIEW_MOBILE;t!==this.itemsPerView&&(this.itemsPerView=t,this.style.setProperty("--items-per-view",this.itemsPerView),this.currentPage>=this.totalPages&&(this.currentPage=0),this.requestUpdate())}updateItemVisibility(){const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();if(0===e.length)return;const i=this.currentPage*this.itemsPerView,o=i+this.itemsPerView;e.forEach((t,e)=>{e>=i&&e<o?t.setAttribute("data-slide-active",""):t.removeAttribute("data-slide-active")}),this.updateCarouselHeight()}updateCarouselHeight(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");if(!t||!e)return;const i=t.assignedElements();if(0===i.length)return;const o=this.currentPage*this.itemsPerView,a=o+this.itemsPerView;let s=0;for(let t=o;t<a&&t<i.length;t++){const e=i[t];s=Math.max(s,e.offsetHeight)}requestAnimationFrame(()=>{s>0&&(e.style.height=s+Ft.SHADOW_SPACE+"px")})}startAutoPlay(){this.autoPlay&&!this.prefersReducedMotion&&0!==this.totalSlides?(this.isPaused=!1,this.progressPercentage=0,this._scheduleNextPage()):this.isPaused=!0}play(){this.prefersReducedMotion||this.startAutoPlay()}pause(){this.isPaused=!0,this.stopAutoPlay()}stopAutoPlay(){this.autoPlayTimer&&(clearInterval(this.autoPlayTimer),this.autoPlayTimer=null),this.autoPlayTimeout&&(clearTimeout(this.autoPlayTimeout),this.autoPlayTimeout=null)}_scheduleNextPage(){this.stopAutoPlay();const t=100/(this.autoPlayDuration/Ft.PROGRESS_UPDATE_INTERVAL);this.autoPlayTimer=setInterval(()=>{this.progressPercentage=Math.min(100,this.progressPercentage+t)},Ft.PROGRESS_UPDATE_INTERVAL),this.autoPlayTimeout=setTimeout(()=>{this.isPaused||(this.nextPage(),this.startAutoPlay())},this.autoPlayDuration)}nextPage(){this.currentPage=(this.currentPage+1)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}previousPage(){this.currentPage=(this.currentPage-1+this.totalPages)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}goToPage(t){t>=0&&t<this.totalPages&&t!==this.currentPage&&(this.currentPage=t,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play())}_handleKeydown(t){"ArrowRight"===t.key?(t.preventDefault(),this.nextPage(),this.pause()):"ArrowLeft"===t.key&&(t.preventDefault(),this.previousPage(),this.pause())}_handleTouchStart(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchStartX=t.changedTouches[0].screenX)}_handleTouchEnd(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchEndX=t.changedTouches[0].screenX,this._handleSwipe())}_handleSwipe(){if(null===this.touchStartX||null===this.touchEndX)return;const t=this.touchStartX-this.touchEndX;Math.abs(t)>Ft.SWIPE_THRESHOLD&&(t>0?(this.nextPage(),this.pause()):(this.previousPage(),this.pause()))}render(){return D`
+    `])();constructor(){super(),this.currentPage=0,this.totalSlides=0,this.progressPercentage=0,this.isPaused=!0,this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.itemsPerView=Ft.ITEMS_PER_VIEW_DESKTOP,this.autoPlay=!0,this.autoPlayDuration=Math.max(100,Ft.AUTOPLAY_DURATION),this.autoPlayTimer=null,this.autoPlayTimeout=null,this.touchStartX=null,this.touchEndX=null,this._initialized=!1,this._resizeTimerId=null,this._mouseEnterListener=null,this._mouseLeaveListener=null}connectedCallback(){super.connectedCallback();const t=this.getAttribute("items-per-view");if(null!==t){const e=parseInt(t,10);isNaN(e)||(this.itemsPerView=e)}this.style.setProperty("--items-per-view",this.itemsPerView),this.addEventListener("keydown",t=>this._handleKeydown(t)),this.addEventListener("touchstart",t=>this._handleTouchStart(t),!1),this.addEventListener("touchend",t=>this._handleTouchEnd(t),!1),this._resizeListener=()=>{this._resizeTimerId&&clearTimeout(this._resizeTimerId),this._resizeTimerId=setTimeout(()=>{this.updateItemsPerView(),this.updateCarouselHeight()},150)},window.addEventListener("resize",this._resizeListener)}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay(),this._resizeListener&&window.removeEventListener("resize",this._resizeListener),this._resizeTimerId&&clearTimeout(this._resizeTimerId);const t=this.shadowRoot?.querySelector(".carousel-slides");t&&this._mouseEnterListener&&this._mouseLeaveListener&&(t.removeEventListener("mouseenter",this._mouseEnterListener),t.removeEventListener("mouseleave",this._mouseLeaveListener))}updated(t){t.has("itemsPerView")&&this.style.setProperty("--items-per-view",this.itemsPerView),t.has("currentPage")&&this.updateItemVisibility()}firstUpdated(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");t&&!this._slotChangeSetup&&(this._slotChangeSetup=!0,t.addEventListener("slotchange",()=>{this._slotChangeTimeout&&clearTimeout(this._slotChangeTimeout),this._slotChangeTimeout=setTimeout(()=>{this._initialized||this._initializeCarousel()},50)})),e&&!this._mouseEnterListener&&(this._mouseEnterListener=()=>{this.stopAutoPlay()},this._mouseLeaveListener=()=>{this.isPaused||this._scheduleNextPage()},e.addEventListener("mouseenter",this._mouseEnterListener),e.addEventListener("mouseleave",this._mouseLeaveListener))}_initializeCarousel(){if(this._initialized)return;const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();0!==e.length&&(this._initialized=!0,this.totalSlides=e.length,this.updateItemsPerView(),this.updateItemVisibility(),this.startAutoPlay(),this._waitForImages(e,5e3).then(()=>{this.updateCarouselHeight()}))}_waitForImages(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3e3;return Promise.race([Promise.all(Array.from(t).map(t=>Promise.all(Array.from(t.querySelectorAll("img")).map(t=>t.complete?Promise.resolve():new Promise(e=>{t.addEventListener("load",e,{once:!0}),t.addEventListener("error",e,{once:!0})}))))),new Promise((t,i)=>setTimeout(()=>i(new Error("Image load timeout")),e))]).catch(()=>Promise.resolve())}get totalPages(){return Math.ceil(this.totalSlides/this.itemsPerView)}updateItemsPerView(){if(this.hasAttribute("items-per-view"))return;const t=window.innerWidth>=Ft.DESKTOP_BREAKPOINT?Ft.ITEMS_PER_VIEW_DESKTOP:Ft.ITEMS_PER_VIEW_MOBILE;t!==this.itemsPerView&&(this.itemsPerView=t,this.style.setProperty("--items-per-view",this.itemsPerView),this.currentPage>=this.totalPages&&(this.currentPage=0),this.requestUpdate())}updateItemVisibility(){const t=this.shadowRoot.querySelector("slot");if(!t)return;const e=t.assignedElements();if(0===e.length)return;const i=this.currentPage*this.itemsPerView,o=i+this.itemsPerView;e.forEach((t,e)=>{e>=i&&e<o?t.setAttribute("data-slide-active",""):t.removeAttribute("data-slide-active")}),this.updateCarouselHeight()}updateCarouselHeight(){const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".carousel-slides");if(!t||!e)return;const i=t.assignedElements();if(0===i.length)return;const o=this.currentPage*this.itemsPerView,a=o+this.itemsPerView;requestAnimationFrame(()=>{requestAnimationFrame(()=>{setTimeout(()=>{let t=0;for(let e=o;e<a&&e<i.length;e++){const o=i[e].offsetHeight;t=Math.max(t,o)}const s=Math.max(t,Ft.SHADOW_SPACE);e.style.height=s+"px"},0)})})}startAutoPlay(){this.autoPlay&&!this.prefersReducedMotion&&0!==this.totalSlides?(this.isPaused=!1,this.progressPercentage=0,this._scheduleNextPage()):this.isPaused=!0}play(){this.prefersReducedMotion||this.startAutoPlay()}pause(){this.isPaused=!0,this.stopAutoPlay()}stopAutoPlay(){this.autoPlayTimer&&(clearInterval(this.autoPlayTimer),this.autoPlayTimer=null),this.autoPlayTimeout&&(clearTimeout(this.autoPlayTimeout),this.autoPlayTimeout=null)}_scheduleNextPage(){this.stopAutoPlay();const t=100/(this.autoPlayDuration/Ft.PROGRESS_UPDATE_INTERVAL);this.autoPlayTimer=setInterval(()=>{this.progressPercentage=Math.min(100,this.progressPercentage+t)},Ft.PROGRESS_UPDATE_INTERVAL),this.autoPlayTimeout=setTimeout(()=>{this.isPaused||(this.nextPage(),this.startAutoPlay())},this.autoPlayDuration)}nextPage(){this.currentPage=(this.currentPage+1)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}previousPage(){this.currentPage=(this.currentPage-1+this.totalPages)%this.totalPages,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play()}goToPage(t){t>=0&&t<this.totalPages&&t!==this.currentPage&&(this.currentPage=t,this.progressPercentage=0,this.stopAutoPlay(),this.requestUpdate(),this.play())}_handleKeydown(t){"ArrowRight"===t.key?(t.preventDefault(),this.nextPage(),this.pause()):"ArrowLeft"===t.key&&(t.preventDefault(),this.previousPage(),this.pause())}_handleTouchStart(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchStartX=t.changedTouches[0].screenX)}_handleTouchEnd(t){t.changedTouches&&t.changedTouches.length>0&&(this.touchEndX=t.changedTouches[0].screenX,this._handleSwipe())}_handleSwipe(){if(null===this.touchStartX||null===this.touchEndX)return;const t=this.touchStartX-this.touchEndX;Math.abs(t)>Ft.SWIPE_THRESHOLD&&(t>0?(this.nextPage(),this.pause()):(this.previousPage(),this.pause()))}render(){return D`
       <div
         class="carousel-container"
         role="region"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "src/index.js",
   "dependencies": {
     "lit": "^3.2.1",

package/src/components/carousel.js

@@ -2,6 +2,25 @@ import { LitElement, html, css } from "lit";
 import { commonStyles } from "../shared/common";
 import "./icon";
 
+/**
+ * Carousel Component - Pagination-based content carousel with fade transitions
+ * 
+ * Supports HTML attributes (kebab-case):
+ * - items-per-view: Number of items to show per page (default: 3 on desktop, 1 on mobile)
+ * - auto-play: Enable/disable auto-play (default: true)
+ * - auto-play-duration: Duration in milliseconds for auto-play (default: 10000)
+ * 
+ * Example usage:
+ * <cfa-carousel items-per-view="3" auto-play="true" auto-play-duration="5000">
+ *   <cfa-slide>...</cfa-slide>
+ *   <cfa-slide>...</cfa-slide>
+ * </cfa-carousel>
+ * 
+ * CSS Custom Properties (for styling):
+ * - --carousel-fade-duration: Fade transition duration (default: 300ms)
+ * - --carousel-dot-color: Pagination dot color (default: var(--black-20))
+ * - --carousel-dot-active-color: Active dot progress bar color (default: var(--purple-60))
+ */
 class Carousel extends LitElement {
   // Configuration constants
   static SWIPE_THRESHOLD = 50;
@@ -206,6 +225,15 @@ class Carousel extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
+    // Parse items-per-view attribute before setting CSS property
+    const attrValue = this.getAttribute('items-per-view');
+    if (attrValue !== null) {
+      const parsedValue = parseInt(attrValue, 10);
+      if (!isNaN(parsedValue)) {
+        this.itemsPerView = parsedValue;
+      }
+    }
+
     this.style.setProperty("--items-per-view", this.itemsPerView);
 
     this.addEventListener("keydown", (e) => this._handleKeydown(e));
@@ -255,17 +283,19 @@ class Carousel extends LitElement {
     const slot = this.shadowRoot.querySelector("slot");
     const slidesContainer = this.shadowRoot.querySelector(".carousel-slides");
     
-    if (slot && !this._initialized) {
-      this._initialized = true;
-      const items = slot.assignedElements();
-      this.totalSlides = items.length;
-      this.updateItemsPerView();
-      this.updateItemVisibility();
-      this.startAutoPlay();
-      
-      // Recalculate height after images load with timeout guard
-      this._waitForImages(items, 5000).then(() => {
-        this.updateCarouselHeight();
+    // Set up the slotchange listener which will actually initialize when elements are assigned
+    if (slot && !this._slotChangeSetup) {
+      this._slotChangeSetup = true;
+      slot.addEventListener('slotchange', () => {
+        // Debounce initialization - wait for DOM to stabilize
+        if (this._slotChangeTimeout) {
+          clearTimeout(this._slotChangeTimeout);
+        }
+        this._slotChangeTimeout = setTimeout(() => {
+          if (!this._initialized) {
+            this._initializeCarousel();
+          }
+        }, 50);
       });
     }
 
@@ -285,6 +315,34 @@ class Carousel extends LitElement {
     }
   }
 
+  _initializeCarousel() {
+    if (this._initialized) {
+      return;
+    }
+
+    const slot = this.shadowRoot.querySelector("slot");
+    if (!slot) {
+      return;
+    }
+
+    const items = slot.assignedElements();
+
+    if (items.length === 0) {
+      return;
+    }
+
+    this._initialized = true;
+    this.totalSlides = items.length;
+    this.updateItemsPerView();
+    this.updateItemVisibility();
+    this.startAutoPlay();
+
+    // Recalculate height after images load with timeout guard
+    this._waitForImages(items, 5000).then(() => {
+      this.updateCarouselHeight();
+    });
+  }
+
   _waitForImages(items, timeout = 3000) {
     return Promise.race([
       Promise.all(
@@ -315,6 +373,11 @@ class Carousel extends LitElement {
   }
 
   updateItemsPerView() {
+    // If itemsPerView was explicitly set via attribute, don't override it with responsive defaults
+    if (this.hasAttribute('items-per-view')) {
+      return;
+    }
+
     const isDesktop = window.innerWidth >= Carousel.DESKTOP_BREAKPOINT;
     const newItemsPerView = isDesktop
       ? Carousel.ITEMS_PER_VIEW_DESKTOP
@@ -333,14 +396,19 @@ class Carousel extends LitElement {
 
   updateItemVisibility() {
     const slot = this.shadowRoot.querySelector("slot");
-    if (!slot) return;
+    if (!slot) {
+      return;
+    }
 
     const items = slot.assignedElements();
-    if (items.length === 0) return;
+    
+    if (items.length === 0) {
+      return;
+    }
     
     const startIdx = this.currentPage * this.itemsPerView;
     const endIdx = startIdx + this.itemsPerView;
-
+    
     items.forEach((item, idx) => {
       if (idx >= startIdx && idx < endIdx) {
         item.setAttribute("data-slide-active", "");
@@ -357,27 +425,37 @@ class Carousel extends LitElement {
     const slot = this.shadowRoot.querySelector("slot");
     const slidesContainer = this.shadowRoot.querySelector(".carousel-slides");
     
-    if (!slot || !slidesContainer) return;
+    if (!slot || !slidesContainer) {
+      return;
+    }
 
     const items = slot.assignedElements();
-    if (items.length === 0) return;
+    if (items.length === 0) {
+      return;
+    }
 
     const startIdx = this.currentPage * this.itemsPerView;
     const endIdx = startIdx + this.itemsPerView;
 
-    // Get max height of current page items
-    let maxHeight = 0;
-    for (let i = startIdx; i < endIdx && i < items.length; i++) {
-      const item = items[i];
-      maxHeight = Math.max(maxHeight, item.offsetHeight);
-    }
-
-    // Use requestAnimationFrame to ensure layout is ready
-    // Add extra space for box-shadows to display without clipping
+    // Use multiple animation frames and a small delay to ensure layout is complete
+    // after CSS changes have been applied to show/hide slides
     requestAnimationFrame(() => {
-      if (maxHeight > 0) {
-        slidesContainer.style.height = (maxHeight + Carousel.SHADOW_SPACE) + "px";
-      }
+      requestAnimationFrame(() => {
+        // Small timeout to ensure layout has been computed
+        setTimeout(() => {
+          let maxHeight = 0;
+          
+          for (let i = startIdx; i < endIdx && i < items.length; i++) {
+            const item = items[i];
+            const height = item.offsetHeight;
+            maxHeight = Math.max(maxHeight, height);
+          }
+          
+          // Set height (minimum SHADOW_SPACE to accommodate buttons/controls)
+          const totalHeight = Math.max(maxHeight, Carousel.SHADOW_SPACE);
+          slidesContainer.style.height = totalHeight + "px";
+        }, 0);
+      });
     });
   }
 

package/src/components/slide.js

@@ -18,7 +18,7 @@ class Slide extends LitElement {
 
       .slide {
         background: var(--background);
-        box-shadow: var(--shadow-small);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
         color: inherit;
         display: flex;
         flex-direction: column;
@@ -27,13 +27,13 @@ class Slide extends LitElement {
         margin-inline: auto;
         max-width: var(--width);
         text-decoration: none;
-        transition: box-shadow 0.2s ease-in-out;
+        transition: filter 0.2s ease-in-out;
         width: 100%;
       }
 
       .slide:hover,
       .slide:focus {
-        box-shadow: var(--shadow-medium);
+        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
       }
 
       .image {