@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/composite/footer/options.mjs

@@ -1,37 +1,41 @@
-import { createMainSection, MainContainerStyles } from "./elements/main-section/index.mjs";
-import { createUtilitySection, UtilityContainerStyles } from "./elements/utility-section/index.mjs";
-import { VARIABLES, ELEMENTS } from "./globals.mjs";
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME, ATTRIBUTE_THEME, ATTRIBUTE_TYPE } = VARIABLES;
-let styles = `
-  .${ELEMENT_WRAPPER} {
-    container: ${ELEMENT_NAME} / inline-size;
-    overflow: hidden;
-  }
-    
-  ${MainContainerStyles}
-  ${UtilityContainerStyles}
-`;
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { createDiv } from "../../model/elements/index.mjs";
+import createMain from "./elements/main-section/index.mjs";
+import createUtility from "./elements/utility-section/index.mjs";
 const options = (props) => {
-  const {
-    isThemeLight,
-    isTypeSimple,
-    isTypeVisual,
-    isTypeMega,
-    slotUtilityLinks
-  } = props;
-  const wrapper = document.createElement("div");
-  const main = createMainSection(props);
-  const utility = createUtilitySection({ slotUtilityLinks });
-  const theme = isThemeLight ? "light" : "dark";
-  wrapper.setAttribute(ATTRIBUTE_THEME, theme);
-  if (isTypeSimple) wrapper.setAttribute(ATTRIBUTE_TYPE, "simple");
-  if (isTypeVisual) wrapper.setAttribute(ATTRIBUTE_TYPE, "visual");
-  if (isTypeMega) wrapper.setAttribute(ATTRIBUTE_TYPE, "mega");
-  wrapper.classList.add(ELEMENT_WRAPPER);
-  wrapper.appendChild(main);
-  wrapper.appendChild(utility);
-  return { element: wrapper, styles };
+  const { isThemeLight } = props;
+  const main = createMain(props);
+  const utility = createUtility(props);
+  const wrapper = createDiv({
+    className: "umd-footer-element-wrapper",
+    children: [main, utility],
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        overflow: "hidden",
+        ...isThemeLight && {
+          backgroundColor: token.color.gray.lightest,
+          ["& a"]: {
+            ...animation.line.slideUnderBlack,
+            ["&:not(:first-child)::before"]: {
+              backgroundColor: token.color.black
+            }
+          }
+        },
+        ["& p, & a, & span"]: {
+          color: token.color.white,
+          ...isThemeLight && {
+            color: token.color.gray.dark
+          }
+        }
+      }
+    }
+  });
+  return {
+    element: wrapper.element,
+    styles: wrapper.styles
+  };
 };
 export {
   options as default

package/dist/composite/footer/options.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"options.mjs","sources":["../../../source/composite/footer/options.ts"],"sourcesContent":["import {\n  createMainSection as createMain,\n  MainContainerStyles,\n  type MainSectionProps,\n} from './elements/main-section';\nimport {\n  createUtilitySection as createUtility,\n  UtilityContainerStyles,\n  type UtilityProps,\n} from './elements/utility-section';\nimport { ELEMENTS, VARIABLES } from './globals';\nimport { BaseProps } from './_types';\n\nexport interface FooterProps\n  extends BaseProps,\n    UtilityProps,\n    MainSectionProps {}\n\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME, ATTRIBUTE_THEME, ATTRIBUTE_TYPE } = VARIABLES;\n\nlet styles = `\n  .${ELEMENT_WRAPPER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: hidden;\n  }\n    \n  ${MainContainerStyles}\n  ${UtilityContainerStyles}\n`;\n\nexport default (props: FooterProps) => {\n  const {\n    isThemeLight,\n    isTypeSimple,\n    isTypeVisual,\n    isTypeMega,\n    slotUtilityLinks,\n  } = props;\n  const wrapper = document.createElement('div');\n  const main = createMain(props);\n  const utility = createUtility({ slotUtilityLinks });\n  const theme = isThemeLight ? 'light' : 'dark';\n\n  wrapper.setAttribute(ATTRIBUTE_THEME, theme);\n  if (isTypeSimple) wrapper.setAttribute(ATTRIBUTE_TYPE, 'simple');\n  if (isTypeVisual) wrapper.setAttribute(ATTRIBUTE_TYPE, 'visual');\n  if (isTypeMega) wrapper.setAttribute(ATTRIBUTE_TYPE, 'mega');\n\n  wrapper.classList.add(ELEMENT_WRAPPER);\n\n  wrapper.appendChild(main);\n  wrapper.appendChild(utility);\n\n  return { element: wrapper, styles };\n};\n"],"names":["createMain","createUtility"],"mappings":";;;AAkBA,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,cAAc,iBAAiB,eAAA,IAAmB;AAE1D,IAAI,SAAS;AAAA,KACR,eAAe;AAAA,iBACH,YAAY;AAAA;AAAA;AAAA;AAAA,IAIzB,mBAAmB;AAAA,IACnB,sBAAsB;AAAA;AAG1B,MAAA,UAAe,CAAC,UAAuB;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,OAAOA,kBAAW,KAAK;AAC7B,QAAM,UAAUC,qBAAc,EAAE,kBAAkB;AAClD,QAAM,QAAQ,eAAe,UAAU;AAEvC,UAAQ,aAAa,iBAAiB,KAAK;AAC3C,MAAI,aAAc,SAAQ,aAAa,gBAAgB,QAAQ;AAC/D,MAAI,aAAc,SAAQ,aAAa,gBAAgB,QAAQ;AAC/D,MAAI,WAAY,SAAQ,aAAa,gBAAgB,MAAM;AAE3D,UAAQ,UAAU,IAAI,eAAe;AAErC,UAAQ,YAAY,IAAI;AACxB,UAAQ,YAAY,OAAO;AAE3B,SAAO,EAAE,SAAS,SAAS,OAAA;AAC7B;"}
+{"version":3,"file":"options.mjs","sources":["../../../source/composite/footer/options.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { ElementModel } from 'model';\nimport createMain, { type MainSectionProps } from './elements/main-section';\nimport createUtility, { type UtilityProps } from './elements/utility-section';\nimport { BaseProps } from './_types';\n\nexport interface FooterProps\n  extends BaseProps,\n    UtilityProps,\n    MainSectionProps {}\n\nexport default (props: FooterProps) => {\n  const { isThemeLight } = props;\n\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'umd-footer-element-wrapper',\n    children: [main, utility],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        overflow: 'hidden',\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.lightest,\n\n          ['& a']: {\n            ...animation.line.slideUnderBlack,\n\n            ['&:not(:first-child)::before']: {\n              backgroundColor: token.color.black,\n            },\n          },\n        }),\n\n        ['& p, & a, & span']: {\n          color: token.color.white,\n\n          ...(isThemeLight && {\n            color: token.color.gray.dark,\n          }),\n        },\n      },\n    },\n  });\n\n  return {\n    element: wrapper.element,\n    styles: wrapper.styles,\n  };\n};\n"],"names":["ElementModel.createDiv"],"mappings":";;;;;AAYA,MAAA,UAAe,CAAC,UAAuB;AACrC,QAAM,EAAE,iBAAiB;AAEzB,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,UAAU,cAAc,KAAK;AAEnC,QAAM,UAAUA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,OAAO;AAAA,IACxB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,QAEV,GAAI,gBAAgB;AAAA,UAClB,iBAAiB,MAAM,MAAM,KAAK;AAAA,UAElC,CAAC,KAAK,GAAG;AAAA,YACP,GAAG,UAAU,KAAK;AAAA,YAElB,CAAC,6BAA6B,GAAG;AAAA,cAC/B,iBAAiB,MAAM,MAAM;AAAA,YAAA;AAAA,UAC/B;AAAA,QACF;AAAA,QAGF,CAAC,kBAAkB,GAAG;AAAA,UACpB,OAAO,MAAM,MAAM;AAAA,UAEnB,GAAI,gBAAgB;AAAA,YAClB,OAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,SAAS,QAAQ;AAAA,IACjB,QAAQ,QAAQ;AAAA,EAAA;AAEpB;"}

package/dist/composite/hero/custom/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/expand.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,eAAe,IAAI,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG1E,UAAU,eAAgB,SAAQ,mBAAmB;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;yBAkXe,OAAO,eAAe;;oCA4BD;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;;;;;AA5B7D,wBA0CE"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/expand.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,eAAe,IAAI,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE1E,UAAU,eAAgB,SAAQ,mBAAmB;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;yBAkXe,OAAO,eAAe;;oCA4BD;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;;;;;AA5B7D,wBA0CE"}

package/dist/composite/hero/custom/expand.js

@@ -1,20 +1,31 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../../model/elements/index.js");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
-const media = require("../../../utilities/theme/media.js");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
 const toggle = require("../../../atomic/assets/video/toggle.js");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 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 layout = require("../../../model/elements/layout.js");
 const text = require("../../../model/elements/text.js");
 const headline = require("../../../model/elements/headline.js");
@@ -34,7 +45,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ANIMATION_CONFIG = {
   IMAGE_OVERLAY: {
     NAME: "img-overlay",
@@ -101,7 +112,7 @@ const createImageOverlay = () => index.createDiv({
       width: "100%",
       background: "rgba(0,0,0,0.65)",
       opacity: 1,
-      ...media.withViewTimelineAnimation({
+      ...styles.withViewTimelineAnimation({
         opacity: 0,
         animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,
         animationTimeline: "view()",
@@ -154,13 +165,13 @@ const createImageSize = (props) => {
         position: "relative",
         height: "100%",
         width: "100%",
-        ...media.withViewTimelineAnimation({
+        ...styles.withViewTimelineAnimation({
           height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,
           animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,
           animationTimeline: "view()",
           animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,
           animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,
-          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          [`@container (${token__namespace.media.queries.tablet.min})`]: {
             animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET
           }
         })
@@ -183,7 +194,7 @@ const createAssetContainer = (props) => index.createDiv({
       overflow: "clip",
       display: "flex",
       alignItems: "center",
-      ...media.withViewTimelineAnimation({
+      ...styles.withViewTimelineAnimation({
         width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,
         position: "absolute",
         top: 0,
@@ -193,7 +204,7 @@ const createAssetContainer = (props) => index.createDiv({
         animationTimeline: "view()",
         animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,
         animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
           width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,
           animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,
           animationTimeline: "view()",
@@ -210,7 +221,7 @@ const createEyebrow = (eyebrow) => {
     element: eyebrow,
     elementStyles: {
       siblingAfter: {
-        marginTop: Styles__namespace.token.spacing.md
+        marginTop: token__namespace.spacing.md
       }
     }
   });
@@ -223,11 +234,11 @@ const createHeadline = (headline$1) => {
     element: headline$1,
     elementStyles: {
       element: {
-        color: Styles__namespace.token.color.white,
+        color: token__namespace.color.white,
         fontWeight: 800,
         textTransform: "uppercase",
         textWrap: "balance",
-        [`@container (${Styles__namespace.token.media.queries.desktop.min})`]: {
+        [`@container (${token__namespace.media.queries.desktop.min})`]: {
           ...isOverwriteHeadline && {
             fontSize: "96px"
           }
@@ -261,7 +272,7 @@ const createBottomTextChildren = ({
       className: "hero-expand-text-actions",
       elementStyles: {
         siblingAfter: {
-          marginTop: Styles__namespace.token.spacing.lg
+          marginTop: token__namespace.spacing.lg
         }
       }
     });
@@ -286,7 +297,7 @@ const createTextContainer = (props) => {
       children: topTextChildren,
       elementStyles: {
         siblingAfter: {
-          marginTop: Styles__namespace.token.spacing.lg
+          marginTop: token__namespace.spacing.lg
         }
       }
     });
@@ -314,15 +325,15 @@ const createTextContainer = (props) => {
         height: "100%",
         zIndex: 9999,
         textAlign: "center",
-        padding: `${Styles__namespace.token.spacing.md} 0`,
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
-          padding: `${Styles__namespace.token.spacing["3xl"]} 0`,
+        padding: `${token__namespace.spacing.md} 0`,
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+          padding: `${token__namespace.spacing["3xl"]} 0`,
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between"
         },
-        [`@container (${Styles__namespace.token.media.queries.highDef.min})`]: {
-          padding: `${Styles__namespace.token.spacing["6xl"]} 0`
+        [`@container (${token__namespace.media.queries.highDef.min})`]: {
+          padding: `${token__namespace.spacing["6xl"]} 0`
         }
       }
     }
@@ -338,8 +349,8 @@ const createSticky = (props) => {
     elementStyles: {
       element: {
         position: "relative",
-        [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
-          ...media.withViewTimelineAnimation({
+        [`@container (${token__namespace.media.queries.tablet.min})`]: {
+          ...styles.withViewTimelineAnimation({
             position: "sticky",
             top: 0,
             height: "100vh"
@@ -361,9 +372,9 @@ const expand = (props) => {
     elementStyles: {
       element: {
         containerType: "inline-size",
-        ...media.withViewTimelineAnimation({
+        ...styles.withViewTimelineAnimation({
           position: "relative",
-          [`@container (${Styles__namespace.token.media.queries.tablet.min})`]: {
+          [`@container (${token__namespace.media.queries.tablet.min})`]: {
             height: "200vh"
           }
         }),

package/dist/composite/hero/custom/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\nimport { type ElementVisual, type ContentElement } from '../../../_types';\n\n// Extend the base type to add additional properties\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...theme.media.withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    },\n  });\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<HeroExpandProps, 'image' | 'video'>): ElementVisual | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n  const children = asset ? [asset, overlay] : [overlay];\n\n  const container = ElementModel.createDiv({\n    className: 'hero-expand-image-size',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...theme.media.withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-container',\n    children: [createImageSize(props)],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...theme.media.withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: {\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignMaximum({\n    element: headline,\n    elementStyles: {\n      element: {\n        color: Styles.token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<HeroExpandProps, 'eyebrow' | 'headline'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<HeroExpandProps, 'actions' | 'additional'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (actions) {\n    const actionsContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-actions',\n      elementStyles: {\n        siblingAfter: {\n          marginTop: Styles.token.spacing.lg,\n        },\n      },\n    });\n    actionsContainer.element.appendChild(actions);\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-additional',\n    });\n    additionalContainer.element.appendChild(additional);\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const textChildren: ElementVisual[] = [];\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: topTextChildren,\n      elementStyles: {\n        siblingAfter: {\n          marginTop: Styles.token.spacing.lg,\n        },\n      },\n    });\n    textChildren.push(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: bottomTextChildren,\n      elementStyles: {\n        element: {\n          width: '100%',\n        },\n      },\n    });\n    textChildren.push(bottomText);\n  }\n\n  return ElementModel.createDiv({\n    className: 'hero-expand-text-container',\n    children: textChildren,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${Styles.token.spacing.md} 0`,\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${Styles.token.media.queries.highDef.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0`,\n        },\n      },\n    },\n  });\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-expand-sticky',\n    children: [assetContainer, textContainer],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...theme.media.withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-hero-expand',\n    children: [sticky],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        ...theme.media.withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["ElementModel.createDiv","theme.media.withViewTimelineAnimation","assets.video.toggle","assets.image.background","Styles","ElementModel.text.ribbon","headline","ElementModel.headline.campaignMaximum","ElementModel.layout.spaceHorizontalNormal","ElementModel.create"],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\nimport { type ElementVisual, type ContentElement } from '../../../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    },\n  });\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<HeroExpandProps, 'image' | 'video'>): ElementVisual | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n  const children = asset ? [asset, overlay] : [overlay];\n\n  const container = ElementModel.createDiv({\n    className: 'hero-expand-image-size',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-container',\n    children: [createImageSize(props)],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: {\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignMaximum({\n    element: headline,\n    elementStyles: {\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<HeroExpandProps, 'eyebrow' | 'headline'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<HeroExpandProps, 'actions' | 'additional'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (actions) {\n    const actionsContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-actions',\n      elementStyles: {\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      },\n    });\n    actionsContainer.element.appendChild(actions);\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-additional',\n    });\n    additionalContainer.element.appendChild(additional);\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const textChildren: ElementVisual[] = [];\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: topTextChildren,\n      elementStyles: {\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      },\n    });\n    textChildren.push(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: bottomTextChildren,\n      elementStyles: {\n        element: {\n          width: '100%',\n        },\n      },\n    });\n    textChildren.push(bottomText);\n  }\n\n  return ElementModel.createDiv({\n    className: 'hero-expand-text-container',\n    children: textChildren,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    },\n  });\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-expand-sticky',\n    children: [assetContainer, textContainer],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-hero-expand',\n    children: [sticky],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["ElementModel.createDiv","withViewTimelineAnimation","assets.video.toggle","assets.image.background","token","ElementModel.text.ribbon","headline","ElementModel.headline.campaignMaximum","ElementModel.layout.spaceHorizontalNormal","ElementModel.create"],"mappings":"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"}

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

@@ -1,19 +1,30 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
 import { create, createDiv } from "../../../model/elements/index.mjs";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
-import { withViewTimelineAnimation } from "../../../utilities/theme/media.mjs";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
 import toggle from "../../../atomic/assets/video/toggle.mjs";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 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";
 import { spaceHorizontalNormal } from "../../../model/elements/layout.mjs";
 import { ribbon } from "../../../model/elements/text.mjs";
 import { campaignMaximum } from "../../../model/elements/headline.mjs";
@@ -142,7 +153,7 @@ const createImageSize = (props) => {
           animationTimeline: "view()",
           animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,
           animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,
-          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          [`@container (${token.media.queries.tablet.min})`]: {
             animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET
           }
         })
@@ -175,7 +186,7 @@ const createAssetContainer = (props) => createDiv({
         animationTimeline: "view()",
         animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,
         animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,
           animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,
           animationTimeline: "view()",
@@ -192,7 +203,7 @@ const createEyebrow = (eyebrow) => {
     element: eyebrow,
     elementStyles: {
       siblingAfter: {
-        marginTop: Styles.token.spacing.md
+        marginTop: token.spacing.md
       }
     }
   });
@@ -205,11 +216,11 @@ const createHeadline = (headline) => {
     element: headline,
     elementStyles: {
       element: {
-        color: Styles.token.color.white,
+        color: token.color.white,
         fontWeight: 800,
         textTransform: "uppercase",
         textWrap: "balance",
-        [`@container (${Styles.token.media.queries.desktop.min})`]: {
+        [`@container (${token.media.queries.desktop.min})`]: {
           ...isOverwriteHeadline && {
             fontSize: "96px"
           }
@@ -243,7 +254,7 @@ const createBottomTextChildren = ({
       className: "hero-expand-text-actions",
       elementStyles: {
         siblingAfter: {
-          marginTop: Styles.token.spacing.lg
+          marginTop: token.spacing.lg
         }
       }
     });
@@ -268,7 +279,7 @@ const createTextContainer = (props) => {
       children: topTextChildren,
       elementStyles: {
         siblingAfter: {
-          marginTop: Styles.token.spacing.lg
+          marginTop: token.spacing.lg
         }
       }
     });
@@ -296,15 +307,15 @@ const createTextContainer = (props) => {
         height: "100%",
         zIndex: 9999,
         textAlign: "center",
-        padding: `${Styles.token.spacing.md} 0`,
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
-          padding: `${Styles.token.spacing["3xl"]} 0`,
+        padding: `${token.spacing.md} 0`,
+        [`@container (${token.media.queries.tablet.min})`]: {
+          padding: `${token.spacing["3xl"]} 0`,
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between"
         },
-        [`@container (${Styles.token.media.queries.highDef.min})`]: {
-          padding: `${Styles.token.spacing["6xl"]} 0`
+        [`@container (${token.media.queries.highDef.min})`]: {
+          padding: `${token.spacing["6xl"]} 0`
         }
       }
     }
@@ -320,7 +331,7 @@ const createSticky = (props) => {
     elementStyles: {
       element: {
         position: "relative",
-        [`@container (${Styles.token.media.queries.tablet.min})`]: {
+        [`@container (${token.media.queries.tablet.min})`]: {
           ...withViewTimelineAnimation({
             position: "sticky",
             top: 0,
@@ -345,7 +356,7 @@ const expand = (props) => {
         containerType: "inline-size",
         ...withViewTimelineAnimation({
           position: "relative",
-          [`@container (${Styles.token.media.queries.tablet.min})`]: {
+          [`@container (${token.media.queries.tablet.min})`]: {
             height: "200vh"
           }
         }),

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

@@ -1 +1 @@
-{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\nimport { type ElementVisual, type ContentElement } from '../../../_types';\n\n// Extend the base type to add additional properties\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...theme.media.withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    },\n  });\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<HeroExpandProps, 'image' | 'video'>): ElementVisual | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n  const children = asset ? [asset, overlay] : [overlay];\n\n  const container = ElementModel.createDiv({\n    className: 'hero-expand-image-size',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...theme.media.withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-container',\n    children: [createImageSize(props)],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...theme.media.withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: {\n      siblingAfter: {\n        marginTop: Styles.token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignMaximum({\n    element: headline,\n    elementStyles: {\n      element: {\n        color: Styles.token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${Styles.token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<HeroExpandProps, 'eyebrow' | 'headline'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<HeroExpandProps, 'actions' | 'additional'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (actions) {\n    const actionsContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-actions',\n      elementStyles: {\n        siblingAfter: {\n          marginTop: Styles.token.spacing.lg,\n        },\n      },\n    });\n    actionsContainer.element.appendChild(actions);\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-additional',\n    });\n    additionalContainer.element.appendChild(additional);\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const textChildren: ElementVisual[] = [];\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: topTextChildren,\n      elementStyles: {\n        siblingAfter: {\n          marginTop: Styles.token.spacing.lg,\n        },\n      },\n    });\n    textChildren.push(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: bottomTextChildren,\n      elementStyles: {\n        element: {\n          width: '100%',\n        },\n      },\n    });\n    textChildren.push(bottomText);\n  }\n\n  return ElementModel.createDiv({\n    className: 'hero-expand-text-container',\n    children: textChildren,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${Styles.token.spacing.md} 0`,\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          padding: `${Styles.token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${Styles.token.media.queries.highDef.min})`]: {\n          padding: `${Styles.token.spacing['6xl']} 0`,\n        },\n      },\n    },\n  });\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-expand-sticky',\n    children: [assetContainer, textContainer],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@container (${Styles.token.media.queries.tablet.min})`]: {\n          ...theme.media.withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-hero-expand',\n    children: [sticky],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        ...theme.media.withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${Styles.token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["ElementModel.createDiv","theme.media.withViewTimelineAnimation","assets.video.toggle","assets.image.background","ElementModel.text.ribbon","ElementModel.headline.campaignMaximum","ElementModel.layout.spaceHorizontalNormal","ElementModel.create"],"mappings":"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"}
+{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/hero/custom/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { assets } from 'atomic';\nimport { type HeroExpandProps as BaseHeroExpandProps } from '../_types';\nimport { type ElementVisual, type ContentElement } from '../../../_types';\n\ninterface HeroExpandProps extends BaseHeroExpandProps {\n  eyebrow?: ContentElement;\n  additional?: HTMLSlotElement | null;\n}\n\nconst ANIMATION_CONFIG = {\n  IMAGE_OVERLAY: {\n    NAME: 'img-overlay',\n    RANGE: {\n      START: '70vh',\n      END: '100vh',\n    },\n  },\n  IMAGE_SIZE: {\n    NAME: 'img-size',\n    INITIAL_HEIGHT: '50vh',\n    FINAL_HEIGHT: '100vh',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      END_TABLET: '200vh',\n    },\n  },\n  COMPONENT_SIZE: {\n    NAME: 'component-size',\n    NAME_TABLET: 'component-size-tablet',\n    INITIAL_WIDTH: '10%',\n    INITIAL_WIDTH_TABLET: '60%',\n    FINAL_WIDTH: '100vw',\n    RANGE: {\n      START: '40vh',\n      END: '100vh',\n      START_TABLET: '60vh',\n      END_TABLET: '200vh',\n    },\n  },\n} as const;\n\nconst keyFrameImgOverlay = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n\nconst keyFrameImgSize = `\n  @keyframes ${ANIMATION_CONFIG.IMAGE_SIZE.NAME} {\n    from { height: ${ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT}; }\n    to { height: ${ANIMATION_CONFIG.IMAGE_SIZE.FINAL_HEIGHT}; }\n  }\n`;\n\nconst keyFrameComponentSize = `\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n\n  @keyframes ${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} {\n    from { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET}; }\n    to { width: ${ANIMATION_CONFIG.COMPONENT_SIZE.FINAL_WIDTH}; }\n  }\n`;\n\nconst createImageOverlay = () =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-overlay',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n\n        ...withViewTimelineAnimation({\n          opacity: 0,\n          animation: `${ANIMATION_CONFIG.IMAGE_OVERLAY.NAME} forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_OVERLAY.RANGE.END,\n        }),\n      },\n    },\n  });\n\nconst createAssetElement = ({\n  image,\n  video,\n}: Pick<HeroExpandProps, 'image' | 'video'>): ElementVisual | null => {\n  if (video) {\n    return assets.video.toggle({\n      video,\n      additionalElementStyles: {\n        width: '100%',\n        height: '100%',\n        position: 'relative',\n        overflow: 'hidden',\n\n        [`& video`]: {\n          height: '100%',\n          width: '100%',\n          objectFit: 'cover',\n        },\n      },\n    });\n  }\n  if (image) {\n    return assets.image.background({\n      element: image,\n      isScaled: true,\n      isGifAllowed: true,\n      isShowCaption: true,\n    });\n  }\n\n  return null;\n};\n\nconst createImageSize = (props: Pick<HeroExpandProps, 'image' | 'video'>) => {\n  const overlay = createImageOverlay();\n  const asset = createAssetElement(props);\n  const children = asset ? [asset, overlay] : [overlay];\n\n  const container = ElementModel.createDiv({\n    className: 'hero-expand-image-size',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        height: '100%',\n        width: '100%',\n\n        ...withViewTimelineAnimation({\n          height: ANIMATION_CONFIG.IMAGE_SIZE.INITIAL_HEIGHT,\n          animation: `${ANIMATION_CONFIG.IMAGE_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            animationRangeEnd: ANIMATION_CONFIG.IMAGE_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\n  return container;\n};\n\nconst createAssetContainer = (\n  props: Pick<HeroExpandProps, 'image' | 'video'>,\n) =>\n  ElementModel.createDiv({\n    className: 'hero-expand-image-container',\n    children: [createImageSize(props)],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: '50%',\n        transform: 'translateX(-50%)',\n        width: '100vw',\n        height: '100%',\n        overflow: 'clip',\n        display: 'flex',\n        alignItems: 'center',\n\n        ...withViewTimelineAnimation({\n          width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH,\n          position: 'absolute',\n          top: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME} ease-in-out forwards`,\n          animationTimeline: 'view()',\n          animationRangeStart: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START,\n          animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END,\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            width: ANIMATION_CONFIG.COMPONENT_SIZE.INITIAL_WIDTH_TABLET,\n            animation: `${ANIMATION_CONFIG.COMPONENT_SIZE.NAME_TABLET} ease-in-out forwards`,\n            animationTimeline: 'view()',\n            animationRangeStart:\n              ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.START_TABLET,\n            animationRangeEnd: ANIMATION_CONFIG.COMPONENT_SIZE.RANGE.END_TABLET,\n          },\n        }),\n      },\n    },\n  });\n\nconst createEyebrow = (eyebrow?: HTMLElement | null) => {\n  if (!eyebrow) return null;\n\n  return ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: {\n      siblingAfter: {\n        marginTop: token.spacing.md,\n      },\n    },\n  });\n};\n\nconst createHeadline = (headline?: HTMLElement | null) => {\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return ElementModel.headline.campaignMaximum({\n    element: headline,\n    elementStyles: {\n      element: {\n        color: token.color.white,\n        fontWeight: 800,\n        textTransform: 'uppercase',\n        textWrap: 'balance',\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '96px',\n          }),\n        },\n      },\n    },\n  });\n};\n\nconst createTopTextChildren = ({\n  eyebrow,\n  headline,\n}: Pick<HeroExpandProps, 'eyebrow' | 'headline'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  const eyebrowElement = createEyebrow(eyebrow);\n  if (eyebrowElement) {\n    children.push(eyebrowElement);\n  }\n\n  const headlineElement = createHeadline(headline);\n  if (headlineElement) {\n    children.push(headlineElement);\n  }\n\n  return children;\n};\n\nconst createBottomTextChildren = ({\n  actions,\n  additional,\n}: Pick<HeroExpandProps, 'actions' | 'additional'>): ElementVisual[] => {\n  const children: ElementVisual[] = [];\n\n  if (actions) {\n    const actionsContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-actions',\n      elementStyles: {\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      },\n    });\n    actionsContainer.element.appendChild(actions);\n    children.push(actionsContainer);\n  }\n\n  if (additional) {\n    const additionalContainer = ElementModel.createDiv({\n      className: 'hero-expand-text-additional',\n    });\n    additionalContainer.element.appendChild(additional);\n    children.push(additionalContainer);\n  }\n\n  return children;\n};\n\nconst createTextContainer = (\n  props: Pick<\n    HeroExpandProps,\n    'eyebrow' | 'headline' | 'actions' | 'additional'\n  >,\n) => {\n  const textChildren: ElementVisual[] = [];\n\n  const topTextChildren = createTopTextChildren(props);\n  if (topTextChildren.length > 0) {\n    const topText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: topTextChildren,\n      elementStyles: {\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      },\n    });\n    textChildren.push(topText);\n  }\n\n  const bottomTextChildren = createBottomTextChildren(props);\n  if (bottomTextChildren.length > 0) {\n    const bottomText = ElementModel.layout.spaceHorizontalNormal({\n      element: document.createElement('div'),\n      children: bottomTextChildren,\n      elementStyles: {\n        element: {\n          width: '100%',\n        },\n      },\n    });\n    textChildren.push(bottomText);\n  }\n\n  return ElementModel.createDiv({\n    className: 'hero-expand-text-container',\n    children: textChildren,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        height: '100%',\n        zIndex: 9999,\n        textAlign: 'center',\n        padding: `${token.spacing.md} 0`,\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          padding: `${token.spacing['3xl']} 0`,\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n        },\n\n        [`@container (${token.media.queries.highDef.min})`]: {\n          padding: `${token.spacing['6xl']} 0`,\n        },\n      },\n    },\n  });\n};\n\nconst createSticky = (props: HeroExpandProps) => {\n  const assetContainer = createAssetContainer(props);\n  const textContainer = createTextContainer(props);\n\n  return ElementModel.create({\n    element: document.createElement('div'),\n    className: 'hero-expand-sticky',\n    children: [assetContainer, textContainer],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@container (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            position: 'sticky',\n            top: 0,\n            height: '100vh',\n          }),\n        },\n\n        [`@supports (not (animation-timeline: view()))`]: {\n          top: '0 !important',\n        },\n      },\n    },\n  });\n};\n\nexport default (props: HeroExpandProps) => {\n  const sticky = createSticky(props);\n\n  const composite = ElementModel.create({\n    element: document.createElement('div'),\n    className: 'umd-hero-expand',\n    children: [sticky],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n\n          [`@container (${token.media.queries.tablet.min})`]: {\n            height: '200vh',\n          },\n        }),\n\n        ['& img, & video']: {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    },\n  });\n\n  const setTopPosition = ({ value }: { value: string | null }) => {\n    sticky.element.style.top = value || '0';\n  };\n\n  composite.styles += keyFrameImgOverlay;\n  composite.styles += keyFrameImgSize;\n  composite.styles += keyFrameComponentSize;\n\n  return {\n    ...composite,\n    events: {\n      setTopPosition,\n    },\n  };\n};\n"],"names":["ElementModel.createDiv","assets.video.toggle","assets.image.background","ElementModel.text.ribbon","ElementModel.headline.campaignMaximum","ElementModel.layout.spaceHorizontalNormal","ElementModel.create"],"mappings":"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"}

package/dist/composite/hero/custom/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAmZe,OAAO,aAAa;;;;;AAApC,wBAyCE"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../source/composite/hero/custom/grid.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACjC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAmZe,OAAO,aAAa;;;;;AAApC,wBAyCE"}