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

package/dist/composite/pathway/hero.js

@@ -111,6 +111,8 @@ const createAssetColumn = ({
       createVideoObservedAutoPlay({
         video,
         isScaled: true,
+        videoPreload: "auto",
+        videoFetchPriority: "high",
         additionalElementStyles: {
           display: "flex",
           justifyContent: "center",
@@ -125,7 +127,9 @@ const createAssetColumn = ({
         element: image,
         isScaled: true,
         isShowCaption: true,
-        isGifAllowed: true
+        isGifAllowed: true,
+        imageLoading: "eager",
+        imageFetchPriority: "high"
       })
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.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 { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\n\ninterface PathwayHeroProps {\n  actions: HTMLElement | null;\n  eyebrow: HTMLElement | null;\n  headline: HTMLElement | null;\n  image: HTMLImageElement | null;\n  includesAnimation?: boolean;\n  isImagePositionLeft?: boolean;\n  isThemeDark?: boolean;\n  text: HTMLElement | null;\n  video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n  @keyframes pathway-hero-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFramePathwaySlideUp = `\n  @keyframes pathway-hero-slide-up {\n    from { \n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to { \n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createAssetColumn = ({\n  image,\n  video,\n  includesAnimation,\n  isImagePositionLeft,\n}: Pick<\n  PathwayHeroProps,\n  'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n  if (!image && !video) return;\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-asset-wrapper')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@container (max-width: ${BREAK_SMALL}px)`]: {\n          aspectRatio: '16 / 9',\n        },\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          width: '50%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n          height: '100%',\n\n          ...(!isImagePositionLeft && {\n            left: 'inherit',\n            right: 0,\n          }),\n        },\n\n        [`& img, & video`]: {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            ...(includesAnimation && {\n              ...withViewTimelineAnimation({\n                animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n              }),\n            }),\n          },\n        },\n      },\n    });\n\n  if (video) {\n    builder.withChild(\n      assets.video.observedAutoPlay({\n        video,\n        isScaled: true,\n        additionalElementStyles: {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      }),\n    );\n  }\n\n  if (image && !video) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: true,\n        isShowCaption: true,\n        isGifAllowed: true,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.black,\n        margin: '0 auto',\n        textTransform: 'uppercase',\n        marginTop: `${token.spacing.sm}`,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          textDecoration: 'underline',\n        },\n      },\n      siblingAfter: {\n        marginTop: `${token.spacing.md}`,\n      },\n    })\n    .build();\n};\n\nconst createTextColumn = (\n  props: Pick<\n    PathwayHeroProps,\n    'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n  >,\n) => {\n  const { headline, eyebrow, text, ...rest } = props;\n\n  return textLockup.large({\n    ...rest,\n    ribbon: eyebrow,\n    textLargest: text,\n    headlineComposite: createHeadline({ headline }),\n    additionalStyles: {\n      maxWidth: '720px',\n    },\n  });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-hero-container-lock-wrapper')\n    .withChild(createTextColumn(props))\n    .withStyles({\n      element: {\n        width: '100%',\n\n        [`@container  (max-width: ${BREAK_SMALL}px)`]: {\n          padding: `${token.spacing.md} 0`,\n        },\n\n        [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']} 0`,\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: 0,\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: 0,\n          }),\n\n          ...(props.includesAnimation && {\n            ...withViewTimelineAnimation({\n              animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            }),\n          }),\n        },\n\n        [`@container  (min-width: ${BREAK_LARGE}px)`]: {\n          padding: `${token.spacing['8xl']} 0`,\n        },\n      },\n    })\n    .build();\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(createTextWrapper(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n          minHeight: '720px',\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: token.spacing['2xl'],\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: token.spacing['2xl'],\n            order: 1,\n          }),\n        },\n\n        [`@container (min-width: ${BREAK_LARGE}px)`]: {\n          ...(!props.isImagePositionLeft && {\n            paddingRight: token.spacing['4xl'],\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingLeft: token.spacing['4xl'],\n          }),\n        },\n      },\n    })\n    .build();\n\nconst createWrapper = (props: PathwayHeroProps) => {\n  const { isImagePositionLeft = false } = props;\n  const imageColumn = createAssetColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...(isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingLeft: '50%',\n          },\n        }),\n\n        ...(!isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingRight: '50%',\n          },\n        }),\n      },\n    });\n\n  if (imageColumn) {\n    builder.withChild(imageColumn);\n  }\n\n  builder.withChild(createLockColumn(props));\n\n  return builder.build();\n};\n\nconst CreatePathwayHeroElement = (props: PathwayHeroProps) => {\n  const composite = new ElementBuilder()\n    .withClassName('pathway-hero-container')\n    .withChild(createWrapper(props))\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  composite.styles += keyFramePathwayResize;\n  composite.styles += keyFramePathwaySlideUp;\n\n  return composite;\n};\n\nexport const createCompositePathwayHero = CreatePathwayHeroElement;\n"],"names":["assets.video.observedAutoPlay","assets.image.background","textLockup.large"],"mappings":"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"}
+{"version":3,"file":"hero.js","sources":["../../../source/composite/pathway/hero.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 { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\n\ninterface PathwayHeroProps {\n  actions: HTMLElement | null;\n  eyebrow: HTMLElement | null;\n  headline: HTMLElement | null;\n  image: HTMLImageElement | null;\n  includesAnimation?: boolean;\n  isImagePositionLeft?: boolean;\n  isThemeDark?: boolean;\n  text: HTMLElement | null;\n  video: HTMLVideoElement | null;\n}\n\n// Constants\nconst BREAK_SMALL = 999;\nconst BREAK_MEDIUM = 1000;\nconst BREAK_LARGE = 1300;\n\nconst ANIMATION_CONFIG = {\n  RESIZE: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'scale(1.1)',\n      TO: 'scale(1)',\n    },\n  },\n  SLIDE_UP: {\n    DURATION: '1.5s',\n    TRANSFORM: {\n      FROM: 'translateY(25px)',\n      TO: 'translateY(0)',\n    },\n    OPACITY: {\n      FROM: 0.2,\n      TO: 1,\n    },\n  },\n} as const;\n\n// Keyframe animations\nconst keyFramePathwayResize = `\n  @keyframes pathway-hero-resize {\n    from { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.FROM}; }\n    to { transform: ${ANIMATION_CONFIG.RESIZE.TRANSFORM.TO}; }\n  }\n`;\n\nconst keyFramePathwaySlideUp = `\n  @keyframes pathway-hero-slide-up {\n    from { \n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.FROM}; \n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.FROM};\n    }\n    to { \n      transform: ${ANIMATION_CONFIG.SLIDE_UP.TRANSFORM.TO}; \n      opacity: ${ANIMATION_CONFIG.SLIDE_UP.OPACITY.TO};\n    }\n  }\n`;\n\nconst createAssetColumn = ({\n  image,\n  video,\n  includesAnimation,\n  isImagePositionLeft,\n}: Pick<\n  PathwayHeroProps,\n  'image' | 'video' | 'includesAnimation' | 'isImagePositionLeft'\n>) => {\n  if (!image && !video) return;\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-asset-wrapper')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@container (max-width: ${BREAK_SMALL}px)`]: {\n          aspectRatio: '16 / 9',\n        },\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          width: '50%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n          height: '100%',\n\n          ...(!isImagePositionLeft && {\n            left: 'inherit',\n            right: 0,\n          }),\n        },\n\n        [`& img, & video`]: {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            ...(includesAnimation && {\n              ...withViewTimelineAnimation({\n                animation: `pathway-hero-resize forwards ${ANIMATION_CONFIG.RESIZE.DURATION}`,\n              }),\n            }),\n          },\n        },\n      },\n    });\n\n  if (video) {\n    builder.withChild(\n      assets.video.observedAutoPlay({\n        video,\n        isScaled: true,\n        videoPreload: 'auto',\n        videoFetchPriority: 'high',\n        additionalElementStyles: {\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        },\n      }),\n    );\n  }\n\n  if (image && !video) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: true,\n        isShowCaption: true,\n        isGifAllowed: true,\n        imageLoading: 'eager',\n        imageFetchPriority: 'high',\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nconst createHeadline = (props: Pick<PathwayHeroProps, 'headline'>) => {\n  const { headline } = props;\n  const characterCount = headline?.textContent?.trim().length || 0;\n  const isOverwriteHeadline = characterCount > 30;\n\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(Styles.typography.campaign.fonts.extraLarge)\n    .withStyles({\n      element: {\n        color: token.color.black,\n        margin: '0 auto',\n        textTransform: 'uppercase',\n        marginTop: `${token.spacing.sm}`,\n\n        [`@container (${token.media.queries.desktop.min})`]: {\n          ...(isOverwriteHeadline && {\n            fontSize: '80px',\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          textDecoration: 'underline',\n        },\n      },\n      siblingAfter: {\n        marginTop: `${token.spacing.md}`,\n      },\n    })\n    .build();\n};\n\nconst createTextColumn = (\n  props: Pick<\n    PathwayHeroProps,\n    'actions' | 'eyebrow' | 'headline' | 'isThemeDark' | 'text'\n  >,\n) => {\n  const { headline, eyebrow, text, ...rest } = props;\n\n  return textLockup.large({\n    ...rest,\n    ribbon: eyebrow,\n    textLargest: text,\n    headlineComposite: createHeadline({ headline }),\n    additionalStyles: {\n      maxWidth: '720px',\n    },\n  });\n};\n\nconst createTextWrapper = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-hero-container-lock-wrapper')\n    .withChild(createTextColumn(props))\n    .withStyles({\n      element: {\n        width: '100%',\n\n        [`@container  (max-width: ${BREAK_SMALL}px)`]: {\n          padding: `${token.spacing.md} 0`,\n        },\n\n        [`@container  (min-width: ${BREAK_MEDIUM}px)`]: {\n          padding: `${token.spacing['4xl']} 0`,\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: 0,\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: 0,\n          }),\n\n          ...(props.includesAnimation && {\n            ...withViewTimelineAnimation({\n              animation: `pathway-hero-slide-up forwards ${ANIMATION_CONFIG.SLIDE_UP.DURATION}`,\n            }),\n          }),\n        },\n\n        [`@container  (min-width: ${BREAK_LARGE}px)`]: {\n          padding: `${token.spacing['8xl']} 0`,\n        },\n      },\n    })\n    .build();\n\nconst createLockColumn = (props: PathwayHeroProps) =>\n  new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(createTextWrapper(props))\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n          minHeight: '720px',\n\n          ...(props.isImagePositionLeft && {\n            paddingRight: token.spacing['2xl'],\n          }),\n\n          ...(!props.isImagePositionLeft && {\n            paddingLeft: token.spacing['2xl'],\n            order: 1,\n          }),\n        },\n\n        [`@container (min-width: ${BREAK_LARGE}px)`]: {\n          ...(!props.isImagePositionLeft && {\n            paddingRight: token.spacing['4xl'],\n          }),\n\n          ...(props.isImagePositionLeft && {\n            paddingLeft: token.spacing['4xl'],\n          }),\n        },\n      },\n    })\n    .build();\n\nconst createWrapper = (props: PathwayHeroProps) => {\n  const { isImagePositionLeft = false } = props;\n  const imageColumn = createAssetColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('pathway-hero-container-wrapper')\n    .withStyles({\n      element: {\n        position: 'relative',\n\n        ...(isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingLeft: '50%',\n          },\n        }),\n\n        ...(!isImagePositionLeft && {\n          [`@container (min-width: ${BREAK_MEDIUM}px)`]: {\n            paddingRight: '50%',\n          },\n        }),\n      },\n    });\n\n  if (imageColumn) {\n    builder.withChild(imageColumn);\n  }\n\n  builder.withChild(createLockColumn(props));\n\n  return builder.build();\n};\n\nconst CreatePathwayHeroElement = (props: PathwayHeroProps) => {\n  const composite = new ElementBuilder()\n    .withClassName('pathway-hero-container')\n    .withChild(createWrapper(props))\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  composite.styles += keyFramePathwayResize;\n  composite.styles += keyFramePathwaySlideUp;\n\n  return composite;\n};\n\nexport const createCompositePathwayHero = CreatePathwayHeroElement;\n"],"names":["assets.video.observedAutoPlay","assets.image.background","textLockup.large"],"mappings":"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"}

package/dist/composite/pathway/highlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/highlight.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAgMjD,eAAO,MAAM,+BAA+B,UAXE,qBAAqB,kFAWS,CAAC"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../source/composite/pathway/highlight.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAoMjD,eAAO,MAAM,+BAA+B,UAXE,qBAAqB,kFAWS,CAAC"}

package/dist/composite/pathway/highlight.js

@@ -62,6 +62,9 @@ const createHighlightColumn = ({
           width: "2px",
           height: "100%"
         }
+      },
+      ["& *"]: {
+        color: "currentColor"
       }
     }
   });

package/dist/composite/pathway/highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (\n  props: PathwayHighlightProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-highlight-column-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n      },\n    });\n\n  if (quote) {\n    wrapper.withChild(\n      new ElementBuilder(quote)\n        .styled(\n          Styles.typography.sans.compose('larger', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            fontWeight: '700',\n\n            ['& *']: {\n              color: 'currentColor',\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (attribution) {\n    wrapper.withChild(\n      new ElementBuilder(attribution)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-highlight-column-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withChild(highlightColumn)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst CreatePathwayHighlightElement = (props: PathwayHighlightProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-highlight-container')\n    .withChild(createLock(props))\n    .withStyles({\n      element: {\n        container: 'inline-size',\n      },\n    })\n    .build();\n\nexport const createCompositePathwayHighlight = CreatePathwayHighlightElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"highlight.js","sources":["../../../source/composite/pathway/highlight.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { createTextLockupMedium } from './_common';\nimport { PathwayHighlightProps } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumSize = 1000;\nconst largeSize = 1200;\n\nconst createTextContent = (\n  props: PathwayHighlightProps,\n): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-text-container-wrapper')\n    .withChild(createTextLockupMedium(props))\n    .withStyles({\n      element: {\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('pathway-text-container')\n    .withChild(wrapper)\n    .withStyles({\n      element: {\n        container: 'inline-size',\n        display: 'flex',\n        alignItems: 'center',\n        zIndex: '99',\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.black,\n        }),\n\n        ...(props.isThemeMaryland && {\n          backgroundColor: token.color.red,\n        }),\n\n        [`@container (max-width: ${mediumSize - 1}px)`]: {\n          paddingBottom: token.spacing.md,\n        },\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingRight: token.spacing['4xl'],\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          paddingRight: token.spacing['6xl'],\n        },\n      },\n    })\n    .build();\n\n  return container;\n};\n\nconst createHighlightColumn = ({\n  quote,\n  attribution,\n  isThemeDark,\n}: Pick<\n  PathwayHighlightProps,\n  'quote' | 'attribution' | 'isThemeDark'\n>): ElementModel<HTMLElement> => {\n  const wrapper = new ElementBuilder()\n    .withClassName('pathway-highlight-column-wrapper')\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          paddingLeft: token.spacing['xl'],\n          position: 'relative',\n        },\n\n        '&:before': {\n          content: \"''\",\n          position: 'absolute',\n          backgroundColor: token.color.red,\n\n          [`@container (max-width: ${mediumSize - 1}px)`]: {\n            top: token.spacing['2xl'],\n            width: token.spacing['5xl'],\n            height: '2px',\n          },\n\n          [`@container (min-width: ${mediumSize}px)`]: {\n            left: '0',\n            width: '2px',\n            height: '100%',\n          },\n        },\n\n        ['& *']: {\n          color: 'currentColor',\n        },\n      },\n    });\n\n  if (quote) {\n    wrapper.withChild(\n      new ElementBuilder(quote)\n        .styled(\n          Styles.typography.sans.compose('larger', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            fontWeight: '700',\n\n            ['& *']: {\n              color: 'currentColor',\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (attribution) {\n    wrapper.withChild(\n      new ElementBuilder(attribution)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('pathway-highlight-column-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        padding: `${token.spacing['5xl']} ${token.spacing.md} ${token.spacing.md} ${token.spacing.md}`,\n\n        [`@container (min-width: ${mediumSize}px)`]: {\n          padding: `${token.spacing['4xl']} ${token.spacing['2xl']}`,\n        },\n\n        [`@container (min-width: ${largeSize}px)`]: {\n          padding: `${token.spacing['8xl']} ${token.spacing['xl']}`,\n        },\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .build();\n};\n\nconst createLock = (props: PathwayHighlightProps) => {\n  const textContent = createTextContent(props);\n  const highlightColumn = createHighlightColumn(props);\n\n  return new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(textContent)\n    .withChild(highlightColumn)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${mediumSize}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *`]: {\n            width: '50%',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nconst CreatePathwayHighlightElement = (props: PathwayHighlightProps) =>\n  new ElementBuilder()\n    .withClassName('pathway-highlight-container')\n    .withChild(createLock(props))\n    .withStyles({\n      element: {\n        container: 'inline-size',\n      },\n    })\n    .build();\n\nexport const createCompositePathwayHighlight = CreatePathwayHighlightElement;\n"],"names":[],"mappings":";;;;;AAQA,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,oBAAoB,CACxB,UAC8B;AAC9B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,gCAAgC,EAC9C,UAAU,uBAAuB,KAAK,CAAC,EACvC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,wBAAwB,EACtC,UAAU,OAAO,EACjB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MAER,GAAI,MAAM,eAAe;AAAA,QACvB,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MAG/B,GAAI,MAAM,mBAAmB;AAAA,QAC3B,iBAAiB,MAAM,MAAM;AAAA,MAAA;AAAA,MAG/B,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,QAC/C,eAAe,MAAM,QAAQ;AAAA,MAAA;AAAA,MAG/B,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,QAC3C,cAAc,MAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,MAGnC,CAAC,0BAA0B,SAAS,KAAK,GAAG;AAAA,QAC1C,cAAc,MAAM,QAAQ,KAAK;AAAA,MAAA;AAAA,IACnC;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAGiC;AAC/B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,kCAAkC,EAChD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,QAC3C,aAAa,MAAM,QAAQ,IAAI;AAAA,QAC/B,UAAU;AAAA,MAAA;AAAA,MAGZ,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,iBAAiB,MAAM,MAAM;AAAA,QAE7B,CAAC,0BAA0B,aAAa,CAAC,KAAK,GAAG;AAAA,UAC/C,KAAK,MAAM,QAAQ,KAAK;AAAA,UACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,QAAQ;AAAA,QAAA;AAAA,QAGV,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,UAC3C,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAGF,CAAC,KAAK,GAAG;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,eAAe,KAAK,EACrB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,UAAU;AAAA,UACvC,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,YAAY;AAAA,UAEZ,CAAC,KAAK,GAAG;AAAA,YACP,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAI,eAAe,WAAW,EAC3B;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,UAAU;AAAA,UACvC,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,QAAM,eAAe,QAAQ,MAAA;AAE7B,SAAO,IAAI,iBACR,cAAc,oCAAoC,EAClD,UAAU,YAAY,EACtB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAClC,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,IAAI,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAE5F,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,QAC3C,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,MAAA;AAAA,MAG1D,CAAC,0BAA0B,SAAS,KAAK,GAAG;AAAA,QAC1C,SAAS,GAAG,MAAM,QAAQ,KAAK,CAAC,IAAI,MAAM,QAAQ,IAAI,CAAC;AAAA,MAAA;AAAA,MAGzD,GAAI,eAAe;AAAA,QACjB,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IACpC;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAAiC;AACnD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,kBAAkB,sBAAsB,KAAK;AAEnD,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,OAAO,MAAM,WAAW,MAAM,EAC5C,UAAU,WAAW,EACrB,UAAU,eAAe,EACzB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,0BAA0B,UAAU,KAAK,GAAG;AAAA,QAC3C,SAAS;AAAA,QACT,YAAY;AAAA,QAEZ,CAAC,OAAO,GAAG;AAAA,UACT,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gCAAgC,CAAC,UACrC,IAAI,iBACD,cAAc,6BAA6B,EAC3C,UAAU,WAAW,KAAK,CAAC,EAC3B,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW;AAAA,EAAA;AAEf,CAAC,EACA,MAAA;AAEE,MAAM,kCAAkC;"}

package/dist/composite/person/_types.d.ts

@@ -13,10 +13,10 @@ export interface PersonContact extends PersonTheme {
 }
 export interface Person extends PersonContact, PersonDisplay {
     name: HTMLElement | null;
-    job?: HTMLElement | null;
-    association?: HTMLElement | null;
-    pronouns?: HTMLElement | null;
-    subText?: HTMLElement | null;
+    slotOne?: HTMLElement | null;
+    slotTwo?: HTMLElement | null;
+    slotThreeItalic?: HTMLElement | null;
+    slotFour?: HTMLElement | null;
     actions?: HTMLElement | null;
 }
 export interface PersonCard extends Person {

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

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/person/_types.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,MAAO,SAAQ,aAAa,EAAE,aAAa;IAC1D,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/person/_types.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,aAAc,SAAQ,WAAW;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,MAAO,SAAQ,aAAa,EAAE,aAAa;IAC1D,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC"}

package/dist/composite/person/bio/full.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"full.d.ts","sourceRoot":"","sources":["../../../../source/composite/person/bio/full.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA2FpD,eAAO,MAAM,4BAA4B,UAzFE,SAAS,KAAG,YAAY,CAAC,WAAW,CAyFT,CAAC"}
+{"version":3,"file":"full.d.ts","sourceRoot":"","sources":["../../../../source/composite/person/bio/full.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAsGpD,eAAO,MAAM,4BAA4B,UAnGhC,SAAS,KACf,YAAY,CAAC,WAAW,CAkG2C,CAAC"}

package/dist/composite/person/bio/full.js

@@ -43,7 +43,8 @@ const CreatePersonBioFullElement = (props) => {
     builder.withChild(
       createImageBackground({
         element: image,
-        isScaled: false
+        isScaled: false,
+        imageLoading: "lazy"
       })
     );
   }
@@ -67,7 +68,15 @@ const CreatePersonBioFullElement = (props) => {
       }).build()
     );
   }
-  builder.withChild(createTextLockupPerson(textProps));
+  builder.withChild(
+    createTextLockupPerson({
+      isThemeDark,
+      slotOne: textProps.slotOne,
+      slotTwo: textProps.slotTwo,
+      slotThreeItalic: textProps.slotThreeItalic,
+      slotFour: textProps.slotFour
+    })
+  );
   builder.withChild(createTextLockupContact(props));
   if (description) {
     builder.withChild(

package/dist/composite/person/bio/full.js.map

@@ -1 +1 @@
-{"version":3,"file":"full.js","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst CreatePersonBioFullElement = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-full-container')\n    .withStyles({\n      element: {\n        [`& .${elementStyles.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person(textProps));\n  builder.withChild(textLockup.contact(props));\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonBioFull = CreatePersonBioFullElement;\n"],"names":["assets.image.background","textLockup.person","textLockup.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,6BAA6B,CAAC,UAAgD;AAClF,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAE/B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,2BAA2B,EACzC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,cAAc,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,QACrD,CAAC,0BAA0B,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GACrE;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACJ;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNA,sBAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACN,IAAI,eAAe,IAAI,EACpB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,UAC3C,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,UACzB,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UAET,GAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,MAAM,KAAK,GAAA;AAAA,QAAG;AAAA,QAEtD,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,UAAQ,UAAUC,uBAAkB,SAAS,CAAC;AAC9C,UAAQ,UAAUC,wBAAmB,KAAK,CAAC;AAE3C,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAI,eAAe,WAAW,EAC3B;AAAA,QACC,OAAO,QAAQ,KAAK,KAAK,cAAc;AAAA,UACrC,MAAM;AAAA,UACN,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,UACzB,UAAU,MAAM,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnC,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,SAAS;AACX,YAAQ;AAAA,MACN,IAAI,eAAe,OAAO,EACvB,OAAO,OAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,+BAA+B;"}
+{"version":3,"file":"full.js","sources":["../../../../source/composite/person/bio/full.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { type PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst CreatePersonBioFullElement = (\n  props: PersonBio,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, image, actions, description } = props;\n  const { name, ...textProps } = props;\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-full-container')\n    .withStyles({\n      element: {\n        [`& .${elementStyles.asset.image.wrapper.className}`]: {\n          [`@container (max-width: ${token.media.breakpointValues.medium.max}px)`]:\n            {\n              display: 'flex',\n            },\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        imageLoading: 'lazy',\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(\n    textLockup.person({\n      isThemeDark,\n      slotOne: textProps.slotOne,\n      slotTwo: textProps.slotTwo,\n      slotThreeItalic: textProps.slotThreeItalic,\n      slotFour: textProps.slotFour,\n    }),\n  );\n  builder.withChild(textLockup.contact(props));\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonBioFull = CreatePersonBioFullElement;\n"],"names":["assets.image.background","textLockup.person","textLockup.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,6BAA6B,CACjC,UAC8B;AAC9B,QAAM,EAAE,aAAa,OAAO,SAAS,gBAAgB;AACrD,QAAM,EAAE,MAAM,GAAG,UAAA,IAAc;AAE/B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,2BAA2B,EACzC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,cAAc,MAAM,MAAM,QAAQ,SAAS,EAAE,GAAG;AAAA,QACrD,CAAC,0BAA0B,MAAM,MAAM,iBAAiB,OAAO,GAAG,KAAK,GACrE;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACJ;AAAA,EACF,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNA,sBAAwB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAc;AAAA,MAAA,CACf;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACN,IAAI,eAAe,IAAI,EACpB;AAAA,QACC,OAAO,WAAW,KAAK,QAAQ,cAAc;AAAA,UAC3C,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,UACzB,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,SAAS;AAAA,UAET,GAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,MAAM,KAAK,GAAA;AAAA,QAAG;AAAA,QAEtD,cAAc;AAAA,UACZ,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,UAAQ;AAAA,IACNC,uBAAkB;AAAA,MAChB;AAAA,MACA,SAAS,UAAU;AAAA,MACnB,SAAS,UAAU;AAAA,MACnB,iBAAiB,UAAU;AAAA,MAC3B,UAAU,UAAU;AAAA,IAAA,CACrB;AAAA,EAAA;AAEH,UAAQ,UAAUC,wBAAmB,KAAK,CAAC;AAE3C,MAAI,aAAa;AACf,YAAQ;AAAA,MACN,IAAI,eAAe,WAAW,EAC3B;AAAA,QACC,OAAO,QAAQ,KAAK,KAAK,cAAc;AAAA,UACrC,MAAM;AAAA,UACN,OAAO,MAAM,UAAU,WAAW;AAAA,QAAA,CACnC;AAAA,MAAA,EAEF,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,UACzB,UAAU,MAAM,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnC,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,MAAI,SAAS;AACX,YAAQ;AAAA,MACN,IAAI,eAAe,OAAO,EACvB,OAAO,OAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,QACV,SAAS;AAAA,UACP,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B,CACD,EACA,MAAA;AAAA,IAAM;AAAA,EAEb;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,+BAA+B;"}

package/dist/composite/person/bio/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/person/bio/small.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA4KpD,eAAO,MAAM,6BAA6B,UA9BE,SAAS,KAAG,YAAY,CAAC,WAAW,CA8BR,CAAC"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/person/bio/small.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAuLpD,eAAO,MAAM,6BAA6B,UA/BjC,SAAS,KACf,YAAY,CAAC,WAAW,CA8B6C,CAAC"}

package/dist/composite/person/bio/small.js

@@ -52,7 +52,15 @@ const createTextContainer = (props) => {
       }).build()
     );
   }
-  builder.withChild(createTextLockupPerson({ ...textProps, isThemeDark }));
+  builder.withChild(
+    createTextLockupPerson({
+      isThemeDark,
+      slotOne: textProps.slotOne,
+      slotTwo: textProps.slotTwo,
+      slotThreeItalic: textProps.slotThreeItalic,
+      slotFour: textProps.slotFour
+    })
+  );
   return builder.build();
 };
 const createTextColumn = (props) => {
@@ -112,6 +120,7 @@ const makeContainer = (props) => {
       createImageBackground({
         element: image,
         isScaled: false,
+        imageLoading: "lazy",
         customStyles: {
           element: {
             ...createMediaQuery(

package/dist/composite/person/bio/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(textLockup.person({ ...textProps, isThemeDark }));\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nconst CreatePersonBioSmallElement = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonBioSmall = CreatePersonBioSmallElement;\n"],"names":["textLockup.person","textLockup.contact","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/person/bio/small.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 { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonBio } from '../_types';\nimport { type ElementModel } from '../../../_types';\n\nconst createTextContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { isThemeDark, name, ...textProps } = props;\n\n  const builder = new ElementBuilder().styled(\n    Styles.element.text.line.adjustentInset,\n  );\n\n  if (name) {\n    builder.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.sans.compose('extralarge', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '800',\n            display: 'block',\n            ...(!isThemeDark && { color: `${token.color.black}` }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  builder.withChild(\n    textLockup.person({\n      isThemeDark,\n      slotOne: textProps.slotOne,\n      slotTwo: textProps.slotTwo,\n      slotThreeItalic: textProps.slotThreeItalic,\n      slotFour: textProps.slotFour,\n    }),\n  );\n\n  return builder.build();\n};\n\nconst createTextColumn = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { actions } = props;\n  const textContainer = createTextContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-text-column')\n    .withChild(textContainer)\n    .withChild(textLockup.contact(props));\n\n  if (actions) {\n    builder.withChild(\n      new ElementBuilder(actions)\n        .styled(Styles.layout.grid.inline.tabletRows)\n        .withStyles({\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nconst makeContainer = (props: PersonBio): ElementModel<HTMLElement> => {\n  const { image } = props;\n  const textColumn = createTextColumn(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-container')\n    .withStyles({\n      element: {\n        display: 'grid',\n        gridGap: `${token.spacing.md}`,\n\n        ...createMediaQuery(\n          'min-width',\n          token.media.breakpointValues.large.min,\n          {\n            gridTemplateColumns: `repeat(8, 1fr)`,\n            gridGap: `${token.spacing.lg}`,\n            alignItems: `center`,\n          },\n        ),\n\n        [`& > *`]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 5`,\n            },\n          ),\n        },\n\n        [`&:has(> :nth-child(2)) > *:first-child `]: {\n          ...createMediaQuery(\n            'min-width',\n            token.media.breakpointValues.large.min,\n            {\n              gridColumn: `span 3`,\n              alignSelf: `flex-start`,\n            },\n          ),\n        },\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        imageLoading: 'lazy',\n        customStyles: {\n          element: {\n            ...createMediaQuery(\n              'max-width',\n              token.media.breakpointValues.medium.max,\n              {\n                display: 'flex',\n              },\n            ),\n\n            [`& img`]: {\n              ...createMediaQuery(\n                'min-width',\n                token.media.breakpointValues.large.min,\n                {\n                  width: `100%`,\n                  height: `auto !important`,\n                },\n              ),\n            },\n          },\n        },\n      }),\n    );\n  }\n\n  builder.withChild(textColumn);\n\n  return builder.build();\n};\n\nconst CreatePersonBioSmallElement = (\n  props: PersonBio,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, description } = props;\n  const container = makeContainer(props);\n\n  const builder = new ElementBuilder()\n    .withClassName('person-bio-summary-composite')\n    .withChild(container);\n\n  if (description) {\n    builder.withChild(\n      new ElementBuilder(description)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            size: 'large',\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            marginTop: token.spacing.lg,\n            maxWidth: token.spacing.maxWidth.smallest,\n          },\n        })\n        .build(),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonBioSmall = CreatePersonBioSmallElement;\n"],"names":["textLockup.person","textLockup.contact","assets.image.background"],"mappings":"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"}

package/dist/composite/person/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AA4DjD,eAAO,MAAM,0BAA0B,UAxDE,UAAU,KAAG,YAAY,CAAC,WAAW,CAwDZ,CAAC"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/person/block.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAiEjD,eAAO,MAAM,0BAA0B,UA5D9B,UAAU,KAChB,YAAY,CAAC,WAAW,CA2DuC,CAAC"}

package/dist/composite/person/block.js

@@ -32,7 +32,9 @@ import "../../atomic/text-lockup/small.js";
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const CreatePersonBlockElement = (props) => {
   const { image: personImage, isThemeDark } = props;
-  const textLockupElement = createTextLockupPerson(props);
+  const textLockupElement = createTextLockupPerson({
+    ...props
+  });
   const contactLockupElement = createTextLockupContact(props);
   let image = personImage;
   if (!image) {
@@ -44,6 +46,7 @@ const CreatePersonBlockElement = (props) => {
     createImageBackground({
       element: image,
       isScaled: false,
+      imageLoading: "lazy",
       customStyles: {
         height: "auto"
       }

package/dist/composite/person/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nconst CreatePersonBlockElement = (props: PersonCard): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person(props);\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n          transform: `none !important`,\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n\nexport const createCompositePersonBlock = CreatePersonBlockElement;\n"],"names":["textLockup.person","textLockup.contact","iconPerson","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAM,2BAA2B,CAAC,UAAiD;AACjF,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,uBAAkB,KAAK;AACjD,QAAM,uBAAuBC,wBAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,sBAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,WAAW;AAAA,QAEX,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;AAEO,MAAM,6BAA6B;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/person/block.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { imageFromSvg } from '@universityofmaryland/web-utilities-library/media';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { person as iconPerson } from '@universityofmaryland/web-icons-library/people';\nimport { assets, textLockup } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\n\nconst CreatePersonBlockElement = (\n  props: PersonCard,\n): ElementModel<HTMLElement> => {\n  const { image: personImage, isThemeDark } = props;\n  const textLockupElement = textLockup.person({\n    ...props,\n  });\n  const contactLockupElement = textLockup.contact(props);\n\n  let image = personImage;\n\n  if (!image) {\n    image = imageFromSvg({\n      SVG: iconPerson,\n    });\n  }\n\n  const imageContainer = new ElementBuilder()\n    .withClassName('person-block-image')\n    .withChild(\n      assets.image.background({\n        element: image,\n        isScaled: false,\n        imageLoading: 'lazy',\n        customStyles: {\n          height: 'auto',\n        },\n      }),\n    )\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        backgroundColor: `${token.color.gray.lighter}`,\n        marginBottom: `${token.spacing.md}`,\n\n        ...(isThemeDark && {\n          backgroundColor: `${token.color.gray.darker}`,\n        }),\n\n        ['& img, & svg']: {\n          display: 'block',\n          width: '100%',\n          objectFit: 'contain',\n          height: '140px !important',\n          transform: `none !important`,\n\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            height: '200px !important',\n          }),\n        },\n      },\n    })\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('person-block')\n    .withChildren(imageContainer, textLockupElement, contactLockupElement)\n    .build();\n};\n\nexport const createCompositePersonBlock = CreatePersonBlockElement;\n"],"names":["textLockup.person","textLockup.contact","iconPerson","assets.image.background"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAElE,MAAM,2BAA2B,CAC/B,UAC8B;AAC9B,QAAM,EAAE,OAAO,aAAa,YAAA,IAAgB;AAC5C,QAAM,oBAAoBA,uBAAkB;AAAA,IAC1C,GAAG;AAAA,EAAA,CACJ;AACD,QAAM,uBAAuBC,wBAAmB,KAAK;AAErD,MAAI,QAAQ;AAEZ,MAAI,CAAC,OAAO;AACV,YAAQ,aAAa;AAAA,MACnB,KAAKC;AAAAA,IAAA,CACN;AAAA,EACH;AAEA,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,oBAAoB,EAClC;AAAA,IACCC,sBAAwB;AAAA,MACtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB,GAAG,MAAM,MAAM,KAAK,OAAO;AAAA,MAC5C,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,MAEjC,GAAI,eAAe;AAAA,QACjB,iBAAiB,GAAG,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAG7C,CAAC,cAAc,GAAG;AAAA,QAChB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,WAAW;AAAA,QAEX,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,UACtD,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD,EACA,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,cAAc,EAC5B,aAAa,gBAAgB,mBAAmB,oBAAoB,EACpE,MAAA;AACL;AAEO,MAAM,6BAA6B;"}

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

@@ -1 +1 @@
-{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AAsVD,eAAO,MAAM,yBAAyB,UA7FE,UAAU,KAAG,YAAY,CAAC,WAAW,CA6Fb,CAAC"}
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../source/composite/person/hero.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,UAAW,SAAQ,KAAK;IAChC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,UAAW,SAAQ,aAAa,EAAE,KAAK;IAC/C,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,UAAW,SAAQ,UAAU,EAAE,UAAU;IACjD,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACxC;AA0VD,eAAO,MAAM,yBAAyB,UA9F7B,UAAU,KAChB,YAAY,CAAC,WAAW,CA6FqC,CAAC"}

package/dist/composite/person/hero.js

@@ -38,7 +38,9 @@ const CreateImageBlock = (props) => {
   if (image) {
     const imageBlock = createImageBackground({
       element: image,
-      isScaled: false
+      isScaled: false,
+      imageLoading: "eager",
+      imageFetchPriority: "high"
     });
     const imageContainer = new ElementBuilder().withClassName("umd-person-hero-image").withChild(imageBlock).withStyles({
       element: {

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

@@ -1 +1 @@
-{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonContact } from './_types';\nimport { type ElementModel } from '../../_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo): ElementModel<HTMLElement> => {\n  const { image, association, pronouns, isThemeDark } = props;\n\n  const wrapper = new ElementBuilder().withClassName(\n    'umd-person-hero-image-wrapper',\n  );\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n    });\n\n    const imageContainer = new ElementBuilder()\n      .withClassName('umd-person-hero-image')\n      .withChild(imageBlock)\n      .withStyles({\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      })\n      .build();\n\n    wrapper.withChild(imageContainer);\n  }\n\n  if (association) {\n    wrapper.withChild(\n      new ElementBuilder(association)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(!isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (pronouns) {\n    wrapper.withChild(\n      new ElementBuilder(document.createElement('i'))\n        .withClassName('umd-person-hero-pronouns')\n        .withStyles({\n          element: {\n            display: 'block',\n            color: `${isThemeDark ? token.color.black : token.color.white}`,\n\n            ['*']: {\n              color: 'currentColor',\n            },\n          },\n          siblingAfter: {\n            display: 'block',\n            marginTop: token.spacing.min,\n          },\n        })\n        .withChild(pronouns)\n        .build(),\n    );\n  }\n\n  if (contactContainer) {\n    wrapper.withChild(contactContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero-image-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    })\n    .build();\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText): ElementModel<HTMLElement> => {\n  const lineWrapper = new ElementBuilder()\n    .styled(Styles.element.text.line.adjustentInset)\n    .withStyles({\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    });\n\n  if (subText) {\n    lineWrapper.withChild(\n      new ElementBuilder(subText)\n        .styled(\n          Styles.typography.sans.compose('small', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            maxWidth: '650px',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.sm,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (name) {\n    lineWrapper.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.campaign.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.md,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (job) {\n    lineWrapper.withChild(\n      new ElementBuilder(job)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n\n            ...(!isThemeDark && {\n              color: token.color.gray.dark,\n            }),\n          },\n        })\n        .build(),\n    );\n  }\n\n  const lineWrapperBuilt = lineWrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('person-hero-text')\n    .withChild(lineWrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    })\n    .build();\n};\n\nconst CreatePersonHeroElement = (props: PersonHero): ElementModel<HTMLElement> => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const textContainer = CreateTextContainer(props);\n\n  const textColumns = new ElementBuilder()\n    .withClassName('umd-person-hero-columns')\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    });\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-desktop')\n      .withChild(breadcrumbDesktop)\n      .withStyles({\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    textColumns.withChild(textColumnBreadcrumb);\n  }\n\n  const textColumnsBuilt = textColumns.build();\n  const imageBlock = CreateImageBlock(props);\n\n  const elementWrapper = new ElementBuilder()\n    .withClassName('umd-person-hero-wrapper')\n    .withChild(textColumnsBuilt)\n    .withChild(imageBlock)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    })\n    .build();\n\n  const elementLock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(elementWrapper)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    });\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-mobile')\n      .withChild(breadcrumbMobile)\n      .withStyles({\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    elementLock.withChild(mainBreadcrumb);\n  }\n\n  const elementLockBuilt = elementLock.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero')\n    .withChild(elementLockBuilt)\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n\nexport const createCompositePersonHero = CreatePersonHeroElement;\n"],"names":["textLockup.contact","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"hero.js","sources":["../../../source/composite/person/hero.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets, textLockup } from 'atomic';\nimport { PersonContact } from './_types';\nimport { type ElementModel } from '../../_types';\n\ninterface Theme {\n  isThemeDark?: boolean;\n}\n\ninterface PersonText extends Theme {\n  name: HTMLElement | null;\n  job?: HTMLElement | null;\n  subText?: HTMLElement | null;\n}\n\ninterface PersonInfo extends PersonContact, Theme {\n  image?: HTMLImageElement | null;\n  association?: HTMLElement | null;\n  pronouns?: HTMLElement | null;\n}\n\ninterface PersonHero extends PersonText, PersonInfo {\n  breadcrumbMobile?: HTMLElement | null;\n  breadcrumbDesktop?: HTMLElement | null;\n}\n\nconst CreateImageBlock = (props: PersonInfo): ElementModel<HTMLElement> => {\n  const { image, association, pronouns, isThemeDark } = props;\n\n  const wrapper = new ElementBuilder().withClassName(\n    'umd-person-hero-image-wrapper',\n  );\n\n  const contactContainer = textLockup.contact({\n    ...props,\n    isThemeDark: !isThemeDark,\n  });\n\n  if (image) {\n    const imageBlock = assets.image.background({\n      element: image,\n      isScaled: false,\n      imageLoading: 'eager',\n      imageFetchPriority: 'high',\n    });\n\n    const imageContainer = new ElementBuilder()\n      .withClassName('umd-person-hero-image')\n      .withChild(imageBlock)\n      .withStyles({\n        element: {\n          backgroundColor: `${\n            isThemeDark ? token.color.gray.lightest : token.color.gray.darker\n          }`,\n          display: 'flex',\n          justifyContent: 'center',\n          marginBottom: token.spacing.md,\n\n          ['& img']: {\n            [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n              maxHeight: '160px',\n            },\n          },\n        },\n      })\n      .build();\n\n    wrapper.withChild(imageContainer);\n  }\n\n  if (association) {\n    wrapper.withChild(\n      new ElementBuilder(association)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(!isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (pronouns) {\n    wrapper.withChild(\n      new ElementBuilder(document.createElement('i'))\n        .withClassName('umd-person-hero-pronouns')\n        .withStyles({\n          element: {\n            display: 'block',\n            color: `${isThemeDark ? token.color.black : token.color.white}`,\n\n            ['*']: {\n              color: 'currentColor',\n            },\n          },\n          siblingAfter: {\n            display: 'block',\n            marginTop: token.spacing.min,\n          },\n        })\n        .withChild(pronouns)\n        .build(),\n    );\n  }\n\n  if (contactContainer) {\n    wrapper.withChild(contactContainer);\n  }\n\n  const wrapperBuilt = wrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero-image-container')\n    .withChild(wrapperBuilt)\n    .withStyles({\n      element: {\n        paddingTop: `${token.spacing.lg}`,\n        paddingBottom: `${token.spacing.lg}`,\n        backgroundColor: `${\n          isThemeDark ? token.color.gray.lightest : token.color.black\n        }`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          padding: `${token.spacing.md}`,\n          width: '30%',\n          maxWidth: '320px',\n        },\n      },\n    })\n    .build();\n};\n\nconst CreateTextContainer = ({\n  name,\n  job,\n  subText,\n  isThemeDark,\n}: PersonText): ElementModel<HTMLElement> => {\n  const lineWrapper = new ElementBuilder()\n    .styled(Styles.element.text.line.adjustentInset)\n    .withStyles({\n      pseudoBefore: {\n        backgroundColor: `${isThemeDark ? token.color.gold : token.color.red}`,\n      },\n    });\n\n  if (subText) {\n    lineWrapper.withChild(\n      new ElementBuilder(subText)\n        .styled(\n          Styles.typography.sans.compose('small', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            maxWidth: '650px',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.sm,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (name) {\n    lineWrapper.withChild(\n      new ElementBuilder(name)\n        .styled(\n          Styles.typography.campaign.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: '700',\n            display: 'block',\n          },\n          siblingAfter: {\n            marginTop: token.spacing.min,\n\n            [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n              marginTop: token.spacing.md,\n            },\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (job) {\n    lineWrapper.withChild(\n      new ElementBuilder(job)\n        .styled(\n          Styles.typography.sans.compose('medium', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            display: 'block',\n\n            ...(!isThemeDark && {\n              color: token.color.gray.dark,\n            }),\n          },\n        })\n        .build(),\n    );\n  }\n\n  const lineWrapperBuilt = lineWrapper.build();\n\n  return new ElementBuilder()\n    .withClassName('person-hero-text')\n    .withChild(lineWrapperBuilt)\n    .withStyles({\n      element: {\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n        paddingTop: `${token.spacing['3xl']}`,\n        paddingBottom: `${token.spacing['3xl']}`,\n        position: 'relative',\n\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n        },\n\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          paddingTop: `0`,\n          paddingBottom: `${token.spacing['7xl']}`,\n          alignSelf: 'flex-start',\n        },\n      },\n      pseudoBefore: {\n        content: '\"\"',\n        position: 'absolute',\n        top: '-100px',\n        left: '0',\n        bottom: '0',\n        width: '200vw',\n        transform: 'translateX(-20%)',\n        backgroundColor: `${\n          isThemeDark ? token.color.black : token.color.gray.lightest\n        }`,\n      },\n    })\n    .build();\n};\n\nconst CreatePersonHeroElement = (\n  props: PersonHero,\n): ElementModel<HTMLElement> => {\n  const { breadcrumbMobile, breadcrumbDesktop } = props;\n  const textContainer = CreateTextContainer(props);\n\n  const textColumns = new ElementBuilder()\n    .withClassName('umd-person-hero-columns')\n    .withChild(textContainer)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          width: '70%',\n        },\n      },\n    });\n\n  if (breadcrumbDesktop) {\n    const textColumnBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-desktop')\n      .withChild(breadcrumbDesktop)\n      .withStyles({\n        element: {\n          [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    textColumns.withChild(textColumnBreadcrumb);\n  }\n\n  const textColumnsBuilt = textColumns.build();\n  const imageBlock = CreateImageBlock(props);\n\n  const elementWrapper = new ElementBuilder()\n    .withClassName('umd-person-hero-wrapper')\n    .withChild(textColumnsBuilt)\n    .withChild(imageBlock)\n    .withStyles({\n      element: {\n        [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n          display: 'flex',\n          justifyContent: 'space-between',\n          paddingTop: `${token.spacing['7xl']}`,\n        },\n      },\n    })\n    .build();\n\n  const elementLock = new ElementBuilder()\n    .styled(Styles.layout.space.horizontal.larger)\n    .withChild(elementWrapper)\n    .withStyles({\n      element: {\n        [`@container (max-width: ${token.media.breakpoints.large.max})`]: {\n          padding: '0',\n        },\n      },\n    });\n\n  if (breadcrumbMobile) {\n    const mainBreadcrumb = new ElementBuilder()\n      .withClassName('umd-person-hero-breadcrumb-mobile')\n      .withChild(breadcrumbMobile)\n      .withStyles({\n        element: {\n          paddingLeft: `${token.spacing.md}`,\n          paddingRight: `${token.spacing.md}`,\n\n          [`@container (min-width: ${token.media.breakpoints.tablet.min})`]: {\n            display: 'none',\n          },\n        },\n      })\n      .build();\n\n    elementLock.withChild(mainBreadcrumb);\n  }\n\n  const elementLockBuilt = elementLock.build();\n\n  return new ElementBuilder()\n    .withClassName('umd-person-hero')\n    .withChild(elementLockBuilt)\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        containerType: 'inline-size',\n      },\n    })\n    .build();\n};\n\nexport const createCompositePersonHero = CreatePersonHeroElement;\n"],"names":["textLockup.contact","assets.image.background"],"mappings":"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"}

package/dist/composite/person/list.d.ts

@@ -1,4 +1,4 @@
 import { PersonCard } from './_types';
 import { ElementModel } from '../../_types';
-export declare const createCompositePersonList: ({ actions, address, association, email, image, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonCard) => ElementModel<HTMLElement>;
+export declare const createCompositePersonList: ({ actions, address, slotOne, email, image, isThemeDark, slotTwo, linkedin, name, phone, slotThreeItalic, slotFour, }: PersonCard) => ElementModel<HTMLElement>;
 //# sourceMappingURL=list.d.ts.map

package/dist/composite/person/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AA8EjD,eAAO,MAAM,yBAAyB,iHA3DnC,UAAU,KAAG,YAAY,CAAC,WAAW,CA2DwB,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../source/composite/person/list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AA8EjD,eAAO,MAAM,yBAAyB,yHA3DnC,UAAU,KAAG,YAAY,CAAC,WAAW,CA2DwB,CAAC"}

package/dist/composite/person/list.js

@@ -32,16 +32,16 @@ const mediumBreakpoint = token.media.breakpointValues.large.min;
 const CreatePersonListElement = ({
   actions,
   address,
-  association,
+  slotOne,
   email,
   image: image$1,
   isThemeDark,
-  job,
+  slotTwo,
   linkedin,
   name,
   phone,
-  pronouns,
-  subText
+  slotThreeItalic,
+  slotFour
 }) => {
   const builder = new ElementBuilder().withClassName("person-list-container").withStyles({
     element: {
@@ -78,16 +78,16 @@ const CreatePersonListElement = ({
       information({
         actions,
         address,
-        association,
+        slotTwo,
         customStyles: {},
         email,
         isThemeDark,
-        job,
+        slotOne,
         linkedin,
         name,
         phone,
-        pronouns,
-        subText
+        slotThreeItalic,
+        slotFour
       })
     );
   }

package/dist/composite/person/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst CreatePersonListElement = ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            minWidth: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n            minWidth: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkedin,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonList = CreatePersonListElement;\n"],"names":["image","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,YACP,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,4BAA4B;"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type ElementModel } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst CreatePersonListElement = ({\n  actions,\n  address,\n  slotOne,\n  email,\n  image,\n  isThemeDark,\n  slotTwo,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonCard): ElementModel<HTMLElement> => {\n  const builder = new ElementBuilder()\n    .withClassName('person-list-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            minWidth: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n            minWidth: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    builder.withChild(\n      layout.person.columns.information({\n        actions,\n        address,\n        slotTwo,\n        customStyles: {},\n        email,\n        isThemeDark,\n        slotOne,\n        linkedin,\n        name,\n        phone,\n        slotThreeItalic,\n        slotFour,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonList = CreatePersonListElement;\n"],"names":["image","layout.person.columns.image","layout.person.columns.information"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AAC3C,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,YACP,UAAU;AAAA,UAAA,CACX;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,YAAQ;AAAA,MACNE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,4BAA4B;"}

package/dist/composite/person/tabular.d.ts

@@ -1,4 +1,4 @@
 import { PersonCard } from './_types';
 import { UMDElement } from '../../_types';
-export declare const createCompositePersonTabular: ({ actions, additionalContact, address, association, email, image, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonCard) => UMDElement;
+export declare const createCompositePersonTabular: ({ actions, additionalContact, address, slotTwo, email, image, isThemeDark, slotOne, linkedin, name, phone, slotThreeItalic, slotFour, }: PersonCard) => UMDElement;
 //# sourceMappingURL=tabular.d.ts.map

package/dist/composite/person/tabular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAoG/C,eAAO,MAAM,4BAA4B,oIAlFtC,UAAU,KAAG,UAkFsD,CAAC"}
+{"version":3,"file":"tabular.d.ts","sourceRoot":"","sources":["../../../source/composite/person/tabular.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAoG/C,eAAO,MAAM,4BAA4B,4IAlFtC,UAAU,KAAG,UAkFsD,CAAC"}

package/dist/composite/person/tabular.js

@@ -31,16 +31,16 @@ const CreatePersonTabularElement = ({
   actions,
   additionalContact,
   address,
-  association,
+  slotTwo,
   email,
   image: image$1,
   isThemeDark,
-  job,
+  slotOne,
   linkedin,
   name,
   phone,
-  pronouns,
-  subText
+  slotThreeItalic,
+  slotFour
 }) => {
   const builder = new ElementBuilder().withClassName("person-tabular-container").withStyles({
     element: {
@@ -82,13 +82,13 @@ const CreatePersonTabularElement = ({
     builder.withChild(
       details({
         actions,
-        association,
+        slotTwo,
         isThemeDark,
         customStyles: {},
-        job,
+        slotOne,
         nameComposite,
-        pronouns,
-        subText
+        slotThreeItalic,
+        slotFour
       })
     );
   }