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

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

@@ -1,4 +1,3 @@
 import { HeroStackedProps } from './_types';
-declare const _default: (props: HeroStackedProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeHeroStacked: (props: HeroStackedProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=stacked.d.ts.map

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

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

package/dist/composite/hero/stacked.js

@@ -1,54 +1,34 @@
-"use strict";
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const Styles = require("@universityofmaryland/web-styles-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../atomic/animations/actions/indicator.js");
-require("../../atomic/animations/brand/chevron-scroll.js");
-require("../../atomic/animations/brand/card-stack.js");
-const background = require("../../atomic/assets/image/background.js");
-require("@universityofmaryland/web-utilities-library/performance");
-const observedAutoPlay = require("../../atomic/assets/video/observed-auto-play.js");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-require("../../atomic/layout/block/stacked.js");
-require("../../atomic/layout/overlay/modal.js");
-require("../../atomic/layout/person/columns.js");
-require("@universityofmaryland/web-icons-library/social");
-require("../../atomic/text-lockup/date.js");
-const large = require("../../atomic/text-lockup/large.js");
-require("../../atomic/text-lockup/small.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 token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../atomic/animations/actions/indicator.js";
+import "../../atomic/animations/brand/chevron-scroll.js";
+import "../../atomic/animations/brand/card-stack.js";
+import { createImageBackground } from "../../atomic/assets/image/background.js";
+import "@universityofmaryland/web-utilities-library/performance";
+import { createVideoObservedAutoPlay } from "../../atomic/assets/video/observed-auto-play.js";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../atomic/layout/block/stacked.js";
+import "../../atomic/layout/overlay/modal.js";
+import "../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "../../atomic/text-lockup/date.js";
+import { createTextLockupLarge } from "../../atomic/text-lockup/large.js";
+import "../../atomic/text-lockup/small.js";
 const REF_KEY_FRAME_FADE_OVER = "hero-stacked-fade-over";
 const REF_KEY_FRAME_FONT_COLOR = "hero-stacked-font-color";
 const keyFrameFadeOver = `
@@ -59,41 +39,41 @@ const keyFrameFadeOver = `
 `;
 const keyFrameFontColor = `
   @keyframes ${REF_KEY_FRAME_FONT_COLOR} {
-    from { color: ${token__namespace.color.black}; }
-    to { color: ${token__namespace.color.white}; }
+    from { color: ${token.color.black}; }
+    to { color: ${token.color.white}; }
   }
 `;
 const createVideoAsset = (video) => {
-  return observedAutoPlay({
+  return createVideoObservedAutoPlay({
     video,
     isScaled: true
   });
 };
 const createImageAsset = (image) => {
-  return background({
+  return createImageBackground({
     element: image,
     isScaled: true,
     isGifAllowed: true,
     isShowCaption: true,
     customStyles: {
-      [`@media (${token__namespace.media.queries.large.max})`]: {
-        [`&:has(.${elementStyles__namespace.asset.gif.toggle.className})`]: {
+      [`@media (${token.media.queries.large.max})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
           minHeight: "56vw"
         }
       },
-      [`@media (${token__namespace.media.queries.tablet.min})`]: {
-        [`&:has(.${elementStyles__namespace.asset.gif.toggle.className})`]: {
+      [`@media (${token.media.queries.tablet.min})`]: {
+        [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
           minHeight: "550px"
         }
       },
-      [`& .${elementStyles__namespace.asset.gif.toggle.className} button`]: {
+      [`& .${elementStyles.asset.gif.toggle.className} button`]: {
         zIndex: 99999
       }
     }
   });
 };
 const createOverlay = (includesAnimation) => {
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-stacked__overlay").withStyles({
+  return new ElementBuilder().withClassName("umd-hero-stacked__overlay").withStyles({
     element: {
       position: "absolute",
       top: "50%",
@@ -106,7 +86,7 @@ const createOverlay = (includesAnimation) => {
       zIndex: 99,
       opacity: 0,
       ...includesAnimation && {
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        [`@media (${token.media.queries.tablet.min})`]: {
           [`@media (prefers-reduced-motion: no-preference)`]: {
             [`@supports (animation-timeline: scroll())`]: {
               animation: `${REF_KEY_FRAME_FADE_OVER} ease-in-out forwards`,
@@ -136,20 +116,20 @@ const createAsset = ({
   if (!mediaElement) {
     return null;
   }
-  const assetInteriorElement = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-stacked__asset--interior").withChildren(mediaElement, createOverlay(includesAnimation)).withStyles({
+  const assetInteriorElement = new ElementBuilder().withClassName("umd-hero-stacked__asset--interior").withChildren(mediaElement, createOverlay(includesAnimation)).withStyles({
     element: {
       overflow: "clip",
       position: "relative",
       height: "100%"
     }
   }).build();
-  const horizontalLock = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(assetInteriorElement).withStyles({
+  const horizontalLock = new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(assetInteriorElement).withStyles({
     element: {
       height: "100%",
       width: "100%"
     }
   }).build();
-  const builder = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-stacked__asset");
+  const builder = new ElementBuilder().withClassName("umd-hero-stacked__asset");
   if (isWidthLarge) {
     builder.withChild(horizontalLock);
   } else {
@@ -163,7 +143,7 @@ const createAsset = ({
       ["& img, & video"]: {
         objectFit: "cover",
         aspectRatio: "5 / 4",
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           maxHeight: "700px",
           minHeight: "300px",
           ...!isHeightSmall && {
@@ -181,15 +161,15 @@ const createHeadline = (props) => {
   const isOverwriteHeadline = characterCount < 30;
   if (!headline) return null;
   const desktopStyles = {
-    [`@container (${token__namespace.media.queries.desktop.min})`]: {
+    [`@container (${token.media.queries.desktop.min})`]: {
       ...isOverwriteHeadline && {
         fontSize: "80px"
       }
     }
   };
   const animationStyles = {
-    [`@container (${token__namespace.media.queries.tablet.min})`]: {
-      ...styles.withViewTimelineAnimation({
+    [`@container (${token.media.queries.tablet.min})`]: {
+      ...withViewTimelineAnimation({
         animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
         animationTimeline: "view()",
         animationRangeStart: "100vh",
@@ -203,12 +183,12 @@ const createHeadline = (props) => {
   };
   const elementStyles2 = {
     element: {
-      color: token__namespace.color.black,
+      color: token.color.black,
       margin: "0 auto",
       textTransform: "uppercase",
-      marginTop: `${token__namespace.spacing.sm}`,
+      marginTop: `${token.spacing.sm}`,
       ...isThemeDark && {
-        color: token__namespace.color.white
+        color: token.color.white
       },
       ...includesAnimation && {
         ...!isThemeDark && {
@@ -218,39 +198,39 @@ const createHeadline = (props) => {
       ...desktopStyles
     },
     siblingAfter: {
-      marginTop: `${token__namespace.spacing.md}`
+      marginTop: `${token.spacing.md}`
     }
   };
-  return new webBuilderLibrary.ElementBuilder(headline).styled(Styles__namespace.typography.campaign.fonts.large).withStyles(elementStyles2).build();
+  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.large).withStyles(elementStyles2).build();
 };
 const createText = (props) => {
   const { topPosition, isThemeDark, includesAnimation, isHeightSmall } = props;
   const additionalSpread = topPosition ? parseInt(topPosition) : null;
-  const textLockupElement = large({
+  const textLockupElement = createTextLockupLarge({
     ...props,
     ribbon: props.eyebrow,
     headlineComposite: createHeadline(props),
     textLargest: props.text
   });
-  const lock = new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.small).withChild(textLockupElement).withStyles({
+  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.small).withChild(textLockupElement).withStyles({
     element: {
       position: "relative"
     }
   }).build();
-  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-stacked__text").withChild(lock).withStyles({
+  return new ElementBuilder().withClassName("umd-hero-stacked__text").withChild(lock).withStyles({
     element: {
-      padding: `${token__namespace.spacing.lg} 0`,
+      padding: `${token.spacing.lg} 0`,
       display: "flex",
       justifyContent: "center",
       textAlign: "center",
       position: "relative",
       zIndex: "999",
-      [`@container (${token__namespace.media.queries.tablet.min})`]: {
-        padding: `${token__namespace.spacing["6xl"]} 0 ${token__namespace.spacing["3xl"]}`
+      [`@container (${token.media.queries.tablet.min})`]: {
+        padding: `${token.spacing["6xl"]} 0 ${token.spacing["3xl"]}`
       },
       ...includesAnimation && {
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
-          ...styles.withViewTimelineAnimation({
+        [`@container (${token.media.queries.tablet.min})`]: {
+          ...withViewTimelineAnimation({
             position: "sticky",
             top: additionalSpread || 0
           })
@@ -259,8 +239,8 @@ const createText = (props) => {
       [`& *`]: {
         ...includesAnimation && {
           ...!isThemeDark && {
-            [`@container (${token__namespace.media.queries.tablet.min})`]: {
-              ...styles.withViewTimelineAnimation({
+            [`@container (${token.media.queries.tablet.min})`]: {
+              ...withViewTimelineAnimation({
                 animation: `${REF_KEY_FRAME_FONT_COLOR} ease-in-out forwards`,
                 animationTimeline: "view()",
                 animationRangeStart: "90vh",
@@ -274,10 +254,10 @@ const createText = (props) => {
           }
         }
       },
-      [`& .${elementStyles__namespace.text.decoration.ribbon.className[0]}`]: {
+      [`& .${elementStyles.text.decoration.ribbon.className[0]}`]: {
         animation: "none !important"
       },
-      [`& .${elementStyles__namespace.text.rich.simpleLargest.className}`]: {
+      [`& .${elementStyles.text.rich.simpleLargest.className}`]: {
         maxWidth: "860px",
         marginLeft: "auto",
         marginRight: "auto"
@@ -285,7 +265,7 @@ const createText = (props) => {
     }
   }).build();
 };
-const stacked = (props) => {
+const createCompositeHeroStacked = (props) => {
   const asset = createAsset(props);
   const hasAsset = asset !== null;
   const shouldAnimateText = hasAsset && props.includesAnimation;
@@ -297,11 +277,11 @@ const stacked = (props) => {
   if (hasAsset) {
     children.push(asset);
   }
-  const composite = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-stacked").withChildren(...children).withStyles({
+  const composite = new ElementBuilder().withClassName("umd-hero-stacked").withChildren(...children).withStyles({
     element: {
       containerType: "inline-size",
       ...props.isThemeDark && {
-        backgroundColor: token__namespace.color.black
+        backgroundColor: token.color.black
       }
     }
   }).build();
@@ -309,5 +289,7 @@ const stacked = (props) => {
   composite.styles += keyFrameFontColor;
   return composite;
 };
-module.exports = stacked;
+export {
+  createCompositeHeroStacked
+};
 //# sourceMappingURL=stacked.js.map

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

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

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

@@ -1,4 +1,3 @@
 import { HeroStandardProps } from './_types';
-declare const _default: (props: HeroStandardProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeHeroStandard: (props: HeroStandardProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=standard.d.ts.map

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

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