@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

package/dist/composite/hero/overlay.mjs

@@ -0,0 +1,263 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+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 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";
+import "../../atomic/layout/block/stacked.mjs";
+import "../../atomic/layout/overlay/modal.mjs";
+import "../../atomic/layout/person/columns.mjs";
+import "../../atomic/text-lockup/date.mjs";
+import large from "../../atomic/text-lockup/large.mjs";
+import "../../atomic/text-lockup/small.mjs";
+import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
+import { campaignExtraLarge } from "../../model/elements/headline.mjs";
+const ANIMATION_CONFIG = {
+  RESIZE: {
+    DURATION: "1.5s",
+    TRANSFORM: {
+      FROM: "scale(1.1)",
+      TO: "scale(1)"
+    }
+  },
+  SLIDE_UP: {
+    DURATION: "1.5s",
+    TRANSFORM: {
+      FROM: "translateY(25px)",
+      TO: "translateY(0)"
+    },
+    OPACITY: {
+      FROM: 0.2,
+      TO: 1
+    }
+  }
+};
+const keyFrameHeroResize = `
+  @keyframes hero-overlay-resize {
+    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }
+    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }
+  }
+`;
+const keyFrameHeroSlideUp = `
+  @keyframes hero-slide-up {
+    from {
+      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};
+      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};
+    }
+    to {
+      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};
+      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};
+    }
+  }
+`;
+const createVideoAsset = (video) => {
+  return observedAutoPlay({
+    video,
+    isScaled: true
+  });
+};
+const createImageAsset = (image) => {
+  return imageContainer({
+    element: image,
+    isScaled: true,
+    isGifAllowed: true,
+    isShowCaption: true
+  });
+};
+const buildAssetChildren = ({
+  image,
+  video
+}) => {
+  if (video && video instanceof HTMLVideoElement) {
+    return [createVideoAsset(video)];
+  }
+  if (image) {
+    return [createImageAsset(image)];
+  }
+  return [placeholder.fearlessForward()];
+};
+const createAsset = ({
+  image,
+  video,
+  includesAnimation
+}) => {
+  const children = buildAssetChildren({ image, video });
+  if (children.length === 0) {
+    return null;
+  }
+  return createDiv({
+    className: "umd-hero-overlay__asset",
+    children,
+    elementStyles: {
+      element: {
+        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          position: "absolute",
+          width: "60%",
+          height: `calc(100% - ${Styles.token.spacing["5xl"]})`,
+          right: 0,
+          top: 0,
+          overflow: "visible",
+          ...includesAnimation && {
+            [`@media (prefers-reduced-motion: no-preference)`]: {
+              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`
+            }
+          }
+        },
+        ["& img, & video"]: {
+          height: "100%",
+          minHeight: "300px"
+        }
+      }
+    }
+  });
+};
+const createHeadline = (props) => {
+  const { headline } = props;
+  const characterCount = headline?.textContent?.trim().length || 0;
+  const isOverwriteHeadline = characterCount > 30;
+  if (!headline) return null;
+  const desktopStyles = {
+    [`@container (${Styles.token.media.queries.desktop.min})`]: {
+      ...isOverwriteHeadline && {
+        fontSize: "80px"
+      }
+    }
+  };
+  const headlineElement = campaignExtraLarge({
+    element: headline,
+    elementStyles: {
+      element: {
+        textTransform: "uppercase",
+        textWrap: "pretty",
+        ...desktopStyles
+      },
+      siblingAfter: {
+        marginTop: Styles.token.spacing.md
+      }
+    },
+    isThemeDark: true
+  });
+  return headlineElement;
+};
+const createTextContent = (props) => {
+  const textLockupElement = large({
+    ribbon: props.eyebrow,
+    headlineComposite: createHeadline(props),
+    text: props.text,
+    actions: props.actions,
+    isThemeDark: true
+  });
+  return createDiv({
+    className: "umd-hero-overlay__text-content",
+    children: [textLockupElement],
+    elementStyles: {
+      element: {
+        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          maxWidth: "55%"
+        },
+        [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {
+          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+            maxWidth: "60%"
+          }
+        }
+      }
+    }
+  });
+};
+const createText = (props) => {
+  const { includesAnimation } = props;
+  const textContent = createTextContent(props);
+  const lock = spaceHorizontalLarger({
+    element: document.createElement("div"),
+    children: [textContent],
+    elementStyles: {
+      element: {
+        height: "100%",
+        width: "100%",
+        position: "relative"
+      }
+    }
+  });
+  return createDiv({
+    className: "umd-hero-overlay__text",
+    children: [lock],
+    elementStyles: {
+      element: {
+        padding: `${Styles.token.spacing.lg} 0`,
+        display: "flex",
+        position: "relative",
+        zIndex: 999,
+        width: "100%",
+        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          padding: `${Styles.token.spacing["5xl"]} 0`,
+          ...includesAnimation && {
+            [`@media (prefers-reduced-motion: no-preference)`]: {
+              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
+            }
+          }
+        }
+      }
+    }
+  });
+};
+const overlay = (props) => {
+  const text = createText(props);
+  const asset = createAsset(props);
+  const children = [text];
+  if (asset) {
+    children.push(asset);
+  }
+  const container = createDiv({
+    className: "umd-hero-overlay__container",
+    children,
+    elementStyles: {
+      element: {
+        position: "relative",
+        backgroundColor: Styles.token.color.black,
+        overflow: "clip",
+        [`@container (${Styles.token.media.queries.large.max})`]: {
+          display: "flex",
+          flexDirection: "column-reverse"
+        },
+        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          minHeight: "640px",
+          display: "flex",
+          alignItems: "center",
+          ["&:before"]: {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: "50px",
+            top: 0,
+            height: "100%",
+            background: "linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)",
+            zIndex: 999
+          }
+        },
+        [`@container (${Styles.token.media.queries.desktop.min})`]: {
+          minHeight: "764px"
+        }
+      }
+    }
+  });
+  const composite = createDiv({
+    className: "umd-hero-overlay",
+    children: [container],
+    elementStyles: {
+      element: {
+        containerType: "inline-size"
+      }
+    }
+  });
+  composite.styles += keyFrameHeroResize;
+  composite.styles += keyFrameHeroSlideUp;
+  return composite;
+};
+export {
+  overlay as default
+};
+//# sourceMappingURL=overlay.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.mjs","sources":["../../../source/composite/hero/overlay.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 HeroOverlayProps } from './_types';\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\nconst keyFrameHeroResize = `\n  @keyframes hero-overlay-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFrameHeroSlideUp = `\n  @keyframes hero-slide-up {\n    from {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to {\n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO};\n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createVideoAsset = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n  });\n};\n\nconst createImageAsset = (image: HTMLImageElement) => {\n  return assets.image.background({\n    element: image,\n    isScaled: true,\n    isGifAllowed: true,\n    isShowCaption: true,\n  });\n};\n\nconst buildAssetChildren = ({\n  image,\n  video,\n}: Pick<HeroOverlayProps, 'image' | 'video'>): ElementVisual[] => {\n  if (video && video instanceof HTMLVideoElement) {\n    return [createVideoAsset(video)];\n  }\n\n  if (image) {\n    return [createImageAsset(image)];\n  }\n\n  return [assets.image.placeholder.fearlessForward()];\n};\n\nconst createAsset = ({\n  image,\n  video,\n  includesAnimation,\n}: Pick<HeroOverlayProps, 'image' | 'video' | 'includesAnimation'>) => {\n  const children = buildAssetChildren({ image, video });\n\n  if (children.length === 0) {\n    return null;\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__asset',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '60%',\n          height: `calc(100% - ${Styles.token.spacing['5xl']})`,\n          right: 0,\n          top: 0,\n          overflow: 'visible',\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-overlay-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n            },\n          }),\n        },\n\n        ['& img, & video']: {\n          height: '100%',\n          minHeight: '300px',\n        },\n      },\n    },\n  });\n};\n\nconst createHeadline = (props: Pick<HeroOverlayProps, 'headline'>) => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  const desktopStyles = {\n    [`@container (${Styles.token.media.queries.desktop.min})`]: {\n      ...(isOverwriteHeadline && {\n        fontSize: '80px',\n      }),\n    },\n  };\n\n  const headlineElement = ElementModel.headline.campaignExtraLarge({\n    element: headline,\n    elementStyles: {\n      element: {\n        textTransform: 'uppercase',\n        textWrap: 'pretty',\n        ...desktopStyles,\n      },\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n    isThemeDark: true,\n  });\n\n  return headlineElement;\n};\n\nconst createTextContent = (\n  props: Pick<HeroOverlayProps, 'eyebrow' | 'headline' | 'text' | 'actions'>,\n) => {\n  const textLockupElement = textLockup.large({\n    ribbon: props.eyebrow,\n    headlineComposite: createHeadline(props),\n    text: props.text,\n    actions: props.actions,\n    isThemeDark: true,\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__text-content',\n    children: [textLockupElement],\n    elementStyles: {\n      element: {\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          maxWidth: '55%',\n        },\n\n        [`& .${Styles.element.text.rich.simpleLargeDark.className}`]: {\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            maxWidth: '60%',\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createText = (\n  props: Pick<\n    HeroOverlayProps,\n    'eyebrow' | 'headline' | 'text' | 'actions' | 'includesAnimation'\n  >,\n) => {\n  const { includesAnimation } = props;\n  const textContent = createTextContent(props);\n\n  const lock = ElementModel.layout.spaceHorizontalLarger({\n    element: document.createElement('div'),\n    children: [textContent],\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-hero-overlay__text',\n    children: [lock],\n    elementStyles: {\n      element: {\n        padding: `${Styles.token.spacing.lg} 0`,\n        display: 'flex',\n        position: 'relative',\n        zIndex: 999,\n        width: '100%',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['5xl']} 0`,\n\n          ...(includesAnimation && {\n            [`@media (prefers-reduced-motion: no-preference)`]: {\n              animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            },\n          }),\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroOverlayProps) => {\n  const text = createText(props);\n  const asset = createAsset(props);\n\n  const children: ElementVisual[] = [text];\n  if (asset) {\n    children.push(asset);\n  }\n\n  const container = ElementModel.createDiv({\n    className: 'umd-hero-overlay__container',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        backgroundColor: Styles.token.color.black,\n        overflow: 'clip',\n\n        [`@container (${Styles.token.media.queries.large.max})`]: {\n          display: 'flex',\n          flexDirection: 'column-reverse',\n        },\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          minHeight: '640px',\n          display: 'flex',\n          alignItems: 'center',\n\n          ['&:before']: {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: '50px',\n            top: 0,\n            height: '100%',\n            background:\n              'linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 75%)',\n            zIndex: 999,\n          },\n        },\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          minHeight: '764px',\n        },\n      },\n    },\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-hero-overlay',\n    children: [container],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n      },\n    },\n  });\n\n  composite.styles += keyFrameHeroResize;\n  composite.styles += keyFrameHeroSlideUp;\n\n  return composite;\n};\n"],"names":["assets.video.observedAutoPlay","assets.image.background","assets.image.placeholder","ElementModel.createDiv","ElementModel.headline.campaignExtraLarge","textLockup.large","ElementModel.layout.spaceHorizontalLarger"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { type HeroStackedProps } from './_types';
+import { HeroStackedProps } from './_types';
 declare const _default: (props: HeroStackedProps) => {
     element: HTMLElement;
     className: string;

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;gCAuV1B,gBAAgB;;;;;AAAvC,wBAwBE"}
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../source/composite/hero/stacked.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;yBAsTjC,OAAO,gBAAgB;;;;;AAAvC,wBAiCE"}

package/dist/composite/hero/stacked.js

@@ -0,0 +1,324 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+const media = require("../../utilities/theme/media.js");
+const index = require("../../model/elements/index.js");
+require("../../atomic/animations/actions/indicator.js");
+require("../../atomic/animations/brand/chevron-scroll.js");
+const background = require("../../atomic/assets/image/background.js");
+const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
+require("../../atomic/layout/block/stacked.js");
+require("../../atomic/layout/overlay/modal.js");
+require("../../atomic/layout/person/columns.js");
+require("../../atomic/text-lockup/date.js");
+const large = require("../../atomic/text-lockup/large.js");
+require("../../atomic/text-lockup/small.js");
+const layout = require("../../model/elements/layout.js");
+const headline = require("../../model/elements/headline.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const REF_KEY_FRAME_FADE_OVER = "hero-stacked-fade-over";
+const REF_KEY_FRAME_FONT_COLOR = "hero-stacked-font-color";
+const keyFrameFadeOver = `
+  @keyframes ${REF_KEY_FRAME_FADE_OVER} {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+const keyFrameFontColor = `
+  @keyframes ${REF_KEY_FRAME_FONT_COLOR} {
+    from { color: ${Styles__namespace.token.color.black}; }
+    to { color: ${Styles__namespace.token.color.white}; }
+  }
+`;
+const createVideoAsset = (video) => {
+  return observedAutoPlay({
+    video,
+    isScaled: true
+  });
+};
+const createImageAsset = (image) => {
+  return background({
+    element: image,
+    isScaled: true,
+    isGifAllowed: true,
+    isShowCaption: true,
+    customStyles: {
+      [`@media (${Styles__namespace.token.media.queries.large.max})`]: {
+        [`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
+          minHeight: "56vw"
+        }
+      },
+      [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
+          minHeight: "550px"
+        }
+      },
+      [`& .${Styles__namespace.element.asset.gif.toggle.className} button`]: {
+        zIndex: 99999
+      }
+    }
+  });
+};
+const createOverlay = (includesAnimation) => {
+  return index.createDiv({
+    className: "umd-hero-stacked__overlay",
+    elementStyles: {
+      element: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        height: "100vh",
+        width: "100vw",
+        display: "block",
+        backgroundColor: "rgba(0,0,0,.7)",
+        zIndex: 99,
+        opacity: 0,
+        ...includesAnimation && {
+          [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+            [`@media (prefers-reduced-motion: no-preference)`]: {
+              [`@supports (animation-timeline: view())`]: {
+                animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,
+                animationTimeline: "view()",
+                animationRangeStart: "30vh",
+                animationRangeEnd: "70vh"
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+};
+const createAsset = ({
+  image,
+  video,
+  includesAnimation,
+  isWidthLarge = false,
+  isHeightSmall = false
+}) => {
+  let mediaElement = null;
+  if (video && video instanceof HTMLVideoElement) {
+    mediaElement = createVideoAsset(video);
+  } else if (image) {
+    mediaElement = createImageAsset(image);
+  }
+  if (!mediaElement) {
+    return null;
+  }
+  const assetInteriorElement = index.createDiv({
+    className: "umd-hero-stacked__asset--interior",
+    children: [mediaElement, createOverlay(includesAnimation)],
+    elementStyles: {
+      element: {
+        overflow: "clip",
+        position: "relative",
+        height: "100%"
+      }
+    }
+  });
+  const horizontalLock = layout.spaceHorizontalLarger({
+    element: document.createElement("div"),
+    children: [assetInteriorElement],
+    elementStyles: {
+      element: {
+        height: "100%",
+        width: "100%"
+      }
+    }
+  });
+  const assetContainer = index.createDiv({
+    className: "umd-hero-stacked__asset",
+    children: isWidthLarge ? [horizontalLock] : [mediaElement, createOverlay(includesAnimation)],
+    elementStyles: {
+      element: {
+        position: "relative",
+        overflow: "clip",
+        display: "grid",
+        ["& img, & video"]: {
+          objectFit: "cover",
+          aspectRatio: "5 / 4",
+          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+            maxHeight: "700px",
+            minHeight: "300px",
+            ...!isHeightSmall && {
+              minHeight: "400px",
+              height: "65vh !important"
+            }
+          }
+        }
+      }
+    }
+  });
+  return assetContainer;
+};
+const createHeadline = (props) => {
+  const { headline: headline$1, isHeightSmall, includesAnimation, isThemeDark } = props;
+  const characterCount = headline$1?.textContent?.trim().length || 0;
+  const isOverwriteHeadline = characterCount < 30;
+  if (!headline$1) return null;
+  const desktopStyles = {
+    [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+      ...isOverwriteHeadline && {
+        fontSize: "80px"
+      }
+    }
+  };
+  const animationStyles = {
+    [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+      ...media.withViewTimelineAnimation({
+        animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
+        animationTimeline: "view()",
+        animationRangeStart: "100vh",
+        animationRangeEnd: "130vh",
+        ...isHeightSmall && {
+          animationRangeStart: "120vh",
+          animationRangeEnd: "150vh"
+        }
+      })
+    }
+  };
+  const elementStyles = {
+    element: {
+      color: Styles__namespace.token.color.black,
+      maxWidth: "700px",
+      margin: "0 auto",
+      textTransform: "uppercase",
+      marginTop: `${Styles__namespace.token.spacing.sm}`,
+      ...isThemeDark && {
+        color: Styles__namespace.token.color.white
+      },
+      ...includesAnimation && {
+        ...!isThemeDark && {
+          ...animationStyles
+        }
+      },
+      ...desktopStyles
+    },
+    siblingAfter: {
+      marginTop: `${Styles__namespace.token.spacing.md}`
+    }
+  };
+  return headline.campaignLarge({
+    element: headline$1,
+    elementStyles
+  });
+};
+const createText = (props) => {
+  const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;
+  const additionalSpread = topPosition ? parseInt(topPosition) : null;
+  const textLockupElement = large({
+    ...props,
+    ribbon: props.eyebrow,
+    headlineComposite: createHeadline(props),
+    textLargest: props.text
+  });
+  const lock = layout.spaceHorizontalSmall({
+    element: document.createElement("div"),
+    children: [textLockupElement],
+    elementStyles: {
+      element: {
+        position: "relative"
+      }
+    }
+  });
+  return index.createDiv({
+    className: "umd-hero-stacked__text",
+    children: [lock],
+    elementStyles: {
+      element: {
+        padding: `${Styles__namespace.token.spacing.lg} 0`,
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        position: "relative",
+        zIndex: "999",
+        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          padding: `${Styles__namespace.token.spacing["6xl"]} 0 ${Styles__namespace.token.spacing["3xl"]}`
+        },
+        ...includesAnimation && {
+          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+            ...media.withViewTimelineAnimation({
+              position: "sticky",
+              top: additionalSpread || 0
+            })
+          }
+        },
+        [`& *`]: {
+          ...includesAnimation && {
+            ...!isThemeDark && {
+              [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+                ...media.withViewTimelineAnimation({
+                  animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
+                  animationTimeline: "view()",
+                  animationRangeStart: "90vh",
+                  animationRangeEnd: "110vh",
+                  ...isHeightSmall && {
+                    animationRangeStart: "90vh",
+                    animationRangeEnd: "110vh"
+                  }
+                })
+              }
+            }
+          }
+        },
+        [`& .${Styles__namespace.element.text.decoration.ribbon.className[0]}`]: {
+          animation: "none !important"
+        },
+        [`& .${Styles__namespace.element.text.rich.simpleLargest.className}`]: {
+          maxWidth: "860px",
+          marginLeft: "auto",
+          marginRight: "auto"
+        }
+      }
+    }
+  });
+};
+const stacked = (props) => {
+  const asset = createAsset(props);
+  const hasAsset = asset !== null;
+  const shouldAnimateText = hasAsset && props.includesAnimation;
+  const text = createText({
+    ...props,
+    includesAnimation: shouldAnimateText
+  });
+  const children = [text];
+  if (hasAsset) {
+    children.push(asset);
+  }
+  const composite = index.createDiv({
+    className: "umd-hero-stacked",
+    children,
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        ...props.isThemeDark && {
+          backgroundColor: Styles__namespace.token.color.black
+        }
+      }
+    }
+  });
+  composite.styles += keyFrameFadeOver;
+  composite.styles += keyFrameFontColor;
+  return composite;
+};
+module.exports = stacked;
+//# sourceMappingURL=stacked.js.map

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

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