@universityofmaryland/web-elements-library 1.6.0 → 1.6.1-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
 
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.0-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.6.1-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
 

package/dist/_types.d.ts

@@ -149,6 +149,10 @@ export interface AnimationProps {
     animationDelay?: number;
     animationType?: 'fade' | 'slide' | 'scale' | 'none';
 }
+export interface LoadingProps {
+    imageLoading?: 'eager' | 'lazy';
+    imageFetchPriority?: 'high' | 'low' | 'auto';
+}
 export type ElementCreatorFn<T = any> = (props: T) => ElementModel;
 export type ActionFunction = (props: BaseElementProps) => ElementModel;
 export type CallbackFunction<T = void> = (arg: T) => void;

package/dist/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../source/_types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../source/_types.ts"],"names":[],"mappings":"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"}

package/dist/atomic/_types.d.ts

@@ -10,12 +10,12 @@ export interface PersonContactProps extends PersonCtaProps, Pick<ThemeProps, 'is
     phone?: ContentElement;
 }
 export interface PersonTextLockupProps extends PersonCtaProps, Pick<ThemeProps, 'isThemeDark'> {
-    association?: ContentElement;
-    job?: ContentElement;
+    slotTwo?: ContentElement;
+    slotOne?: ContentElement;
     name?: ContentElement;
     nameComposite?: UMDElement | null;
-    pronouns?: ContentElement;
-    subText?: ContentElement;
+    slotThreeItalic?: ContentElement;
+    slotFour?: ContentElement;
 }
 export interface PersonContactPropsWithStyles extends PersonContactProps {
     customStyles?: Record<string, any>;

package/dist/atomic/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../source/atomic/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAKD,MAAM,WAAW,kBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAGD,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAGD,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,+BAAgC,SAAQ,qBAAqB;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,eACf,SAAQ,qBAAqB,EAC3B,kBAAkB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../source/atomic/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAKD,MAAM,WAAW,kBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAGD,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAGD,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,+BAAgC,SAAQ,qBAAqB;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,eACf,SAAQ,qBAAqB,EAC3B,kBAAkB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AAGD,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B"}

package/dist/atomic/animations/brand/card-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAy7BD,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc;;;;;;;;CAsF7D,CAAC"}
+{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;AA27BD,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc;;;;;;;;CAsF7D,CAAC"}

package/dist/atomic/animations/brand/card-stack.js

@@ -553,7 +553,8 @@ const createGridElement = (element, index$1, placement) => {
   if (element.tagName === "IMG") {
     const backgroundImage = createImageBackground({
       element,
-      isScaled: true
+      isScaled: true,
+      imageLoading: "lazy"
     });
     builder.withChild(backgroundImage);
   }
@@ -658,7 +659,8 @@ const createFeatured = (element, isExpand, totalCount) => {
   if (element.tagName === "IMG") {
     const backgroundImage = createImageBackground({
       element,
-      isScaled: true
+      isScaled: true,
+      imageLoading: "lazy"
     });
     builder.withChild(backgroundImage);
   }

package/dist/atomic/animations/brand/card-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel } from '../../../_types';\n\ninterface CardStackProps {\n  featured: HTMLImageElement | HTMLVideoElement;\n  images: HTMLImageElement[];\n  isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n  column?: string;\n  row?: string;\n  zIndex?: number;\n  featured?: boolean;\n  matchWidth?: boolean;\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  };\n}\n\ninterface Configuration {\n  count: number;\n  layout: {\n    gridTemplateColumns: string;\n    gridTemplateRows: string;\n  };\n  items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n  {\n    count: 4,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '3 / 8',\n        row: '4 / 5',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-5%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 6',\n        offset: {\n          top: '-1%',\n          right: '-4%',\n        },\n      },\n      {\n        column: '4 / 7',\n        row: '10 / 15',\n        zIndex: 9,\n        offset: {\n          bottom: '-13%',\n          left: '-4%',\n        },\n      },\n      {\n        column: '13 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-8%',\n          bottom: '-3%',\n        },\n      },\n    ],\n  },\n  {\n    count: 5,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 6,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 7,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n  {\n    count: 8,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '3 / 9',\n        row: '1 / 3',\n        offset: {\n          right: '-10%',\n          top: '-25%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst getResponsiveSizes = () => {\n  const windowWidth = window.innerWidth;\n\n  if (windowWidth >= 1024) {\n    return { width: 0.4, height: 0.4 };\n  } else if (windowWidth >= 768) {\n    return { width: 0.5, height: 0.5 };\n  } else {\n    return { width: 0.8, height: 0.5 };\n  }\n};\n\nconst keyFrameGridExpand = `\n  @keyframes ${KEY_FRAME_GRID_EXPAND} {\n    to {\n      transform: translate(0, 0);\n      width: inherit;\n    }\n  }\n`;\n\nconst keyFrameGridItem = `\n  @keyframes ${KEY_FRAME_GRID_ITEM} {\n    to {\n      opacity: 0;\n    }\n  }\n`;\n\nconst keyFrameFeaturedSize = `\n  @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n    to {\n      width: 100%;\n      height: 100vh;\n      top: 0%;\n    }\n  }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n  const images = Array.from(container.querySelectorAll('img'));\n  const videos = Array.from(container.querySelectorAll('video'));\n\n  const imagePromises = images.map((img) => {\n    if (img.complete) {\n      // Check if image loaded successfully or failed\n      if (img.naturalWidth > 0) {\n        return Promise.resolve();\n      } else {\n        // Image is complete but has no natural dimensions - it failed to load\n        return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n      }\n    }\n    return new Promise<void>((resolve, reject) => {\n      img.addEventListener('load', () => resolve(), { once: true });\n      img.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load image: ${img.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  const videoPromises = videos.map((video) => {\n    if (video.readyState >= 3) {\n      return Promise.resolve();\n    }\n    return new Promise<void>((resolve, reject) => {\n      video.addEventListener('loadeddata', () => resolve(), { once: true });\n      video.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load video: ${video.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  await Promise.all([...imagePromises, ...videoPromises]);\n\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        resolve();\n      });\n    });\n  });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n  return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n  gridItem: HTMLElement,\n  index: number,\n): HTMLElement | null => {\n  return gridItem.querySelector(\n    `.${STACK_ELEMENT_CLASS}-${index}`,\n  ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n  element: HTMLElement,\n  centerElement: HTMLElement,\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  },\n): { x: number; y: number } => {\n  const elementRect = element.getBoundingClientRect();\n  const centerRect = centerElement.getBoundingClientRect();\n\n  const centerX = centerRect.left + centerRect.width / 2;\n  const centerY = centerRect.top + centerRect.height / 2;\n\n  const elementCenterX = elementRect.left + elementRect.width / 2;\n  const elementCenterY = elementRect.top + elementRect.height / 2;\n\n  let translateX = centerX - elementCenterX;\n  let translateY = centerY - elementCenterY;\n\n  if (offset) {\n    const applyOffset = (\n      value: string | undefined,\n      dimension: number,\n    ): number => {\n      return value ? (parseFloat(value) / 100) * dimension : 0;\n    };\n\n    translateX += applyOffset(offset.left, centerRect.width);\n    translateX -= applyOffset(offset.right, centerRect.width);\n    translateY += applyOffset(offset.top, centerRect.height);\n    translateY -= applyOffset(offset.bottom, centerRect.height);\n  }\n\n  return {\n    x: translateX,\n    y: translateY,\n  };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n  featuredElement: HTMLElement | null,\n  gridContainer: HTMLElement | null,\n): void => {\n  if (featuredElement) {\n    featuredElement.style.animation = 'none';\n  }\n  if (gridContainer) {\n    gridContainer.style.animation = 'none';\n  }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n  return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n  onResize: () => void,\n  delay: number = 300,\n): (() => void) => {\n  let timeoutId: NodeJS.Timeout | null = null;\n  let previousWidth = window.innerWidth;\n\n  return () => {\n    const currentWidth = window.innerWidth;\n\n    // Only trigger on width changes (actual resize, not mobile scroll)\n    if (currentWidth === previousWidth) {\n      return;\n    }\n\n    previousWidth = currentWidth;\n\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      onResize();\n      timeoutId = null;\n    }, delay);\n  };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n  element: HTMLElement,\n  opacity: string,\n  transition?: string,\n): void => {\n  element.style.opacity = opacity;\n  if (transition) {\n    element.style.transition = transition;\n  }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n  gridContainer: HTMLElement | null,\n  config: Configuration | undefined,\n): boolean => {\n  return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n  element: HTMLElement,\n  itemConfig: ConfigurationItem,\n  featuredElement: HTMLElement,\n): void => {\n  if (featuredElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const featuredWidth = featuredElement.offsetWidth;\n    const featuredHeight = featuredElement.offsetHeight;\n    const isLargerThan40Percent =\n      featuredWidth > windowWidth * 0.41 ||\n      featuredHeight > windowHeight * 0.41;\n\n    if (!isLargerThan40Percent) {\n      element.style.width = `${featuredWidth}px`;\n      element.style.height = `${featuredHeight}px`;\n    } else {\n      const parentContainer = featuredElement.parentElement;\n      const parentWidth = parentContainer\n        ? parentContainer.offsetWidth\n        : windowWidth;\n\n      const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n      const width = Math.round(parentWidth * widthPercentage);\n      const height = Math.round(windowHeight * heightVh);\n\n      element.style.width = `${width}px`;\n      element.style.height = `${height}px`;\n    }\n  }\n\n  const transform = calculateCenterTransform(\n    element,\n    featuredElement,\n    itemConfig?.offset,\n  );\n  element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n  featuredElement: HTMLElement,\n  gridContainer: HTMLElement,\n  config: Configuration,\n): void => {\n  const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n  gridItems.forEach((gridItem, index) => {\n    const element = getStackElementFromGridItem(gridItem, index);\n\n    if (!element) {\n      return;\n    }\n\n    const itemConfig = config.items[index];\n\n    applyElementTransforms(element, itemConfig, featuredElement);\n  });\n};\n\nconst createGridElement = (\n  element: HTMLImageElement | HTMLVideoElement,\n  index: number,\n  placement: ConfigurationItem,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n  const getStartRange = (row: number): number => {\n    if (row >= 13) return -70;\n    if (row >= 10 && row <= 12) return -40;\n    if (row >= 6 && row < 10) return 40;\n    return 80;\n  };\n\n  const getEndRange = (row: number): number => {\n    if (row >= 13) return 120;\n    if (row >= 10 && row <= 12) return 140;\n    if (row >= 6 && row < 10) return 160;\n    return 170;\n  };\n\n  const startRange = getStartRange(rowStart);\n  const endRange = getEndRange(rowStart);\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        overflow: 'clip',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n          animationDuration: '1ms',\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  return builder.build();\n};\n\nconst createGridItem = (\n  element: HTMLImageElement | HTMLVideoElement,\n  placement: ConfigurationItem,\n  index: number,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n  const startRange = rowStart > 8 ? 0 : 80;\n  const endRange = rowStart > 8 ? 200 : 200;\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const gridElement = createGridElement(element, index, placement);\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_ITEM_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        gridColumn: placement.column,\n        gridRow: placement.row,\n        zIndex: placement.zIndex || 1,\n        width: '100%',\n        height: '100%',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          [`@supports not (animation-timeline: scroll())`]: {\n            display: 'none',\n          },\n        },\n\n        ...(isDisplayWithoutAnimation && {\n          display: 'none',\n        }),\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n        }),\n      },\n    })\n    .withChild(gridElement)\n    .build();\n};\n\nconst createGrid = (props: CardStackProps) => {\n  const totalCount = props.images.length;\n  const config = getConfigurationByCount(totalCount);\n\n  if (!config) {\n    console.warn(`No configuration found for ${totalCount} elements`);\n    return new ElementBuilder().withClassName(STACK_GRID_ERROR_CLASS).build();\n  }\n\n  const gridItems = props.images.map((element, index) => {\n    const placement = config.items[index];\n    return createGridItem(element, placement, index);\n  });\n\n  const gridItemElements = gridItems.map((item) => item);\n\n  return new ElementBuilder()\n    .withClassName(STACK_GRID_CLASS)\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: 'repeat(16, 1fr)',\n        gridTemplateRows: 'repeat(16, 2vh)',\n        gap: token.spacing.min,\n        minHeight: '300px',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: scroll())': {\n            width: '100%',\n          },\n        },\n\n        ...withViewTimelineAnimation({\n          gridTemplateColumns: config.layout.gridTemplateColumns,\n          gridTemplateRows: config.layout.gridTemplateRows,\n          transform: 'translate(-50%, -25%)',\n        }),\n      },\n    })\n    .withChildren(...gridItemElements)\n    .build();\n};\n\nconst createFeatured = (\n  element: HTMLImageElement | HTMLVideoElement,\n  isExpand: boolean,\n  totalCount: number,\n) => {\n  let video: ElementModel | undefined;\n  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-featured`)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '20vh',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: 999,\n        width: `${widthPercentage * 100}%`,\n        height: `${heightVh * 100}vh`,\n\n        ...(isDisplayWithoutAnimation && {\n          top: '0',\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: view())': {\n            width: '100% !important',\n            height: '100% !important',\n            top: '0',\n          },\n        },\n\n        ...(isExpand && {\n          ...withViewTimelineAnimation({\n            top: '30vh',\n            animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n            animationRangeEnd: '250vh',\n          }),\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  if (element.tagName === 'VIDEO') {\n    element.setAttribute('muted', 'true');\n    element.setAttribute('playsinline', 'true');\n    element.setAttribute('loop', 'true');\n\n    video = assets.video.toggle({\n      video: element as HTMLVideoElement,\n      isScaled: true,\n    });\n\n    if (video && video.element instanceof HTMLElement) {\n      builder.withChild(video as ElementModel & { element: HTMLElement });\n    }\n  }\n\n  const featuredElement = builder.build();\n\n  if (isExpand && featuredElement.element instanceof HTMLElement) {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video?.events?.setPlay) video.events.setPlay();\n            observer.disconnect();\n          }\n        });\n      },\n      {\n        rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(featuredElement.element);\n  }\n\n  return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n  const grid = createGrid(props);\n  const featured = createFeatured(\n    props.featured,\n    props.isExpandFeature,\n    props.images.length,\n  );\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky-wrapper`)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...withViewTimelineAnimation({\n          position: 'sticky',\n          top: 0,\n        }),\n      },\n    })\n    .withChildren(grid, featured)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky`)\n    .withStyles({\n      element: {\n        ...withViewTimelineAnimation({\n          height: '200vh',\n\n          ...(props.isExpandFeature && {\n            height: '250vh',\n          }),\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n\nexport const createAnimationCardStack = (props: CardStackProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName(STACK_CONTAINER_CLASS)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        opacity: '0',\n        overflow: 'clip',\n      },\n    })\n    .withChild(sticky)\n    .build();\n\n  const loadAnimation = async () => {\n    const totalCount = props.images.length;\n    const config = getConfigurationByCount(totalCount);\n    const gridContainer = composite.element.querySelector(\n      `.${STACK_GRID_CLASS}`,\n    ) as HTMLElement;\n    const featuredElement = composite.element.querySelector(\n      `.${STACK_ELEMENT_CLASS}-featured`,\n    ) as HTMLElement;\n    let animationsCleared = false;\n\n    if (!validateAnimationElements(gridContainer, config)) {\n      return;\n    }\n\n    const clearAnimations = () => {\n      if (animationsCleared) return;\n\n      clearElementAnimations(featuredElement, gridContainer);\n      animationsCleared = true;\n\n      setTimeout(() => {\n        processGridAnimation(props.featured, gridContainer!, config!);\n      }, 100);\n    };\n\n    try {\n      await waitForMediaLoad(gridContainer!);\n    } catch (error) {\n      console.warn('Media loading failed, proceeding with animation:', error);\n    }\n\n    processGridAnimation(props.featured, gridContainer!, config!);\n    setElementOpacity(composite.element, '1');\n\n    if (!isMobileDevice()) {\n      const resizeHandler = createResizeHandler(() => {\n        setTimeout(() => {\n          processGridAnimation(props.featured, gridContainer!, config!);\n          setTimeout(() => {\n            setElementOpacity(composite.element, '1');\n            animationsCleared = false;\n          }, 100);\n        }, 200);\n      });\n\n      window.addEventListener('resize', () => {\n        if (isMobileDevice()) {\n          return;\n        }\n\n        if (composite.element.style.opacity === '1') {\n          setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n        }\n\n        clearAnimations();\n        resizeHandler();\n      });\n    }\n  };\n\n  composite.styles += keyFrameGridExpand;\n  composite.styles += keyFrameGridItem;\n  composite.styles += keyFrameFeaturedSize;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["index","assets.image.background","assets.video.toggle"],"mappings":"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"}
+{"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel } from '../../../_types';\n\ninterface CardStackProps {\n  featured: HTMLImageElement | HTMLVideoElement;\n  images: HTMLImageElement[];\n  isExpandFeature: boolean;\n}\n\ninterface ConfigurationItem {\n  column?: string;\n  row?: string;\n  zIndex?: number;\n  featured?: boolean;\n  matchWidth?: boolean;\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  };\n}\n\ninterface Configuration {\n  count: number;\n  layout: {\n    gridTemplateColumns: string;\n    gridTemplateRows: string;\n  };\n  items: ConfigurationItem[];\n}\n\nconst configuration: Configuration[] = [\n  {\n    count: 4,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '3 / 8',\n        row: '4 / 5',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-5%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 6',\n        offset: {\n          top: '-1%',\n          right: '-4%',\n        },\n      },\n      {\n        column: '4 / 7',\n        row: '10 / 15',\n        zIndex: 9,\n        offset: {\n          bottom: '-13%',\n          left: '-4%',\n        },\n      },\n      {\n        column: '13 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-8%',\n          bottom: '-3%',\n        },\n      },\n    ],\n  },\n  {\n    count: 5,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 6,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n    ],\n  },\n  {\n    count: 7,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n  {\n    count: 8,\n    layout: {\n      gridTemplateColumns: 'repeat(15, 10vw)',\n      gridTemplateRows: 'repeat(15, 8vh)',\n    },\n    items: [\n      {\n        column: '2 / 6',\n        row: '4 / 9',\n        zIndex: 9,\n        offset: {\n          top: '-10%',\n          left: '-6%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '2 / 5',\n        offset: {\n          top: '-3%',\n          right: '-5%',\n        },\n      },\n      {\n        column: '10 / 12',\n        row: '3 / 5',\n        offset: {\n          bottom: '-20%',\n          right: '-1%',\n        },\n      },\n      {\n        column: '3 / 9',\n        row: '1 / 3',\n        offset: {\n          right: '-10%',\n          top: '-25%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '6 / 8',\n        offset: {\n          bottom: '-5%',\n          right: '-20%',\n        },\n      },\n      {\n        column: '1 / 4',\n        row: '8/ 13',\n        zIndex: 9,\n        offset: {\n          bottom: '-10%',\n          left: '-10%',\n        },\n      },\n      {\n        column: '12 / 15',\n        row: '10 / 14',\n        offset: {\n          right: '-10%',\n          bottom: '-7%',\n        },\n      },\n      {\n        column: '6 / 9',\n        row: '10 / 15',\n        offset: {\n          right: '-10%',\n          bottom: '-25%',\n        },\n      },\n    ],\n  },\n];\n\n// Class name constants\nconst STACK_CONTAINER_CLASS = 'brand-animations-card-stack';\nconst STACK_ELEMENT_CLASS = `${STACK_CONTAINER_CLASS}-element`;\nconst STACK_GRID_CLASS = `${STACK_CONTAINER_CLASS}-grid`;\nconst STACK_ITEM_CLASS = `${STACK_CONTAINER_CLASS}-item`;\nconst STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;\n\nconst KEY_FRAME_GRID_EXPAND = 'grid-expand';\nconst KEY_FRAME_GRID_ITEM = 'grid-item';\nconst KEY_FRAME_FEATURED_SIZE = 'featured-size';\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst getResponsiveSizes = () => {\n  const windowWidth = window.innerWidth;\n\n  if (windowWidth >= 1024) {\n    return { width: 0.4, height: 0.4 };\n  } else if (windowWidth >= 768) {\n    return { width: 0.5, height: 0.5 };\n  } else {\n    return { width: 0.8, height: 0.5 };\n  }\n};\n\nconst keyFrameGridExpand = `\n  @keyframes ${KEY_FRAME_GRID_EXPAND} {\n    to {\n      transform: translate(0, 0);\n      width: inherit;\n    }\n  }\n`;\n\nconst keyFrameGridItem = `\n  @keyframes ${KEY_FRAME_GRID_ITEM} {\n    to {\n      opacity: 0;\n    }\n  }\n`;\n\nconst keyFrameFeaturedSize = `\n  @keyframes ${KEY_FRAME_FEATURED_SIZE} {\n    to {\n      width: 100%;\n      height: 100vh;\n      top: 0%;\n    }\n  }\n`;\n\n/**\n * Waits for all media elements (images and videos) to load and render.\n *\n * @param container - The container element containing the media\n * @returns Promise that resolves when all media is loaded and rendered\n */\nconst waitForMediaLoad = async (container: HTMLElement): Promise<void> => {\n  const images = Array.from(container.querySelectorAll('img'));\n  const videos = Array.from(container.querySelectorAll('video'));\n\n  const imagePromises = images.map((img) => {\n    if (img.complete) {\n      // Check if image loaded successfully or failed\n      if (img.naturalWidth > 0) {\n        return Promise.resolve();\n      } else {\n        // Image is complete but has no natural dimensions - it failed to load\n        return Promise.reject(new Error(`Failed to load image: ${img.src}`));\n      }\n    }\n    return new Promise<void>((resolve, reject) => {\n      img.addEventListener('load', () => resolve(), { once: true });\n      img.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load image: ${img.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  const videoPromises = videos.map((video) => {\n    if (video.readyState >= 3) {\n      return Promise.resolve();\n    }\n    return new Promise<void>((resolve, reject) => {\n      video.addEventListener('loadeddata', () => resolve(), { once: true });\n      video.addEventListener(\n        'error',\n        () => reject(new Error(`Failed to load video: ${video.src}`)),\n        { once: true },\n      );\n    });\n  });\n\n  await Promise.all([...imagePromises, ...videoPromises]);\n\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        resolve();\n      });\n    });\n  });\n};\n\n/**\n * Retrieves the configuration object for a specific element count.\n *\n * @param count - The number of elements to display\n * @returns The configuration object for the given count, or undefined if not found\n */\nconst getConfigurationByCount = (count: number) => {\n  return configuration.find((c) => c.count === count);\n};\n\n/**\n * Gets the stack element from a grid item.\n *\n * @param gridItem - The grid item element\n * @param index - The index of the stack element\n * @returns The stack element or null if not found\n */\nconst getStackElementFromGridItem = (\n  gridItem: HTMLElement,\n  index: number,\n): HTMLElement | null => {\n  return gridItem.querySelector(\n    `.${STACK_ELEMENT_CLASS}-${index}`,\n  ) as HTMLElement;\n};\n\n/**\n * Calculates the transform values (x, y) needed to center an element\n * relative to the brand-animations-card-stack-grid container with optional offset.\n *\n * @param element - The element to be centered\n * @param gridContainer - The grid container element\n * @param offset - Optional offset values in percentages\n * @returns Transform values {x, y} in pixels to center the element with offset\n */\nconst calculateCenterTransform = (\n  element: HTMLElement,\n  centerElement: HTMLElement,\n  offset?: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  },\n): { x: number; y: number } => {\n  const elementRect = element.getBoundingClientRect();\n  const centerRect = centerElement.getBoundingClientRect();\n\n  const centerX = centerRect.left + centerRect.width / 2;\n  const centerY = centerRect.top + centerRect.height / 2;\n\n  const elementCenterX = elementRect.left + elementRect.width / 2;\n  const elementCenterY = elementRect.top + elementRect.height / 2;\n\n  let translateX = centerX - elementCenterX;\n  let translateY = centerY - elementCenterY;\n\n  if (offset) {\n    const applyOffset = (\n      value: string | undefined,\n      dimension: number,\n    ): number => {\n      return value ? (parseFloat(value) / 100) * dimension : 0;\n    };\n\n    translateX += applyOffset(offset.left, centerRect.width);\n    translateX -= applyOffset(offset.right, centerRect.width);\n    translateY += applyOffset(offset.top, centerRect.height);\n    translateY -= applyOffset(offset.bottom, centerRect.height);\n  }\n\n  return {\n    x: translateX,\n    y: translateY,\n  };\n};\n\n/**\n * Clears animations from elements.\n *\n * @param featuredElement - The featured element\n * @param gridContainer - The grid container element\n */\nconst clearElementAnimations = (\n  featuredElement: HTMLElement | null,\n  gridContainer: HTMLElement | null,\n): void => {\n  if (featuredElement) {\n    featuredElement.style.animation = 'none';\n  }\n  if (gridContainer) {\n    gridContainer.style.animation = 'none';\n  }\n};\n\n/**\n * Checks if the current device is mobile based on viewport width.\n *\n * @returns True if device is mobile (width < 768px)\n */\nconst isMobileDevice = (): boolean => {\n  return window.innerWidth < 768;\n};\n\n/**\n * Creates a resize handler function that only executes on actual window resizes.\n *\n * @param onResize - Callback to execute on resize\n * @param delay - Delay in milliseconds before executing callback\n * @returns Resize handler function\n */\nconst createResizeHandler = (\n  onResize: () => void,\n  delay: number = 300,\n): (() => void) => {\n  let timeoutId: NodeJS.Timeout | null = null;\n  let previousWidth = window.innerWidth;\n\n  return () => {\n    const currentWidth = window.innerWidth;\n\n    // Only trigger on width changes (actual resize, not mobile scroll)\n    if (currentWidth === previousWidth) {\n      return;\n    }\n\n    previousWidth = currentWidth;\n\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n    timeoutId = setTimeout(() => {\n      onResize();\n      timeoutId = null;\n    }, delay);\n  };\n};\n\n/**\n * Sets opacity with optional transition.\n *\n * @param element - The element to modify\n * @param opacity - The opacity value\n * @param transition - Optional transition string\n */\nconst setElementOpacity = (\n  element: HTMLElement,\n  opacity: string,\n  transition?: string,\n): void => {\n  element.style.opacity = opacity;\n  if (transition) {\n    element.style.transition = transition;\n  }\n};\n\n/**\n * Validates required elements for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns True if all required elements are present\n */\nconst validateAnimationElements = (\n  gridContainer: HTMLElement | null,\n  config: Configuration | undefined,\n): boolean => {\n  return gridContainer !== null && config !== undefined;\n};\n\n/**\n * Applies dimension and position transforms to a grid element.\n *\n * @param element - The element to transform\n * @param itemConfig - Configuration for this specific item\n * @param featuredElement - The featured element for sizing reference\n * @param gridContainer - The grid container for position reference\n */\nconst applyElementTransforms = (\n  element: HTMLElement,\n  itemConfig: ConfigurationItem,\n  featuredElement: HTMLElement,\n): void => {\n  if (featuredElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const featuredWidth = featuredElement.offsetWidth;\n    const featuredHeight = featuredElement.offsetHeight;\n    const isLargerThan40Percent =\n      featuredWidth > windowWidth * 0.41 ||\n      featuredHeight > windowHeight * 0.41;\n\n    if (!isLargerThan40Percent) {\n      element.style.width = `${featuredWidth}px`;\n      element.style.height = `${featuredHeight}px`;\n    } else {\n      const parentContainer = featuredElement.parentElement;\n      const parentWidth = parentContainer\n        ? parentContainer.offsetWidth\n        : windowWidth;\n\n      const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n      const width = Math.round(parentWidth * widthPercentage);\n      const height = Math.round(windowHeight * heightVh);\n\n      element.style.width = `${width}px`;\n      element.style.height = `${height}px`;\n    }\n  }\n\n  const transform = calculateCenterTransform(\n    element,\n    featuredElement,\n    itemConfig?.offset,\n  );\n  element.style.transform = `translate(${transform.x}px, ${transform.y}px)`;\n};\n\n/**\n * Processes all grid items for animation.\n *\n * @param gridContainer - The grid container element\n * @param config - Configuration object\n * @returns void\n */\nconst processGridAnimation = (\n  featuredElement: HTMLElement,\n  gridContainer: HTMLElement,\n  config: Configuration,\n): void => {\n  const gridItems = Array.from(gridContainer.children) as HTMLElement[];\n\n  gridItems.forEach((gridItem, index) => {\n    const element = getStackElementFromGridItem(gridItem, index);\n\n    if (!element) {\n      return;\n    }\n\n    const itemConfig = config.items[index];\n\n    applyElementTransforms(element, itemConfig, featuredElement);\n  });\n};\n\nconst createGridElement = (\n  element: HTMLImageElement | HTMLVideoElement,\n  index: number,\n  placement: ConfigurationItem,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n\n  const getStartRange = (row: number): number => {\n    if (row >= 13) return -70;\n    if (row >= 10 && row <= 12) return -40;\n    if (row >= 6 && row < 10) return 40;\n    return 80;\n  };\n\n  const getEndRange = (row: number): number => {\n    if (row >= 13) return 120;\n    if (row >= 10 && row <= 12) return 140;\n    if (row >= 6 && row < 10) return 160;\n    return 170;\n  };\n\n  const startRange = getStartRange(rowStart);\n  const endRange = getEndRange(rowStart);\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        overflow: 'clip',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n          animationDuration: '1ms',\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n      imageLoading: 'lazy',\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  return builder.build();\n};\n\nconst createGridItem = (\n  element: HTMLImageElement | HTMLVideoElement,\n  placement: ConfigurationItem,\n  index: number,\n) => {\n  const rowStart = placement.row ? parseInt(placement.row.split(' / ')[0]) : 0;\n  const startRange = rowStart > 8 ? 0 : 80;\n  const endRange = rowStart > 8 ? 200 : 200;\n  const animationRangeStart = `${startRange}vh`;\n  const animationRangeEnd = `${endRange}vh`;\n\n  const gridElement = createGridElement(element, index, placement);\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_ITEM_CLASS}-${index}`)\n    .withStyles({\n      element: {\n        gridColumn: placement.column,\n        gridRow: placement.row,\n        zIndex: placement.zIndex || 1,\n        width: '100%',\n        height: '100%',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          [`@supports not (animation-timeline: scroll())`]: {\n            display: 'none',\n          },\n        },\n\n        ...(isDisplayWithoutAnimation && {\n          display: 'none',\n        }),\n\n        ...withViewTimelineAnimation({\n          animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart,\n          animationRangeEnd,\n        }),\n      },\n    })\n    .withChild(gridElement)\n    .build();\n};\n\nconst createGrid = (props: CardStackProps) => {\n  const totalCount = props.images.length;\n  const config = getConfigurationByCount(totalCount);\n\n  if (!config) {\n    console.warn(`No configuration found for ${totalCount} elements`);\n    return new ElementBuilder().withClassName(STACK_GRID_ERROR_CLASS).build();\n  }\n\n  const gridItems = props.images.map((element, index) => {\n    const placement = config.items[index];\n    return createGridItem(element, placement, index);\n  });\n\n  const gridItemElements = gridItems.map((item) => item);\n\n  return new ElementBuilder()\n    .withClassName(STACK_GRID_CLASS)\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridTemplateColumns: 'repeat(16, 1fr)',\n        gridTemplateRows: 'repeat(16, 2vh)',\n        gap: token.spacing.min,\n        minHeight: '300px',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: scroll())': {\n            width: '100%',\n          },\n        },\n\n        ...withViewTimelineAnimation({\n          gridTemplateColumns: config.layout.gridTemplateColumns,\n          gridTemplateRows: config.layout.gridTemplateRows,\n          transform: 'translate(-50%, -25%)',\n        }),\n      },\n    })\n    .withChildren(...gridItemElements)\n    .build();\n};\n\nconst createFeatured = (\n  element: HTMLImageElement | HTMLVideoElement,\n  isExpand: boolean,\n  totalCount: number,\n) => {\n  let video: ElementModel | undefined;\n  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n  const builder = new ElementBuilder()\n    .withClassName(`${STACK_ELEMENT_CLASS}-featured`)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '20vh',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: 999,\n        width: `${widthPercentage * 100}%`,\n        height: `${heightVh * 100}vh`,\n\n        ...(isDisplayWithoutAnimation && {\n          top: '0',\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          '@supports not (animation-timeline: view())': {\n            width: '100% !important',\n            height: '100% !important',\n            top: '0',\n          },\n        },\n\n        ...(isExpand && {\n          ...withViewTimelineAnimation({\n            top: '30vh',\n            animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,\n            animationRangeEnd: '250vh',\n          }),\n        }),\n      },\n    });\n\n  if (element.tagName === 'IMG') {\n    const backgroundImage = assets.image.background({\n      element: element as HTMLImageElement,\n      isScaled: true,\n      imageLoading: 'lazy',\n    });\n    builder.withChild(backgroundImage);\n  }\n\n  if (element.tagName === 'VIDEO') {\n    element.setAttribute('muted', 'true');\n    element.setAttribute('playsinline', 'true');\n    element.setAttribute('loop', 'true');\n\n    video = assets.video.toggle({\n      video: element as HTMLVideoElement,\n      isScaled: true,\n    });\n\n    if (video && video.element instanceof HTMLElement) {\n      builder.withChild(video as ElementModel & { element: HTMLElement });\n    }\n  }\n\n  const featuredElement = builder.build();\n\n  if (isExpand && featuredElement.element instanceof HTMLElement) {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video?.events?.setPlay) video.events.setPlay();\n            observer.disconnect();\n          }\n        });\n      },\n      {\n        rootMargin: `-${100 + (totalCount - 4) * 10}px 0px 0px 0px`,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(featuredElement.element);\n  }\n\n  return featuredElement;\n};\n\nconst createSticky = (props: CardStackProps) => {\n  const grid = createGrid(props);\n  const featured = createFeatured(\n    props.featured,\n    props.isExpandFeature,\n    props.images.length,\n  );\n\n  const wrapper = new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky-wrapper`)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...withViewTimelineAnimation({\n          position: 'sticky',\n          top: 0,\n        }),\n      },\n    })\n    .withChildren(grid, featured)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(`${STACK_CONTAINER_CLASS}-sticky`)\n    .withStyles({\n      element: {\n        ...withViewTimelineAnimation({\n          height: '200vh',\n\n          ...(props.isExpandFeature && {\n            height: '250vh',\n          }),\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n\nexport const createAnimationCardStack = (props: CardStackProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName(STACK_CONTAINER_CLASS)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        opacity: '0',\n        overflow: 'clip',\n      },\n    })\n    .withChild(sticky)\n    .build();\n\n  const loadAnimation = async () => {\n    const totalCount = props.images.length;\n    const config = getConfigurationByCount(totalCount);\n    const gridContainer = composite.element.querySelector(\n      `.${STACK_GRID_CLASS}`,\n    ) as HTMLElement;\n    const featuredElement = composite.element.querySelector(\n      `.${STACK_ELEMENT_CLASS}-featured`,\n    ) as HTMLElement;\n    let animationsCleared = false;\n\n    if (!validateAnimationElements(gridContainer, config)) {\n      return;\n    }\n\n    const clearAnimations = () => {\n      if (animationsCleared) return;\n\n      clearElementAnimations(featuredElement, gridContainer);\n      animationsCleared = true;\n\n      setTimeout(() => {\n        processGridAnimation(props.featured, gridContainer!, config!);\n      }, 100);\n    };\n\n    try {\n      await waitForMediaLoad(gridContainer!);\n    } catch (error) {\n      console.warn('Media loading failed, proceeding with animation:', error);\n    }\n\n    processGridAnimation(props.featured, gridContainer!, config!);\n    setElementOpacity(composite.element, '1');\n\n    if (!isMobileDevice()) {\n      const resizeHandler = createResizeHandler(() => {\n        setTimeout(() => {\n          processGridAnimation(props.featured, gridContainer!, config!);\n          setTimeout(() => {\n            setElementOpacity(composite.element, '1');\n            animationsCleared = false;\n          }, 100);\n        }, 200);\n      });\n\n      window.addEventListener('resize', () => {\n        if (isMobileDevice()) {\n          return;\n        }\n\n        if (composite.element.style.opacity === '1') {\n          setElementOpacity(composite.element, '0', 'opacity 0.3s ease-in-out');\n        }\n\n        clearAnimations();\n        resizeHandler();\n      });\n    }\n  };\n\n  composite.styles += keyFrameGridExpand;\n  composite.styles += keyFrameGridItem;\n  composite.styles += keyFrameFeaturedSize;\n\n  return {\n    ...composite,\n    events: {\n      loadAnimation,\n    },\n  };\n};\n"],"names":["index","assets.image.background","assets.video.toggle"],"mappings":"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"}

package/dist/atomic/assets/image/background.d.ts

@@ -4,6 +4,8 @@ interface Asset {
     isAspectStandard?: boolean;
     isScaled?: boolean;
     isGifAllowed?: boolean;
+    imageLoading?: 'lazy' | 'eager' | 'auto';
+    imageFetchPriority?: 'high' | 'low' | 'auto';
 }
 interface Props extends Asset {
     dateSign?: UMDElement;

package/dist/atomic/assets/image/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/background.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,KAAM,SAAQ,KAAK;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AA4FD,eAAO,MAAM,qBAAqB,GAAI,OAAO,KAAK,kFAyCjD,CAAC"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/background.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,UAAU,KAAK;IACb,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9C;AAED,UAAU,KAAM,SAAQ,KAAK;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;AA0HD,eAAO,MAAM,qBAAqB,GAAI,OAAO,KAAK,kFAiDjD,CAAC"}

package/dist/atomic/assets/image/background.js

@@ -22,6 +22,17 @@ const checkIsGif = (element) => {
   }
   return false;
 };
+const applyLoadingAttributes = (element, loading = "lazy", fetchPriority = "auto") => {
+  const img = isImageElement(element) ? element : element.querySelector("img");
+  if (img) {
+    if (loading !== "auto") {
+      img.setAttribute("loading", loading);
+    }
+    if (fetchPriority !== "auto") {
+      img.setAttribute("fetchpriority", fetchPriority);
+    }
+  }
+};
 const createCaption = (element, isShowCaption) => {
   if (!isShowCaption) return null;
   const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);
@@ -38,9 +49,12 @@ const createCaption = (element, isShowCaption) => {
 const embedAsset = ({
   element,
   isAspectStandard,
-  isGifAllowed
+  isGifAllowed,
+  imageLoading = "lazy",
+  imageFetchPriority = "auto"
 }) => {
   const isTypeGif = checkIsGif(element);
+  applyLoadingAttributes(element, imageLoading, imageFetchPriority);
   if (isGifAllowed && isTypeGif) {
     return createImageGif({ element });
   }
@@ -69,9 +83,17 @@ const createImageBackground = (props) => {
     isAspectStandard = false,
     isScaled,
     isShowCaption = false,
-    isGifAllowed = false
+    isGifAllowed = false,
+    imageLoading = "lazy",
+    imageFetchPriority = "auto"
   } = props;
-  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });
+  const asset = embedAsset({
+    element,
+    isAspectStandard,
+    isGifAllowed,
+    imageLoading,
+    imageFetchPriority
+  });
   const caption = createCaption(element, isShowCaption);
   const defaultStyles = Styles.element.asset.image.composeWrapper({
     scaled: isScaled

package/dist/atomic/assets/image/background.js.map

@@ -1 +1 @@
-{"version":3,"file":"background.js","sources":["../../../../source/atomic/assets/image/background.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createImageGif } from './gif';\nimport { type UMDElement } from '../../../_types';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\ninterface Asset {\n  element: HTMLImageElement | HTMLAnchorElement;\n  isAspectStandard?: boolean;\n  isScaled?: boolean;\n  isGifAllowed?: boolean;\n}\n\ninterface Props extends Asset {\n  dateSign?: UMDElement;\n  isShowCaption?: boolean;\n  customStyles?: Record<string, any>;\n}\n\nconst isImageElement = (element: HTMLElement): element is HTMLImageElement => {\n  return element instanceof HTMLImageElement;\n};\n\nconst checkIsGif = (element: HTMLImageElement | HTMLAnchorElement): boolean => {\n  if (isImageElement(element)) {\n    return element.src !== null && element.src.toLowerCase().includes('.gif');\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    const imgChild = element.querySelector('img');\n    const isGif =\n      imgChild !== null &&\n      imgChild.src !== null &&\n      imgChild.src.toLowerCase().includes('.gif');\n\n    if (isGif) {\n      console.error(\n        `GIFs are not allowed in <a>. Please upload a different format.`,\n      );\n    }\n\n    return isGif;\n  }\n\n  return false;\n};\n\nconst createCaption = (\n  element: HTMLImageElement | HTMLAnchorElement,\n  isShowCaption: boolean,\n) => {\n  if (!isShowCaption) return null;\n\n  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);\n  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);\n\n  if (attributeCaption) {\n    console.log(\n      `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n    );\n  }\n\n  const text = attributeCaption || attributeCredit;\n  if (!text) return null;\n\n  return new ElementBuilder('span')\n    .withText(text)\n    .styled(Styles.element.asset.image.caption)\n    .build();\n};\n\nconst embedAsset = ({\n  element,\n  isAspectStandard,\n  isGifAllowed,\n}: Pick<Asset, 'element' | 'isAspectStandard' | 'isGifAllowed'>) => {\n  const isTypeGif = checkIsGif(element);\n\n  if (isGifAllowed && isTypeGif) {\n    return createImageGif({ element });\n  }\n\n  if (!isGifAllowed && isTypeGif) {\n    console.error(\n      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`,\n    );\n    return;\n  }\n\n  if (isAspectStandard) {\n    return new ElementBuilder()\n      .styled(Styles.element.asset.image.aspectStandard)\n      .withChild(element)\n      .build();\n  }\n\n  return new ElementBuilder()\n    .withClassName('image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n      },\n    })\n    .withChild(element)\n    .build();\n};\n\nexport const createImageBackground = (props: Props) => {\n  const {\n    customStyles,\n    dateSign,\n    element,\n    isAspectStandard = false,\n    isScaled,\n    isShowCaption = false,\n    isGifAllowed = false,\n  } = props;\n\n  const asset = embedAsset({ element, isAspectStandard, isGifAllowed });\n  const caption = createCaption(element, isShowCaption);\n  const defaultStyles = Styles.element.asset.image.composeWrapper({\n    scaled: isScaled,\n  });\n\n  const composite = new ElementBuilder().styled(defaultStyles).withStyles({\n    element: {\n      ...customStyles,\n    },\n  });\n\n  if (caption) {\n    composite.withChild(caption);\n  }\n\n  if (dateSign) {\n    composite.withChild(\n      new ElementBuilder()\n        .styled(Styles.layout.background.box.white)\n        .withChild(dateSign)\n        .build(),\n    );\n  }\n\n  if (asset) {\n    composite.withChild(asset);\n  }\n\n  return composite.build();\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAezB,MAAM,iBAAiB,CAAC,YAAsD;AAC5E,SAAO,mBAAmB;AAC5B;AAEA,MAAM,aAAa,CAAC,YAA2D;AAC7E,MAAI,eAAe,OAAO,GAAG;AAC3B,WAAO,QAAQ,QAAQ,QAAQ,QAAQ,IAAI,YAAA,EAAc,SAAS,MAAM;AAAA,EAC1E;AAEA,MAAI,mBAAmB,mBAAmB;AACxC,UAAM,WAAW,QAAQ,cAAc,KAAK;AAC5C,UAAM,QACJ,aAAa,QACb,SAAS,QAAQ,QACjB,SAAS,IAAI,cAAc,SAAS,MAAM;AAE5C,QAAI,OAAO;AACT,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,CACpB,SACA,kBACG;AACH,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,mBAAmB,QAAQ,aAAa,iBAAiB;AAC/D,QAAM,kBAAkB,QAAQ,aAAa,gBAAgB;AAE7D,MAAI,kBAAkB;AACpB,YAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,OAAO,oBAAoB;AACjC,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO,IAAI,eAAe,MAAM,EAC7B,SAAS,IAAI,EACb,OAAO,OAAO,QAAQ,MAAM,MAAM,OAAO,EACzC,MAAA;AACL;AAEA,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAoE;AAClE,QAAM,YAAY,WAAW,OAAO;AAEpC,MAAI,gBAAgB,WAAW;AAC7B,WAAO,eAAe,EAAE,SAAS;AAAA,EACnC;AAEA,MAAI,CAAC,gBAAgB,WAAW;AAC9B,YAAQ;AAAA,MACN,4BAA4B,QAAQ,SAAS;AAAA,IAAA;AAE/C;AAAA,EACF;AAEA,MAAI,kBAAkB;AACpB,WAAO,IAAI,eAAA,EACR,OAAO,OAAO,QAAQ,MAAM,MAAM,cAAc,EAChD,UAAU,OAAO,EACjB,MAAA;AAAA,EACL;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV,CACD,EACA,UAAU,OAAO,EACjB,MAAA;AACL;AAEO,MAAM,wBAAwB,CAAC,UAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,EAAA,IACb;AAEJ,QAAM,QAAQ,WAAW,EAAE,SAAS,kBAAkB,cAAc;AACpE,QAAM,UAAU,cAAc,SAAS,aAAa;AACpD,QAAM,gBAAgB,OAAO,QAAQ,MAAM,MAAM,eAAe;AAAA,IAC9D,QAAQ;AAAA,EAAA,CACT;AAED,QAAM,YAAY,IAAI,eAAA,EAAiB,OAAO,aAAa,EAAE,WAAW;AAAA,IACtE,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAED,MAAI,SAAS;AACX,cAAU,UAAU,OAAO;AAAA,EAC7B;AAEA,MAAI,UAAU;AACZ,cAAU;AAAA,MACR,IAAI,eAAA,EACD,OAAO,OAAO,OAAO,WAAW,IAAI,KAAK,EACzC,UAAU,QAAQ,EAClB,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,OAAO;AACT,cAAU,UAAU,KAAK;AAAA,EAC3B;AAEA,SAAO,UAAU,MAAA;AACnB;"}
+{"version":3,"file":"background.js","sources":["../../../../source/atomic/assets/image/background.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createImageGif } from './gif';\nimport { type UMDElement } from '../../../_types';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\ninterface Asset {\n  element: HTMLImageElement | HTMLAnchorElement;\n  isAspectStandard?: boolean;\n  isScaled?: boolean;\n  isGifAllowed?: boolean;\n  /** Control image loading behavior. Defaults to 'lazy' */\n  imageLoading?: 'lazy' | 'eager' | 'auto';\n  /** Control fetch priority for the image. Defaults to 'auto' */\n  imageFetchPriority?: 'high' | 'low' | 'auto';\n}\n\ninterface Props extends Asset {\n  dateSign?: UMDElement;\n  isShowCaption?: boolean;\n  customStyles?: Record<string, any>;\n}\n\nconst isImageElement = (element: HTMLElement): element is HTMLImageElement => {\n  return element instanceof HTMLImageElement;\n};\n\nconst checkIsGif = (element: HTMLImageElement | HTMLAnchorElement): boolean => {\n  if (isImageElement(element)) {\n    return element.src !== null && element.src.toLowerCase().includes('.gif');\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    const imgChild = element.querySelector('img');\n    const isGif =\n      imgChild !== null &&\n      imgChild.src !== null &&\n      imgChild.src.toLowerCase().includes('.gif');\n\n    if (isGif) {\n      console.error(\n        `GIFs are not allowed in <a>. Please upload a different format.`,\n      );\n    }\n\n    return isGif;\n  }\n\n  return false;\n};\n\nconst applyLoadingAttributes = (\n  element: HTMLImageElement | HTMLAnchorElement,\n  loading: 'lazy' | 'eager' | 'auto' = 'lazy',\n  fetchPriority: 'high' | 'low' | 'auto' = 'auto',\n) => {\n  const img = isImageElement(element) ? element : element.querySelector('img');\n  if (img) {\n    // Only set loading attribute if not 'auto' (browser default)\n    if (loading !== 'auto') {\n      img.setAttribute('loading', loading);\n    }\n    // Set fetchpriority if specified and not 'auto'\n    if (fetchPriority !== 'auto') {\n      img.setAttribute('fetchpriority', fetchPriority);\n    }\n  }\n};\n\nconst createCaption = (\n  element: HTMLImageElement | HTMLAnchorElement,\n  isShowCaption: boolean,\n) => {\n  if (!isShowCaption) return null;\n\n  const attributeCaption = element.getAttribute(ATTRIBUTE_CAPTION);\n  const attributeCredit = element.getAttribute(ATTRIBUTE_CREDIT);\n\n  if (attributeCaption) {\n    console.log(\n      `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n    );\n  }\n\n  const text = attributeCaption || attributeCredit;\n  if (!text) return null;\n\n  return new ElementBuilder('span')\n    .withText(text)\n    .styled(Styles.element.asset.image.caption)\n    .build();\n};\n\nconst embedAsset = ({\n  element,\n  isAspectStandard,\n  isGifAllowed,\n  imageLoading = 'lazy',\n  imageFetchPriority = 'auto',\n}: Pick<\n  Asset,\n  | 'element'\n  | 'isAspectStandard'\n  | 'isGifAllowed'\n  | 'imageLoading'\n  | 'imageFetchPriority'\n>) => {\n  const isTypeGif = checkIsGif(element);\n\n  // Apply loading attributes before any other processing\n  applyLoadingAttributes(element, imageLoading, imageFetchPriority);\n\n  if (isGifAllowed && isTypeGif) {\n    return createImageGif({ element });\n  }\n\n  if (!isGifAllowed && isTypeGif) {\n    console.error(\n      `GIFs are not allowed in <${element.localName}>. Please upload a different format.`,\n    );\n    return;\n  }\n\n  if (isAspectStandard) {\n    return new ElementBuilder()\n      .styled(Styles.element.asset.image.aspectStandard)\n      .withChild(element)\n      .build();\n  }\n\n  return new ElementBuilder()\n    .withClassName('image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n      },\n    })\n    .withChild(element)\n    .build();\n};\n\nexport const createImageBackground = (props: Props) => {\n  const {\n    customStyles,\n    dateSign,\n    element,\n    isAspectStandard = false,\n    isScaled,\n    isShowCaption = false,\n    isGifAllowed = false,\n    imageLoading = 'lazy',\n    imageFetchPriority = 'auto',\n  } = props;\n\n  const asset = embedAsset({\n    element,\n    isAspectStandard,\n    isGifAllowed,\n    imageLoading,\n    imageFetchPriority,\n  });\n  const caption = createCaption(element, isShowCaption);\n  const defaultStyles = Styles.element.asset.image.composeWrapper({\n    scaled: isScaled,\n  });\n\n  const composite = new ElementBuilder().styled(defaultStyles).withStyles({\n    element: {\n      ...customStyles,\n    },\n  });\n\n  if (caption) {\n    composite.withChild(caption);\n  }\n\n  if (dateSign) {\n    composite.withChild(\n      new ElementBuilder()\n        .styled(Styles.layout.background.box.white)\n        .withChild(dateSign)\n        .build(),\n    );\n  }\n\n  if (asset) {\n    composite.withChild(asset);\n  }\n\n  return composite.build();\n};\n"],"names":[],"mappings":"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"}

package/dist/atomic/assets/image/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"AAyHA,eAAO,MAAM,cAAc,GAAI,cAE5B;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C,yGAqBA,CAAC"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"AA+NA,eAAO,MAAM,cAAc,GAAI,cAE5B;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C,yGA4BA,CAAC"}

package/dist/atomic/assets/image/gif.js

@@ -1,7 +1,7 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
 import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import { play, pause } from "@universityofmaryland/web-icons-library/controls";
+import { pause, play } from "@universityofmaryland/web-icons-library/controls";
 const extractImageElement = (element) => {
   if (element instanceof HTMLImageElement) {
     return element;
@@ -11,7 +11,67 @@ const extractImageElement = (element) => {
   }
   return null;
 };
-const applyGifToggle = (image, container) => {
+const renderFirstFrame = (image, canvas, container) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const containerWidth = container.clientWidth;
+  const containerHeight = container.clientHeight;
+  canvas.width = containerWidth;
+  canvas.height = containerHeight;
+  const imgRatio = image.naturalWidth / image.naturalHeight;
+  const containerRatio = containerWidth / containerHeight;
+  let drawWidth;
+  let drawHeight;
+  let offsetX = 0;
+  let offsetY = 0;
+  if (imgRatio > containerRatio) {
+    drawHeight = containerHeight;
+    drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);
+    offsetX = (containerWidth - drawWidth) / 2;
+  } else {
+    drawWidth = containerWidth;
+    drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);
+    offsetY = (containerHeight - drawHeight) / 2;
+  }
+  ctx.clearRect(0, 0, containerWidth, containerHeight);
+  ctx.imageSmoothingEnabled = true;
+  ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);
+};
+const setupLazyLoading = (container, image, canvas, button, state, onLoad) => {
+  if (typeof IntersectionObserver === "undefined") {
+    state.isLoaded = true;
+    button.style.display = "flex";
+    onLoad();
+    return null;
+  }
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !state.isLoaded) {
+          state.isLoaded = true;
+          image.src = state.originalSrc;
+          image.addEventListener(
+            "load",
+            () => {
+              button.style.display = "flex";
+              onLoad();
+            },
+            { once: true }
+          );
+          observer.disconnect();
+        }
+      });
+    },
+    {
+      threshold: 0.1,
+      rootMargin: "50px"
+      // Start loading slightly before visible
+    }
+  );
+  observer.observe(container);
+  return observer;
+};
+const applyGifToggle = (image, container, state) => {
   const canvas = document.createElement("canvas");
   const button = document.createElement("button");
   const setButtonPlay = () => {
@@ -19,69 +79,63 @@ const applyGifToggle = (image, container) => {
     button.innerHTML = pause;
     canvas.style.opacity = "0";
     image.style.opacity = "1";
+    state.isPlaying = true;
   };
   const setButtonPause = () => {
     button.setAttribute("aria-label", "Play");
     button.innerHTML = play;
     canvas.style.opacity = "1";
     image.style.opacity = "0";
+    state.isPlaying = false;
   };
-  const sizeCanvas = ({ container: container2 }) => {
-    if (!container2) return;
-    const image2 = container2.querySelector("img");
-    const canvas2 = container2.querySelector("canvas");
-    if (!container2 || !canvas2 || !image2) return;
-    const ctx = canvas2.getContext("2d");
-    const containerWidth = container2.clientWidth;
-    const containerHeight = container2.clientHeight;
-    canvas2.style.width = "100%";
-    canvas2.style.height = `${image2.clientHeight}px`;
-    canvas2.style.position = "absolute";
-    canvas2.style.top = "0";
-    canvas2.style.left = "0";
-    canvas2.width = containerWidth;
-    canvas2.height = containerHeight;
-    const imgRatio = image2.naturalWidth / image2.naturalHeight;
-    const containerRatio = containerWidth / containerHeight;
-    let drawWidth, drawHeight, offsetX = 0, offsetY = 0;
-    if (imgRatio > containerRatio) {
-      drawHeight = containerHeight;
-      drawWidth = image2.naturalWidth * (containerHeight / image2.naturalHeight);
-      offsetX = (containerWidth - drawWidth) / 2;
-    } else {
-      drawWidth = containerWidth;
-      drawHeight = image2.naturalHeight * (containerWidth / image2.naturalWidth);
-      offsetY = (containerHeight - drawHeight) / 2;
+  const sizeCanvas = () => {
+    if (!container) return;
+    const img = container.querySelector("img");
+    const canvasEl = container.querySelector("canvas");
+    if (!canvasEl || !img) return;
+    canvasEl.style.width = "100%";
+    canvasEl.style.height = `${img.clientHeight}px`;
+    canvasEl.style.position = "absolute";
+    canvasEl.style.top = "0";
+    canvasEl.style.left = "0";
+    if (state.isLoaded && img.complete && img.naturalWidth > 0) {
+      renderFirstFrame(img, canvasEl, container);
     }
-    ctx.clearRect(0, 0, containerWidth, containerHeight);
-    ctx.imageSmoothingEnabled = true;
-    ctx.drawImage(image2, offsetX, offsetY, drawWidth, drawHeight);
   };
-  let isPlaying = true;
   button.setAttribute("type", "button");
+  button.style.display = "none";
   button.addEventListener("click", (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if (isPlaying) {
+    if (state.isPlaying) {
       setButtonPause();
-      isPlaying = false;
     } else {
       setButtonPlay();
-      isPlaying = true;
     }
   });
-  image.addEventListener("load", () => {
-    container.appendChild(canvas);
-    container.appendChild(button);
+  container.appendChild(canvas);
+  container.appendChild(button);
+  image.style.opacity = "0";
+  image.style.transition = "opacity 0.2s ease-in-out";
+  canvas.style.opacity = "1";
+  canvas.style.transition = "opacity 0.2s ease-in-out";
+  const captureFirstFrame = () => {
+    sizeCanvas();
+    renderFirstFrame(image, canvas, container);
+  };
+  if (image.complete && image.naturalWidth > 0) {
+    captureFirstFrame();
+  } else {
+    image.addEventListener("load", captureFirstFrame, { once: true });
+  }
+  setupLazyLoading(container, image, canvas, button, state, () => {
+    sizeCanvas();
     setButtonPlay();
-    setTimeout(() => {
-      sizeCanvas({ container });
-    }, 100);
   });
   window.addEventListener(
     "resize",
     debounce(() => {
-      sizeCanvas({ container });
+      sizeCanvas();
     }, 50)
   );
 };
@@ -92,13 +146,18 @@ const createImageGif = ({
   if (!image) {
     throw new Error("No valid image element found");
   }
+  const state = {
+    isLoaded: false,
+    isPlaying: false,
+    originalSrc: image.src
+  };
   const isAnchor = element instanceof HTMLAnchorElement;
   const container = isAnchor ? element : document.createElement("div");
   const composite = new ElementBuilder(container).styled(Styles.element.asset.gif.toggle).withModifier((el) => {
     if (!isAnchor) {
       el.appendChild(element);
     }
-    applyGifToggle(image, el);
+    applyGifToggle(image, el, state);
   }).build();
   return composite;
 };