@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/card/overlay/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = iconQuote;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${token.spacing.lg} ${token.spacing.md}`,\n            paddingTop: `${token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...createMediaQuery(\n              'min-width',\n              token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["truncateTextBasedOnSize","actions.icon","assets.image.background","ElementModel.layout.backgroundBoxWhite","token","ElementModel.createDiv","iconQuote","textLockup.smallScaling","createMediaQuery"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.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 { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: UMDElement[] = [];\n  const wrapperChildren: UMDElement[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      new ElementBuilder()\n        .styled(Styles.layout.background.box.white)\n        .withStyles({\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${token.spacing.min}`,\n          },\n        })\n        .withChild(dateSign)\n        .build(),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = new ElementBuilder()\n      .withClassName('card-overlay-image-quote-wrapper')\n      .withStyles({\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      })\n      .withHTML(iconQuote)\n      .build();\n\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textContent = new ElementBuilder()\n    .withClassName('card-overlay-image-text-content')\n    .withStyles({\n      element: {\n        maxWidth: `${token.spacing.maxWidth.smallest}`,\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        zIndex: 9,\n        position: 'relative',\n\n        [' & * ']: {\n          color: `${token.color.white}`,\n        },\n      },\n    })\n    .withChildren(...wrapperChildren)\n    .build();\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('card-overlay-image-text-wrapper')\n    .withStyles({\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n      },\n    })\n    .withChild(textContent)\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('card-overlay-image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        padding: `${token.spacing.lg} ${token.spacing.md}`,\n        paddingTop: `${token.spacing['4xl']}`,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'flex-end',\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.medium.min,\n          {\n            paddingTop: `${token.spacing['8xl']}`,\n            minHeight: `424px`,\n          },\n        ),\n      },\n    })\n    .withChildren(...children, textWrapper)\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(classRef)\n    .withStyles({\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    })\n    .withChild(container)\n    .build();\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["truncateTextBasedOnSize","actions.icon","assets.image.background","ElementBuilder","Styles","token","iconQuote","textLockup.smallScaling","createMediaQuery"],"mappings":"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"}

package/dist/composite/card/overlay/image.mjs

@@ -1,9 +1,13 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { quote } from "@universityofmaryland/web-icons-library/brand";
-import { truncateTextBasedOnSize } from "@universityofmaryland/web-utilities-library/string";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
 import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
-import { createDiv } from "../../../model/elements/index.mjs";
+import { truncateTextBasedOnSize } from "@universityofmaryland/web-utilities-library/string";
+import { quote } from "@universityofmaryland/web-icons-library/brand";
 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";
@@ -18,6 +22,7 @@ import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 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";
@@ -25,8 +30,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
 import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
-import "@universityofmaryland/web-styles-library/typography";
-import { backgroundBoxWhite } from "../../../model/elements/layout.mjs";
 const classRef = "card-overlay-image";
 const createCardOverlayImage = (props) => {
   const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
@@ -93,35 +96,27 @@ const createCardOverlayImage = (props) => {
   }
   if (dateSign) {
     wrapperChildren.push(
-      backgroundBoxWhite({
-        element: document.createElement("div"),
-        elementStyles: {
-          element: {
-            alignSelf: `flex-start`
-          },
-          siblingAfter: {
-            marginTop: `${token.spacing.min}`
-          }
+      new ElementBuilder().styled(Styles.layout.background.box.white).withStyles({
+        element: {
+          alignSelf: `flex-start`
         },
-        children: [dateSign]
-      })
+        siblingAfter: {
+          marginTop: `${token.spacing.min}`
+        }
+      }).withChild(dateSign).build()
     );
   }
   if (isQuote) {
-    const quoteWrapper = createDiv({
-      className: "card-overlay-image-quote-wrapper",
-      elementStyles: {
-        element: {
-          width: "41px",
-          height: "30px",
-          marginBottom: `${token.spacing.xs}`,
-          "& svg": {
-            fill: `${token.color.red}`
-          }
+    const quoteWrapper = new ElementBuilder().withClassName("card-overlay-image-quote-wrapper").withStyles({
+      element: {
+        width: "41px",
+        height: "30px",
+        marginBottom: `${token.spacing.xs}`,
+        "& svg": {
+          fill: `${token.color.red}`
         }
       }
-    });
-    quoteWrapper.element.innerHTML = quote;
+    }).withHTML(quote).build();
     wrapperChildren.push(quoteWrapper);
   }
   wrapperChildren.push(
@@ -130,74 +125,59 @@ const createCardOverlayImage = (props) => {
       isThemeDark: true
     })
   );
-  const textWrapper = createDiv({
-    className: "card-overlay-image-text-wrapper",
-    elementStyles: {
-      element: {
-        height: "auto",
-        paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`
+  const textContent = new ElementBuilder().withClassName("card-overlay-image-text-content").withStyles({
+    element: {
+      maxWidth: `${token.spacing.maxWidth.smallest}`,
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: 9,
+      position: "relative",
+      [" & * "]: {
+        color: `${token.color.white}`
       }
-    },
-    children: [
-      createDiv({
-        children: wrapperChildren,
-        className: "card-overlay-image-text-content",
-        elementStyles: {
-          element: {
-            maxWidth: `${token.spacing.maxWidth.smallest}`,
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            zIndex: 9,
-            position: "relative"
-          }
-        }
-      })
-    ]
-  });
-  const composite = createDiv({
-    className: classRef,
-    children: [
-      createDiv({
-        className: "card-overlay-image-container",
-        children: [...children, textWrapper],
-        elementStyles: {
-          element: {
-            position: "relative",
-            padding: `${token.spacing.lg} ${token.spacing.md}`,
-            paddingTop: `${token.spacing["4xl"]}`,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "flex-end",
-            minHeight: "360px",
-            height: "100%",
-            overflow: "hidden",
-            ...createMediaQuery(
-              "min-width",
-              token.media.breakpointValues.medium.min,
-              {
-                paddingTop: `${token.spacing["8xl"]}`,
-                minHeight: `424px`
-              }
-            )
-          }
-        }
-      })
-    ],
-    elementStyles: {
-      element: {
-        height: "100%",
-        containerType: "inline-size",
-        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
-          opacity: 0.7
-        },
-        ["&:hover img, &:focus img"]: {
-          transform: "scale(1)",
-          transition: "transform 0.5s ease-in-out"
+    }
+  }).withChildren(...wrapperChildren).build();
+  const textWrapper = new ElementBuilder().withClassName("card-overlay-image-text-wrapper").withStyles({
+    element: {
+      height: "auto",
+      paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`
+    }
+  }).withChild(textContent).build();
+  const container = new ElementBuilder().withClassName("card-overlay-image-container").withStyles({
+    element: {
+      position: "relative",
+      padding: `${token.spacing.lg} ${token.spacing.md}`,
+      paddingTop: `${token.spacing["4xl"]}`,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      minHeight: "360px",
+      height: "100%",
+      overflow: "hidden",
+      ...createMediaQuery(
+        "min-width",
+        token.media.breakpointValues.medium.min,
+        {
+          paddingTop: `${token.spacing["8xl"]}`,
+          minHeight: `424px`
         }
+      )
+    }
+  }).withChildren(...children, textWrapper).build();
+  const composite = new ElementBuilder().withClassName(classRef).withStyles({
+    element: {
+      height: "100%",
+      containerType: "inline-size",
+      [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
+        opacity: 0.7
+      },
+      ["&:hover img, &:focus img"]: {
+        transform: "scale(1)",
+        transition: "transform 0.5s ease-in-out"
       }
     }
-  });
+  }).withChild(container).build();
   return {
     ...composite,
     events: {

package/dist/composite/card/overlay/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = iconQuote;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${token.spacing.lg} ${token.spacing.md}`,\n            paddingTop: `${token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...createMediaQuery(\n              'min-width',\n              token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["actions.icon","imageContainer","assets.image.background","ElementModel.layout.backgroundBoxWhite","ElementModel.createDiv","iconQuote","textLockup.smallScaling"],"mappings":"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"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/card/overlay/image.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 { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateTextBasedOnSize } from '@universityofmaryland/web-utilities-library/string';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { actions, assets, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: UMDElement[] = [];\n  const wrapperChildren: UMDElement[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      new ElementBuilder()\n        .styled(Styles.layout.background.box.white)\n        .withStyles({\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${token.spacing.min}`,\n          },\n        })\n        .withChild(dateSign)\n        .build(),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = new ElementBuilder()\n      .withClassName('card-overlay-image-quote-wrapper')\n      .withStyles({\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${token.color.red}`,\n          },\n        },\n      })\n      .withHTML(iconQuote)\n      .build();\n\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textContent = new ElementBuilder()\n    .withClassName('card-overlay-image-text-content')\n    .withStyles({\n      element: {\n        maxWidth: `${token.spacing.maxWidth.smallest}`,\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        zIndex: 9,\n        position: 'relative',\n\n        [' & * ']: {\n          color: `${token.color.white}`,\n        },\n      },\n    })\n    .withChildren(...wrapperChildren)\n    .build();\n\n  const textWrapper = new ElementBuilder()\n    .withClassName('card-overlay-image-text-wrapper')\n    .withStyles({\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n      },\n    })\n    .withChild(textContent)\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('card-overlay-image-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        padding: `${token.spacing.lg} ${token.spacing.md}`,\n        paddingTop: `${token.spacing['4xl']}`,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'flex-end',\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.medium.min,\n          {\n            paddingTop: `${token.spacing['8xl']}`,\n            minHeight: `424px`,\n          },\n        ),\n      },\n    })\n    .withChildren(...children, textWrapper)\n    .build();\n\n  const composite = new ElementBuilder()\n    .withClassName(classRef)\n    .withStyles({\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    })\n    .withChild(container)\n    .build();\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["actions.icon","imageContainer","assets.image.background","iconQuote","textLockup.smallScaling"],"mappings":"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"}

package/dist/composite/card/video/block.d.ts

@@ -2,14 +2,6 @@ interface CardVideoShortProps {
     video: HTMLVideoElement;
     isAutoplay?: boolean;
 }
-declare const _default: (props: CardVideoShortProps) => {
-    events: {
-        setPlay: () => void;
-        setPause: () => void;
-    };
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=block.d.ts.map

package/dist/composite/card/video/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/block.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;yBAEe,OAAO,mBAAmB;;;;;;;;;AAA1C,wBAgBU"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/block.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;yBAEe,OAAO,mBAAmB;AAA1C,wBAgBU"}

package/dist/composite/card/video/block.js

@@ -1,30 +1,32 @@
 "use strict";
-require("@universityofmaryland/web-styles-library/token");
+require("@universityofmaryland/web-builder-library");
+require("@universityofmaryland/web-token-library");
 require("@universityofmaryland/web-styles-library/element");
+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("../../../model/modifiers/index.js");
-require("@universityofmaryland/web-styles-library");
-require("../../../model/elements/headline.js");
 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");
+require("@universityofmaryland/web-styles-library");
 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");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 const block = (props) => (() => observedAutoPlay({
   ...props,
   additionalElementStyles: {

package/dist/composite/card/video/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;;"}
+{"version":3,"file":"block.js","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;;"}

package/dist/composite/card/video/block.mjs

@@ -1,29 +1,31 @@
-import "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-builder-library";
+import "@universityofmaryland/web-token-library";
 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 "../../../model/modifiers/index.mjs";
-import "@universityofmaryland/web-styles-library";
-import "../../../model/elements/headline.mjs";
 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 "@universityofmaryland/web-styles-library";
 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 "../../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const block = (props) => (() => observedAutoPlay({
   ...props,
   additionalElementStyles: {

package/dist/composite/card/video/block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"block.mjs","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}
+{"version":3,"file":"block.mjs","sources":["../../../../source/composite/card/video/block.ts"],"sourcesContent":["import { assets } from 'atomic';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n}\n\nexport default (props: CardVideoShortProps) =>\n  (() =>\n    assets.video.observedAutoPlay({\n      ...props,\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"],"names":["assets.video.observedAutoPlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,WACb,MACCA,iBAA8B;AAAA,EAC5B,GAAG;AAAA,EACH,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,CAAC,SAAS,GAAG;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAAA;"}

package/dist/composite/card/video/short.d.ts

@@ -1,10 +1,6 @@
 interface CardVideoShortProps {
     video: HTMLVideoElement;
 }
-declare const _default: (props: CardVideoShortProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=short.d.ts.map

package/dist/composite/card/video/short.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"short.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/short.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,OAAO,mBAAmB;;;;;AAA1C,wBAqDE"}
+{"version":3,"file":"short.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/video/short.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,OAAO,mBAAmB;AAA1C,wBAoDE"}

package/dist/composite/card/video/short.js

@@ -1,26 +1,7 @@
 "use strict";
-const index = require("../../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const short = (props) => {
   const { video } = props;
-  const composite = index.create({
-    element: document.createElement("div"),
-    className: "card-video-short-container",
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "9/16",
-        [`& video`]: {
-          height: "100%",
-          width: "100%",
-          objectFit: "cover",
-          ["&:hover"]: {
-            cursor: "pointer"
-          }
-        }
-      }
-    }
-  });
   const setPlay = () => {
     if (video.paused) {
       video.muted = true;
@@ -44,7 +25,21 @@ const short = (props) => {
   video.addEventListener("focus", setPlay);
   video.addEventListener("mouseleave", setPause);
   video.addEventListener("blur", setPause);
-  composite.element.appendChild(video);
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName("card-video-short-container").withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      aspectRatio: "9/16",
+      [`& video`]: {
+        height: "100%",
+        width: "100%",
+        objectFit: "cover",
+        ["&:hover"]: {
+          cursor: "pointer"
+        }
+      }
+    }
+  }).withChild(video).build();
   return composite;
 };
 module.exports = short;

package/dist/composite/card/video/short.js.map

@@ -1 +1 @@
-{"version":3,"file":"short.js","sources":["../../../../source/composite/card/video/short.ts"],"sourcesContent":["import { ElementModel } from 'model';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n}\n\nexport default (props: CardVideoShortProps) => {\n  const { video } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'card-video-short-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        aspectRatio: '9/16',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n\n          ['&:hover']: {\n            cursor: 'pointer',\n          },\n        },\n      },\n    },\n  });\n\n  const setPlay = () => {\n    if (video.paused) {\n      video.muted = true;\n      video.play();\n    }\n  };\n\n  const setPause = () => {\n    if (!video.paused) {\n      video.pause();\n    }\n  };\n\n  video.setAttribute('controls', 'true');\n  video.setAttribute(\n    'controlsList',\n    'nodownload nofullscreen noremoteplayback noplaybackrate\"',\n  );\n  video.setAttribute('preload', 'metadata');\n  video.setAttribute('playsinline', '');\n  video.setAttribute('muted', '');\n  video.addEventListener('mouseover', setPlay);\n  video.addEventListener('focus', setPlay);\n  video.addEventListener('mouseleave', setPause);\n  video.addEventListener('blur', setPause);\n\n  composite.element.appendChild(video);\n\n  return composite;\n};\n"],"names":["ElementModel.create"],"mappings":";;AAMA,MAAA,QAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU;AAClB,QAAM,YAAYA,MAAAA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,aAAa;AAAA,QAEb,CAAC,SAAS,GAAG;AAAA,UACX,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,UAEX,CAAC,SAAS,GAAG;AAAA,YACX,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,UAAU,MAAM;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,KAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,QAAI,CAAC,MAAM,QAAQ;AACjB,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa,WAAW,UAAU;AACxC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,SAAS,OAAO;AACvC,QAAM,iBAAiB,cAAc,QAAQ;AAC7C,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,YAAU,QAAQ,YAAY,KAAK;AAEnC,SAAO;AACT;;"}
+{"version":3,"file":"short.js","sources":["../../../../source/composite/card/video/short.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n}\n\nexport default (props: CardVideoShortProps) => {\n  const { video } = props;\n\n  const setPlay = () => {\n    if (video.paused) {\n      video.muted = true;\n      video.play();\n    }\n  };\n\n  const setPause = () => {\n    if (!video.paused) {\n      video.pause();\n    }\n  };\n\n  video.setAttribute('controls', 'true');\n  video.setAttribute(\n    'controlsList',\n    'nodownload nofullscreen noremoteplayback noplaybackrate\"',\n  );\n  video.setAttribute('preload', 'metadata');\n  video.setAttribute('playsinline', '');\n  video.setAttribute('muted', '');\n  video.addEventListener('mouseover', setPlay);\n  video.addEventListener('focus', setPlay);\n  video.addEventListener('mouseleave', setPause);\n  video.addEventListener('blur', setPause);\n\n  const composite = new ElementBuilder()\n    .withClassName('card-video-short-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        aspectRatio: '9/16',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n\n          ['&:hover']: {\n            cursor: 'pointer',\n          },\n        },\n      },\n    })\n    .withChild(video)\n    .build();\n\n  return composite;\n};\n"],"names":["ElementBuilder"],"mappings":";;AAMA,MAAA,QAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU;AAElB,QAAM,UAAU,MAAM;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,KAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,QAAI,CAAC,MAAM,QAAQ;AACjB,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa,WAAW,UAAU;AACxC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,SAAS,OAAO;AACvC,QAAM,iBAAiB,cAAc,QAAQ;AAC7C,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,QAAM,YAAY,IAAIA,kBAAAA,eAAA,EACnB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MAEb,CAAC,SAAS,GAAG;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QAEX,CAAC,SAAS,GAAG;AAAA,UACX,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,KAAK,EACf,MAAA;AAEH,SAAO;AACT;;"}

package/dist/composite/card/video/short.mjs

@@ -1,25 +1,6 @@
-import { create } from "../../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 const short = (props) => {
   const { video } = props;
-  const composite = create({
-    element: document.createElement("div"),
-    className: "card-video-short-container",
-    elementStyles: {
-      element: {
-        height: "100%",
-        width: "100%",
-        aspectRatio: "9/16",
-        [`& video`]: {
-          height: "100%",
-          width: "100%",
-          objectFit: "cover",
-          ["&:hover"]: {
-            cursor: "pointer"
-          }
-        }
-      }
-    }
-  });
   const setPlay = () => {
     if (video.paused) {
       video.muted = true;
@@ -43,7 +24,21 @@ const short = (props) => {
   video.addEventListener("focus", setPlay);
   video.addEventListener("mouseleave", setPause);
   video.addEventListener("blur", setPause);
-  composite.element.appendChild(video);
+  const composite = new ElementBuilder().withClassName("card-video-short-container").withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      aspectRatio: "9/16",
+      [`& video`]: {
+        height: "100%",
+        width: "100%",
+        objectFit: "cover",
+        ["&:hover"]: {
+          cursor: "pointer"
+        }
+      }
+    }
+  }).withChild(video).build();
   return composite;
 };
 export {

package/dist/composite/card/video/short.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"short.mjs","sources":["../../../../source/composite/card/video/short.ts"],"sourcesContent":["import { ElementModel } from 'model';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n}\n\nexport default (props: CardVideoShortProps) => {\n  const { video } = props;\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'card-video-short-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        width: '100%',\n        aspectRatio: '9/16',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n\n          ['&:hover']: {\n            cursor: 'pointer',\n          },\n        },\n      },\n    },\n  });\n\n  const setPlay = () => {\n    if (video.paused) {\n      video.muted = true;\n      video.play();\n    }\n  };\n\n  const setPause = () => {\n    if (!video.paused) {\n      video.pause();\n    }\n  };\n\n  video.setAttribute('controls', 'true');\n  video.setAttribute(\n    'controlsList',\n    'nodownload nofullscreen noremoteplayback noplaybackrate\"',\n  );\n  video.setAttribute('preload', 'metadata');\n  video.setAttribute('playsinline', '');\n  video.setAttribute('muted', '');\n  video.addEventListener('mouseover', setPlay);\n  video.addEventListener('focus', setPlay);\n  video.addEventListener('mouseleave', setPause);\n  video.addEventListener('blur', setPause);\n\n  composite.element.appendChild(video);\n\n  return composite;\n};\n"],"names":["ElementModel.create"],"mappings":";AAMA,MAAA,QAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU;AAClB,QAAM,YAAYA,OAAoB;AAAA,IACpC,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,aAAa;AAAA,QAEb,CAAC,SAAS,GAAG;AAAA,UACX,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,UAEX,CAAC,SAAS,GAAG;AAAA,YACX,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,QAAM,UAAU,MAAM;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,KAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,QAAI,CAAC,MAAM,QAAQ;AACjB,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa,WAAW,UAAU;AACxC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,SAAS,OAAO;AACvC,QAAM,iBAAiB,cAAc,QAAQ;AAC7C,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,YAAU,QAAQ,YAAY,KAAK;AAEnC,SAAO;AACT;"}
+{"version":3,"file":"short.mjs","sources":["../../../../source/composite/card/video/short.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n}\n\nexport default (props: CardVideoShortProps) => {\n  const { video } = props;\n\n  const setPlay = () => {\n    if (video.paused) {\n      video.muted = true;\n      video.play();\n    }\n  };\n\n  const setPause = () => {\n    if (!video.paused) {\n      video.pause();\n    }\n  };\n\n  video.setAttribute('controls', 'true');\n  video.setAttribute(\n    'controlsList',\n    'nodownload nofullscreen noremoteplayback noplaybackrate\"',\n  );\n  video.setAttribute('preload', 'metadata');\n  video.setAttribute('playsinline', '');\n  video.setAttribute('muted', '');\n  video.addEventListener('mouseover', setPlay);\n  video.addEventListener('focus', setPlay);\n  video.addEventListener('mouseleave', setPause);\n  video.addEventListener('blur', setPause);\n\n  const composite = new ElementBuilder()\n    .withClassName('card-video-short-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        aspectRatio: '9/16',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n\n          ['&:hover']: {\n            cursor: 'pointer',\n          },\n        },\n      },\n    })\n    .withChild(video)\n    .build();\n\n  return composite;\n};\n"],"names":[],"mappings":";AAMA,MAAA,QAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU;AAElB,QAAM,UAAU,MAAM;AACpB,QAAI,MAAM,QAAQ;AAChB,YAAM,QAAQ;AACd,YAAM,KAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,QAAI,CAAC,MAAM,QAAQ;AACjB,YAAM,MAAA;AAAA,IACR;AAAA,EACF;AAEA,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa,WAAW,UAAU;AACxC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,SAAS,OAAO;AACvC,QAAM,iBAAiB,cAAc,QAAQ;AAC7C,QAAM,iBAAiB,QAAQ,QAAQ;AAEvC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MAEb,CAAC,SAAS,GAAG;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,QAEX,CAAC,SAAS,GAAG;AAAA,UACX,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF,CACD,EACA,UAAU,KAAK,EACf,MAAA;AAEH,SAAO;AACT;"}

package/dist/composite/carousel/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/carousel/_types.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAKtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAKD,MAAM,WAAW,sBAAsB;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAMD,MAAM,WAAW,iBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/carousel/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAUtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAKD,MAAM,WAAW,sBAAsB;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAMD,MAAM,WAAW,iBACf,SAAQ,sBAAsB,EAC5B,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/dist/composite/carousel/default/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const blocks = require("../elements/blocks.js");
 require("../elements/full-screen.js");
 require("../elements/overlay.js");