@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/composite/hero/standard.js

@@ -1,13 +1,18 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+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 theme = require("@universityofmaryland/web-utilities-library/theme");
+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");
-const index = require("../../model/elements/index.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
@@ -25,9 +30,6 @@ 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");
-require("@universityofmaryland/web-styles-library/typography");
-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) {
@@ -46,6 +48,7 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const ANIMATION_CONFIG = {
   SLIDE_UP: {
     DURATION: "1s",
@@ -161,52 +164,43 @@ const createAsset = ({
 }) => {
   const children = buildAssetChildren({ image, video });
   const elementStyles2 = buildAssetStyles(includesAnimation);
-  return index.createDiv({
-    className: "umd-hero-default__asset",
-    children,
-    elementStyles: elementStyles2
-  });
+  return new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default__asset").withChildren(...children).withStyles(elementStyles2).build();
 };
 const createHeadline = (props) => {
-  const { headline: headline$1, isHeightSmall, isThemeDark } = props;
-  const characterCount = headline$1?.textContent?.trim().length || 0;
+  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;
+  const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 10 && isHeightSmall;
-  if (!headline$1) return null;
-  const tabletStyles = {
-    maxWidth: "700px",
-    marginLeft: "auto",
-    marginRight: "auto",
-    color: token__namespace.color.white
-  };
-  const desktopStyles = {
-    maxWidth: "816px",
-    ...isOverwriteHeadline && { fontSize: "80px" }
-  };
-  const headlineElement = headline.campaignExtraLarge({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase",
-        [`@media (${token__namespace.media.queries.tablet.min})`]: tabletStyles,
-        [`@media (${token__namespace.media.queries.desktop.min})`]: desktopStyles
-      },
-      subElement: {
-        color: "currentColor"
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(
+    Styles__namespace.typography.campaign.compose("extralarge", {
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase",
+      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        maxWidth: "700px",
+        color: token__namespace.color.white,
+        ...isTextCenter && { marginLeft: "auto", marginRight: "auto" }
       },
-      siblingAfter: {
-        marginTop: token__namespace.spacing.sm
+      [`@media (${token__namespace.media.queries.desktop.min})`]: {
+        maxWidth: "816px",
+        ...isOverwriteHeadline && { fontSize: "80px" }
       }
     },
-    isThemeDark
-  });
-  return headlineElement;
+    subElement: {
+      color: "currentColor"
+    },
+    siblingAfter: {
+      marginTop: token__namespace.spacing.sm
+    }
+  }).build();
 };
 const createText = (props) => {
   const {
     isTextCenter = false,
     isHeightSmall = false,
-    includesAnimation,
-    isThemeDark
+    includesAnimation
   } = props;
   const text = large({
     headlineComposite: createHeadline(props),
@@ -215,101 +209,94 @@ const createText = (props) => {
     actions: props.actions,
     isThemeDark: true
   });
-  const textContainer = index.createDiv({
-    className: "umd-hero-default__text",
-    children: [text],
-    elementStyles: {
-      element: {
-        display: "flex",
-        alignItems: "flex-end",
-        height: "100%",
-        ...isTextCenter && {
-          textAlign: "center",
-          justifyContent: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
-          maxWidth: "928px"
-        },
-        ...includesAnimation && {
-          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
-        },
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
-          maxWidth: "736px",
-          paddingTop: `${token__namespace.spacing["2xl"]}`,
-          paddingBottom: `${token__namespace.spacing["2xl"]}`,
-          ...!isTextCenter && {
-            width: "80%"
-          },
-          ...isHeightSmall && {
-            minHeight: "400px",
-            alignItems: "flex-end",
-            display: "flex"
-          }
+  const textContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default__text").withChild(text).withStyles({
+    element: {
+      display: "flex",
+      alignItems: "flex-end",
+      height: "100%",
+      ...isTextCenter && {
+        textAlign: "center",
+        justifyContent: "center",
+        marginLeft: "auto",
+        marginRight: "auto",
+        maxWidth: "928px"
+      },
+      ...includesAnimation && {
+        animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
+      },
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        maxWidth: "736px",
+        paddingTop: `${token__namespace.spacing["2xl"]}`,
+        paddingBottom: `${token__namespace.spacing["2xl"]}`,
+        ...!isTextCenter && {
+          width: "80%"
         },
-        [`@container (${token__namespace.media.queries.desktop.min})`]: {
-          maxWidth: "808px"
+        ...isHeightSmall && {
+          minHeight: "400px",
+          alignItems: "flex-end",
+          display: "flex"
         }
+      },
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        maxWidth: "808px"
       }
     }
-  });
-  return layout.spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [textContainer],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        position: "relative",
-        zIndex: 99,
-        [`@container (${token__namespace.media.queries.tablet.max})`]: {
-          paddingTop: `${token__namespace.spacing.sm}`,
-          [`&:has(.${elementStyles__namespace.text.decoration.ribbon.className})`]: {
-            paddingTop: `0`,
-            marginTop: "-14px"
-          }
+  }).build();
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative",
+      zIndex: 99,
+      [`@container (${token__namespace.media.queries.tablet.max})`]: {
+        paddingTop: `${token__namespace.spacing.sm}`,
+        [`&:has(.${elementStyles__namespace.text.decoration.ribbon.className})`]: {
+          paddingTop: `0`,
+          marginTop: "-14px"
         }
       }
     }
-  });
+  }).build();
 };
 const standard = (props) => {
   const { isHeightSmall, isThemeDark } = props;
   const asset = createAsset(props);
   const text = createText(props);
-  const composite = index.createDiv({
-    className: "umd-hero-default",
-    children: [asset, text],
-    elementStyles: {
-      element: {
-        position: "relative",
-        overflow: "hidden",
-        containerType: "inline-size",
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName("umd-hero-default").withChildren(asset, text).withStyles({
+    element: {
+      position: "relative",
+      overflow: "hidden",
+      containerType: "inline-size",
+      ...isThemeDark && {
+        backgroundColor: token__namespace.color.black
+      },
+      [`@container (${token__namespace.media.queries.large.max})`]: {
         ...isThemeDark && {
-          backgroundColor: token__namespace.color.black
-        },
-        [`@container (${token__namespace.media.queries.tablet.min})`]: {
-          ...!isHeightSmall && {
-            height: "75vh",
-            minHeight: "480px"
-          }
-        },
-        [`@container (${token__namespace.media.queries.desktop.min})`]: {
-          ...!isHeightSmall && {
-            minHeight: "720px"
-          }
+          paddingBottom: `${token__namespace.spacing.md}`
+        }
+      },
+      [`@container (${token__namespace.media.queries.tablet.min})`]: {
+        ...!isHeightSmall && {
+          height: "75vh",
+          minHeight: "480px"
         }
       },
-      subElement: {
-        [`@container (${token__namespace.media.queries.large.max})`]: {
-          [`*:not(.${elementStyles__namespace.asset.image.caption.className})`]: {
-            ...!isThemeDark && {
-              color: `${token__namespace.color.black} !important`
-            }
+      [`@container (${token__namespace.media.queries.desktop.min})`]: {
+        ...!isHeightSmall && {
+          minHeight: "720px"
+        }
+      }
+    },
+    subElement: {
+      [`@container (${token__namespace.media.queries.large.max})`]: {
+        [`*:not(.${elementStyles__namespace.asset.image.caption.className})`]: {
+          ...!isThemeDark && {
+            color: `${token__namespace.color.black} !important`
           }
         }
       }
     }
-  });
+  }).build();
   composite.styles += keyFrameHeroScaleDown;
   composite.styles += keyFrameHeroSlideUp;
   return composite;

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

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

package/dist/composite/hero/standard.mjs

@@ -1,12 +1,17 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+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 { theme } from "@universityofmaryland/web-utilities-library/theme";
+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 { createDiv } from "../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
@@ -24,9 +29,6 @@ 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";
-import "@universityofmaryland/web-styles-library/typography";
-import { spaceHorizontalLarger } from "../../model/elements/layout.mjs";
-import { campaignExtraLarge } from "../../model/elements/headline.mjs";
 const ANIMATION_CONFIG = {
   SLIDE_UP: {
     DURATION: "1s",
@@ -142,52 +144,43 @@ const createAsset = ({
 }) => {
   const children = buildAssetChildren({ image, video });
   const elementStyles2 = buildAssetStyles(includesAnimation);
-  return createDiv({
-    className: "umd-hero-default__asset",
-    children,
-    elementStyles: elementStyles2
-  });
+  return new ElementBuilder().withClassName("umd-hero-default__asset").withChildren(...children).withStyles(elementStyles2).build();
 };
 const createHeadline = (props) => {
-  const { headline, isHeightSmall, isThemeDark } = props;
+  const { headline, isHeightSmall, isTextCenter, isThemeDark } = props;
   const characterCount = headline?.textContent?.trim().length || 0;
   const isOverwriteHeadline = characterCount > 10 && isHeightSmall;
   if (!headline) return null;
-  const tabletStyles = {
-    maxWidth: "700px",
-    marginLeft: "auto",
-    marginRight: "auto",
-    color: token.color.white
-  };
-  const desktopStyles = {
-    maxWidth: "816px",
-    ...isOverwriteHeadline && { fontSize: "80px" }
-  };
-  const headlineElement = campaignExtraLarge({
-    element: headline,
-    elementStyles: {
-      element: {
-        textTransform: "uppercase",
-        [`@media (${token.media.queries.tablet.min})`]: tabletStyles,
-        [`@media (${token.media.queries.desktop.min})`]: desktopStyles
-      },
-      subElement: {
-        color: "currentColor"
+  return new ElementBuilder(headline).styled(
+    Styles.typography.campaign.compose("extralarge", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      textTransform: "uppercase",
+      [`@media (${token.media.queries.tablet.min})`]: {
+        maxWidth: "700px",
+        color: token.color.white,
+        ...isTextCenter && { marginLeft: "auto", marginRight: "auto" }
       },
-      siblingAfter: {
-        marginTop: token.spacing.sm
+      [`@media (${token.media.queries.desktop.min})`]: {
+        maxWidth: "816px",
+        ...isOverwriteHeadline && { fontSize: "80px" }
       }
     },
-    isThemeDark
-  });
-  return headlineElement;
+    subElement: {
+      color: "currentColor"
+    },
+    siblingAfter: {
+      marginTop: token.spacing.sm
+    }
+  }).build();
 };
 const createText = (props) => {
   const {
     isTextCenter = false,
     isHeightSmall = false,
-    includesAnimation,
-    isThemeDark
+    includesAnimation
   } = props;
   const text = large({
     headlineComposite: createHeadline(props),
@@ -196,101 +189,94 @@ const createText = (props) => {
     actions: props.actions,
     isThemeDark: true
   });
-  const textContainer = createDiv({
-    className: "umd-hero-default__text",
-    children: [text],
-    elementStyles: {
-      element: {
-        display: "flex",
-        alignItems: "flex-end",
-        height: "100%",
-        ...isTextCenter && {
-          textAlign: "center",
-          justifyContent: "center",
-          marginLeft: "auto",
-          marginRight: "auto",
-          maxWidth: "928px"
-        },
-        ...includesAnimation && {
-          animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
-        },
-        [`@container (${token.media.queries.tablet.min})`]: {
-          maxWidth: "736px",
-          paddingTop: `${token.spacing["2xl"]}`,
-          paddingBottom: `${token.spacing["2xl"]}`,
-          ...!isTextCenter && {
-            width: "80%"
-          },
-          ...isHeightSmall && {
-            minHeight: "400px",
-            alignItems: "flex-end",
-            display: "flex"
-          }
+  const textContainer = new ElementBuilder().withClassName("umd-hero-default__text").withChild(text).withStyles({
+    element: {
+      display: "flex",
+      alignItems: "flex-end",
+      height: "100%",
+      ...isTextCenter && {
+        textAlign: "center",
+        justifyContent: "center",
+        marginLeft: "auto",
+        marginRight: "auto",
+        maxWidth: "928px"
+      },
+      ...includesAnimation && {
+        animation: `hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`
+      },
+      [`@container (${token.media.queries.tablet.min})`]: {
+        maxWidth: "736px",
+        paddingTop: `${token.spacing["2xl"]}`,
+        paddingBottom: `${token.spacing["2xl"]}`,
+        ...!isTextCenter && {
+          width: "80%"
         },
-        [`@container (${token.media.queries.desktop.min})`]: {
-          maxWidth: "808px"
+        ...isHeightSmall && {
+          minHeight: "400px",
+          alignItems: "flex-end",
+          display: "flex"
         }
+      },
+      [`@container (${token.media.queries.desktop.min})`]: {
+        maxWidth: "808px"
       }
     }
-  });
-  return spaceHorizontalLarger({
-    element: document.createElement("div"),
-    children: [textContainer],
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        position: "relative",
-        zIndex: 99,
-        [`@container (${token.media.queries.tablet.max})`]: {
-          paddingTop: `${token.spacing.sm}`,
-          [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {
-            paddingTop: `0`,
-            marginTop: "-14px"
-          }
+  }).build();
+  return new ElementBuilder().styled(Styles.layout.space.horizontal.larger).withChild(textContainer).withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative",
+      zIndex: 99,
+      [`@container (${token.media.queries.tablet.max})`]: {
+        paddingTop: `${token.spacing.sm}`,
+        [`&:has(.${elementStyles.text.decoration.ribbon.className})`]: {
+          paddingTop: `0`,
+          marginTop: "-14px"
         }
       }
     }
-  });
+  }).build();
 };
 const standard = (props) => {
   const { isHeightSmall, isThemeDark } = props;
   const asset = createAsset(props);
   const text = createText(props);
-  const composite = createDiv({
-    className: "umd-hero-default",
-    children: [asset, text],
-    elementStyles: {
-      element: {
-        position: "relative",
-        overflow: "hidden",
-        containerType: "inline-size",
+  const composite = new ElementBuilder().withClassName("umd-hero-default").withChildren(asset, text).withStyles({
+    element: {
+      position: "relative",
+      overflow: "hidden",
+      containerType: "inline-size",
+      ...isThemeDark && {
+        backgroundColor: token.color.black
+      },
+      [`@container (${token.media.queries.large.max})`]: {
         ...isThemeDark && {
-          backgroundColor: token.color.black
-        },
-        [`@container (${token.media.queries.tablet.min})`]: {
-          ...!isHeightSmall && {
-            height: "75vh",
-            minHeight: "480px"
-          }
-        },
-        [`@container (${token.media.queries.desktop.min})`]: {
-          ...!isHeightSmall && {
-            minHeight: "720px"
-          }
+          paddingBottom: `${token.spacing.md}`
+        }
+      },
+      [`@container (${token.media.queries.tablet.min})`]: {
+        ...!isHeightSmall && {
+          height: "75vh",
+          minHeight: "480px"
         }
       },
-      subElement: {
-        [`@container (${token.media.queries.large.max})`]: {
-          [`*:not(.${elementStyles.asset.image.caption.className})`]: {
-            ...!isThemeDark && {
-              color: `${token.color.black} !important`
-            }
+      [`@container (${token.media.queries.desktop.min})`]: {
+        ...!isHeightSmall && {
+          minHeight: "720px"
+        }
+      }
+    },
+    subElement: {
+      [`@container (${token.media.queries.large.max})`]: {
+        [`*:not(.${elementStyles.asset.image.caption.className})`]: {
+          ...!isThemeDark && {
+            color: `${token.color.black} !important`
           }
         }
       }
     }
-  });
+  }).build();
   composite.styles += keyFrameHeroScaleDown;
   composite.styles += keyFrameHeroSlideUp;
   return composite;