@universityofmaryland/web-elements-library 1.4.4 → 1.4.6

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

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

package/dist/composite/hero/standard.mjs

@@ -5,6 +5,7 @@ import "../../node_modules/postcss-js/index.mjs";
 import { createDiv } 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 placeholder from "../../atomic/assets/image/placeholder.mjs";
 import observedAutoPlay from "../../atomic/assets/video/observed-auto-play.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,IAEN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,YAAY;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,MACT,MAAM;AAAA,MACN,IAAI;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,sBAAsB;AAAA;AAAA;AAAA,mBAGT,iBAAiB,SAAS,UAAU,IAAI;AAAA,iBAC1C,iBAAiB,SAAS,QAAQ,IAAI;AAAA;AAAA;AAAA,mBAGpC,iBAAiB,SAAS,UAAU,EAAE;AAAA,iBACxC,iBAAiB,SAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKrD,MAAM,wBAAwB;AAAA;AAAA;AAAA,mBAGX,iBAAiB,WAAW,UAAU,IAAI;AAAA;AAAA;AAAA,mBAG1C,iBAAiB,WAAW,UAAU,EAAE;AAAA;AAAA;AAAA;AAK3D,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOA,iBAA8B;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,EAAA,CACX;AACH;AAEA,MAAM,mBAAmB,CAAC,UAA4B;AACpD,SAAOC,eAAwB;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,EAAA,CAChB;AACH;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,WAA4B,CAAA;AAElC,MAAI,OAAO;AACT,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,SAAS,CAAC,OAAO;AACnB,aAAS,KAAK,iBAAiB,KAAK,CAAC;AAAA,EACvC;AAEA,MAAI,CAAC,SAAS,CAAC,OAAO;AACpB,aAAS,KAAKC,YAAyB,iBAAiB;AAAA,EAC1D;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,sBAAgC;AACxD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QACxD,aAAa;AAAA,MAAA;AAAA,MAGf,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACzD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YACE;AAAA,UACF,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,GAAI,qBAAqB;AAAA,UACvB,CAAC,gDAAgD,GAAG;AAAA,YAClD,WAAW,4BAA4B,iBAAiB,WAAW,QAAQ;AAAA,UAAA;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAwE;AACtE,QAAM,WAAW,mBAAmB,EAAE,OAAO,OAAO;AACpD,QAAM,gBAAgB,iBAAiB,iBAAiB;AAExD,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,eAAe,YAAA,IAAgB;AACjD,QAAM,iBAAiB,UAAU,aAAa,KAAA,EAAO,UAAU;AAC/D,QAAM,sBAAsB,iBAAiB,MAAM;AAEnD,MAAI,CAAC,SAAU,QAAO;AAEtB,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,OAAO,OAAO,MAAM,MAAM;AAAA,EAAA;AAG5B,QAAM,gBAAgB;AAAA,IACpB,UAAU;AAAA,IACV,GAAI,uBAAuB,EAAE,UAAU,OAAA;AAAA,EAAO;AAGhD,QAAM,kBAAkBC,mBAAyC;AAAA,IAC/D,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QACvD,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,MAAA;AAAA,MAE1D,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,cAAc;AAAA,QACZ,WAAW,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IAClC;AAAA,IAEF;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEA,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,OAAOC,MAAiB;AAAA,IAC5B,mBAAmB,eAAe,KAAK;AAAA,IACvC,QAAQ,MAAM;AAAA,IACd,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf,aAAa;AAAA,EAAA,CACd;AAED,QAAM,gBAAgBF,UAAuB;AAAA,IAC3C,WAAW;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,GAAI,gBAAgB;AAAA,UAClB,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,UAAU;AAAA,QAAA;AAAA,QAGZ,GAAI,qBAAqB;AAAA,UACvB,WAAW,0BAA0B,iBAAiB,SAAS,QAAQ;AAAA,QAAA;AAAA,QAGzE,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,UAAU;AAAA,UACV,YAAY,GAAG,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC1C,eAAe,GAAG,OAAO,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC7C,GAAI,CAAC,gBAAgB;AAAA,YACnB,OAAO;AAAA,UAAA;AAAA,UAET,GAAI,iBAAiB;AAAA,YACnB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAOG,sBAA0C;AAAA,IAC/C,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,UAAU,CAAC,aAAa;AAAA,IACxB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,YAAY,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAEtC,CAAC,UAAU,OAAO,QAAQ,KAAK,WAAW,OAAO,SAAS,GAAG,GAAG;AAAA,YAC9D,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,WAAe,CAAC,UAA6B;AAC3C,QAAM,EAAE,eAAe,YAAA,IAAgB;AACvC,QAAM,QAAQ,YAAY,KAAK;AAC/B,QAAM,OAAO,WAAW,KAAK;AAE7B,QAAM,YAAYH,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU,CAAC,OAAO,IAAI;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAe;AAAA,QAEf,GAAI,eAAe;AAAA,UACjB,iBAAiB,OAAO,MAAM,MAAM;AAAA,QAAA;AAAA,QAGtC,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UACzD,GAAI,CAAC,iBAAiB;AAAA,YACpB,QAAQ;AAAA,YACR,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,QAGF,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC1D,GAAI,CAAC,iBAAiB;AAAA,YACpB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,MAEF,YAAY;AAAA,QACV,CAAC,eAAe,OAAO,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UACxD,CAAC,UAAU,OAAO,QAAQ,MAAM,MAAM,QAAQ,SAAS,GAAG,GAAG;AAAA,YAC3D,GAAI,CAAC,eAAe;AAAA,cAClB,OAAO,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,YAAA;AAAA,UACpC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,SAAO;AACT;"}
+{"version":3,"file":"standard.mjs","sources":["../../../source/composite/hero/standard.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type HeroStandardProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  SLIDE_UP: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n  SCALE_DOWN: {\n    DURATION: '1s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n} as const;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst keyFrameHeroScaleDown = `\n  @keyframes hero-scale-down {\n    from {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SCALE_DOWN.TRANSFORM.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroStandardProps, 'image' | 'video'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (video) {\n    children.push(createVideoAsset(video));\n  }\n\n  if (image && !video) {\n    children.push(createImageAsset(image));\n  }\n\n  if (!image && !video) {\n    children.push(assets.image.placeholder.fearlessForward());\n  }\n\n  return children;\n};\n\nconst buildAssetStyles = (includesAnimation?: boolean) => {\n  return {\n    element: {\n      [`@container (${Styles.token.media.queries.large.max})`]: {\n        aspectRatio: '16 / 9',\n      },\n\n      [`@container (${Styles.token.media.queries.tablet.min})`]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n      },\n\n      [`&:before`]: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 85%)',\n          zIndex: '99',\n        },\n      },\n\n      ['& img']: {\n        ...(includesAnimation && {\n          [`@media (prefers-reduced-motion: no-preference)`]: {\n            animation: `hero-scale-down forwards ${ANIMATION_CONFIG.SCALE_DOWN.DURATION}`,\n          },\n        }),\n      },\n    },\n  };\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroStandardProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n  const elementStyles = buildAssetStyles(includesAnimation);\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-default__asset',\n    children,\n    elementStyles,\n  });\n};\n\nconst createHeadline = (\n  props: Pick<HeroStandardProps, 'headline' | 'isHeightSmall' | 'isThemeDark'>,\n) => {\n  const { headline, isHeightSmall, isThemeDark } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 10 && isHeightSmall;\n\n  if (!headline) return null;\n\n  const tabletStyles = {\n    maxWidth: '700px',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    color: Styles.token.color.white,\n  };\n\n  const desktopStyles = {\n    maxWidth: '816px',\n    ...(isOverwriteHeadline && { fontSize: '80px' }),\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        [`@media (${Styles.token.media.queries.tablet.min})`]: tabletStyles,\n        [`@media (${Styles.token.media.queries.desktop.min})`]: desktopStyles,\n      },\n      subElement: {\n        color: 'currentColor',\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.sm,\n      },\n    },\n    isThemeDark,\n  });\n\n  return headlineElement;\n};\n\nconst createText = (props: HeroStandardProps) => {\n  const {\n    isTextCenter = false,\n    isHeightSmall = false,\n    includesAnimation,\n    isThemeDark,\n  } = props;\n\n  const text = textLockup.large({\n    headlineComposite: createHeadline(props),\n    ribbon: props.eyebrow,\n    textLargest: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  const textContainer = ElementModel.createDiv({\n    className: 'umd-hero-default__text',\n    children: [text],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        alignItems: 'flex-end',\n        height: '100%',\n        ...(isTextCenter && {\n          textAlign: 'center',\n          justifyContent: 'center',\n          marginLeft: 'auto',\n          marginRight: 'auto',\n          maxWidth: '928px',\n        }),\n\n        ...(includesAnimation && {\n          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '736px',\n          paddingTop: `${Styles.token.spacing['2xl']}`,\n          paddingBottom: `${Styles.token.spacing['2xl']}`,\n          ...(!isTextCenter && {\n            width: '80%',\n          }),\n          ...(isHeightSmall && {\n            minHeight: '400px',\n            alignItems: 'flex-end',\n            display: 'flex',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          maxWidth: '808px',\n        },\n      },\n    },\n  });\n\n  return ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContainer],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n        zIndex: 99,\n\n        [`@container (${Styles.token.media.queries.tablet.max})`]: {\n          paddingTop: `${Styles.token.spacing.sm}`,\n\n          [`&:has(.${Styles.element.text.decoration.ribbon.className})`]: {\n            paddingTop: `0`,\n            marginTop: '-14px',\n          },\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroStandardProps) => {\n  const { isHeightSmall, isThemeDark } = props;\n  const asset = createAsset(props);\n  const text = createText(props);\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-default',\n    children: [asset, text],\n    elementStyles: {\n      element: {\n        position: 'relative',\n        overflow: 'hidden',\n        containerType: 'inline-size',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n        }),\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...(!isHeightSmall && {\n            height: '75vh',\n            minHeight: '480px',\n          }),\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(!isHeightSmall && {\n            minHeight: '720px',\n          }),\n        },\n      },\n      subElement: {\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          [`*:not(.${Styles.element.asset.image.caption.className})`]: {\n            ...(!isThemeDark && {\n              color: `${Styles.token.color.black} !important`,\n            }),\n          },\n        },\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroScaleDown;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

package/dist/composite/layout/image/expand.js

@@ -40,7 +40,7 @@ const TextAnimation = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_TEXT_ANIMATION} {
         position: absolute;
         top: 0;
@@ -52,7 +52,7 @@ const TextAnimation = `
 
   @media (${Styles.token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: view()) {
+      @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPAND_TEXT_ANIMATION} {
           transform: translateY(100vh);
         }
@@ -77,7 +77,7 @@ const ImageOverlayContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
         opacity: 1;
         animation: img-overlay forwards;
@@ -99,7 +99,7 @@ const ImageSizeContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_SIZE} {
         width: ${Styles.token.spacing.maxWidth.smallest};
         height: 70vh;
@@ -111,7 +111,7 @@ const ImageSizeContainer = `
     }
   }
 
-  @supports not (animation-timeline: view()) {
+  @supports not (animation-timeline: scroll()) {
     .${ELEMENT_EXPAND_IMAGE_SIZE} {
       height: 100%;
     }
@@ -130,7 +130,7 @@ const ImagePosition = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_POSITION} {
         display: flex;
         justify-content: center;
@@ -144,7 +144,7 @@ const ImagePosition = `
     }
   }
 
-  @supports not (animation-timeline: view()) {
+  @supports not (animation-timeline: scroll()) {
     .${ELEMENT_EXPAND_IMAGE_POSITION} {
       height: 100%;
     }
@@ -166,7 +166,7 @@ const ImageContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
         position: relative;
       }
@@ -187,7 +187,7 @@ const STYLES_LAYOUT_IMAGE_EXPAND = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPLAND_DECLARATION} {
         height: 180vh;
       }
@@ -196,7 +196,7 @@ const STYLES_LAYOUT_IMAGE_EXPAND = `
 
   @media (${Styles.token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: view()) {
+      @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPLAND_DECLARATION} {
           height: 200vh;
         }

package/dist/composite/layout/image/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: view()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\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\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: view()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: view()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: view()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nexport default (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","layout","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\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\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nexport default (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","layout","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}

package/dist/composite/layout/image/expand.mjs

@@ -39,7 +39,7 @@ const TextAnimation = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_TEXT_ANIMATION} {
         position: absolute;
         top: 0;
@@ -51,7 +51,7 @@ const TextAnimation = `
 
   @media (${token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: view()) {
+      @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPAND_TEXT_ANIMATION} {
           transform: translateY(100vh);
         }
@@ -76,7 +76,7 @@ const ImageOverlayContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
         opacity: 1;
         animation: img-overlay forwards;
@@ -98,7 +98,7 @@ const ImageSizeContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_SIZE} {
         width: ${token.spacing.maxWidth.smallest};
         height: 70vh;
@@ -110,7 +110,7 @@ const ImageSizeContainer = `
     }
   }
 
-  @supports not (animation-timeline: view()) {
+  @supports not (animation-timeline: scroll()) {
     .${ELEMENT_EXPAND_IMAGE_SIZE} {
       height: 100%;
     }
@@ -129,7 +129,7 @@ const ImagePosition = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_POSITION} {
         display: flex;
         justify-content: center;
@@ -143,7 +143,7 @@ const ImagePosition = `
     }
   }
 
-  @supports not (animation-timeline: view()) {
+  @supports not (animation-timeline: scroll()) {
     .${ELEMENT_EXPAND_IMAGE_POSITION} {
       height: 100%;
     }
@@ -165,7 +165,7 @@ const ImageContainer = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
         position: relative;
       }
@@ -186,7 +186,7 @@ const STYLES_LAYOUT_IMAGE_EXPAND = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_EXPLAND_DECLARATION} {
         height: 180vh;
       }
@@ -195,7 +195,7 @@ const STYLES_LAYOUT_IMAGE_EXPAND = `
 
   @media (${token.media.queries.tablet.min}) {
     @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: view()) {
+      @supports (animation-timeline: scroll()) {
         .${ELEMENT_EXPLAND_DECLARATION} {
           height: 200vh;
         }

package/dist/composite/layout/image/expand.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: view()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\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\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: view()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: view()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: view()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nexport default (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}
+{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\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\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nexport default (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}

package/dist/composite/layout/section-intro/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBAgOe,OAAO,iBAAiB;;;;;;;;AAAxC,wBAkBE"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;yBA2Oe,OAAO,iBAAiB;;;;;;;;AAAxC,wBAkBE"}

package/dist/composite/layout/section-intro/small.js

@@ -74,7 +74,7 @@ const createActions = (props) => {
   });
 };
 const createTextContainer = (props) => {
-  const { headline: headline2, text, actions, includesAnimation } = props;
+  const { headline: headline2, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline: headline2 });
   const textElement = createText({ text });
   const actionsElement = createActions({ actions });
@@ -89,6 +89,15 @@ const createTextContainer = (props) => {
         ...includesAnimation && {
           opacity: 0
         },
+        ["& > *, p"]: {
+          ...!headline2 && {
+            ...Styles.typography.sans.transformations.largerBold,
+            color: Styles.token.color.black,
+            ...isThemeDark && {
+              color: Styles.token.color.white
+            }
+          }
+        },
         [".intro-default-animated &"]: {
           transform: "translateY(100px)",
           animation: "intro-fade-in 1s forwards",

package/dist/composite/layout/section-intro/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","headline","ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["token","headline","ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","typography","observer"],"mappings":"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"}

package/dist/composite/layout/section-intro/small.mjs

@@ -1,4 +1,4 @@
-import { token } from "@universityofmaryland/web-styles-library";
+import { token, typography } from "@universityofmaryland/web-styles-library";
 import { createDiv } from "../../../model/elements/index.mjs";
 import { sansLargest } from "../../../model/elements/headline.mjs";
 import { simpleLarge } from "../../../model/elements/rich-text.mjs";
@@ -73,7 +73,7 @@ const createActions = (props) => {
   });
 };
 const createTextContainer = (props) => {
-  const { headline, text, actions, includesAnimation } = props;
+  const { headline, text, actions, includesAnimation, isThemeDark } = props;
   const headlineElement = createHeadline({ headline });
   const textElement = createText({ text });
   const actionsElement = createActions({ actions });
@@ -88,6 +88,15 @@ const createTextContainer = (props) => {
         ...includesAnimation && {
           opacity: 0
         },
+        ["& > *, p"]: {
+          ...!headline && {
+            ...typography.sans.transformations.largerBold,
+            color: token.color.black,
+            ...isThemeDark && {
+              color: token.color.white
+            }
+          }
+        },
         [".intro-default-animated &"]: {
           transform: "translateY(100px)",
           animation: "intro-fade-in 1s forwards",

package/dist/composite/layout/section-intro/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n\n        [`& *`]: {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nexport default (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n"],"names":["ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}