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

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

@@ -1,351 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
-import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
-import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
-import "@universityofmaryland/web-styles-library/element";
-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.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import imageContainer from "../../../atomic/assets/image/background.mjs";
-import "@universityofmaryland/web-utilities-library/performance";
-import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import large from "../../../atomic/text-lockup/large.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-const isPreferReducedMotion = isPreferredReducedMotion();
-const isScrollTimelineSupported = () => "ScrollTimeline" in window || CSS.supports("animation-timeline", "scroll()");
-const isDisplayWithoutAnimation = isPreferReducedMotion || !isScrollTimelineSupported();
-const ANIMATION_RANGES = {
-  GRID_COLUMNS: { start: "110vh", end: "230vh" },
-  GRID_ROWS: { start: "110vh", end: "230vh" },
-  TINT_FADE: { start: "50vh", end: "140vh" }
-};
-const GRID_LAYOUT = {
-  COLUMNS: {
-    INITIAL: "20% 60% 20%",
-    FINAL: "0 100% 0",
-    DEFAULT: "25% 50% 25%"
-  },
-  ROWS: {
-    INITIAL: "25vh 1fr 25vh",
-    FINAL: "0 1fr 0",
-    TRIPLE: "1fr 1fr 1fr"
-  }
-};
-const keyFrameColumns = `
-  @keyframes grid-columns {
-    from {
-      grid-template-columns: ${GRID_LAYOUT.COLUMNS.INITIAL};
-    }
-    to {
-      grid-template-columns: ${GRID_LAYOUT.COLUMNS.FINAL};
-      grid-gap: 0;
-    }
-  }
-`;
-const keyFrameRows = `
-  @keyframes grid-rows {
-    from {
-      grid-template-rows: ${GRID_LAYOUT.ROWS.INITIAL};
-    }
-    to {
-      grid-template-rows: ${GRID_LAYOUT.ROWS.FINAL};
-      grid-gap: 0;
-    }
-  }
-`;
-const keyFrameTint = `
-  @keyframes tint-fade {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-const columnBase = {
-  display: "grid",
-  gridAutoFlow: "row dense",
-  gridGap: `${token.spacing.min}`,
-  width: "100%",
-  height: "100vh",
-  [`@media (${token.media.queries.tablet.min})`]: {
-    gridGap: `${token.spacing.md}`
-  },
-  [`@media (${token.media.queries.desktop.min})`]: {
-    gridGap: `${token.spacing.lg}`
-  },
-  ["& > *"]: {
-    overflow: "hidden",
-    position: "relative"
-  }
-};
-const createImageWrapper = (image) => imageContainer({
-  element: image,
-  isScaled: true,
-  isGifAllowed: true,
-  isShowCaption: true
-});
-const createVideoWrapper = (video) => observedAutoPlay({
-  video,
-  isAutoplay: true,
-  additionalElementStyles: {
-    additionalElementStyles: {
-      width: "100%",
-      aspectRatio: "1 / 1",
-      position: "relative",
-      overflow: "hidden",
-      [`& video`]: {
-        height: "100%",
-        width: "100%",
-        objectFit: "cover"
-      }
-    }
-  }
-});
-const createCorner = ({ images, isCornerLeft }) => {
-  const children = images.map((image) => createImageWrapper(image));
-  return new ElementBuilder().withClassName(
-    isCornerLeft ? "hero-grid-corner-left" : "hero-grid-corner-right"
-  ).withChildren(...children).withStyles({
-    element: {
-      ...columnBase,
-      gridTemplateRows: GRID_LAYOUT.ROWS.TRIPLE
-    }
-  }).withAttribute("role", "region").withAttribute(
-    "aria-label",
-    `${isCornerLeft ? "Left" : "Right"} decorative image grid`
-  ).build();
-};
-const createCenter = ({ images, video }) => {
-  const tint = new ElementBuilder().withClassName("hero-grid-tint").withStyles({
-    element: {
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      zIndex: 9,
-      opacity: 0,
-      ...withViewTimelineAnimation({
-        animation: "tint-fade ease-in-out forwards",
-        animationTimeline: "view()",
-        animationRangeStart: ANIMATION_RANGES.TINT_FADE.start,
-        animationRangeEnd: ANIMATION_RANGES.TINT_FADE.end
-      })
-    }
-  }).withAttribute("role", "region").withAttribute("aria-label", "Main hero content").build();
-  const container = new ElementBuilder().withClassName("hero-grid-center").withChild(tint).withStyles({
-    element: {
-      ...columnBase,
-      gridTemplateRows: GRID_LAYOUT.ROWS.INITIAL,
-      ...withViewTimelineAnimation({
-        animation: "grid-rows ease-in-out forwards",
-        animationTimeline: "view()",
-        animationRangeStart: ANIMATION_RANGES.GRID_ROWS.start,
-        animationRangeEnd: ANIMATION_RANGES.GRID_ROWS.end
-      })
-    }
-  });
-  if (video) {
-    container.withChild(createImageWrapper(images[0])).withChild(createVideoWrapper(video)).withChild(createImageWrapper(images[1]));
-  } else {
-    images.forEach((image) => {
-      container.withChild(createImageWrapper(image));
-    });
-  }
-  return container.build();
-};
-const createHeadline = (props) => {
-  const { headline } = props;
-  const characterCount = headline?.textContent?.trim().length || 0;
-  const isOverwriteHeadline = characterCount > 30;
-  if (!headline) return null;
-  const desktopStyles = {
-    [`@container (${token.media.queries.desktop.min})`]: {
-      ...isOverwriteHeadline && {
-        fontSize: "80px"
-      }
-    }
-  };
-  return new ElementBuilder(headline).styled(Styles.typography.campaign.fonts.extraLarge).withStyles({
-    element: {
-      color: token.color.white,
-      textTransform: "uppercase",
-      textWrap: "pretty",
-      ...desktopStyles
-    },
-    siblingAfter: {
-      marginTop: token.spacing.md
-    }
-  }).build();
-};
-const createTextContainer = (props) => {
-  const { actions, headline, text, isThemeDark } = props;
-  let shouldRenderBlackText = null;
-  if (isDisplayWithoutAnimation && !isThemeDark) {
-    shouldRenderBlackText = true;
-  }
-  if (!text && !actions && !headline) {
-    return null;
-  }
-  const textContainer = new ElementBuilder().withClassName("hero-expand-text-container").withStyles({
-    element: {
-      position: "relative",
-      height: "100%",
-      zIndex: 9999,
-      textAlign: "center",
-      padding: `${token.spacing.md} 0`,
-      [`@container (${token.media.queries.tablet.min})`]: {
-        padding: `${token.spacing["3xl"]} 0`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between"
-      },
-      [`@container (${token.media.queries.highDef.min})`]: {
-        padding: `${token.spacing["6xl"]} 0`
-      },
-      ...withViewTimelineAnimation({
-        paddingTop: "140vh"
-      }),
-      ["*"]: {
-        ...shouldRenderBlackText && {
-          color: `${token.color.black} !important`
-        }
-      }
-    }
-  }).build();
-  const lock = new ElementBuilder().styled(Styles.layout.space.horizontal.smallest).withStyles({
-    element: {
-      height: "100%",
-      width: "100%",
-      position: "relative"
-    }
-  }).build();
-  const textLockupElement = large({
-    headlineComposite: createHeadline(props),
-    textLargest: text,
-    actions,
-    isThemeDark: true
-  });
-  lock.element.appendChild(textLockupElement.element);
-  lock.styles += textLockupElement.styles;
-  textContainer.element.appendChild(lock.element);
-  textContainer.styles += lock.styles;
-  return textContainer;
-};
-const validateGridProps = (props) => {
-  const leftCorner = props.corners.find((c) => c.isCornerLeft);
-  const rightCorner = props.corners.find((c) => !c.isCornerLeft);
-  const errors = [];
-  if (!leftCorner) {
-    errors.push("Left corner is required for hero grid");
-  } else if (!leftCorner.images || leftCorner.images.length === 0) {
-    errors.push("Left corner must have at least one image");
-  }
-  if (!rightCorner) {
-    errors.push("Right corner is required for hero grid");
-  } else if (!rightCorner.images || rightCorner.images.length === 0) {
-    errors.push("Right corner must have at least one image");
-  }
-  if (!props.center) {
-    errors.push("Center is required for hero grid");
-  } else {
-    if (!props.center.images || props.center.images.length === 0) {
-      errors.push("Center must have at least one image");
-    } else if (props.center.video && props.center.images.length < 2) {
-      errors.push("Center must have at least 2 images when video is provided");
-    }
-  }
-  if (errors.length > 0) {
-    errors.forEach((error) => console.log("Hero Grid Error:", error));
-    return null;
-  }
-  return {
-    leftCorner,
-    rightCorner,
-    center: props.center
-  };
-};
-const createGridLayout = (leftCorner, rightCorner, center) => {
-  const gridStyles = {
-    gridTemplateColumns: GRID_LAYOUT.COLUMNS.DEFAULT,
-    height: "100vh",
-    width: "100%",
-    display: "grid",
-    gridGap: `${token.spacing.min}`,
-    [`@media (${token.media.queries.tablet.min})`]: {
-      gridGap: `${token.spacing.md}`
-    },
-    [`@media (${token.media.queries.desktop.min})`]: {
-      gridGap: `${token.spacing.lg}`
-    },
-    ...withViewTimelineAnimation({
-      position: "sticky",
-      top: 0,
-      animation: "grid-columns ease-in-out forwards",
-      animationTimeline: "view()",
-      animationRangeStart: ANIMATION_RANGES.GRID_COLUMNS.start,
-      animationRangeEnd: ANIMATION_RANGES.GRID_COLUMNS.end
-    })
-  };
-  return new ElementBuilder().withClassName("hero-grid-layout").withChildren(
-    createCorner(leftCorner),
-    createCenter(center),
-    createCorner(rightCorner)
-  ).withStyles({ element: gridStyles }).withAttribute("role", "region").withAttribute("aria-label", "Hero grid layout").build();
-};
-const grid = (props) => {
-  const validated = validateGridProps(props);
-  if (!validated) return null;
-  const { leftCorner, rightCorner, center } = validated;
-  const text = createTextContainer(props);
-  const grid2 = createGridLayout(leftCorner, rightCorner, center);
-  const composite = new ElementBuilder().withClassName("hero-grid-container").withChild(grid2).withStyles({
-    element: {
-      width: "100%",
-      display: "block",
-      containerType: "inline-size",
-      ...withViewTimelineAnimation({
-        height: "300vh"
-      }),
-      ["img, video"]: {
-        objectFit: "cover",
-        width: "100%",
-        height: "100%"
-      }
-    }
-  }).withAttribute("role", "main").withAttribute("aria-label", "Hero section");
-  if (text) {
-    composite.withChild(text);
-  }
-  const built = composite.build();
-  built.styles += keyFrameColumns;
-  built.styles += keyFrameRows;
-  built.styles += keyFrameTint;
-  return built;
-};
-export {
-  grid as default
-};
-//# sourceMappingURL=grid.mjs.map

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

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

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

@@ -1,9 +0,0 @@
-import { default as default2 } from "./grid.mjs";
-import { default as default3 } from "./expand.mjs";
-import { default as default4 } from "./video-arrow.mjs";
-export {
-  default3 as expand,
-  default2 as grid,
-  default4 as videoArrow
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

@@ -1,204 +0,0 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import * as elementStyles from "@universityofmaryland/web-styles-library/element";
-import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-import "@universityofmaryland/web-styles-library/layout";
-import "@universityofmaryland/web-styles-library/animation";
-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.mjs";
-import chevronFlow from "../../../atomic/animations/brand/chevron-flow.mjs";
-import "../../../atomic/animations/brand/chevron-scroll.mjs";
-import "../../../atomic/animations/brand/card-stack.mjs";
-import "@universityofmaryland/web-styles-library";
-import observedAutoPlay from "../../../atomic/assets/video/observed-auto-play.mjs";
-import "@universityofmaryland/web-icons-library/location";
-import "@universityofmaryland/web-icons-library/calendar";
-import "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.mjs";
-import "../../../atomic/layout/overlay/modal.mjs";
-import "../../../atomic/layout/person/columns.mjs";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.mjs";
-import "../../../atomic/text-lockup/small.mjs";
-const OVERLAY_CLASS = "hero-logo-brand-text-overlay";
-const ANIMATION_CONFIG = {
-  TEXT_FADE: {
-    DURATION: "1000ms",
-    EASING: "ease-in-out",
-    HEADLINE_DELAY: "600ms",
-    TEXT_DELAY: "1500ms"
-  },
-  OVERLAY_FADE: {
-    DURATION: "1500ms",
-    EASING: "ease-in-out"
-  }
-};
-const createHeadline = (headline) => {
-  if (!headline) return null;
-  return new ElementBuilder(headline).styled(typography.campaign.extralarge).withStyles({
-    element: {
-      textTransform: "uppercase",
-      opacity: 0,
-      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,
-      textWrap: "balance",
-      color: token.color.white
-    },
-    siblingAfter: {
-      marginTop: token.spacing.md
-    }
-  }).build();
-};
-const createText = (text) => {
-  if (!text) return null;
-  return new ElementBuilder(text).styled(elementStyles.text.rich.simpleLargest).withStyles({
-    element: {
-      maxWidth: "720px",
-      marginLeft: "auto",
-      marginRight: "auto",
-      opacity: 0,
-      transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,
-      transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,
-      ["& p"]: {
-        color: token.color.white
-      },
-      [`@media (max-width: 649px)`]: {
-        display: "none"
-      }
-    }
-  }).build();
-};
-const createTextChildren = (props) => {
-  const { headline, text } = props;
-  const children = [];
-  const headlineElement = createHeadline(headline);
-  if (headlineElement) {
-    children.push(headlineElement);
-  }
-  const textElement = createText(text);
-  if (textElement) {
-    children.push(textElement);
-  }
-  return children;
-};
-const createTextContainer = (props) => {
-  const children = createTextChildren(props);
-  if (children.length === 0) return null;
-  const container = new ElementBuilder().withClassName("hero-logo-brand-text-container").withChildren(...children).withStyles({
-    element: {
-      zIndex: 99,
-      textAlign: "center",
-      width: `calc(100% - 24px)`,
-      maxWidth: "950px",
-      padding: `${token.spacing.xl} ${token.spacing.md}`
-    }
-  }).build();
-  return new ElementBuilder().withClassName(OVERLAY_CLASS).withChild(container).withStyles({
-    element: {
-      height: "100%",
-      width: "100%",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-      zIndex: 98,
-      opacity: 0,
-      transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`
-    }
-  }).build();
-};
-const createVideo = (video) => {
-  return observedAutoPlay({
-    video,
-    isScaled: true,
-    additionalElementStyles: {
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      top: 0,
-      left: 0
-    }
-  });
-};
-const createAnimationSequence = (container) => {
-  return () => {
-    const overlay = container.querySelector(
-      `.${OVERLAY_CLASS}`
-    );
-    const headline = container.querySelector(
-      `.${typography.campaign.fonts.extraLarge.className}`
-    );
-    const text = container.querySelector(
-      `.${elementStyles.text.rich.simpleLargest.className}`
-    );
-    if (overlay) overlay.style.opacity = "1";
-    if (headline) headline.style.opacity = "1";
-    if (text) text.style.opacity = "1";
-  };
-};
-const createEventHandlers = (composite, overlay) => {
-  const eventResize = () => {
-    if (composite.element.offsetHeight > window.innerHeight) {
-      composite.element.style.height = `${window.innerHeight * 0.9}px`;
-    }
-  };
-  const eventLoad = () => {
-    overlay.events.load();
-    eventResize();
-  };
-  window.addEventListener("resize", debounce(eventResize, 20));
-  return { load: eventLoad };
-};
-const videoArrow = (props) => {
-  const { video, isAnimationOnLoad } = props;
-  const videoElement = createVideo(video);
-  const textContainer = createTextContainer(props);
-  const composite = new ElementBuilder("section").withClassName("umd-element-hero-brand-video").withStyles({
-    element: {
-      aspectRatio: "16 / 9",
-      width: "100%"
-    }
-  }).build();
-  const wrapper = new ElementBuilder().withClassName("hero-logo-brand-video-wrapper").withChild(videoElement).withStyles({
-    element: {
-      containerType: "inline-size",
-      position: "relative",
-      overflow: "hidden",
-      height: "100%",
-      width: "100%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  });
-  if (textContainer) {
-    wrapper.withChild(textContainer);
-  }
-  const wrapperBuilt = wrapper.build();
-  const overlay = chevronFlow({
-    sizedContainer: composite.element,
-    sizedWrapper: wrapperBuilt.element,
-    completedCallback: createAnimationSequence(composite.element),
-    isAnimationOnLoad
-  });
-  wrapperBuilt.element.appendChild(overlay.element);
-  wrapperBuilt.styles += overlay.styles;
-  composite.element.appendChild(wrapperBuilt.element);
-  composite.styles += wrapperBuilt.styles;
-  const events = createEventHandlers(composite, overlay);
-  return {
-    ...composite,
-    events
-  };
-};
-export {
-  videoArrow as default
-};
-//# sourceMappingURL=video-arrow.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"video-arrow.mjs","sources":["../../../../source/composite/hero/custom/video-arrow.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { animations, assets } from 'atomic';\nimport { type HeroVideoArrowProps as BaseHeroVideoArrowProps } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\ninterface HeroVideoArrowProps extends Omit<BaseHeroVideoArrowProps, 'video'> {\n  video: HTMLVideoElement;\n  isAnimationOnLoad?: boolean;\n}\n\nconst OVERLAY_CLASS = 'hero-logo-brand-text-overlay';\n\nconst ANIMATION_CONFIG = {\n  TEXT_FADE: {\n    DURATION: '1000ms',\n    EASING: 'ease-in-out',\n    HEADLINE_DELAY: '600ms',\n    TEXT_DELAY: '1500ms',\n  },\n  OVERLAY_FADE: {\n    DURATION: '1500ms',\n    EASING: 'ease-in-out',\n  },\n} as const;\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(typography.campaign.extralarge)\n    .withStyles({\n      element: {\n        textTransform: 'uppercase',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.HEADLINE_DELAY,\n        textWrap: 'balance',\n        color: token.color.white,\n      },\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    })\n    .build();\n};\n\nconst createText = (text?: HTMLElement | null) => {\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(elementStyles.text.rich.simpleLargest)\n    .withStyles({\n      element: {\n        maxWidth: '720px',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.TEXT_FADE.DURATION} ${ANIMATION_CONFIG.TEXT_FADE.EASING}`,\n        transitionDelay: ANIMATION_CONFIG.TEXT_FADE.TEXT_DELAY,\n\n        ['& p']: {\n          color: token.color.white,\n        },\n\n        [`@media (max-width: 649px)`]: {\n          display: 'none',\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextChildren = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n): ElementModel<HTMLElement>[] => {\n  const { headline, text } = props;\n  const children: ElementModel<HTMLElement>[] = [];\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  const textElement = createText(text);\n  if (textElement) {\n    children.push(textElement);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<HeroVideoArrowProps, 'headline' | 'text'>,\n) => {\n  const children = createTextChildren(props);\n\n  if (children.length === 0) return null;\n\n  const container = new ElementBuilder()\n    .withClassName('hero-logo-brand-text-container')\n    .withChildren(...children)\n    .withStyles({\n      element: {\n        zIndex: 99,\n        textAlign: 'center',\n        width: `calc(100% - 24px)`,\n        maxWidth: '950px',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName(OVERLAY_CLASS)\n    .withChild(container)\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\n        zIndex: 98,\n        opacity: 0,\n        transition: `opacity ${ANIMATION_CONFIG.OVERLAY_FADE.DURATION} ${ANIMATION_CONFIG.OVERLAY_FADE.EASING}`,\n      },\n    })\n    .build();\n};\n\nconst createVideo = (video: HTMLVideoElement) => {\n  return assets.video.observedAutoPlay({\n    video,\n    isScaled: true,\n    additionalElementStyles: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n    },\n  });\n};\n\nconst createAnimationSequence = (container: HTMLElement) => {\n  return () => {\n    const overlay = container.querySelector(\n      `.${OVERLAY_CLASS}`,\n    ) as HTMLDivElement;\n    const headline = container.querySelector(\n      `.${typography.campaign.fonts.extraLarge.className}`,\n    ) as HTMLDivElement;\n    const text = container.querySelector(\n      `.${elementStyles.text.rich.simpleLargest.className}`,\n    ) as HTMLDivElement;\n\n    if (overlay) overlay.style.opacity = '1';\n    if (headline) headline.style.opacity = '1';\n    if (text) text.style.opacity = '1';\n  };\n};\n\nconst createEventHandlers = (\n  composite: ElementModel<HTMLElement>,\n  overlay: ReturnType<typeof animations.brand.chevronFlow>,\n) => {\n  const eventResize = () => {\n    if (composite.element.offsetHeight > window.innerHeight) {\n      composite.element.style.height = `${window.innerHeight * 0.9}px`;\n    }\n  };\n\n  const eventLoad = () => {\n    overlay.events.load();\n    eventResize();\n  };\n\n  window.addEventListener('resize', debounce(eventResize, 20));\n\n  return { load: eventLoad };\n};\n\nexport default (props: HeroVideoArrowProps) => {\n  const { video, isAnimationOnLoad } = props;\n\n  const videoElement = createVideo(video);\n  const textContainer = createTextContainer(props);\n\n  const composite = new ElementBuilder('section')\n    .withClassName('umd-element-hero-brand-video')\n    .withStyles({\n      element: {\n        aspectRatio: '16 / 9',\n        width: '100%',\n      },\n    })\n    .build();\n\n  const wrapper = new ElementBuilder()\n    .withClassName('hero-logo-brand-video-wrapper')\n    .withChild(videoElement)\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n        overflow: 'hidden',\n        height: '100%',\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    });\n\n  if (textContainer) {\n    wrapper.withChild(textContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  const overlay = animations.brand.chevronFlow({\n    sizedContainer: composite.element,\n    sizedWrapper: wrapperBuilt.element,\n    completedCallback: createAnimationSequence(composite.element),\n    isAnimationOnLoad,\n  });\n\n  wrapperBuilt.element.appendChild(overlay.element);\n  wrapperBuilt.styles += overlay.styles;\n\n  composite.element.appendChild(wrapperBuilt.element);\n  composite.styles += wrapperBuilt.styles;\n\n  const events = createEventHandlers(composite, overlay);\n\n  return {\n    ...composite,\n    events,\n  };\n};\n"],"names":["assets.video.observedAutoPlay","animations.brand.chevronFlow"],"mappings":"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"}

package/dist/composite/hero/index.mjs

@@ -1,15 +0,0 @@
-import * as index from "./custom/index.mjs";
-import { default as default2 } from "./logo.mjs";
-import { default as default3 } from "./minimal.mjs";
-import { default as default4 } from "./overlay.mjs";
-import { default as default5 } from "./stacked.mjs";
-import { default as default6 } from "./standard.mjs";
-export {
-  index as custom,
-  default2 as logo,
-  default3 as minimal,
-  default4 as overlay,
-  default5 as stacked,
-  default6 as standard
-};
-//# sourceMappingURL=index.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}