npm - @universityofmaryland/web-elements-library - Versions diffs - 1.4.8 → 1.5.0-beta.0 - Mend

@universityofmaryland/web-elements-library 1.4.8 → 1.5.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1139) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme, accessibility } from 'utilities';\nimport { type ElementVisual } 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 = accessibility.isPrefferdReducedMotion();\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 children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\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 return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.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};\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 return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex \|\| 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.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 ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\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 ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\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 return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: scroll())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement \| HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) \| undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\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 children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\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 (${Styles.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 ...theme.media.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\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) 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 wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\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":["accessibility.isPrefferdReducedMotion","index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","Styles","assets.video.toggle"],"mappings":"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"}
1	+ {"version":3,"file":"card-stack.js","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { type ElementVisual } 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 children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\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 return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\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};\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 return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\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 });\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 ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\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 return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\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 });\n};\n\nconst createFeatured = (\n element: HTMLImageElement \| HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) \| undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\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 children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\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\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) 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 wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\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":["isPreferredReducedMotion","index","assets.image.background","ElementModel.createDiv","withViewTimelineAnimation","token","assets.video.toggle"],"mappings":"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"}

package/dist/atomic/animations/brand/card-stack.mjs CHANGED Viewed

@@ -1,19 +1,29 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../../model/elements/index.mjs";
-import { isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
-import { withViewTimelineAnimation } from "../../../utilities/theme/media.mjs";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../actions/indicator.mjs";
 import "./chevron-scroll.mjs";
 import imageContainer from "../../assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
 import toggle from "../../assets/video/toggle.mjs";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../layout/block/stacked.mjs";
 import "../../layout/overlay/modal.mjs";
 import "../../layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../text-lockup/date.mjs";
 import "../../text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 const configuration = [
   {
     count: 4,
@@ -319,7 +329,7 @@ const STACK_GRID_ERROR_CLASS = `${STACK_GRID_CLASS}-error`;
 const KEY_FRAME_GRID_EXPAND = "grid-expand";
 const KEY_FRAME_GRID_ITEM = "grid-item";
 const KEY_FRAME_FEATURED_SIZE = "featured-size";
-const isPreferReducedMotion = isPrefferdReducedMotion();
+const isPreferReducedMotion = isPreferredReducedMotion();
 const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
 const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
 const getResponsiveSizes = () => {
@@ -567,7 +577,7 @@ const createGridItem = (element, placement, index$1) => {
         zIndex: placement.zIndex || 1,
         width: "100%",
         height: "100%",
-        [`@media (${Styles.token.media.queries.large.max})`]: {
+        [`@media (${token.media.queries.large.max})`]: {
           [`@supports not (animation-timeline: scroll())`]: {
             display: "none"
           }
@@ -606,9 +616,9 @@ const createGrid = (props) => {
         display: "grid",
         gridTemplateColumns: "repeat(16, 1fr)",
         gridTemplateRows: "repeat(16, 2vh)",
-        gap: Styles.token.spacing.min,
+        gap: token.spacing.min,
         minHeight: "300px",
-        [`@media (${Styles.token.media.queries.large.max})`]: {
+        [`@media (${token.media.queries.large.max})`]: {
           "@supports not (animation-timeline: scroll())": {
             width: "100%"
           }
@@ -659,7 +669,7 @@ const createFeatured = (element, isExpand, totalCount) => {
         ...isDisplayWithoutAnimation && {
           top: "0"
         },
-        [`@media (${Styles.token.media.queries.large.max})`]: {
+        [`@media (${token.media.queries.large.max})`]: {
           "@supports not (animation-timeline: view())": {
             width: "100% !important",
             height: "100% !important",

package/dist/atomic/animations/brand/card-stack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-stack.mjs","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme, accessibility } from 'utilities';\nimport { type ElementVisual } 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 = accessibility.isPrefferdReducedMotion();\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 children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\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 return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\n element: {\n overflow: 'clip',\n height: '100%',\n width: '100%',\n\n ...theme.media.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};\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 return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\n element: {\n gridColumn: placement.column,\n gridRow: placement.row,\n zIndex: placement.zIndex \|\| 1,\n width: '100%',\n height: '100%',\n\n [`@media (${Styles.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 ...theme.media.withViewTimelineAnimation({\n animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,\n animationTimeline: 'view()',\n animationRangeStart,\n animationRangeEnd,\n }),\n },\n },\n });\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 ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\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 return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\n element: {\n display: 'grid',\n gridTemplateColumns: 'repeat(16, 1fr)',\n gridTemplateRows: 'repeat(16, 2vh)',\n gap: Styles.token.spacing.min,\n minHeight: '300px',\n\n [`@media (${Styles.token.media.queries.large.max})`]: {\n '@supports not (animation-timeline: scroll())': {\n width: '100%',\n },\n },\n\n ...theme.media.withViewTimelineAnimation({\n gridTemplateColumns: config.layout.gridTemplateColumns,\n gridTemplateRows: config.layout.gridTemplateRows,\n transform: 'translate(-50%, -25%)',\n }),\n },\n },\n });\n};\n\nconst createFeatured = (\n element: HTMLImageElement \| HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) \| undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\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 children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\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 (${Styles.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 ...theme.media.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\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) 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 wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...theme.media.withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...theme.media.withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\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":["accessibility.isPrefferdReducedMotion","index","assets.image.background","ElementModel.createDiv","theme.media.withViewTimelineAnimation","assets.video.toggle"],"mappings":"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"}
1	+ {"version":3,"file":"card-stack.mjs","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { type ElementVisual } 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 children: ElementVisual[] = [];\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\n }\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 return ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-${index}`,\n children,\n elementStyles: {\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};\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 return ElementModel.createDiv({\n className: `${STACK_ITEM_CLASS}-${index}`,\n children: [createGridElement(element, index, placement)],\n elementStyles: {\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 });\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 ElementModel.createDiv({\n className: STACK_GRID_ERROR_CLASS,\n });\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 return ElementModel.createDiv({\n className: STACK_GRID_CLASS,\n children: gridItems,\n elementStyles: {\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 });\n};\n\nconst createFeatured = (\n element: HTMLImageElement \| HTMLVideoElement,\n isExpand: boolean,\n totalCount: number,\n) => {\n const children: ElementVisual[] = [];\n let video: (ElementVisual & { events: { setPlay: () => void } }) \| undefined;\n\n if (element.tagName === 'IMG') {\n children.push(\n assets.image.background({\n element: element as HTMLImageElement,\n isScaled: true,\n }),\n );\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 children.push(video);\n }\n\n const { width: widthPercentage, height: heightVh } = getResponsiveSizes();\n\n const featuredElement = ElementModel.createDiv({\n className: `${STACK_ELEMENT_CLASS}-featured`,\n children,\n elementStyles: {\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\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) 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 wrapper = ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,\n children: [\n createGrid(props),\n createFeatured(\n props.featured,\n props.isExpandFeature,\n props.images.length,\n ),\n ],\n elementStyles: {\n element: {\n position: 'relative',\n\n ...withViewTimelineAnimation({\n position: 'sticky',\n top: 0,\n }),\n },\n },\n });\n\n return ElementModel.createDiv({\n className: `${STACK_CONTAINER_CLASS}-sticky`,\n children: [wrapper],\n elementStyles: {\n element: {\n ...withViewTimelineAnimation({\n height: '200vh',\n\n ...(props.isExpandFeature && {\n height: '250vh',\n }),\n }),\n },\n },\n });\n};\n\nexport default (props: CardStackProps) => {\n const composite = ElementModel.createDiv({\n className: STACK_CONTAINER_CLASS,\n children: [createSticky(props)],\n elementStyles: {\n element: {\n containerType: 'inline-size',\n opacity: '0',\n overflow: 'clip',\n },\n },\n });\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","ElementModel.createDiv","assets.video.toggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,gBAAiC;AAAA,EACrC;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,OAAO;AAAA,MACL;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF;AAAA,QACE,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,QAAQ;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAEJ;AAGA,MAAM,wBAAwB;AAC9B,MAAM,sBAAsB,GAAG,qBAAqB;AACpD,MAAM,mBAAmB,GAAG,qBAAqB;AACjD,MAAM,mBAAmB,GAAG,qBAAqB;AACjD,MAAM,yBAAyB,GAAG,gBAAgB;AAElD,MAAM,wBAAwB;AAC9B,MAAM,sBAAsB;AAC5B,MAAM,0BAA0B;AAEhC,MAAM,wBAAwB,yBAAA;AAC9B,MAAM,4BAA4B,MAChC,oBAAoB,UAAU,IAAI,SAAS,sBAAsB,UAAU;AAC7E,MAAM,4BACJ,yBAAyB,CAAC,0BAAA;AAE5B,MAAM,qBAAqB,MAAM;AAC/B,QAAM,cAAc,OAAO;AAE3B,MAAI,eAAe,MAAM;AACvB,WAAO,EAAE,OAAO,KAAK,QAAQ,IAAA;AAAA,EAC/B,WAAW,eAAe,KAAK;AAC7B,WAAO,EAAE,OAAO,KAAK,QAAQ,IAAA;AAAA,EAC/B,OAAO;AACL,WAAO,EAAE,OAAO,KAAK,QAAQ,IAAA;AAAA,EAC/B;AACF;AAEA,MAAM,qBAAqB;AAAA,eACZ,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,MAAM,mBAAmB;AAAA,eACV,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,uBAAuB;AAAA,eACd,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAetC,MAAM,mBAAmB,OAAO,cAA0C;AACxE,QAAM,SAAS,MAAM,KAAK,UAAU,iBAAiB,KAAK,CAAC;AAC3D,QAAM,SAAS,MAAM,KAAK,UAAU,iBAAiB,OAAO,CAAC;AAE7D,QAAM,gBAAgB,OAAO,IAAI,CAAC,QAAQ;AACxC,QAAI,IAAI,UAAU;AAEhB,UAAI,IAAI,eAAe,GAAG;AACxB,eAAO,QAAQ,QAAA;AAAA,MACjB,OAAO;AAEL,eAAO,QAAQ,OAAO,IAAI,MAAM,yBAAyB,IAAI,GAAG,EAAE,CAAC;AAAA,MACrE;AAAA,IACF;AACA,WAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,UAAI,iBAAiB,QAAQ,MAAM,QAAA,GAAW,EAAE,MAAM,MAAM;AAC5D,UAAI;AAAA,QACF;AAAA,QACA,MAAM,OAAO,IAAI,MAAM,yBAAyB,IAAI,GAAG,EAAE,CAAC;AAAA,QAC1D,EAAE,MAAM,KAAA;AAAA,MAAK;AAAA,IAEjB,CAAC;AAAA,EACH,CAAC;AAED,QAAM,gBAAgB,OAAO,IAAI,CAAC,UAAU;AAC1C,QAAI,MAAM,cAAc,GAAG;AACzB,aAAO,QAAQ,QAAA;AAAA,IACjB;AACA,WAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AAC5C,YAAM,iBAAiB,cAAc,MAAM,QAAA,GAAW,EAAE,MAAM,MAAM;AACpE,YAAM;AAAA,QACJ;AAAA,QACA,MAAM,OAAO,IAAI,MAAM,yBAAyB,MAAM,GAAG,EAAE,CAAC;AAAA,QAC5D,EAAE,MAAM,KAAA;AAAA,MAAK;AAAA,IAEjB,CAAC;AAAA,EACH,CAAC;AAED,QAAM,QAAQ,IAAI,CAAC,GAAG,eAAe,GAAG,aAAa,CAAC;AAEtD,SAAO,IAAI,QAAc,CAAC,YAAY;AACpC,0BAAsB,MAAM;AAC1B,4BAAsB,MAAM;AAC1B,gBAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAQA,MAAM,0BAA0B,CAAC,UAAkB;AACjD,SAAO,cAAc,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AACpD;AASA,MAAM,8BAA8B,CAClC,UACA,UACuB;AACvB,SAAO,SAAS;AAAA,IACd,IAAI,mBAAmB,IAAI,KAAK;AAAA,EAAA;AAEpC;AAWA,MAAM,2BAA2B,CAC/B,SACA,eACA,WAM6B;AAC7B,QAAM,cAAc,QAAQ,sBAAA;AAC5B,QAAM,aAAa,cAAc,sBAAA;AAEjC,QAAM,UAAU,WAAW,OAAO,WAAW,QAAQ;AACrD,QAAM,UAAU,WAAW,MAAM,WAAW,SAAS;AAErD,QAAM,iBAAiB,YAAY,OAAO,YAAY,QAAQ;AAC9D,QAAM,iBAAiB,YAAY,MAAM,YAAY,SAAS;AAE9D,MAAI,aAAa,UAAU;AAC3B,MAAI,aAAa,UAAU;AAE3B,MAAI,QAAQ;AACV,UAAM,cAAc,CAClB,OACA,cACW;AACX,aAAO,QAAS,WAAW,KAAK,IAAI,MAAO,YAAY;AAAA,IACzD;AAEA,kBAAc,YAAY,OAAO,MAAM,WAAW,KAAK;AACvD,kBAAc,YAAY,OAAO,OAAO,WAAW,KAAK;AACxD,kBAAc,YAAY,OAAO,KAAK,WAAW,MAAM;AACvD,kBAAc,YAAY,OAAO,QAAQ,WAAW,MAAM;AAAA,EAC5D;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAEP;AAQA,MAAM,yBAAyB,CAC7B,iBACA,kBACS;AACT,MAAI,iBAAiB;AACnB,oBAAgB,MAAM,YAAY;AAAA,EACpC;AACA,MAAI,eAAe;AACjB,kBAAc,MAAM,YAAY;AAAA,EAClC;AACF;AAOA,MAAM,iBAAiB,MAAe;AACpC,SAAO,OAAO,aAAa;AAC7B;AASA,MAAM,sBAAsB,CAC1B,UACA,QAAgB,QACC;AACjB,MAAI,YAAmC;AACvC,MAAI,gBAAgB,OAAO;AAE3B,SAAO,MAAM;AACX,UAAM,eAAe,OAAO;AAG5B,QAAI,iBAAiB,eAAe;AAClC;AAAA,IACF;AAEA,oBAAgB;AAEhB,QAAI,WAAW;AACb,mBAAa,SAAS;AAAA,IACxB;AACA,gBAAY,WAAW,MAAM;AAC3B,eAAA;AACA,kBAAY;AAAA,IACd,GAAG,KAAK;AAAA,EACV;AACF;AASA,MAAM,oBAAoB,CACxB,SACA,SACA,eACS;AACT,UAAQ,MAAM,UAAU;AACxB,MAAI,YAAY;AACd,YAAQ,MAAM,aAAa;AAAA,EAC7B;AACF;AASA,MAAM,4BAA4B,CAChC,eACA,WACY;AACZ,SAAO,kBAAkB,QAAQ,WAAW;AAC9C;AAUA,MAAM,yBAAyB,CAC7B,SACA,YACA,oBACS;AACT,MAAI,iBAAiB;AACnB,UAAM,cAAc,OAAO;AAC3B,UAAM,eAAe,OAAO;AAC5B,UAAM,gBAAgB,gBAAgB;AACtC,UAAM,iBAAiB,gBAAgB;AACvC,UAAM,wBACJ,gBAAgB,cAAc,QAC9B,iBAAiB,eAAe;AAElC,QAAI,CAAC,uBAAuB;AAC1B,cAAQ,MAAM,QAAQ,GAAG,aAAa;AACtC,cAAQ,MAAM,SAAS,GAAG,cAAc;AAAA,IAC1C,OAAO;AACL,YAAM,kBAAkB,gBAAgB;AACxC,YAAM,cAAc,kBAChB,gBAAgB,cAChB;AAEJ,YAAM,EAAE,OAAO,iBAAiB,QAAQ,SAAA,IAAa,mBAAA;AACrD,YAAM,QAAQ,KAAK,MAAM,cAAc,eAAe;AACtD,YAAM,SAAS,KAAK,MAAM,eAAe,QAAQ;AAEjD,cAAQ,MAAM,QAAQ,GAAG,KAAK;AAC9B,cAAQ,MAAM,SAAS,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EAAA;AAEd,UAAQ,MAAM,YAAY,aAAa,UAAU,CAAC,OAAO,UAAU,CAAC;AACtE;AASA,MAAM,uBAAuB,CAC3B,iBACA,eACA,WACS;AACT,QAAM,YAAY,MAAM,KAAK,cAAc,QAAQ;AAEnD,YAAU,QAAQ,CAAC,UAAU,UAAU;AACrC,UAAM,UAAU,4BAA4B,UAAU,KAAK;AAE3D,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,MAAM,KAAK;AAErC,2BAAuB,SAAS,YAAY,eAAe;AAAA,EAC7D,CAAC;AACH;AAEA,MAAM,oBAAoB,CACxB,SACAA,SACA,cACG;AACH,QAAM,WAA4B,CAAA;AAElC,MAAI,QAAQ,YAAY,OAAO;AAC7B,aAAS;AAAA,MACPC,eAAwB;AAAA,QACtB;AAAA,QACA,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,WAAW,UAAU,MAAM,SAAS,UAAU,IAAI,MAAM,KAAK,EAAE,CAAC,CAAC,IAAI;AAE3E,QAAM,gBAAgB,CAAC,QAAwB;AAC7C,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,MAAM,OAAO,GAAI,QAAO;AACnC,QAAI,OAAO,KAAK,MAAM,GAAI,QAAO;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,CAAC,QAAwB;AAC3C,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,MAAM,OAAO,GAAI,QAAO;AACnC,QAAI,OAAO,KAAK,MAAM,GAAI,QAAO;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,cAAc,QAAQ;AACzC,QAAM,WAAW,YAAY,QAAQ;AACrC,QAAM,sBAAsB,GAAG,UAAU;AACzC,QAAM,oBAAoB,GAAG,QAAQ;AAErC,SAAOC,UAAuB;AAAA,IAC5B,WAAW,GAAG,mBAAmB,IAAIF,OAAK;AAAA,IAC1C;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QAEP,GAAG,0BAA0B;AAAA,UAC3B,WAAW,GAAG,qBAAqB;AAAA,UACnC,mBAAmB;AAAA,UACnB;AAAA,UACA;AAAA,UACA,mBAAmB;AAAA,QAAA,CACpB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,SACA,WACAA,YACG;AACH,QAAM,WAAW,UAAU,MAAM,SAAS,UAAU,IAAI,MAAM,KAAK,EAAE,CAAC,CAAC,IAAI;AAC3E,QAAM,aAAa,WAAW,IAAI,IAAI;AACtC,QAAM,WAAW,WAAW,IAAI,MAAM;AACtC,QAAM,sBAAsB,GAAG,UAAU;AACzC,QAAM,oBAAoB,GAAG,QAAQ;AAErC,SAAOE,UAAuB;AAAA,IAC5B,WAAW,GAAG,gBAAgB,IAAIF,OAAK;AAAA,IACvC,UAAU,CAAC,kBAAkB,SAASA,SAAO,SAAS,CAAC;AAAA,IACvD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY,UAAU;AAAA,QACtB,SAAS,UAAU;AAAA,QACnB,QAAQ,UAAU,UAAU;AAAA,QAC5B,OAAO;AAAA,QACP,QAAQ;AAAA,QAER,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,CAAC,8CAA8C,GAAG;AAAA,YAChD,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,GAAI,6BAA6B;AAAA,UAC/B,SAAS;AAAA,QAAA;AAAA,QAGX,GAAG,0BAA0B;AAAA,UAC3B,WAAW,GAAG,mBAAmB;AAAA,UACjC,mBAAmB;AAAA,UACnB;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,MAAM,aAAa,CAAC,UAA0B;AAC5C,QAAM,aAAa,MAAM,OAAO;AAChC,QAAM,SAAS,wBAAwB,UAAU;AAEjD,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,8BAA8B,UAAU,WAAW;AAChE,WAAOE,UAAuB;AAAA,MAC5B,WAAW;AAAA,IAAA,CACZ;AAAA,EACH;AAEA,QAAM,YAAY,MAAM,OAAO,IAAI,CAAC,SAAS,UAAU;AACrD,UAAM,YAAY,OAAO,MAAM,KAAK;AACpC,WAAO,eAAe,SAAS,WAAW,KAAK;AAAA,EACjD,CAAC;AAED,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB,KAAK,MAAM,QAAQ;AAAA,QACnB,WAAW;AAAA,QAEX,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,gDAAgD;AAAA,YAC9C,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,QAGF,GAAG,0BAA0B;AAAA,UAC3B,qBAAqB,OAAO,OAAO;AAAA,UACnC,kBAAkB,OAAO,OAAO;AAAA,UAChC,WAAW;AAAA,QAAA,CACZ;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,SACA,UACA,eACG;AACH,QAAM,WAA4B,CAAA;AAClC,MAAI;AAEJ,MAAI,QAAQ,YAAY,OAAO;AAC7B,aAAS;AAAA,MACPD,eAAwB;AAAA,QACtB;AAAA,QACA,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,QAAQ,YAAY,SAAS;AAC/B,YAAQ,aAAa,SAAS,MAAM;AACpC,YAAQ,aAAa,eAAe,MAAM;AAC1C,YAAQ,aAAa,QAAQ,MAAM;AAEnC,YAAQE,OAAoB;AAAA,MAC1B,OAAO;AAAA,MACP,UAAU;AAAA,IAAA,CACX;AACD,aAAS,KAAK,KAAK;AAAA,EACrB;AAEA,QAAM,EAAE,OAAO,iBAAiB,QAAQ,SAAA,IAAa,mBAAA;AAErD,QAAM,kBAAkBD,UAAuB;AAAA,IAC7C,WAAW,GAAG,mBAAmB;AAAA,IACjC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,OAAO,GAAG,kBAAkB,GAAG;AAAA,QAC/B,QAAQ,GAAG,WAAW,GAAG;AAAA,QAEzB,GAAI,6BAA6B;AAAA,UAC/B,KAAK;AAAA,QAAA;AAAA,QAGP,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,8CAA8C;AAAA,YAC5C,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,GAAI,YAAY;AAAA,UACd,GAAG,0BAA0B;AAAA,YAC3B,KAAK;AAAA,YACL,WAAW,GAAG,uBAAuB;AAAA,YACrC,mBAAmB;AAAA,YACnB,qBAAqB,GAAG,OAAO,aAAa,KAAK,EAAE;AAAA,YACnD,mBAAmB;AAAA,UAAA,CACpB;AAAA,QAAA;AAAA,MACH;AAAA,IACF;AAAA,EACF,CACD;AAED,MAAI,YAAY,gBAAgB,mBAAmB,aAAa;AAC9D,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,gBAAQ,QAAQ,CAAC,UAAU;AACzB,cAAI,MAAM,gBAAgB;AACxB,gBAAI,MAAO,OAAM,OAAO,QAAA;AACxB,qBAAS,WAAA;AAAA,UACX;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE,YAAY,IAAI,OAAO,aAAa,KAAK,EAAE;AAAA,QAC3C,WAAW;AAAA,MAAA;AAAA,IACb;AAGF,aAAS,QAAQ,gBAAgB,OAAO;AAAA,EAC1C;AAEA,SAAO;AACT;AAEA,MAAM,eAAe,CAAC,UAA0B;AAC9C,QAAM,UAAUA,UAAuB;AAAA,IACrC,WAAW,GAAG,qBAAqB;AAAA,IACnC,UAAU;AAAA,MACR,WAAW,KAAK;AAAA,MAChB;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM,OAAO;AAAA,MAAA;AAAA,IACf;AAAA,IAEF,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QAEV,GAAG,0BAA0B;AAAA,UAC3B,UAAU;AAAA,UACV,KAAK;AAAA,QAAA,CACN;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AAED,SAAOA,UAAuB;AAAA,IAC5B,WAAW,GAAG,qBAAqB;AAAA,IACnC,UAAU,CAAC,OAAO;AAAA,IAClB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG,0BAA0B;AAAA,UAC3B,QAAQ;AAAA,UAER,GAAI,MAAM,mBAAmB;AAAA,YAC3B,QAAQ;AAAA,UAAA;AAAA,QACV,CACD;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;AAEA,MAAA,YAAe,CAAC,UAA0B;AACxC,QAAM,YAAYA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,aAAa,KAAK,CAAC;AAAA,IAC9B,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAED,QAAM,gBAAgB,YAAY;AAChC,UAAM,aAAa,MAAM,OAAO;AAChC,UAAM,SAAS,wBAAwB,UAAU;AACjD,UAAM,gBAAgB,UAAU,QAAQ;AAAA,MACtC,IAAI,gBAAgB;AAAA,IAAA;AAEtB,UAAM,kBAAkB,UAAU,QAAQ;AAAA,MACxC,IAAI,mBAAmB;AAAA,IAAA;AAEzB,QAAI,oBAAoB;AAExB,QAAI,CAAC,0BAA0B,eAAe,MAAM,GAAG;AACrD;AAAA,IACF;AAEA,UAAM,kBAAkB,MAAM;AAC5B,UAAI,kBAAmB;AAEvB,6BAAuB,iBAAiB,aAAa;AACrD,0BAAoB;AAEpB,iBAAW,MAAM;AACf,6BAAqB,MAAM,UAAU,eAAgB,MAAO;AAAA,MAC9D,GAAG,GAAG;AAAA,IACR;AAEA,QAAI;AACF,YAAM,iBAAiB,aAAc;AAAA,IACvC,SAAS,OAAO;AACd,cAAQ,KAAK,oDAAoD,KAAK;AAAA,IACxE;AAEA,yBAAqB,MAAM,UAAU,eAAgB,MAAO;AAC5D,sBAAkB,UAAU,SAAS,GAAG;AAExC,QAAI,CAAC,kBAAkB;AACrB,YAAM,gBAAgB,oBAAoB,MAAM;AAC9C,mBAAW,MAAM;AACf,+BAAqB,MAAM,UAAU,eAAgB,MAAO;AAC5D,qBAAW,MAAM;AACf,8BAAkB,UAAU,SAAS,GAAG;AACxC,gCAAoB;AAAA,UACtB,GAAG,GAAG;AAAA,QACR,GAAG,GAAG;AAAA,MACR,CAAC;AAED,aAAO,iBAAiB,UAAU,MAAM;AACtC,YAAI,kBAAkB;AACpB;AAAA,QACF;AAEA,YAAI,UAAU,QAAQ,MAAM,YAAY,KAAK;AAC3C,4BAAkB,UAAU,SAAS,KAAK,0BAA0B;AAAA,QACtE;AAEA,wBAAA;AACA,sBAAA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,YAAU,UAAU;AACpB,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/atomic/animations/brand/chevron-scroll.js CHANGED Viewed

@@ -1,5 +1,22 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
 const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
 const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";
@@ -18,7 +35,7 @@ const FirstChevronStyles = `
   }
   .${ELEMENT_FIRST_CHEVRON} svg {
-    fill: ${Styles.token.color.gold};
+    fill: ${token__namespace.color.gold};
   }
   @media (prefers-reduced-motion: no-preference) {
@@ -45,14 +62,14 @@ const SecondChevronStyles = `
     transform: translateX(-40%);
   }
-  @media (${Styles.token.media.queries.highDef.min}) {
+  @media (${token__namespace.media.queries.highDef.min}) {
     .${ELEMENT_SECOND_CHEVRON} {
        top: 95px;
     }
   }
   .${ELEMENT_SECOND_CHEVRON} svg {
-    fill: ${Styles.token.color.red};
+    fill: ${token__namespace.color.red};
   }
   @media (prefers-reduced-motion: no-preference) {
@@ -78,14 +95,14 @@ const ThirdChevronStyles = `
     transform: translateX(-30%);
   }
-  @media (${Styles.token.media.queries.highDef.min}) {
+  @media (${token__namespace.media.queries.highDef.min}) {
     .${ELEMENT_THIRD_CHEVRON} {
        top: 195px;
     }
   }
   .${ELEMENT_THIRD_CHEVRON} svg {
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
   }
   @media (prefers-reduced-motion: no-preference) {
@@ -120,7 +137,7 @@ const STYLES_ANIMATION_BRAND_LOGO = `
     width: 8.2vw;
   }
-  @media (${Styles.token.media.queries.highDef.min}) {
+  @media (${token__namespace.media.queries.highDef.min}) {
     .${ELEMENT_SECOND_CHEVRON} svg,
     .${ELEMENT_THIRD_CHEVRON} svg {
       height: 306px;
@@ -133,7 +150,7 @@ const STYLES_ANIMATION_BRAND_LOGO = `
     width: 5vw;
   }
-  @media (${Styles.token.media.queries.highDef.min}) {
+  @media (${token__namespace.media.queries.highDef.min}) {
     .${FirstChevronStyles} svg {
       height: 202px;
       width: 144px;

package/dist/atomic/animations/brand/chevron-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chevron-scroll.js","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\" viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n @keyframes chevron-one {\n from { transform: translateX(-80%); }\n to { transform: translateX(40%); }\n }\n\n .${ELEMENT_FIRST_CHEVRON} {\n top: 0;\n transform: translateX(-80%);\n }\n\n .${ELEMENT_FIRST_CHEVRON} svg {\n fill: ${token.color.gold};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_FIRST_CHEVRON} {\n transform: translateX(40%);\n animation: chevron-one forwards;\n animation-timeline: view();\n animation-range-start: cover;\n animation-range-end: contain;\n }\n }\n }\n`;\n\nconst SecondChevronStyles = `\n @keyframes chevron-two {\n from { transform: translateX(-40%); }\n to { transform: translateX(24%); }\n }\n\n .${ELEMENT_SECOND_CHEVRON} {\n top: 10%;\n z-index: 99;\n transform: translateX(-40%);\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_SECOND_CHEVRON} {\n top: 95px;\n }\n }\n\n .${ELEMENT_SECOND_CHEVRON} svg {\n fill: ${token.color.red};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_SECOND_CHEVRON} {\n transform: translateX(24%);\n animation: chevron-two forwards;\n animation-timeline: view();\n animation-range-start: cover;\n animation-range-end: contain;\n }\n }\n }\n`;\n\nconst ThirdChevronStyles = `\n @keyframes chevron-three {\n from { transform: translateX(-30%); }\n to { transform: translateX(60%); }\n }\n\n .${ELEMENT_THIRD_CHEVRON} {\n top: 25%;\n transform: translateX(-30%);\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_THIRD_CHEVRON} {\n top: 195px;\n }\n }\n\n .${ELEMENT_THIRD_CHEVRON} svg {\n fill: ${token.color.black};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_THIRD_CHEVRON} {\n transform: translateX(60%);\n animation: chevron-three forwards;\n animation-timeline: view();\n animation-range-start: 0;\n animation-range-end: 100vh;\n }\n }\n }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n .${ELEMENT_ANIMATION_BRAND_LOGO} {\n position: relative;\n height: 50vw;\n width: 100vw;\n }\n\n .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n position: absolute;\n height: 100%;\n right: 0;\n transform: none;\n }\n\n .${ELEMENT_SECOND_CHEVRON} svg,\n .${ELEMENT_THIRD_CHEVRON} svg {\n height: 10vw;\n width: 8.2vw;\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_SECOND_CHEVRON} svg,\n .${ELEMENT_THIRD_CHEVRON} svg {\n height: 306px;\n width: 252px;\n }\n }\n\n .${FirstChevronStyles} svg {\n height: 7vw;\n width: 5vw;\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${FirstChevronStyles} svg {\n height: 202px;\n width: 144px;\n }\n }\n\n ${FirstChevronStyles} \n ${SecondChevronStyles} \n ${ThirdChevronStyles} \n`;\n\nexport default () =>\n (() => {\n const container = document.createElement('div');\n const first = document.createElement('div');\n const second = document.createElement('div');\n const third = document.createElement('div');\n\n first.classList.add(ELEMENT_FIRST_CHEVRON);\n first.innerHTML = ICON_CHEVRON_SMALL;\n\n second.classList.add(ELEMENT_SECOND_CHEVRON);\n second.innerHTML = ICON_CHEVRON_BIG;\n\n third.classList.add(ELEMENT_THIRD_CHEVRON);\n third.innerHTML = ICON_CHEVRON_BIG;\n\n container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n container.appendChild(first);\n container.appendChild(second);\n container.appendChild(third);\n\n return {\n element: container,\n styles: STYLES_ANIMATION_BRAND_LOGO,\n };\n })();\n"],"names":["token"],"mappings":";;AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACdA,~~OAAAA~~,MAAM,~~MAAM,~~IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMfA,~~OAAAA~~,MAAM,~~MAAM,~~QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACfA,~~OAAAA~~,MAAM,~~MAAM,~~GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,~~OAAAA~~,MAAM,~~MAAM,~~QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACdA,~~OAAAA~~,MAAM,~~MAAM,~~KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,~~OAAAA~~,MAAM,~~MAAM,~~QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXA,~~OAAAA~~,MAAM,~~MAAM,~~QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}
1	+ {"version":3,"file":"chevron-scroll.js","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\" viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n @keyframes chevron-one {\n from { transform: translateX(-80%); }\n to { transform: translateX(40%); }\n }\n\n .${ELEMENT_FIRST_CHEVRON} {\n top: 0;\n transform: translateX(-80%);\n }\n\n .${ELEMENT_FIRST_CHEVRON} svg {\n fill: ${token.color.gold};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_FIRST_CHEVRON} {\n transform: translateX(40%);\n animation: chevron-one forwards;\n animation-timeline: view();\n animation-range-start: cover;\n animation-range-end: contain;\n }\n }\n }\n`;\n\nconst SecondChevronStyles = `\n @keyframes chevron-two {\n from { transform: translateX(-40%); }\n to { transform: translateX(24%); }\n }\n\n .${ELEMENT_SECOND_CHEVRON} {\n top: 10%;\n z-index: 99;\n transform: translateX(-40%);\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_SECOND_CHEVRON} {\n top: 95px;\n }\n }\n\n .${ELEMENT_SECOND_CHEVRON} svg {\n fill: ${token.color.red};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_SECOND_CHEVRON} {\n transform: translateX(24%);\n animation: chevron-two forwards;\n animation-timeline: view();\n animation-range-start: cover;\n animation-range-end: contain;\n }\n }\n }\n`;\n\nconst ThirdChevronStyles = `\n @keyframes chevron-three {\n from { transform: translateX(-30%); }\n to { transform: translateX(60%); }\n }\n\n .${ELEMENT_THIRD_CHEVRON} {\n top: 25%;\n transform: translateX(-30%);\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_THIRD_CHEVRON} {\n top: 195px;\n }\n }\n\n .${ELEMENT_THIRD_CHEVRON} svg {\n fill: ${token.color.black};\n }\n\n @media (prefers-reduced-motion: no-preference) {\n @supports (animation-timeline: scroll()) {\n .${ELEMENT_THIRD_CHEVRON} {\n transform: translateX(60%);\n animation: chevron-three forwards;\n animation-timeline: view();\n animation-range-start: 0;\n animation-range-end: 100vh;\n }\n }\n }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n .${ELEMENT_ANIMATION_BRAND_LOGO} {\n position: relative;\n height: 50vw;\n width: 100vw;\n }\n\n .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n position: absolute;\n height: 100%;\n right: 0;\n transform: none;\n }\n\n .${ELEMENT_SECOND_CHEVRON} svg,\n .${ELEMENT_THIRD_CHEVRON} svg {\n height: 10vw;\n width: 8.2vw;\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${ELEMENT_SECOND_CHEVRON} svg,\n .${ELEMENT_THIRD_CHEVRON} svg {\n height: 306px;\n width: 252px;\n }\n }\n\n .${FirstChevronStyles} svg {\n height: 7vw;\n width: 5vw;\n }\n\n @media (${token.media.queries.highDef.min}) {\n .${FirstChevronStyles} svg {\n height: 202px;\n width: 144px;\n }\n }\n\n ${FirstChevronStyles} \n ${SecondChevronStyles} \n ${ThirdChevronStyles} \n`;\n\nexport default () =>\n (() => {\n const container = document.createElement('div');\n const first = document.createElement('div');\n const second = document.createElement('div');\n const third = document.createElement('div');\n\n first.classList.add(ELEMENT_FIRST_CHEVRON);\n first.innerHTML = ICON_CHEVRON_SMALL;\n\n second.classList.add(ELEMENT_SECOND_CHEVRON);\n second.innerHTML = ICON_CHEVRON_BIG;\n\n third.classList.add(ELEMENT_THIRD_CHEVRON);\n third.innerHTML = ICON_CHEVRON_BIG;\n\n container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n container.appendChild(first);\n container.appendChild(second);\n container.appendChild(third);\n\n return {\n element: container,\n styles: STYLES_ANIMATION_BRAND_LOGO,\n };\n })();\n"],"names":["token"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACdA,iBAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMfA,iBAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACfA,iBAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,iBAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACdA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,iBAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXA,iBAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}