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

package/dist/composite/carousel/wide/frames.js.map

@@ -1 +1 @@
-{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: token.spacing.min,\n        lineHeight: 1,\n        color: token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: token.color.gray.light,\n          '&:hover': {\n            color: token.color.white,\n          },\n        }),\n      },\n    })\n    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.white,\n        border: `1px solid ${token.color.gray.light}`,\n        display: 'block',\n        padding: token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          border: `1px solid ${token.color.gray.dark}`,\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: token.spacing.sm,\n          left: token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          padding: `0 ${token.spacing.md}`,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: token.spacing.lg,\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["index","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: token.spacing.min,\n        lineHeight: 1,\n        color: token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: token.color.gray.light,\n          '&:hover': {\n            color: token.color.white,\n          },\n        }),\n      },\n    })\n    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\n      element: {\n        backgroundColor: token.color.white,\n        border: `1px solid ${token.color.gray.light}`,\n        display: 'block',\n        padding: token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          border: `1px solid ${token.color.gray.dark}`,\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: token.spacing.sm,\n          left: token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          padding: `0 ${token.spacing.md}`,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: token.spacing.lg,\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["index","assets.image.background"],"mappings":"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"}

package/dist/composite/carousel/wide/index.js

@@ -11,12 +11,11 @@ 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 "../../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/performance";
 import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
-import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";

package/dist/composite/carousel/wide/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { assets } from 'atomic';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport const createCompositeCarouselWide = (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const builder = new ElementBuilder();\n\n  builder.withClassName('umd-carousel-wide');\n  builder.withChild(container);\n\n  if (title) {\n    builder.withAttribute('title', title);\n  } else {\n    builder.withAttribute('title', 'Animated Image Carousel');\n  }\n\n  builder.withStyles({\n    element: {\n      container: 'umd-carousel-wide / inline-size',\n      display: 'block',\n      position: 'relative',\n\n      [`@media (${token.media.queries.large.min})`]: {\n        paddingBottom: 0,\n      },\n    },\n  });\n\n  const composite = builder.build();\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { assets } from 'atomic';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport const createCompositeCarouselWide = (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const builder = new ElementBuilder();\n\n  builder.withClassName('umd-carousel-wide');\n  builder.withChild(container);\n\n  if (title) {\n    builder.withAttribute('title', title);\n  } else {\n    builder.withAttribute('title', 'Animated Image Carousel');\n  }\n\n  builder.withStyles({\n    element: {\n      container: 'umd-carousel-wide / inline-size',\n      display: 'block',\n      position: 'relative',\n\n      [`@media (${token.media.queries.large.min})`]: {\n        paddingBottom: 0,\n      },\n    },\n  });\n\n  const composite = builder.build();\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background"],"mappings":"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"}

package/dist/composite/footer/base.d.ts

@@ -1,4 +1,4 @@
 import { FooterProps } from './_types';
-import { ElementModel } from '_types';
+import { ElementModel } from '../../_types';
 export declare const createCompositeFooterBase: (props: FooterProps, childElements: Array<ElementModel>) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=base.d.ts.map

package/dist/composite/hero/custom/expand.js

@@ -13,11 +13,10 @@ 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 "../../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/performance";
 import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../../atomic/assets/image/background.js";
-import "@universityofmaryland/web-utilities-library/performance";
 import { createVideoToggle } from "../../../atomic/assets/video/toggle.js";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";

package/dist/composite/hero/custom/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel, type ContentElement } from '../../../_types';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    })\n    .build();\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<\n  HeroExpandProps,\n  'image' | 'video'\n>): ElementModel<HTMLElement> | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n  container.withChild(overlay);\n\n  return container.build();\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-container')\n    .withChild(createImageSize(props))\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    })\n    .build();\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return new ElementBuilder(eyebrow)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.maximum)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<\n  HeroExpandProps,\n  'eyebrow' | 'headline'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<\n  HeroExpandProps,\n  'actions' | 'additional'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (actions) {\n    const actionsContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-actions')\n      .withChild(actions)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-additional')\n      .withChild(additional)\n      .build();\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    });\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...topTextChildren)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    container.withChild(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...bottomTextChildren)\n      .withStyles({\n        element: {\n          width: '100%',\n        },\n      })\n      .build();\n    container.withChild(bottomText);\n  }\n\n  return container.build();\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('hero-expand-sticky')\n    .withChildren(assetContainer, textContainer)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroExpand = (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-expand')\n    .withChild(sticky)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .build();\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["assets.video.toggle","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets } from 'atomic';\nimport { type ElementModel, type ContentElement } from '../../../_types';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    })\n    .build();\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<\n  HeroExpandProps,\n  'image' | 'video'\n>): ElementModel<HTMLElement> | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n  container.withChild(overlay);\n\n  return container.build();\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  new ElementBuilder()\n    .withClassName('hero-expand-image-container')\n    .withChild(createImageSize(props))\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    })\n    .build();\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return new ElementBuilder(eyebrow)\n    .styled(Styles.element.text.decoration.ribbon)\n    .withStyles({\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.maximum)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<\n  HeroExpandProps,\n  'eyebrow' | 'headline'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<\n  HeroExpandProps,\n  'actions' | 'additional'\n>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (actions) {\n    const actionsContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-actions')\n      .withChild(actions)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = new ElementBuilder()\n      .withClassName('hero-expand-text-additional')\n      .withChild(additional)\n      .build();\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const container = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    });\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...topTextChildren)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n    container.withChild(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = new ElementBuilder()\n      .styled(Styles.layout.space.horizontal.normal)\n      .withChildren(...bottomTextChildren)\n      .withStyles({\n        element: {\n          width: '100%',\n        },\n      })\n      .build();\n    container.withChild(bottomText);\n  }\n\n  return container.build();\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('hero-expand-sticky')\n    .withChildren(assetContainer, textContainer)\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroExpand = (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-expand')\n    .withChild(sticky)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .build();\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["assets.video.toggle","assets.image.background"],"mappings":"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"}

package/dist/composite/hero/custom/grid.js

@@ -14,11 +14,10 @@ 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 "../../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/performance";
 import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../../atomic/assets/image/background.js";
-import "@universityofmaryland/web-utilities-library/performance";
 import { createVideoObservedAutoPlay } from "../../../atomic/assets/video/observed-auto-play.js";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";

package/dist/composite/hero/custom/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ContentElement, type ElementModel } from '../../../_types';\n\ninterface CornerProps {\n  images: Array<HTMLImageElement>;\n  isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n  images: Array<HTMLImageElement>;\n  video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n  headline?: ContentElement;\n  text?: ContentElement;\n  actions?: ContentElement;\n  corners: Array<CornerProps>;\n  center: CenterProps | null;\n  isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n  GRID_COLUMNS: { start: '110vh', end: '230vh' },\n  GRID_ROWS: { start: '110vh', end: '230vh' },\n  TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n  COLUMNS: {\n    INITIAL: '20% 60% 20%',\n    FINAL: '0 100% 0',\n    DEFAULT: '25% 50% 25%',\n  },\n  ROWS: {\n    INITIAL: '25vh 1fr 25vh',\n    FINAL: '0 1fr 0',\n    TRIPLE: '1fr 1fr 1fr',\n  },\n} as const;\n\nconst keyFrameColumns = `\n  @keyframes grid-columns {\n    from {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n    }\n    to {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameRows = `\n  @keyframes grid-rows {\n    from {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n    }\n    to {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameTint = `\n  @keyframes tint-fade {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n\nconst columnBase = {\n  display: 'grid',\n  gridAutoFlow: 'row dense',\n  gridGap: `${token.spacing.min}`,\n  width: '100%',\n  height: '100vh',\n\n  [`@media (${token.media.queries.tablet.min})`]: {\n    gridGap: `${token.spacing.md}`,\n  },\n\n  [`@media (${token.media.queries.desktop.min})`]: {\n    gridGap: `${token.spacing.lg}`,\n  },\n\n  ['& > *']: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n  assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n  assets.video.observedAutoPlay({\n    video,\n    isAutoplay: true,\n    additionalElementStyles: {\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n  const children = images.map((image) => createImageWrapper(image));\n\n  return new ElementBuilder()\n    .withClassName(\n      isCornerLeft ? 'hero-grid-corner-left' : 'hero-grid-corner-right',\n    )\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute(\n      'aria-label',\n      `${isCornerLeft ? 'Left' : 'Right'} decorative image grid`,\n    )\n    .build();\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n  const tint = new ElementBuilder()\n    .withClassName('hero-grid-tint')\n    .withStyles({\n      element: {\n        width: '100%',\n        height: '100%',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 9,\n        opacity: 0,\n        ...withViewTimelineAnimation({\n          animation: 'tint-fade ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n          animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n        }),\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Main hero content')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('hero-grid-center')\n    .withChild(tint)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n        ...withViewTimelineAnimation({\n          animation: 'grid-rows ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n        }),\n      },\n    });\n\n  if (video) {\n    container\n      .withChild(createImageWrapper(images[0]))\n      .withChild(createVideoWrapper(video))\n      .withChild(createImageWrapper(images[1]));\n  } else {\n    images.forEach((image) => {\n      container.withChild(createImageWrapper(image));\n    });\n  }\n\n  return container.build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroGridProps, 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { actions, headline, text, isThemeDark } = props;\n  let shouldRenderBlackText = null;\n\n  if (isDisplayWithoutAnimation && !isThemeDark) {\n    shouldRenderBlackText = true;\n  }\n\n  if (!text && !actions && !headline) {\n    return null;\n  }\n\n  const textContainer = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n\n        ...withViewTimelineAnimation({\n          paddingTop: '140vh',\n        }),\n\n        ['*']: {\n          ...(shouldRenderBlackText && {\n            color: `${token.color.black} !important`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.smallest)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const textLockupElement = textLockup.large({\n    headlineComposite: createHeadline(props),\n    textLargest: text,\n    actions,\n    isThemeDark: true,\n  });\n\n  lock.element.appendChild(textLockupElement.element);\n  lock.styles += textLockupElement.styles;\n\n  textContainer.element.appendChild(lock.element);\n  textContainer.styles += lock.styles;\n\n  return textContainer;\n};\n\nconst validateGridProps = (\n  props: HeroGridProps,\n): {\n  leftCorner: CornerProps;\n  rightCorner: CornerProps;\n  center: CenterProps;\n} | null => {\n  const leftCorner = props.corners.find((c) => c.isCornerLeft);\n  const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n  const errors = [];\n\n  // Validate corners\n  if (!leftCorner) {\n    errors.push('Left corner is required for hero grid');\n  } else if (!leftCorner.images || leftCorner.images.length === 0) {\n    errors.push('Left corner must have at least one image');\n  }\n\n  if (!rightCorner) {\n    errors.push('Right corner is required for hero grid');\n  } else if (!rightCorner.images || rightCorner.images.length === 0) {\n    errors.push('Right corner must have at least one image');\n  }\n\n  // Validate center\n  if (!props.center) {\n    errors.push('Center is required for hero grid');\n  } else {\n    if (!props.center.images || props.center.images.length === 0) {\n      errors.push('Center must have at least one image');\n    } else if (props.center.video && props.center.images.length < 2) {\n      errors.push('Center must have at least 2 images when video is provided');\n    }\n  }\n\n  if (errors.length > 0) {\n    errors.forEach((error) => console.log('Hero Grid Error:', error));\n    return null;\n  }\n\n  return {\n    leftCorner: leftCorner as CornerProps,\n    rightCorner: rightCorner as CornerProps,\n    center: props.center as CenterProps,\n  };\n};\n\nconst createGridLayout = (\n  leftCorner: CornerProps,\n  rightCorner: CornerProps,\n  center: CenterProps,\n) => {\n  const gridStyles = {\n    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n    height: '100vh',\n    width: '100%',\n    display: 'grid',\n    gridGap: `${token.spacing.min}`,\n\n    [`@media (${token.media.queries.tablet.min})`]: {\n      gridGap: `${token.spacing.md}`,\n    },\n\n    [`@media (${token.media.queries.desktop.min})`]: {\n      gridGap: `${token.spacing.lg}`,\n    },\n\n    ...withViewTimelineAnimation({\n      position: 'sticky',\n      top: 0,\n      animation: 'grid-columns ease-in-out forwards',\n      animationTimeline: 'view()',\n      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n    }),\n  };\n\n  return new ElementBuilder()\n    .withClassName('hero-grid-layout')\n    .withChildren(\n      createCorner(leftCorner),\n      createCenter(center),\n      createCorner(rightCorner),\n    )\n    .withStyles({ element: gridStyles })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Hero grid layout')\n    .build();\n};\n\nexport const createCompositeHeroGrid = (props: HeroGridProps) => {\n  const validated = validateGridProps(props);\n  if (!validated) return null;\n\n  const { leftCorner, rightCorner, center } = validated;\n  const text = createTextContainer(props);\n  const grid = createGridLayout(leftCorner, rightCorner, center);\n\n  const composite = new ElementBuilder()\n    .withClassName('hero-grid-container')\n    .withChild(grid)\n    .withStyles({\n      element: {\n        width: '100%',\n        display: 'block',\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          height: '300vh',\n        }),\n        ['img, video']: {\n          objectFit: 'cover',\n          width: '100%',\n          height: '100%',\n        },\n      },\n    })\n    .withAttribute('role', 'main')\n    .withAttribute('aria-label', 'Hero section');\n\n  if (text) {\n    composite.withChild(text);\n  }\n\n  const built = composite.build();\n\n  built.styles += keyFrameColumns;\n  built.styles += keyFrameRows;\n  built.styles += keyFrameTint;\n\n  return built;\n};\n"],"names":["assets.image.background","assets.video.observedAutoPlay","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"grid.js","sources":["../../../../source/composite/hero/custom/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ContentElement, type ElementModel } from '../../../_types';\n\ninterface CornerProps {\n  images: Array<HTMLImageElement>;\n  isCornerLeft: boolean;\n}\n\ninterface CenterProps {\n  images: Array<HTMLImageElement>;\n  video?: HTMLVideoElement | null;\n}\n\ninterface HeroGridProps {\n  headline?: ContentElement;\n  text?: ContentElement;\n  actions?: ContentElement;\n  corners: Array<CornerProps>;\n  center: CenterProps | null;\n  isThemeDark?: boolean;\n}\n\nconst isPreferReducedMotion = isPreferredReducedMotion();\nconst isScrollTimelineSupported = () =>\n  'ScrollTimeline' in window || CSS.supports('animation-timeline', 'scroll()');\nconst isDisplayWithoutAnimation =\n  isPreferReducedMotion || !isScrollTimelineSupported();\n\nconst ANIMATION_RANGES = {\n  GRID_COLUMNS: { start: '110vh', end: '230vh' },\n  GRID_ROWS: { start: '110vh', end: '230vh' },\n  TINT_FADE: { start: '50vh', end: '140vh' },\n} as const;\n\nconst GRID_LAYOUT = {\n  COLUMNS: {\n    INITIAL: '20% 60% 20%',\n    FINAL: '0 100% 0',\n    DEFAULT: '25% 50% 25%',\n  },\n  ROWS: {\n    INITIAL: '25vh 1fr 25vh',\n    FINAL: '0 1fr 0',\n    TRIPLE: '1fr 1fr 1fr',\n  },\n} as const;\n\nconst keyFrameColumns = `\n  @keyframes grid-columns {\n    from {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};\n    }\n    to {\n      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameRows = `\n  @keyframes grid-rows {\n    from {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};\n    }\n    to {\n      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};\n      grid-gap: 0;\n    }\n  }\n`;\n\nconst keyFrameTint = `\n  @keyframes tint-fade {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n`;\n\nconst columnBase = {\n  display: 'grid',\n  gridAutoFlow: 'row dense',\n  gridGap: `${token.spacing.min}`,\n  width: '100%',\n  height: '100vh',\n\n  [`@media (${token.media.queries.tablet.min})`]: {\n    gridGap: `${token.spacing.md}`,\n  },\n\n  [`@media (${token.media.queries.desktop.min})`]: {\n    gridGap: `${token.spacing.lg}`,\n  },\n\n  ['& > *']: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n};\n\nconst createImageWrapper = (image: HTMLImageElement) =>\n  assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n\nconst createVideoWrapper = (video: HTMLVideoElement) =>\n  assets.video.observedAutoPlay({\n    video,\n    isAutoplay: true,\n    additionalElementStyles: {\n      additionalElementStyles: {\n        width: '100%',\n        aspectRatio: '1 / 1',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\nconst createCorner = ({ images, isCornerLeft }: CornerProps) => {\n  const children = images.map((image) => createImageWrapper(image));\n\n  return new ElementBuilder()\n    .withClassName(\n      isCornerLeft ? 'hero-grid-corner-left' : 'hero-grid-corner-right',\n    )\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE,\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute(\n      'aria-label',\n      `${isCornerLeft ? 'Left' : 'Right'} decorative image grid`,\n    )\n    .build();\n};\n\nconst createCenter = ({ images, video }: CenterProps) => {\n  const tint = new ElementBuilder()\n    .withClassName('hero-grid-tint')\n    .withStyles({\n      element: {\n        width: '100%',\n        height: '100%',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        zIndex: 9,\n        opacity: 0,\n        ...withViewTimelineAnimation({\n          animation: 'tint-fade ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,\n          animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end,\n        }),\n      },\n    })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Main hero content')\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('hero-grid-center')\n    .withChild(tint)\n    .withStyles({\n      element: {\n        ...columnBase,\n        gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,\n        ...withViewTimelineAnimation({\n          animation: 'grid-rows ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,\n          animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end,\n        }),\n      },\n    });\n\n  if (video) {\n    container\n      .withChild(createImageWrapper(images[0]))\n      .withChild(createVideoWrapper(video))\n      .withChild(createImageWrapper(images[1]));\n  } else {\n    images.forEach((image) => {\n      container.withChild(createImageWrapper(image));\n    });\n  }\n\n  return container.build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroGridProps, 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.white,\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<HeroGridProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { actions, headline, text, isThemeDark } = props;\n  let shouldRenderBlackText = null;\n\n  if (isDisplayWithoutAnimation && !isThemeDark) {\n    shouldRenderBlackText = true;\n  }\n\n  if (!text && !actions && !headline) {\n    return null;\n  }\n\n  const textContainer = new ElementBuilder()\n    .withClassName('hero-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n\n        ...withViewTimelineAnimation({\n          paddingTop: '140vh',\n        }),\n\n        ['*']: {\n          ...(shouldRenderBlackText && {\n            color: `${token.color.black} !important`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.smallest)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const textLockupElement = textLockup.large({\n    headlineComposite: createHeadline(props),\n    textLargest: text,\n    actions,\n    isThemeDark: true,\n  });\n\n  lock.element.appendChild(textLockupElement.element);\n  lock.styles += textLockupElement.styles;\n\n  textContainer.element.appendChild(lock.element);\n  textContainer.styles += lock.styles;\n\n  return textContainer;\n};\n\nconst validateGridProps = (\n  props: HeroGridProps,\n): {\n  leftCorner: CornerProps;\n  rightCorner: CornerProps;\n  center: CenterProps;\n} | null => {\n  const leftCorner = props.corners.find((c) => c.isCornerLeft);\n  const rightCorner = props.corners.find((c) => !c.isCornerLeft);\n\n  const errors = [];\n\n  // Validate corners\n  if (!leftCorner) {\n    errors.push('Left corner is required for hero grid');\n  } else if (!leftCorner.images || leftCorner.images.length === 0) {\n    errors.push('Left corner must have at least one image');\n  }\n\n  if (!rightCorner) {\n    errors.push('Right corner is required for hero grid');\n  } else if (!rightCorner.images || rightCorner.images.length === 0) {\n    errors.push('Right corner must have at least one image');\n  }\n\n  // Validate center\n  if (!props.center) {\n    errors.push('Center is required for hero grid');\n  } else {\n    if (!props.center.images || props.center.images.length === 0) {\n      errors.push('Center must have at least one image');\n    } else if (props.center.video && props.center.images.length < 2) {\n      errors.push('Center must have at least 2 images when video is provided');\n    }\n  }\n\n  if (errors.length > 0) {\n    errors.forEach((error) => console.log('Hero Grid Error:', error));\n    return null;\n  }\n\n  return {\n    leftCorner: leftCorner as CornerProps,\n    rightCorner: rightCorner as CornerProps,\n    center: props.center as CenterProps,\n  };\n};\n\nconst createGridLayout = (\n  leftCorner: CornerProps,\n  rightCorner: CornerProps,\n  center: CenterProps,\n) => {\n  const gridStyles = {\n    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,\n    height: '100vh',\n    width: '100%',\n    display: 'grid',\n    gridGap: `${token.spacing.min}`,\n\n    [`@media (${token.media.queries.tablet.min})`]: {\n      gridGap: `${token.spacing.md}`,\n    },\n\n    [`@media (${token.media.queries.desktop.min})`]: {\n      gridGap: `${token.spacing.lg}`,\n    },\n\n    ...withViewTimelineAnimation({\n      position: 'sticky',\n      top: 0,\n      animation: 'grid-columns ease-in-out forwards',\n      animationTimeline: 'view()',\n      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,\n      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end,\n    }),\n  };\n\n  return new ElementBuilder()\n    .withClassName('hero-grid-layout')\n    .withChildren(\n      createCorner(leftCorner),\n      createCenter(center),\n      createCorner(rightCorner),\n    )\n    .withStyles({ element: gridStyles })\n    .withAttribute('role', 'region')\n    .withAttribute('aria-label', 'Hero grid layout')\n    .build();\n};\n\nexport const createCompositeHeroGrid = (props: HeroGridProps) => {\n  const validated = validateGridProps(props);\n  if (!validated) return null;\n\n  const { leftCorner, rightCorner, center } = validated;\n  const text = createTextContainer(props);\n  const grid = createGridLayout(leftCorner, rightCorner, center);\n\n  const composite = new ElementBuilder()\n    .withClassName('hero-grid-container')\n    .withChild(grid)\n    .withStyles({\n      element: {\n        width: '100%',\n        display: 'block',\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          height: '300vh',\n        }),\n        ['img, video']: {\n          objectFit: 'cover',\n          width: '100%',\n          height: '100%',\n        },\n      },\n    })\n    .withAttribute('role', 'main')\n    .withAttribute('aria-label', 'Hero section');\n\n  if (text) {\n    composite.withChild(text);\n  }\n\n  const built = composite.build();\n\n  built.styles += keyFrameColumns;\n  built.styles += keyFrameRows;\n  built.styles += keyFrameTint;\n\n  return built;\n};\n"],"names":["assets.image.background","assets.video.observedAutoPlay","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/custom/video-arrow.js

@@ -12,7 +12,6 @@ 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 "../../../atomic/animations/actions/indicator.js";
 import { createAnimationChevronFlow } from "../../../atomic/animations/brand/chevron-flow.js";
 import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";

package/dist/composite/hero/custom/video-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(typography.campaign.extralarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n        color: token.color.white,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(elementStyles.text.rich.simpleLargest)\n    .withStyles({\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        ['& p']: {\n          color: token.color.white,\n        },\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementModel<HTMLElement>[] => {\n  const { headline, text } = props;\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = new ElementBuilder()\n    .withClassName('hero-logo-brand-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(OVERLAY_CLASS)\n    .withChild(container)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    })\n    .build();\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementModel<HTMLElement>,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport const createCompositeHeroVideoArrow = (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const composite = new ElementBuilder('section')\n    .withClassName('umd-element-hero-brand-video')\n    .withStyles({\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('hero-logo-brand-video-wrapper')\n    .withChild(videoElement)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    });\n\n  if (textContainer) {\n    wrapper.withChild(textContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapperBuilt.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapperBuilt.element.appendChild(overlay.element);\n  wrapperBuilt.styles += overlay.styles;\n\n  composite.element.appendChild(wrapperBuilt.element);\n  composite.styles += wrapperBuilt.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(typography.campaign.extralarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n        color: token.color.white,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(elementStyles.text.rich.simpleLargest)\n    .withStyles({\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        ['& p']: {\n          color: token.color.white,\n        },\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementModel<HTMLElement>[] => {\n  const { headline, text } = props;\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = new ElementBuilder()\n    .withClassName('hero-logo-brand-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(OVERLAY_CLASS)\n    .withChild(container)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    })\n    .build();\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementModel<HTMLElement>,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport const createCompositeHeroVideoArrow = (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const composite = new ElementBuilder('section')\n    .withClassName('umd-element-hero-brand-video')\n    .withStyles({\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('hero-logo-brand-video-wrapper')\n    .withChild(videoElement)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    });\n\n  if (textContainer) {\n    wrapper.withChild(textContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapperBuilt.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapperBuilt.element.appendChild(overlay.element);\n  wrapperBuilt.styles += overlay.styles;\n\n  composite.element.appendChild(wrapperBuilt.element);\n  composite.styles += wrapperBuilt.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/logo.js

@@ -13,11 +13,10 @@ 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 "../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/performance";
 import "../../atomic/animations/brand/chevron-scroll.js";
 import "../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../atomic/assets/image/background.js";
-import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";

package/dist/composite/hero/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__asset')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    )\n    .withStyles({\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = new ElementBuilder()\n    .withClassName('umd-hero-logo__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__text')\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const builder = new ElementBuilder().styled(\n    Styles.layout.space.horizontal.small,\n  );\n\n  if (asset) {\n    builder.withChild(asset);\n  }\n\n  builder.withChild(text);\n\n  return builder.build();\n};\n\nexport const createCompositeHeroLogo = (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-logo__container')\n    .withChild(makeLock(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAAqB,CAAC,UAAyB;AACnD,QAAM,EAAE,aAAa,iBAAiB,aAAA,IAAiB;AAEvD,MAAI,YAAa,QAAO,MAAM,MAAM;AACpC,MAAI,gBAAiB,QAAO,MAAM,MAAM;AACxC,MAAI,aAAc,QAAO,MAAM,MAAM,KAAK;AAC1C,SAAO,MAAM,MAAM;AACrB;AAEA,MAAM,cAAc,CAAC,EAAE,YAA0C;AAC/D,MAAI,CAAC,MAAO,QAAO;AAEnB,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC;AAAA,IACCA,sBAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,cAAc,MAAM,QAAQ;AAAA,MAE5B,CAAC,OAAO,GAAG;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,aAAa,gBAAA,IAAoB;AACnD,QAAM,mBAAmB,eAAe;AAExC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B;AAAA,IACC,OAAO,WAAW,SAAS,QAAQ,SAAS;AAAA,MAC1C,OAAO,MAAM,UAAU,gBAAgB;AAAA,IAAA,CACxC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,IAEjB,cAAc;AAAA,MACZ,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CACjB,UACG;AACH,QAAM,EAAE,aAAa,gBAAA,IAAoB;AAEzC,QAAM,oBAAoBC,sBAAiB;AAAA,IACzC,QAAQ,MAAM;AAAA,IACd,mBAAmB,eAAe,KAAK;AAAA,IACvC,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa,eAAe,mBAAmB;AAAA,EAAA,CAChD;AAED,QAAM,cAAc,IAAI,eAAA,EACrB,cAAc,6BAA6B,EAC3C,UAAU,iBAAiB,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,cAAc,KAAK,KAAK,cAAc,SAAS,EAAE,GAAG;AAAA,QACzD,OAAO,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IAC1B;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,iBACR,cAAc,qBAAqB,EACnC,UAAU,WAAW,EACrB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AACL;AAEA,MAAM,WAAW,CAAC,UAAyB;AACzC,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAE7B,QAAM,UAAU,IAAI,eAAA,EAAiB;AAAA,IACnC,OAAO,OAAO,MAAM,WAAW;AAAA,EAAA;AAGjC,MAAI,OAAO;AACT,YAAQ,UAAU,KAAK;AAAA,EACzB;AAEA,UAAQ,UAAU,IAAI;AAEtB,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,0BAA0B,CAAC,UAAyB;AAC/D,QAAM,EAAE,gBAAgB;AAExB,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,0BAA0B,EACxC,UAAU,SAAS,KAAK,CAAC,EACzB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,MAAM,MAAM,QAAQ,EAAE;AAAA,MACtD,iBAAiB,mBAAmB,KAAK;AAAA;AAAA,MAGzC,CAAC,eAAe,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,GAAI,eAAe;AAAA,UACjB,eAAe,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,QAAA;AAAA,MACxC;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,iBACR,cAAc,eAAe,EAC7B,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;"}
+{"version":3,"file":"logo.js","sources":["../../../source/composite/hero/logo.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type HeroLogoProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst getBackgroundColor = (props: HeroLogoProps) => {\n  const { isThemeDark, isThemeMaryland, isThemeLight } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return token.color.white;\n};\n\nconst createAsset = ({ image }: Pick<HeroLogoProps, 'image'>) => {\n  if (!image) return null;\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__asset')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    )\n    .withStyles({\n      element: {\n        textAlign: 'center',\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '800px',\n        margin: '0 auto',\n        marginBottom: token.spacing.xl,\n\n        ['& img']: {\n          maxWidth: '100%',\n          maxHeight: '500px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroLogoProps, 'headline' | 'isThemeDark' | 'isThemeMaryland'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroLogoProps, 'image' | 'video' | 'includesAnimation' | 'logo'>,\n) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textContent = new ElementBuilder()\n    .withClassName('umd-hero-logo__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          color: token.color.gray.dark,\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo__text')\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst makeLock = (props: HeroLogoProps) => {\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const builder = new ElementBuilder().styled(\n    Styles.layout.space.horizontal.small,\n  );\n\n  if (asset) {\n    builder.withChild(asset);\n  }\n\n  builder.withChild(text);\n\n  return builder.build();\n};\n\nexport const createCompositeHeroLogo = (props: HeroLogoProps) => {\n  const { isThemeDark } = props;\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-logo__container')\n    .withChild(makeLock(props))\n    .withStyles({\n      element: {\n        padding: `${token.spacing['5xl']} 0 ${token.spacing.lg}`,\n        backgroundColor: getBackgroundColor(props),\n\n        // Dark them should have additonal padding at the bottom\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing['5xl']}`,\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-logo')\n    .withChild(container)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/minimal.js

@@ -13,11 +13,10 @@ 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 "../../atomic/animations/actions/indicator.js";
+import "@universityofmaryland/web-utilities-library/performance";
 import "../../atomic/animations/brand/chevron-scroll.js";
 import "../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../atomic/assets/image/background.js";
-import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";

package/dist/composite/hero/minimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n}: Pick<HeroMinimalProps, 'image'>): ElementModel<HTMLElement>[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroMinimal = (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"minimal.js","sources":["../../../source/composite/hero/minimal.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroMinimalProps } from './_types';\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n}: Pick<HeroMinimalProps, 'image'>): ElementModel<HTMLElement>[] => {\n  if (!image) return [];\n  return [createImageAsset(image)];\n};\n\nconst getBorderColor = (isThemeDark?: boolean, isThemeMaryland?: boolean) => {\n  return isThemeDark || isThemeMaryland ? token.color.gold : token.color.red;\n};\n\nconst getBackgroundColor = (props: HeroMinimalProps) => {\n  const { isThemeDark, isThemeLight, isThemeMaryland } = props;\n\n  if (isThemeDark) return token.color.black;\n  if (isThemeMaryland) return token.color.red;\n  if (isThemeLight) return token.color.gray.lightest;\n  return 'transparent';\n};\n\nconst createAsset = ({ image }: Pick<HeroMinimalProps, 'image'>) => {\n  const children = buildAssetChildren({ image });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-minimal__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          right: 0,\n          top: 0,\n          width: '50%',\n          height: '100%',\n        },\n\n        ['& img']: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            objectFit: 'cover',\n            objectPosition: 'center',\n            height: '100%',\n            width: '100%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroMinimalProps,\n    'headline' | 'isThemeDark' | 'isThemeLight' | 'isThemeMaryland'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark, isThemeMaryland } = props;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 40;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('large', {\n        theme: theme.fontColor(finalIsThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '64px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst buildTextWrapperStyles = (\n  isThemeDark?: boolean,\n  isThemeMaryland?: boolean,\n) => {\n  return {\n    element: {\n      paddingLeft: token.spacing.md,\n      borderLeft: `2px solid ${getBorderColor(isThemeDark, isThemeMaryland)}`,\n\n      [`@container (${token.media.queries.desktop.min})`]: {\n        paddingLeft: token.spacing.lg,\n      },\n    },\n  };\n};\n\nconst buildTextContainerStyles = (hasAsset: boolean) => {\n  return {\n    element: {\n      padding: `${token.spacing.xl} 0`,\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        ...(hasAsset && {\n          padding: `${token.spacing['4xl']} 0`,\n          width: `calc(50% - ${token.spacing['4xl']})`,\n        }),\n      },\n    },\n  };\n};\n\nconst createText = (props: HeroMinimalProps, hasAsset: boolean) => {\n  const { isThemeDark, isThemeMaryland } = props;\n\n  const textLockupElement = textLockup.large({\n    eyebrow: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: isThemeDark || isThemeMaryland || false,\n  });\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text-wrapper')\n    .withChild(textLockupElement)\n    .withStyles(buildTextWrapperStyles(isThemeDark, isThemeMaryland))\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-minimal__text')\n    .withChild(textWrapper)\n    .withStyles(buildTextContainerStyles(hasAsset))\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroMinimal = (props: HeroMinimalProps) => {\n  const asset = createAsset(props);\n  const text = createText(props, !!asset);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-minimal')\n    .withChild(text)\n    .withStyles({\n      element: {\n        backgroundColor: getBackgroundColor(props),\n        position: 'relative',\n        display: 'flex',\n        containerType: 'inline-size',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '288px',\n          alignItems: 'center',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  return container.build();\n};\n"],"names":["assets.image.background","textLockup.large"],"mappings":"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"}