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

package/dist/composite/hero/custom/video-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA+KD,eAAO,MAAM,6BAA6B,GAAI,OAAO,mBAAmB;;;;;;;;CAyDvE,CAAC"}
+{"version":3,"file":"video-arrow.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAGhF,UAAU,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiLD,eAAO,MAAM,6BAA6B,GAAI,OAAO,mBAAmB;;;;;;;;CAyDvE,CAAC"}

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

@@ -117,6 +117,8 @@ const createVideo = (video) => {
   return createVideoObservedAutoPlay({
     video,
     isScaled: true,
+    videoPreload: "auto",
+    videoFetchPriority: "high",
     additionalElementStyles: {
       width: "100%",
       height: "100%",

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,gBAAgB;AAEtB,MAAM,mBAAmB;AAAA,EACvB,WAAW;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ;AAEA,MAAM,iBAAiB,CAAC,aAAkC;AACxD,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B,OAAO,WAAW,SAAS,UAAU,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,SAAS;AAAA,MACT,YAAY,WAAW,iBAAiB,UAAU,QAAQ,IAAI,iBAAiB,UAAU,MAAM;AAAA,MAC/F,iBAAiB,iBAAiB,UAAU;AAAA,MAC5C,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IAAA;AAAA,IAErB,cAAc;AAAA,MACZ,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,SAA8B;AAChD,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO,IAAI,eAAe,IAAI,EAC3B,OAAO,cAAc,KAAK,KAAK,aAAa,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,MACT,YAAY,WAAW,iBAAiB,UAAU,QAAQ,IAAI,iBAAiB,UAAU,MAAM;AAAA,MAC/F,iBAAiB,iBAAiB,UAAU;AAAA,MAE5C,CAAC,KAAK,GAAG;AAAA,QACP,OAAO,MAAM,MAAM;AAAA,MAAA;AAAA,MAGrB,CAAC,2BAA2B,GAAG;AAAA,QAC7B,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,qBAAqB,CACzB,UACgC;AAChC,QAAM,EAAE,UAAU,KAAA,IAAS;AAC3B,QAAM,WAAwC,CAAA;AAE9C,QAAM,kBAAkB,eAAe,QAAQ;AAC/C,MAAI,iBAAiB;AACnB,aAAS,KAAK,eAAe;AAAA,EAC/B;AAEA,QAAM,cAAc,WAAW,IAAI;AACnC,MAAI,aAAa;AACf,aAAS,KAAK,WAAW;AAAA,EAC3B;AAEA,SAAO;AACT;AAEA,MAAM,sBAAsB,CAC1B,UACG;AACH,QAAM,WAAW,mBAAmB,KAAK;AAEzC,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,gCAAgC,EAC9C,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EAClD,CACD,EACA,MAAA;AAEH,SAAO,IAAI,iBACR,cAAc,aAAa,EAC3B,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY,WAAW,iBAAiB,aAAa,QAAQ,IAAI,iBAAiB,aAAa,MAAM;AAAA,IAAA;AAAA,EACvG,CACD,EACA,MAAA;AACL;AAEA,MAAM,cAAc,CAAC,UAA4B;AAC/C,SAAOA,4BAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR,CACD;AACH;AAEA,MAAM,0BAA0B,CAAC,cAA2B;AAC1D,SAAO,MAAM;AACX,UAAM,UAAU,UAAU;AAAA,MACxB,IAAI,aAAa;AAAA,IAAA;AAEnB,UAAM,WAAW,UAAU;AAAA,MACzB,IAAI,WAAW,SAAS,MAAM,WAAW,SAAS;AAAA,IAAA;AAEpD,UAAM,OAAO,UAAU;AAAA,MACrB,IAAI,cAAc,KAAK,KAAK,cAAc,SAAS;AAAA,IAAA;AAGrD,QAAI,QAAS,SAAQ,MAAM,UAAU;AACrC,QAAI,SAAU,UAAS,MAAM,UAAU;AACvC,QAAI,KAAM,MAAK,MAAM,UAAU;AAAA,EACjC;AACF;AAEA,MAAM,sBAAsB,CAC1B,WACA,YACG;AACH,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU,QAAQ,eAAe,OAAO,aAAa;AACvD,gBAAU,QAAQ,MAAM,SAAS,GAAG,OAAO,cAAc,GAAG;AAAA,IAC9D;AAAA,EACF;AAEA,QAAM,YAAY,MAAM;AACtB,YAAQ,OAAO,KAAA;AACf,gBAAA;AAAA,EACF;AAEA,SAAO,iBAAiB,UAAU,SAAS,aAAa,EAAE,CAAC;AAE3D,SAAO,EAAE,MAAM,UAAA;AACjB;AAEO,MAAM,gCAAgC,CAAC,UAA+B;AAC3E,QAAM,EAAE,OAAO,kBAAA,IAAsB;AAErC,QAAM,eAAe,YAAY,KAAK;AACtC,QAAM,gBAAgB,oBAAoB,KAAK;AAE/C,QAAM,YAAY,IAAI,eAAe,SAAS,EAC3C,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,IAAA;AAAA,EACT,CACD,EACA,MAAA;AAEH,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,+BAA+B,EAC7C,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAAA;AAAA,EAClB,CACD;AAEH,MAAI,eAAe;AACjB,YAAQ,UAAU,aAAa;AAAA,EACjC;AAEA,QAAM,eAAe,QAAQ,MAAA;AAE7B,QAAM,UAAUC,2BAA6B;AAAA,IAC3C,gBAAgB,UAAU;AAAA,IAC1B,cAAc,aAAa;AAAA,IAC3B,mBAAmB,wBAAwB,UAAU,OAAO;AAAA,IAC5D;AAAA,EAAA,CACD;AAED,eAAa,QAAQ,YAAY,QAAQ,OAAO;AAChD,eAAa,UAAU,QAAQ;AAE/B,YAAU,QAAQ,YAAY,aAAa,OAAO;AAClD,YAAU,UAAU,aAAa;AAEjC,QAAM,SAAS,oBAAoB,WAAW,OAAO;AAErD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;"}
+{"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    videoPreload: 'auto',\n    videoFetchPriority: 'high',\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AA2H9C,eAAO,MAAM,uBAAuB,GAAI,OAAO,aAAa,kFA8B3D,CAAC"}
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/logo.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AA6H9C,eAAO,MAAM,uBAAuB,GAAI,OAAO,aAAa,kFA8B3D,CAAC"}

package/dist/composite/hero/logo.js

@@ -39,7 +39,9 @@ const createAsset = ({ image }) => {
   return new ElementBuilder().withClassName("umd-hero-logo__asset").withChild(
     createImageBackground({
       element: image,
-      isScaled: false
+      isScaled: false,
+      imageLoading: "eager",
+      imageFetchPriority: "high"
     })
   ).withStyles({
     element: {

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":"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"}
+{"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        imageLoading: 'eager',\n        imageFetchPriority: 'high',\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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAwKjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFA8BjE,CAAC"}
+{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/minimal.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA0KjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFA8BjE,CAAC"}

package/dist/composite/hero/minimal.js

@@ -32,7 +32,9 @@ const createImageAsset = (image) => {
     element: image,
     isScaled: true,
     isGifAllowed: true,
-    isShowCaption: true
+    isShowCaption: true,
+    imageLoading: "eager",
+    imageFetchPriority: "high"
   });
 };
 const buildAssetChildren = ({

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    imageLoading: 'eager',\n    imageFetchPriority: 'high',\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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"}

package/dist/composite/hero/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAmOjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFA8DjE,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/overlay.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAuOjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFA8DjE,CAAC"}

package/dist/composite/hero/overlay.js

@@ -69,7 +69,9 @@ const keyFrameHeroSlideUp = `
 const createVideoAsset = (video) => {
   return createVideoObservedAutoPlay({
     video,
-    isScaled: true
+    isScaled: true,
+    videoPreload: "auto",
+    videoFetchPriority: "high"
   });
 };
 const createImageAsset = (image) => {
@@ -77,7 +79,9 @@ const createImageAsset = (image) => {
     element: image,
     isScaled: true,
     isGifAllowed: true,
-    isShowCaption: true
+    isShowCaption: true,
+    imageLoading: "eager",
+    imageFetchPriority: "high"
   });
 };
 const buildAssetChildren = ({

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

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../source/composite/hero/overlay.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 { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\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  video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@media (${token.media.queries.large.max})`]: {\n          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroOverlayProps, '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  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        color: token.color.white,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroOverlay = (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-overlay__container')\n    .withChild(text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        backgroundColor: token.color.black,\n        overflow: 'clip',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  const containerBuilt = container.build();\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-overlay')\n    .withChild(containerBuilt)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","textLockup.large"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,mBAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA;AAAA,wBAEH,iBAAiB,OAAO,UAAU,IAAI;AAAA,sBACxC,iBAAiB,OAAO,UAAU,EAAE;AAAA;AAAA;AAI1D,MAAM,sBAAsB;AAAA;AAAA;AAAA,mBAGT,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,4BAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOC,sBAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAA8E;AAC5E,MAAI,SAAS,iBAAiB,kBAAkB;AAC9C,WAAO,CAAC,iBAAiB,KAAK,CAAC;AAAA,EACjC;AAEA,MAAI,OAAO;AACT,WAAO,CAAC,iBAAiB,KAAK,CAAC;AAAA,EACjC;AAEA,SAAO,CAACC,iBAAyB,iBAAiB;AACpD;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAuE;AACrE,QAAM,WAAW,mBAAmB,EAAE,OAAO,OAAO;AAEpD,MAAI,SAAS,WAAW,GAAG;AACzB,WAAO;AAAA,EACT;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,yBAAyB,EACvC,aAAa,GAAG,QAAQ,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QAC7C,CAAC,UAAU,cAAc,MAAM,IAAI,OAAO,SAAS,GAAG,GAAG;AAAA,UACvD,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ,eAAe,MAAM,QAAQ,KAAK,CAAC;AAAA,QAC3C,OAAO;AAAA,QACP,KAAK;AAAA,QACL,UAAU;AAAA,QAEV,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,gCAAgC,iBAAiB,OAAO,QAAQ;AAAA,UAAA;AAAA,QAC7E;AAAA,MACF;AAAA,MAGF,CAAC,gBAAgB,GAAG;AAAA,QAClB,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,aAAa;AACrB,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB;AAE7C,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B,OAAO,OAAO,WAAW,SAAS,MAAM,UAAU,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,UAAU;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,MAEnB,CAAC,eAAe,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,GAAI,uBAAuB;AAAA,UACzB,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,IAEF,cAAc;AAAA,MACZ,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD,EACA,MAAA;AACL;AAEA,MAAM,oBAAoB,CACxB,UACG;AACH,QAAM,oBAAoBC,sBAAiB;AAAA,IACzC,QAAQ,MAAM;AAAA,IACd,mBAAmB,eAAe,KAAK;AAAA,IACvC,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,aAAa;AAAA,EAAA,CACd;AAED,SAAO,IAAI,iBACR,cAAc,gCAAgC,EAC9C,UAAU,iBAAiB,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,MAAM,cAAc,KAAK,KAAK,gBAAgB,SAAS,EAAE,GAAG;AAAA,QAC3D,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAClD,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CACjB,UAIG;AACH,QAAM,EAAE,sBAAsB;AAC9B,QAAM,cAAc,kBAAkB,KAAK;AAE3C,QAAM,OAAO,IAAI,eAAA,EACd,OAAO,OAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,WAAW,EACrB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,SAAO,IAAI,iBACR,cAAc,wBAAwB,EACtC,UAAU,IAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC5B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC;AAAA,QAEhC,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,0BAA0B,iBAAiB,SAAS,QAAQ;AAAA,UAAA;AAAA,QACzE;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,6BAA6B,CAAC,UAA4B;AACrE,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,QAAQ,YAAY,KAAK;AAE/B,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,6BAA6B,EAC3C,UAAU,IAAI,EACd,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,MAAM;AAAA,MAC7B,UAAU;AAAA,MAEV,CAAC,eAAe,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACjD,SAAS;AAAA,QACT,eAAe;AAAA,MAAA;AAAA,MAGjB,CAAC,eAAe,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAClD,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QAEZ,CAAC,UAAU,GAAG;AAAA,UACZ,SAAS;AAAA,UACT,UAAU;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,YACE;AAAA,UACF,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,eAAe,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QACnD,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,cAAU,UAAU,KAAK;AAAA,EAC3B;AAEA,QAAM,iBAAiB,UAAU,MAAA;AAEjC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,kBAAkB,EAChC,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AAEH,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;"}
+{"version":3,"file":"overlay.js","sources":["../../../source/composite/hero/overlay.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 { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    videoPreload: 'auto',\n    videoFetchPriority: 'high',\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    imageLoading: 'eager',\n    imageFetchPriority: 'high',\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__asset')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        [`@media (${token.media.queries.large.max})`]: {\n          [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n            minHeight: '56vw',\n            display: 'grid',\n          },\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<HeroOverlayProps, '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  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        color: token.color.white,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text-content')\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-overlay__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroOverlay = (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const container = new ElementBuilder()\n    .withClassName('umd-hero-overlay__container')\n    .withChild(text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        backgroundColor: token.color.black,\n        overflow: 'clip',\n\n        [`@container (${token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    });\n\n  if (asset) {\n    container.withChild(asset);\n  }\n\n  const containerBuilt = container.build();\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-overlay')\n    .withChild(containerBuilt)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAuTjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFAiCjE,CAAC"}
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AA2TjD,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,kFAiCjE,CAAC"}

package/dist/composite/hero/stacked.js

@@ -45,7 +45,9 @@ const keyFrameFontColor = `
 const createVideoAsset = (video) => {
   return createVideoObservedAutoPlay({
     video,
-    isScaled: true
+    isScaled: true,
+    videoPreload: "auto",
+    videoFetchPriority: "high"
   });
 };
 const createImageAsset = (image) => {
@@ -54,6 +56,8 @@ const createImageAsset = (image) => {
     isScaled: true,
     isGifAllowed: true,
     isShowCaption: true,
+    imageLoading: "eager",
+    imageFetchPriority: "high",
     customStyles: {
       [`@media (${token.media.queries.large.max})`]: {
         [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.js","sources":["../../../source/composite/hero/stacked.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 { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${token.color.black}; }\n    to { color: ${token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    customStyles: {\n      [`@media (${token.media.queries.large.max})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${token.media.queries.tablet.min})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${elementStyles.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return new ElementBuilder()\n    .withClassName('umd-hero-stacked__overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    })\n    .build();\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementModel<HTMLElement> | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = new ElementBuilder()\n    .withClassName('umd-hero-stacked__asset--interior')\n    .withChildren(mediaElement, createOverlay(includesAnimation))\n    .withStyles({\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    })\n    .build();\n\n  const horizontalLock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(assetInteriorElement)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const builder = new ElementBuilder().withClassName('umd-hero-stacked__asset');\n\n  if (isWidthLarge) {\n    builder.withChild(horizontalLock);\n  } else {\n    builder.withChildren(mediaElement, createOverlay(includesAnimation));\n  }\n\n  return builder\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = 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  const animationStyles = {\n    [`@container (${token.media.queries.tablet.min})`]: {\n      ...withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: token.color.black,\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${token.spacing.md}`,\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.large)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.small)\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-stacked__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['6xl']} 0 ${token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            ...withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${token.media.queries.tablet.min})`]: {\n                ...withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${elementStyles.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroStacked = (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementModel<HTMLElement>[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-stacked')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","elementStyles","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"stacked.js","sources":["../../../source/composite/hero/stacked.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 { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { type ElementModel } from '../../_types';\nimport { type HeroStackedProps } from './_types';\n\nconst REF_KEY_FRAME_FADE_OVER = 'hero-stacked-fade-over';\nconst REF_KEY_FRAME_FONT_COLOR = 'hero-stacked-font-color';\n\nconst keyFrameFadeOver = `\n  @keyframes ${REF_KEY_FRAME_FADE_OVER} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameFontColor = `\n  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {\n    from { color: ${token.color.black}; }\n    to { color: ${token.color.white}; }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    videoPreload: 'auto',\n    videoFetchPriority: 'high',\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    imageLoading: 'eager',\n    imageFetchPriority: 'high',\n    customStyles: {\n      [`@media (${token.media.queries.large.max})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '56vw',\n        },\n      },\n\n      [`@media (${token.media.queries.tablet.min})`]: {\n        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {\n          minHeight: '550px',\n        },\n      },\n\n      [`& .${elementStyles.asset.gif.toggle.className} button`]: {\n        zIndex: 99999,\n      },\n    },\n  });\n};\n\nconst createOverlay = (includesAnimation?: boolean) => {\n  return new ElementBuilder()\n    .withClassName('umd-hero-stacked__overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        height: '100vh',\n        width: '100vw',\n        display: 'block',\n        backgroundColor: 'rgba(0,0,0,.7)',\n        zIndex: 99,\n        opacity: 0,\n\n        ...(includesAnimation && {\n          [`@media (${token.media.queries.tablet.min})`]: {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              [`@supports (animation-timeline: scroll())`]: {\n                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,\n                animationTimeline: 'view()',\n                animationRangeStart: '30vh',\n                animationRangeEnd: '70vh',\n              },\n            },\n          },\n        }),\n      },\n    })\n    .build();\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n  isWidthLarge = false,\n  isHeightSmall = false,\n}: Pick<\n  HeroStackedProps,\n  'image' | 'video' | 'includesAnimation' | 'isWidthLarge' | 'isHeightSmall'\n>) => {\n  let mediaElement: ElementModel<HTMLElement> | null = null;\n\n  if (video && video instanceof HTMLVideoElement) {\n    mediaElement = createVideoAsset(video);\n  } else if (image) {\n    mediaElement = createImageAsset(image);\n  }\n\n  if (!mediaElement) {\n    return null;\n  }\n\n  const assetInteriorElement = new ElementBuilder()\n    .withClassName('umd-hero-stacked__asset--interior')\n    .withChildren(mediaElement, createOverlay(includesAnimation))\n    .withStyles({\n      element: {\n        overflow: 'clip',\n        position: 'relative',\n        height: '100%',\n      },\n    })\n    .build();\n\n  const horizontalLock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(assetInteriorElement)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const builder = new ElementBuilder().withClassName('umd-hero-stacked__asset');\n\n  if (isWidthLarge) {\n    builder.withChild(horizontalLock);\n  } else {\n    builder.withChildren(mediaElement, createOverlay(includesAnimation));\n  }\n\n  return builder\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'clip',\n        display: 'grid',\n\n        ['& img, & video']: {\n          objectFit: 'cover',\n          aspectRatio: '5 / 4',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            maxHeight: '700px',\n            minHeight: '300px',\n\n            ...(!isHeightSmall && {\n              minHeight: '400px',\n              height: '65vh !important',\n            }),\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStackedProps,\n    'headline' | 'isHeightSmall' | 'includesAnimation' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, includesAnimation, isThemeDark } = 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  const animationStyles = {\n    [`@container (${token.media.queries.tablet.min})`]: {\n      ...withViewTimelineAnimation({\n        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n        animationTimeline: 'view()',\n        animationRangeStart: '100vh',\n        animationRangeEnd: '130vh',\n\n        ...(isHeightSmall && {\n          animationRangeStart: '120vh',\n          animationRangeEnd: '150vh',\n        }),\n      }),\n    },\n  };\n\n  const elementStyles = {\n    element: {\n      color: token.color.black,\n      margin: '0 auto',\n      textTransform: 'uppercase',\n      marginTop: `${token.spacing.sm}`,\n\n      ...(isThemeDark && {\n        color: token.color.white,\n      }),\n\n      ...(includesAnimation && {\n        ...(!isThemeDark && {\n          ...animationStyles,\n        }),\n      }),\n\n      ...desktopStyles,\n    },\n    siblingAfter: {\n      marginTop: `${token.spacing.md}`,\n    },\n  };\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.large)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createText = (\n  props: Omit<HeroStackedProps, 'image' | 'video' | 'isWidthLarge'>,\n) => {\n  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;\n  const additionalSpread = topPosition ? parseInt(topPosition) : null;\n  const textLockupElement = textLockup.large({\n    ...props,\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    textLargest: props.text,\n  });\n\n  const lock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.small)\n    .withChild(textLockupElement)\n    .withStyles({\n      element: {\n        position: 'relative',\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-stacked__text')\n    .withChild(lock)\n    .withStyles({\n      element: {\n        padding: `${token.spacing.lg} 0`,\n        display: 'flex',\n        justifyContent: 'center',\n        textAlign: 'center',\n        position: 'relative',\n        zIndex: '999',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['6xl']} 0 ${token.spacing['3xl']}`,\n        },\n\n        ...(includesAnimation && {\n          [`@container (${token.media.queries.tablet.min})`]: {\n            ...withViewTimelineAnimation({\n              position: 'sticky',\n              top: additionalSpread || 0,\n            }),\n          },\n        }),\n\n        [`& *`]: {\n          ...(includesAnimation && {\n            ...(!isThemeDark && {\n              [`@container (${token.media.queries.tablet.min})`]: {\n                ...withViewTimelineAnimation({\n                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,\n                  animationTimeline: 'view()',\n                  animationRangeStart: '90vh',\n                  animationRangeEnd: '110vh',\n\n                  ...(isHeightSmall && {\n                    animationRangeStart: '90vh',\n                    animationRangeEnd: '110vh',\n                  }),\n                }),\n              },\n            }),\n          }),\n        },\n\n        [`& .${elementStyles.text.decoration.ribbon.className[0]}`]: {\n          animation: 'none !important',\n        },\n\n        [`& .${elementStyles.text.rich.simpleLargest.className}`]: {\n          maxWidth: '860px',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroStacked = (props: HeroStackedProps) => {\n  const asset = createAsset(props);\n  const hasAsset = asset !== null;\n  const shouldAnimateText = hasAsset && props.includesAnimation;\n\n  const text = createText({\n    ...props,\n    includesAnimation: shouldAnimateText,\n  });\n\n  const children: ElementModel<HTMLElement>[] = [text];\n  if (hasAsset) {\n    children.push(asset);\n  }\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-stacked')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameFadeOver;\n  composite.styles += keyFrameFontColor;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","elementStyles","textLockup.large"],"mappings":"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"}

package/dist/composite/hero/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAyQlD,eAAO,MAAM,2BAA2B,GAAI,OAAO,iBAAiB,kFAqDnE,CAAC"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/standard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA6QlD,eAAO,MAAM,2BAA2B,GAAI,OAAO,iBAAiB,kFAqDnE,CAAC"}

package/dist/composite/hero/standard.js

@@ -73,7 +73,9 @@ const keyFrameHeroScaleDown = `
 const createVideoAsset = (video) => {
   return createVideoObservedAutoPlay({
     video,
-    isScaled: true
+    isScaled: true,
+    videoPreload: "auto",
+    videoFetchPriority: "high"
   });
 };
 const createImageAsset = (image) => {
@@ -81,7 +83,9 @@ const createImageAsset = (image) => {
     element: image,
     isScaled: true,
     isGifAllowed: true,
-    isShowCaption: true
+    isShowCaption: true,
+    imageLoading: "eager",
+    imageFetchPriority: "high"
   });
 };
 const buildAssetChildren = ({

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

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.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 HeroStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\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  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-default__asset')\n    .withChildren(...children)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStandardProps,\n    'headline' | 'isHeightSmall' | 'isThemeDark' | 'isTextCenter'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          maxWidth: '700px',\n          color: token.color.white,\n\n          ...(isTextCenter && { marginLeft: 'auto', marginRight: 'auto' }),\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          maxWidth: '816px',\n          ...(isOverwriteHeadline && { fontSize: '80px' }),\n        },\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-default__text')\n    .withChild(text)\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${token.spacing['2xl']}`,\n          paddingBottom: `${token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    })\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        zIndex: 99,\n\n        [`@container (${token.media.queries.tablet.max})`]: {\n          paddingTop: `${token.spacing.sm}`,\n\n          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroStandard = (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-default')\n    .withChildren(asset, text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        [`@container (${token.media.queries.large.max})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing.md}`,\n          }),\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${token.media.queries.large.max})`]: {\n          [`*:not(.${elementStyles.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","elementStyles","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/hero/standard.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 HeroStandardProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    videoPreload: 'auto',\n    videoFetchPriority: 'high',\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n    imageLoading: 'eager',\n    imageFetchPriority: 'high',\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementModel<HTMLElement>[] => {\n  const children: ElementModel<HTMLElement>[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return new ElementBuilder()\n    .withClassName('umd-hero-default__asset')\n    .withChildren(...children)\n    .withStyles(elementStyles)\n    .build();\n};\n\nconst createHeadline = (\n  props: Pick<\n    HeroStandardProps,\n    'headline' | 'isHeightSmall' | 'isThemeDark' | 'isTextCenter'\n  >,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.campaign.compose('extralarge', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          maxWidth: '700px',\n          color: token.color.white,\n\n          ...(isTextCenter && { marginLeft: 'auto', marginRight: 'auto' }),\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          maxWidth: '816px',\n          ...(isOverwriteHeadline && { fontSize: '80px' }),\n        },\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = new ElementBuilder()\n    .withClassName('umd-hero-default__text')\n    .withChild(text)\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${token.spacing['2xl']}`,\n          paddingBottom: `${token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    })\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        zIndex: 99,\n\n        [`@container (${token.media.queries.tablet.max})`]: {\n          paddingTop: `${token.spacing.sm}`,\n\n          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeHeroStandard = (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = new ElementBuilder()\n    .withClassName('umd-hero-default')\n    .withChildren(asset, text)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        [`@container (${token.media.queries.large.max})`]: {\n          ...(isThemeDark && {\n            paddingBottom: `${token.spacing.md}`,\n          }),\n        },\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${token.media.queries.large.max})`]: {\n          [`*:not(.${elementStyles.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    })\n    .build();\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","elementStyles","textLockup.large"],"mappings":"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"}

package/dist/composite/media/elements/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"AAiFA,eAAO,MAAM,uBAAuB,cA9EC;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;CA8ET,CAAC"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/elements/gif.ts"],"names":[],"mappings":"AAkFA,eAAO,MAAM,uBAAuB,cA/EC;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE;;;;;;CA+ET,CAAC"}

package/dist/composite/media/elements/gif.js

@@ -66,6 +66,7 @@ const CreateGifElement = ({ image }) => {
     isShowCaption: true,
     isScaled: false,
     isGifAllowed: true,
+    imageLoading: "lazy",
     customStyles: {
       width: "auto",
       height: "100%",

package/dist/composite/media/elements/gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { assets } from 'atomic';\n\nconst CreateGifElement = ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const imageElement = assets.image.background({\n    element: image,\n    isShowCaption: true,\n    isScaled: false,\n    isGifAllowed: true,\n    customStyles: {\n      width: 'auto',\n      height: '100%',\n      display: 'block',\n    },\n  });\n\n  const elementModel = new ElementBuilder(container)\n    .withClassName('media-gif')\n    .withChild(imageElement)\n    .withStyles({\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n\nexport const createCompositeMediaGif = CreateGifElement;\n"],"names":["containerWidth","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,mBAAmB,CAAC,EAAE,YAAyC;AACnE,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,sBAAwB;AAAA,IAC3C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AAED,QAAM,eAAe,IAAI,eAAe,SAAS,EAC9C,cAAc,WAAW,EACzB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;AAEO,MAAM,0BAA0B;"}
+{"version":3,"file":"gif.js","sources":["../../../../source/composite/media/elements/gif.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { assets } from 'atomic';\n\nconst CreateGifElement = ({ image }: { image: HTMLImageElement }) => {\n  const container = document.createElement('div');\n\n  const calculateHeight = () => {\n    if (!image.naturalWidth || !image.naturalHeight) return;\n\n    const aspectRatio = image.naturalHeight / image.naturalWidth;\n    const containerWidth = container.offsetWidth;\n\n    if (containerWidth > 0) {\n      const calculatedHeight = Math.round(containerWidth * aspectRatio);\n      container.style.height = `${calculatedHeight}px`;\n    } else {\n      container.style.width = `${image.naturalWidth}px`;\n\n      setTimeout(() => {\n        const containerWidth = container.offsetWidth;\n        const calculatedHeight = Math.round(containerWidth * aspectRatio);\n        container.style.height = `${calculatedHeight}px`;\n      }, 100);\n    }\n  };\n\n  const resizeObserver = new ResizeObserver(() => {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  });\n\n  if (image.complete && image.naturalWidth) {\n    container.style.width = `${image.naturalWidth}px`;\n    setTimeout(() => {\n      calculateHeight();\n    }, 10);\n  } else {\n    image.addEventListener('load', calculateHeight);\n  }\n\n  setTimeout(() => {\n    resizeObserver.observe(container);\n  }, 0);\n\n  const imageElement = assets.image.background({\n    element: image,\n    isShowCaption: true,\n    isScaled: false,\n    isGifAllowed: true,\n    imageLoading: 'lazy',\n    customStyles: {\n      width: 'auto',\n      height: '100%',\n      display: 'block',\n    },\n  });\n\n  const elementModel = new ElementBuilder(container)\n    .withClassName('media-gif')\n    .withChild(imageElement)\n    .withStyles({\n      element: {\n        maxHeight: '100%',\n        maxWidth: '100%',\n        position: 'relative',\n        display: 'block',\n        overflow: 'hidden',\n      },\n    })\n    .build();\n\n  return {\n    ...elementModel,\n    destroy: () => {\n      resizeObserver.disconnect();\n      image.removeEventListener('load', calculateHeight);\n    },\n  };\n};\n\nexport const createCompositeMediaGif = CreateGifElement;\n"],"names":["containerWidth","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAM,mBAAmB,CAAC,EAAE,YAAyC;AACnE,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,cAAe;AAEjD,UAAM,cAAc,MAAM,gBAAgB,MAAM;AAChD,UAAM,iBAAiB,UAAU;AAEjC,QAAI,iBAAiB,GAAG;AACtB,YAAM,mBAAmB,KAAK,MAAM,iBAAiB,WAAW;AAChE,gBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,IAC9C,OAAO;AACL,gBAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAE7C,iBAAW,MAAM;AACf,cAAMA,kBAAiB,UAAU;AACjC,cAAM,mBAAmB,KAAK,MAAMA,kBAAiB,WAAW;AAChE,kBAAU,MAAM,SAAS,GAAG,gBAAgB;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF;AAEA,QAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,CAAC;AAED,MAAI,MAAM,YAAY,MAAM,cAAc;AACxC,cAAU,MAAM,QAAQ,GAAG,MAAM,YAAY;AAC7C,eAAW,MAAM;AACf,sBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EACP,OAAO;AACL,UAAM,iBAAiB,QAAQ,eAAe;AAAA,EAChD;AAEA,aAAW,MAAM;AACf,mBAAe,QAAQ,SAAS;AAAA,EAClC,GAAG,CAAC;AAEJ,QAAM,eAAeC,sBAAwB;AAAA,IAC3C,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AAED,QAAM,eAAe,IAAI,eAAe,SAAS,EAC9C,cAAc,WAAW,EACzB,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,SAAS,MAAM;AACb,qBAAe,WAAA;AACf,YAAM,oBAAoB,QAAQ,eAAe;AAAA,IACnD;AAAA,EAAA;AAEJ;AAEO,MAAM,0BAA0B;"}

package/dist/composite/pathway/_common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_common.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/_common.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE/E,eAAO,MAAM,uBAAuB,GAAI,6CAIrC,IAAI,CACL,sBAAsB,EACtB,UAAU,GAAG,aAAa,GAAG,iBAAiB,CAC/C,yFAoCA,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,YAEjC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,yFAqCvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,IAAI,CACT,sBAAsB,EACpB,OAAO,GACP,SAAS,GACT,cAAc,GACd,SAAS,GACT,UAAU,GACV,OAAO,GACP,MAAM,GACN,aAAa,GACb,iBAAiB,CACpB,kFAOC,CAAC;AAEL,eAAO,MAAM,kBAAkB,GAC7B,OAAO,IAAI,CACT,iBAAiB,EACjB,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CACjD,kFAkDF,CAAC"}
+{"version":3,"file":"_common.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/_common.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE/E,eAAO,MAAM,uBAAuB,GAAI,6CAIrC,IAAI,CACL,sBAAsB,EACtB,UAAU,GAAG,aAAa,GAAG,iBAAiB,CAC/C,yFAoCA,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,YAEjC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,yFAqCvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,OAAO,IAAI,CACT,sBAAsB,EACpB,OAAO,GACP,SAAS,GACT,cAAc,GACd,SAAS,GACT,UAAU,GACV,OAAO,GACP,MAAM,GACN,aAAa,GACb,iBAAiB,CACpB,kFAOC,CAAC;AAEL,eAAO,MAAM,kBAAkB,GAC7B,OAAO,IAAI,CACT,iBAAiB,EACjB,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,CACjD,kFAmDF,CAAC"}

package/dist/composite/pathway/_common.js

@@ -120,6 +120,7 @@ const createAssetContent = (props) => {
         isScaled: isImageScaled,
         isShowCaption: true,
         isGifAllowed: true,
+        imageLoading: "lazy",
         dateSign
       })
     );

package/dist/composite/pathway/_common.js.map

@@ -1 +1 @@
-{"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.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 animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n}: Pick<\n  PathwayTextLockupProps,\n  'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  const headlineStyles = {\n    ...typography.sans.compose('largest', {\n      theme: theme.fontColor(finalIsThemeDark),\n    }),\n    ...animationStyles.line.composeSlideUnder({\n      color: theme.foreground(finalIsThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(headlineStyles)\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '40px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .withModifier((el) => wrapTextNodeInSpan(el))\n    .build();\n};\n\nexport const createCompositeStat = ({\n  stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n  const mediumSize = 800;\n\n  if (!stats) return null;\n\n  const statWrapper = new ElementBuilder()\n    .withClassName('text-lockup-medium-stats')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.lg,\n\n        [`&:has(> *:nth-child(2))`]: {\n          display: `grid`,\n          gridGap: `${token.spacing.md}`,\n        },\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          marginTop: token.spacing.lg,\n          paddingTop: token.spacing.md,\n          borderTop: `1px solid ${token.color.gray.light}`,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          marginTop: token.spacing['2xl'],\n\n          [`&:has(> *:nth-child(2))`]: {\n            gridGap: `${token.spacing.lg}`,\n            gridTemplateColumns: `repeat(2, 1fr)`,\n          },\n        },\n      },\n    })\n    .build();\n\n  statWrapper.element.innerHTML = stats.innerHTML;\n\n  return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n  props: Pick<\n    PathwayTextLockupProps,\n    | 'stats'\n    | 'actions'\n    | 'eventDetails'\n    | 'eyebrow'\n    | 'headline'\n    | 'stats'\n    | 'text'\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n  >,\n) =>\n  Atomic.textLockup.medium({\n    ...props,\n    ribbon: props.eyebrow,\n    compositeHeadline: createCompositeHeadline(props),\n    compositeStats: createCompositeStat(props),\n  });\n\nexport const createAssetContent = (\n  props: Pick<\n    PathwayAssetProps,\n    'dateSign' | 'image' | 'video' | 'isImageScaled'\n  >,\n) => {\n  const { dateSign, image, video, isImageScaled = true } = props;\n  const children = [];\n\n  if (video) {\n    children.push(\n      Atomic.assets.video.observedAutoPlay({\n        video,\n        isScaled: isImageScaled,\n        additionalElementStyles: {\n          [`& video`]: {\n            objectFit: 'cover',\n            width: '100%',\n            height: '100%',\n          },\n        },\n      }),\n    );\n  }\n\n  if (!video && image) {\n    children.push(\n      Atomic.assets.image.background({\n        element: image,\n        isScaled: isImageScaled,\n        isShowCaption: true,\n        isGifAllowed: true,\n        dateSign,\n      }),\n    );\n  }\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container-wrapper')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'grid',\n\n        [`&:has(.image-container)`]: {\n          alignItems: 'center',\n        },\n      },\n    })\n    .build();\n};\n"],"names":["animationStyles","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}
+{"version":3,"file":"_common.js","sources":["../../../source/composite/pathway/_common.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 animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport * as Atomic from 'atomic';\nimport { type PathwayTextLockupProps, type PathwayAssetProps } from './_types';\n\nexport const createCompositeHeadline = ({\n  headline,\n  isThemeDark,\n  isThemeMaryland,\n}: Pick<\n  PathwayTextLockupProps,\n  'headline' | 'isThemeDark' | 'isThemeMaryland'\n>) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n  const finalIsThemeDark = isThemeDark || isThemeMaryland;\n\n  if (!headline) return null;\n\n  const headlineStyles = {\n    ...typography.sans.compose('largest', {\n      theme: theme.fontColor(finalIsThemeDark),\n    }),\n    ...animationStyles.line.composeSlideUnder({\n      color: theme.foreground(finalIsThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(headlineStyles)\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '40px',\n          }),\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .withModifier((el) => wrapTextNodeInSpan(el))\n    .build();\n};\n\nexport const createCompositeStat = ({\n  stats,\n}: Pick<PathwayTextLockupProps, 'stats'>) => {\n  const mediumSize = 800;\n\n  if (!stats) return null;\n\n  const statWrapper = new ElementBuilder()\n    .withClassName('text-lockup-medium-stats')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.lg,\n\n        [`&:has(> *:nth-child(2))`]: {\n          display: `grid`,\n          gridGap: `${token.spacing.md}`,\n        },\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          marginTop: token.spacing.lg,\n          paddingTop: token.spacing.md,\n          borderTop: `1px solid ${token.color.gray.light}`,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          marginTop: token.spacing['2xl'],\n\n          [`&:has(> *:nth-child(2))`]: {\n            gridGap: `${token.spacing.lg}`,\n            gridTemplateColumns: `repeat(2, 1fr)`,\n          },\n        },\n      },\n    })\n    .build();\n\n  statWrapper.element.innerHTML = stats.innerHTML;\n\n  return statWrapper;\n};\n\nexport const createTextLockupMedium = (\n  props: Pick<\n    PathwayTextLockupProps,\n    | 'stats'\n    | 'actions'\n    | 'eventDetails'\n    | 'eyebrow'\n    | 'headline'\n    | 'stats'\n    | 'text'\n    | 'isThemeDark'\n    | 'isThemeMaryland'\n  >,\n) =>\n  Atomic.textLockup.medium({\n    ...props,\n    ribbon: props.eyebrow,\n    compositeHeadline: createCompositeHeadline(props),\n    compositeStats: createCompositeStat(props),\n  });\n\nexport const createAssetContent = (\n  props: Pick<\n    PathwayAssetProps,\n    'dateSign' | 'image' | 'video' | 'isImageScaled'\n  >,\n) => {\n  const { dateSign, image, video, isImageScaled = true } = props;\n  const children = [];\n\n  if (video) {\n    children.push(\n      Atomic.assets.video.observedAutoPlay({\n        video,\n        isScaled: isImageScaled,\n        additionalElementStyles: {\n          [`& video`]: {\n            objectFit: 'cover',\n            width: '100%',\n            height: '100%',\n          },\n        },\n      }),\n    );\n  }\n\n  if (!video && image) {\n    children.push(\n      Atomic.assets.image.background({\n        element: image,\n        isScaled: isImageScaled,\n        isShowCaption: true,\n        isGifAllowed: true,\n        imageLoading: 'lazy',\n        dateSign,\n      }),\n    );\n  }\n\n  return new ElementBuilder()\n    .withClassName('pathway-image-container-wrapper')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'grid',\n\n        [`&:has(.image-container)`]: {\n          alignItems: 'center',\n        },\n      },\n    })\n    .build();\n};\n"],"names":["animationStyles","Atomic.textLockup.medium","Atomic.assets.video.observedAutoPlay","Atomic.assets.image.background"],"mappings":"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"}

package/dist/composite/pathway/hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;AA6SD,eAAO,MAAM,0BAA0B,UAlBE,gBAAgB,kFAkBS,CAAC"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/hero.ts"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAChC;AAiTD,eAAO,MAAM,0BAA0B,UAlBE,gBAAgB,kFAkBS,CAAC"}