@universityofmaryland/web-elements-library 1.4.4 → 1.4.6

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

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

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

@@ -6,6 +6,7 @@ import "../../../node_modules/postcss-js/index.mjs";
 import { withViewTimelineAnimation } from "../../../utilities/theme/media.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
 import toggle from "../../../atomic/assets/video/toggle.mjs";
 import "../../../atomic/layout/block/stacked.mjs";

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

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

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

@@ -7,6 +7,7 @@ const media = require("../../../utilities/theme/media.js");
 const index = require("../../../model/elements/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
 const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
 require("../../../atomic/layout/block/stacked.js");

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

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

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

@@ -6,6 +6,7 @@ import { withViewTimelineAnimation } from "../../../utilities/theme/media.mjs";
 import { createDiv, create } from "../../../model/elements/index.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
 import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
 import "../../../atomic/layout/block/stacked.mjs";

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

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

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

@@ -8,6 +8,7 @@ const index = require("../../../model/elements/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 const chevronFlow = require("../../../atomic/animations/brand/chevron-flow.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const observedAutoPlay = require("../../../atomic/assets/video/observed-auto-play.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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 ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\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      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\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        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\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 = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\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  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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: ElementVisual,\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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\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\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["headline","ElementModel.headline.campaignExtraLarge","Styles","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.js","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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 ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\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      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\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        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\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 = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\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  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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: ElementVisual,\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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\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\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["headline","ElementModel.headline.campaignExtraLarge","Styles","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import { create } from "../../../model/elements/index.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import chevronFlow from "../../../atomic/animations/brand/chevron-flow.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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 ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\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      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\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        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\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 = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\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  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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: ElementVisual,\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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\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\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementModel.headline.campaignExtraLarge","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}
+{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { animations, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\n// Extend base type to add animation property and ensure video is required\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 ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\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      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return ElementModel.richText.simpleLargest({\n    element: text,\n    elementStyles: {\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        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    },\n  });\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementVisual[] => {\n  const { headline, text } = props;\n  const children: ElementVisual[] = [];\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 = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-text-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${Styles.token.spacing.xl} ${Styles.token.spacing.md}`,\n\n        ['& *']: {\n          color: Styles.token.color.white,\n        },\n      },\n    },\n  });\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: OVERLAY_CLASS,\n    children: [container],\n    elementStyles: {\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  });\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\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      `.${Styles.typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${Styles.element.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: ElementVisual,\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(\n    'resize',\n    Utils.performance.debounce(eventResize, 20),\n  );\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const composite = ElementModel.create({\n    element: document.createElement('section'),\n    className: 'umd-element-hero-brand-video',\n    elementStyles: {\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    },\n  });\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const wrapperChildren: ElementVisual[] = [videoElement];\n  if (textContainer) {\n    wrapperChildren.push(textContainer);\n  }\n\n  const wrapper = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-logo-brand-video-wrapper',\n    children: wrapperChildren,\n    elementStyles: {\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\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapper.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapper.element.appendChild(overlay.element);\n  wrapper.styles += overlay.styles;\n\n  composite.element.appendChild(wrapper.element);\n  composite.styles += wrapper.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["ElementModel.headline.campaignExtraLarge","ElementModel.richText.simpleLargest","ElementModel.create","assets.video.observedAutoPlay","Utils.performance.debounce","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/logo.js

@@ -6,6 +6,7 @@ require("../../node_modules/postcss-js/index.js");
 const index = require("../../model/elements/index.js");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
+require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");