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

package/README.md

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
 
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.1-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.6.2-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
 

package/dist/atomic/text-lockup/person.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,kFAiKvB,CAAC"}
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,kFAsKvB,CAAC"}

package/dist/atomic/text-lockup/person.js

@@ -26,11 +26,11 @@ const createTextLockupPerson = ({
   }
   if (name) {
     const headlineStyles = {
-      ...typography.sans.compose("larger", {
-        theme: theme.fontColor(isThemeDark)
-      }),
       ...animation.line.composeSlideUnder({
         color: theme.foreground(isThemeDark)
+      }),
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
       })
     };
     const nameElement = new ElementBuilder(name).withClassName("person-name").styled(headlineStyles).withStyles({
@@ -54,7 +54,7 @@ const createTextLockupPerson = ({
     ).withStyles({
       element: {
         lineHeight: `1.25em`,
-        ...!isThemeDark && { color: `${token.color.gray.dark}` }
+        ...!isThemeDark && { color: `${token.color.gray.dark} !important` }
       },
       subElement: {
         color: "currentColor"
@@ -71,7 +71,7 @@ const createTextLockupPerson = ({
       element: {
         lineHeight: "1.2em",
         display: "block",
-        ...!isThemeDark && { color: `${token.color.gray.dark}` },
+        ...!isThemeDark && { color: `${token.color.gray.dark} !important` },
         [`& + *`]: {
           marginTop: "4px"
         },
@@ -86,14 +86,19 @@ const createTextLockupPerson = ({
     container.withChild(slotTwoElement);
   }
   if (slotThreeItalic) {
-    slotThreeItalic.innerHTML = `<i>${slotThreeItalic.innerHTML}</i>`;
+    const italicElement = document.createElement("span");
+    while (slotThreeItalic.firstChild) {
+      italicElement.appendChild(slotThreeItalic.firstChild);
+    }
+    slotThreeItalic.appendChild(italicElement);
     const slotThreeItalicElement = new ElementBuilder(slotThreeItalic).withClassName("slot-three-italic").styled(
       typography.sans.compose("small", {
         theme: theme.fontColor(isThemeDark)
       })
     ).withStyles({
       element: {
-        ...!isThemeDark && { color: `${token.color.gray.dark}` },
+        ...!isThemeDark && { color: `${token.color.gray.dark} !important` },
+        fontStyle: "italic",
         [`& + *`]: {
           marginTop: "4px"
         },

package/dist/atomic/text-lockup/person.js.map

@@ -1 +1 @@
-{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .withClassName('person-name')\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (slotOne) {\n    const slotOneElement = new ElementBuilder(slotOne)\n      .withClassName('slot-one')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotOneElement);\n  }\n\n  if (slotTwo) {\n    const slotTwoElement = new ElementBuilder(slotTwo)\n      .withClassName('slot-two')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotTwoElement);\n  }\n\n  if (slotThreeItalic) {\n    slotThreeItalic.innerHTML = `<i>${slotThreeItalic.innerHTML}</i>`;\n    const slotThreeItalicElement = new ElementBuilder(slotThreeItalic)\n      .withClassName('slot-three-italic')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`&  *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    container.withChild(slotThreeItalicElement);\n  }\n\n  if (slotFour) {\n    const slotFourElement = new ElementBuilder(slotFour)\n      .withClassName('slot-four')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(slotFourElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
+{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .withClassName('person-name')\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (slotOne) {\n    const slotOneElement = new ElementBuilder(slotOne)\n      .withClassName('slot-one')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotOneElement);\n  }\n\n  if (slotTwo) {\n    const slotTwoElement = new ElementBuilder(slotTwo)\n      .withClassName('slot-two')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotTwoElement);\n  }\n\n  if (slotThreeItalic) {\n    const italicElement = document.createElement('span');\n    while (slotThreeItalic.firstChild) {\n      italicElement.appendChild(slotThreeItalic.firstChild);\n    }\n    slotThreeItalic.appendChild(italicElement);\n    const slotThreeItalicElement = new ElementBuilder(slotThreeItalic)\n      .withClassName('slot-three-italic')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark} !important` }),\n          fontStyle: 'italic',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`&  *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    container.withChild(slotThreeItalicElement);\n  }\n\n  if (slotFour) {\n    const slotFourElement = new ElementBuilder(slotFour)\n      .withClassName('slot-four')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(slotFourElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/atomic/text-lockup/small-scaling.js

@@ -33,12 +33,12 @@ const createTextLockupSmallScaling = ({
   }
   if (headline) {
     const composeHeadlineStyles = {
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
+      }),
       ...typography.sans.compose("larger", {
         theme: theme.fontColor(isThemeDark),
         scaling: true
-      }),
-      ...animation.line.composeSlideUnder({
-        color: theme.foreground(isThemeDark)
       })
     };
     const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();

package/dist/atomic/text-lockup/small-scaling.js.map

@@ -1 +1 @@
-{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport const createTextLockupSmallScaling = ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const container = new ElementBuilder()\n    .withClassName('scaling-font-block-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    });\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n    container.withChild(ribbonEyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n        scaling: true,\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder(date)\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;AA4BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,WAAW,CAAC,kBAAkB;AAChC,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,WAAW,kBAAkB;AAC/B,UAAM,uBAAuB,oBAAoB,EAAE,SAAS;AAC5D,cAAU,UAAU,oBAAoB;AAAA,EAC1C;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,WAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}
+{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport const createTextLockupSmallScaling = ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const container = new ElementBuilder()\n    .withClassName('scaling-font-block-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    });\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n    container.withChild(ribbonEyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n        scaling: true,\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder(date)\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;AA4BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,WAAW,CAAC,kBAAkB;AAChC,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,WAAW,kBAAkB;AAC/B,UAAM,uBAAuB,oBAAoB,EAAE,SAAS;AAC5D,cAAU,UAAU,oBAAoB;AAAA,EAC1C;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,MACD,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,WAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/atomic/text-lockup/small.js

@@ -111,11 +111,11 @@ const createTextLockupSmall = ({
   }
   if (headline) {
     const composeHeadlineStyles = {
-      ...typography.sans.compose("larger", {
-        theme: theme.fontColor(isThemeDark)
-      }),
       ...animation.line.composeSlideUnder({
         color: theme.foreground(isThemeDark)
+      }),
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark)
       })
     };
     const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();

package/dist/atomic/text-lockup/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.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 typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n\n    ['*']: {\n      color: 'currentColor',\n    },\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
+{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.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 typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n\n    ['*']: {\n      color: 'currentColor',\n    },\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/composite/layout/section-intro/small.d.ts

@@ -1,18 +1,10 @@
+import { ElementModel } from '../../../_types';
 export interface SectionIntroProps {
     headline?: HTMLElement | null;
     actions?: HTMLElement | null;
     text?: HTMLElement | null;
     hasSeparator?: boolean;
     isThemeDark?: boolean;
-    includesAnimation?: boolean;
 }
-export declare const createCompositeLayoutSectionIntroSmall: (props: SectionIntroProps) => {
-    events: {
-        loadAnimation: () => void;
-    };
-    element: HTMLElement;
-    styles: string;
-    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
-    destroy?: () => void;
-};
+export declare const createCompositeLayoutSectionIntroSmall: (props: SectionIntroProps) => ElementModel<HTMLElement>;
 //# sourceMappingURL=small.d.ts.map

package/dist/composite/layout/section-intro/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAgRD,eAAO,MAAM,sCAAsC,UApBJ,iBAAiB;;;;;;;;CAoBoB,CAAC"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/small.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAuKD,eAAO,MAAM,sCAAsC,GACjD,OAAO,iBAAiB,8BACC,CAAC"}

package/dist/composite/layout/section-intro/small.js

@@ -3,32 +3,6 @@ import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import * as Styles from "@universityofmaryland/web-styles-library";
 import { theme } from "@universityofmaryland/web-utilities-library/theme";
-const ANIMATION_CONFIGS = {
-  line: `
-    @keyframes intro-line {
-      from {
-        height: 0;
-        transform: translateY(${token.spacing.lg});
-      }
-      to {
-        height: ${token.spacing["4xl"]};
-        transform: translateY(0);
-      }
-    }
-  `,
-  fadeIn: `
-    @keyframes intro-fade-in {
-      from {
-        opacity: 0;
-        transform: translateY(100px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `
-};
 const createHeadline = (props) => {
   const { headline, isThemeDark } = props;
   if (!headline) return null;
@@ -82,28 +56,13 @@ const createActions = (props) => {
   }).build();
 };
 const createTextContainer = (props) => {
-  const { headline, text, actions, includesAnimation, isThemeDark } = props;
+  const { headline, text, actions, isThemeDark } = props;
   const headlineElement = createHeadline({ headline, isThemeDark });
   const textElement = createText({ text, headline, isThemeDark });
   const actionsElement = createActions({ actions });
-  const container = new ElementBuilder().withClassName("intro-default-container-text").withStyles({
-    element: {
-      ...includesAnimation && {
-        opacity: 0
-      },
-      [".intro-default-animated &"]: {
-        transform: "translateY(100px)",
-        animation: "intro-fade-in 1s forwards",
-        animationDelay: "0.2s"
-      },
-      [`&:before`]: {
-        ...includesAnimation && {
-          height: 0,
-          transform: `translateY(${token.spacing.lg})`
-        }
-      }
-    }
-  });
+  const container = new ElementBuilder().withClassName(
+    "intro-default-container-text"
+  );
   if (headlineElement) {
     container.withChild(headlineElement);
   }
@@ -124,7 +83,7 @@ const createWrapper = (props) => {
   }).build();
 };
 const createContainer = (props) => {
-  const { isThemeDark, hasSeparator, includesAnimation } = props;
+  const { hasSeparator } = props;
   const wrapperElement = createWrapper(props);
   return new ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
     element: {
@@ -144,50 +103,11 @@ const createContainer = (props) => {
           left: "calc(50% - 1px)",
           top: 0
         }
-      },
-      ["&.intro-default-animated:before"]: {
-        ...includesAnimation && {
-          animation: "intro-line 1.2s forwards"
-        }
       }
     }
   }).build();
 };
-const setupAnimation = (props) => {
-  const { includesAnimation, container } = props;
-  if (!includesAnimation) return;
-  const animation = (entries, observer2) => {
-    entries.map((entry) => {
-      const target = entry.target;
-      if (entry.isIntersecting) {
-        target.classList.add("intro-default-animated");
-        observer2.unobserve(target);
-      }
-    });
-  };
-  const observer = new IntersectionObserver(animation, {
-    root: null,
-    rootMargin: "0px",
-    threshold: [0.35]
-  });
-  observer.observe(container);
-};
-const CreateSectionIntroSmallElement = (props) => {
-  const containerElement = createContainer(props);
-  const loadAnimation = () => setupAnimation({
-    includesAnimation: props.includesAnimation,
-    container: containerElement.element
-  });
-  if (props.includesAnimation) {
-    containerElement.styles += ANIMATION_CONFIGS.line;
-    containerElement.styles += ANIMATION_CONFIGS.fadeIn;
-  }
-  return {
-    ...containerElement,
-    events: { loadAnimation }
-  };
-};
-const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;
+const createCompositeLayoutSectionIntroSmall = (props) => createContainer(props);
 export {
   createCompositeLayoutSectionIntroSmall
 };

package/dist/composite/layout/section-intro/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n  includesAnimation?: boolean;\n}\n\nconst ANIMATION_CONFIGS = {\n  line: `\n    @keyframes intro-line {\n      from {\n        height: 0;\n        transform: translateY(${token.spacing.lg});\n      }\n      to {\n        height: ${token.spacing['4xl']};\n        transform: translateY(0);\n      }\n    }\n  `,\n  fadeIn: `\n    @keyframes intro-fade-in {\n      from {\n        opacity: 0;\n        transform: translateY(100px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n  `,\n};\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, headline, isThemeDark } = props;\n  const simpleRichTextOptions: SimpleRichTextOptions = {\n    size: 'large',\n    theme: theme.fontColor(isThemeDark),\n  };\n  if (!text) return null;\n  if (!headline) simpleRichTextOptions.size = 'largest';\n\n  return new ElementBuilder(text)\n    .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n\n        [`&, & > *`]: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder()\n    .withClassName('intro-default-container-text')\n    .withStyles({\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['.intro-default-animated &']: {\n          transform: 'translateY(100px)',\n          animation: 'intro-fade-in 1s forwards',\n          animationDelay: '0.2s',\n        },\n\n        [`&:before`]: {\n          ...(includesAnimation && {\n            height: 0,\n            transform: `translateY(${token.spacing.lg})`,\n          }),\n        },\n      },\n    });\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n): ElementModel<HTMLElement> => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n\n        ['&.intro-default-animated:before']: {\n          ...(includesAnimation && {\n            animation: 'intro-line 1.2s forwards',\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst setupAnimation = (\n  props: Pick<SectionIntroProps, 'includesAnimation'> & {\n    container: HTMLElement;\n  },\n) => {\n  const { includesAnimation, container } = props;\n  if (!includesAnimation) return;\n\n  const animation: IntersectionObserverCallback = (entries, observer) => {\n    entries.map((entry) => {\n      const target = entry.target as HTMLElement;\n\n      if (entry.isIntersecting) {\n        target.classList.add('intro-default-animated');\n        observer.unobserve(target);\n      }\n    });\n  };\n\n  const observer = new IntersectionObserver(animation, {\n    root: null,\n    rootMargin: '0px',\n    threshold: [0.35],\n  });\n\n  observer.observe(container);\n};\n\nconst CreateSectionIntroSmallElement = (props: SectionIntroProps) => {\n  const containerElement = createContainer(props);\n\n  const loadAnimation = () =>\n    setupAnimation({\n      includesAnimation: props.includesAnimation,\n      container: containerElement.element,\n    });\n\n  if (props.includesAnimation) {\n    containerElement.styles += ANIMATION_CONFIGS.line;\n    containerElement.styles += ANIMATION_CONFIGS.fadeIn;\n  }\n\n  return {\n    ...containerElement,\n    events: { loadAnimation },\n  };\n};\n\nexport const createCompositeLayoutSectionIntroSmall = CreateSectionIntroSmallElement;\n"],"names":["observer"],"mappings":";;;;;AAiBA,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA;AAAA;AAAA;AAAA,gCAIwB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,kBAG9B,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYV;AAEA,MAAM,iBAAiB,CACrB,UACqC;AACrC,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU,QAAO;AAEtB,SAAO,IAAI,eAAe,QAAQ,EAC/B;AAAA,IACC,OAAO,WAAW,KAAK,QAAQ,WAAW;AAAA,MACxC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CACjB,UACqC;AACrC,QAAM,EAAE,MAAM,UAAU,YAAA,IAAgB;AACxC,QAAM,wBAA+C;AAAA,IACnD,MAAM;AAAA,IACN,OAAO,MAAM,UAAU,WAAW;AAAA,EAAA;AAEpC,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,CAAC,SAAU,uBAAsB,OAAO;AAE5C,SAAO,IAAI,eAAe,IAAI,EAC3B,OAAO,OAAO,QAAQ,KAAK,KAAK,cAAc,qBAAqB,CAAC,EACpE,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,MAG3B,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,CAAC,YAAY;AAAA,UACf,GAAG,WAAW,KAAK,gBAAgB;AAAA,UACnC,OAAO,MAAM,MAAM;AAAA,UAEnB,GAAI,eAAe;AAAA,YACjB,OAAO,MAAM,MAAM;AAAA,UAAA;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CACpB,UACqC;AACrC,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO,IAAI,eAAe,OAAO,EAC9B,OAAO,OAAO,OAAO,KAAK,OAAO,UAAU,EAC3C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,sBAAsB,CAC1B,UAI8B;AAC9B,QAAM,EAAE,UAAU,MAAM,SAAS,mBAAmB,gBAAgB;AAEpE,QAAM,kBAAkB,eAAe,EAAE,UAAU,aAAa;AAChE,QAAM,cAAc,WAAW,EAAE,MAAM,UAAU,aAAa;AAC9D,QAAM,iBAAiB,cAAc,EAAE,SAAS;AAEhD,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,GAAI,qBAAqB;AAAA,QACvB,SAAS;AAAA,MAAA;AAAA,MAGX,CAAC,2BAA2B,GAAG;AAAA,QAC7B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAGlB,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,qBAAqB;AAAA,UACvB,QAAQ;AAAA,UACR,WAAW,cAAc,MAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,iBAAiB;AACnB,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,aAAa;AACf,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,gBAAgB;AAClB,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;AAEA,MAAM,gBAAgB,CACpB,UAI8B;AAC9B,QAAM,uBAAuB,oBAAoB,KAAK;AAEtD,SAAO,IAAI,iBACR,cAAc,iCAAiC,EAC/C,UAAU,oBAAoB,EAC9B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD,EACA,MAAA;AACL;AAEA,MAAM,kBAAkB,CACtB,UAS8B;AAC9B,QAAM,EAAE,aAAa,cAAc,kBAAA,IAAsB;AAEzD,QAAM,iBAAiB,cAAc,KAAK;AAE1C,SAAO,IAAI,iBACR,cAAc,yBAAyB,EACvC,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,MAAM,QAAQ,SAAS;AAAA,MACjC,QAAQ;AAAA,MAER,GAAI,gBAAgB;AAAA,QAClB,YAAY,MAAM,QAAQ,KAAK;AAAA,QAC/B,UAAU;AAAA,MAAA;AAAA,MAGZ,CAAC,UAAU,GAAG;AAAA,QACZ,GAAI,gBAAgB;AAAA,UAClB,SAAS;AAAA,UACT,iBAAiB,MAAM,MAAM;AAAA,UAC7B,UAAU;AAAA,UACV,QAAQ,MAAM,QAAQ,KAAK;AAAA,UAC3B,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,CAAC,iCAAiC,GAAG;AAAA,QACnC,GAAI,qBAAqB;AAAA,UACvB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEA,MAAM,iBAAiB,CACrB,UAGG;AACH,QAAM,EAAE,mBAAmB,UAAA,IAAc;AACzC,MAAI,CAAC,kBAAmB;AAExB,QAAM,YAA0C,CAAC,SAASA,cAAa;AACrE,YAAQ,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,MAAM;AAErB,UAAI,MAAM,gBAAgB;AACxB,eAAO,UAAU,IAAI,wBAAwB;AAC7CA,kBAAS,UAAU,MAAM;AAAA,MAC3B;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,IAAI,qBAAqB,WAAW;AAAA,IACnD,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW,CAAC,IAAI;AAAA,EAAA,CACjB;AAED,WAAS,QAAQ,SAAS;AAC5B;AAEA,MAAM,iCAAiC,CAAC,UAA6B;AACnE,QAAM,mBAAmB,gBAAgB,KAAK;AAE9C,QAAM,gBAAgB,MACpB,eAAe;AAAA,IACb,mBAAmB,MAAM;AAAA,IACzB,WAAW,iBAAiB;AAAA,EAAA,CAC7B;AAEH,MAAI,MAAM,mBAAmB;AAC3B,qBAAiB,UAAU,kBAAkB;AAC7C,qBAAiB,UAAU,kBAAkB;AAAA,EAC/C;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,cAAA;AAAA,EAAc;AAE5B;AAEO,MAAM,yCAAyC;"}
+{"version":3,"file":"small.js","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type ElementModel } from '../../../_types';\nimport { SimpleRichTextOptions } from '../../../../../styles/dist/element/text/rich';\n\nexport interface SectionIntroProps {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  text?: HTMLElement | null;\n  hasSeparator?: boolean;\n  isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n  props: Pick<SectionIntroProps, 'headline' | 'isThemeDark'>,\n): ElementModel<HTMLElement> | null => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return null;\n\n  return new ElementBuilder(headline)\n    .styled(\n      Styles.typography.sans.compose('largest', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    })\n    .build();\n};\n\nconst createText = (\n  props: Pick<SectionIntroProps, 'text' | 'isThemeDark' | 'headline'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, headline, isThemeDark } = props;\n  const simpleRichTextOptions: SimpleRichTextOptions = {\n    size: 'large',\n    theme: theme.fontColor(isThemeDark),\n  };\n  if (!text) return null;\n  if (!headline) simpleRichTextOptions.size = 'largest';\n\n  return new ElementBuilder(text)\n    .styled(Styles.element.text.rich.composeSimple(simpleRichTextOptions))\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n\n        [`&, & > *`]: {\n          ...(!headline && {\n            ...typography.sans.transformations.largerBold,\n            color: token.color.black,\n\n            ...(isThemeDark && {\n              color: token.color.white,\n            }),\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nconst createActions = (\n  props: Pick<SectionIntroProps, 'actions'>,\n): ElementModel<HTMLElement> | null => {\n  const { actions } = props;\n  if (!actions) return null;\n\n  return new ElementBuilder(actions)\n    .styled(Styles.layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    })\n    .build();\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline, isThemeDark });\n  const textElement = createText({ text, headline, isThemeDark });\n  const actionsElement = createActions({ actions });\n\n  const container = new ElementBuilder().withClassName(\n    'intro-default-container-text',\n  );\n\n  if (headlineElement) {\n    container.withChild(headlineElement);\n  }\n\n  if (textElement) {\n    container.withChild(textElement);\n  }\n\n  if (actionsElement) {\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n): ElementModel<HTMLElement> => {\n  const textContainerElement = createTextContainer(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container-wrapper')\n    .withChild(textContainerElement)\n    .withStyles({\n      element: {\n        textAlign: 'center',\n      },\n    })\n    .build();\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'isThemeDark' | 'hasSeparator' | 'headline' | 'text' | 'actions'\n  >,\n): ElementModel<HTMLElement> => {\n  const { hasSeparator } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return new ElementBuilder()\n    .withClassName('intro-default-container')\n    .withChild(wrapperElement)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n        margin: '0 auto',\n\n        ...(hasSeparator && {\n          paddingTop: token.spacing['6xl'],\n          position: 'relative',\n        }),\n\n        [`&:before`]: {\n          ...(hasSeparator && {\n            content: '\"\"',\n            backgroundColor: token.color.red,\n            position: 'absolute',\n            height: token.spacing['4xl'],\n            width: '2px',\n            left: 'calc(50% - 1px)',\n            top: 0,\n          }),\n        },\n      },\n    })\n    .build();\n};\n\nexport const createCompositeLayoutSectionIntroSmall = (\n  props: SectionIntroProps,\n) => createContainer(props);\n"],"names":[],"mappings":"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"}

package/dist/composite/person/hero.js

@@ -75,10 +75,10 @@ const CreateImageBlock = (props) => {
   }
   if (pronouns) {
     wrapper.withChild(
-      new ElementBuilder(document.createElement("i")).withClassName("umd-person-hero-pronouns").withStyles({
+      new ElementBuilder(document.createElement("div")).withClassName("umd-person-hero-pronouns").withStyles({
         element: {
-          display: "block",
           color: `${isThemeDark ? token.color.black : token.color.white}`,
+          fontStyle: "italic",
           ["*"]: {
             color: "currentColor"
           }

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      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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"}
+{"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('div'))\n        .withClassName('umd-person-hero-pronouns')\n        .withStyles({\n          element: {\n            color: `${isThemeDark ? token.color.black : token.color.white}`,\n            fontStyle: 'italic',\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/tabular.js

@@ -61,11 +61,11 @@ const CreatePersonTabularElement = ({
   }
   if (name) {
     const nameStyles = {
-      ...typography.sans.compose("large", {
-        theme: theme.fontColor(isThemeDark)
-      }),
       ...animation.line.composeSlideUnder({
         color: theme.foreground(isThemeDark)
+      }),
+      ...typography.sans.compose("large", {
+        theme: theme.fontColor(isThemeDark)
       })
     };
     const nameComposite = new ElementBuilder(name).withClassName("person-tabular-name").styled(nameStyles).withStyles({

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

@@ -1 +1 @@
-{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst CreatePersonTabularElement = ({\n  actions,\n  additionalContact,\n  address,\n  slotTwo,\n  email,\n  image,\n  isThemeDark,\n  slotOne,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-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        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        slotTwo,\n        isThemeDark,\n        customStyles: {},\n        slotOne,\n        nameComposite,\n        slotThreeItalic,\n        slotFour,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkedin || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkedin,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonTabular = CreatePersonTabularElement;\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAM,6BAA6B,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,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,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,YAAY,OAAO;AAC9D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,+BAA+B;"}
+{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nconst CreatePersonTabularElement = ({\n  actions,\n  additionalContact,\n  address,\n  slotTwo,\n  email,\n  image,\n  isThemeDark,\n  slotOne,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-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        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        slotTwo,\n        isThemeDark,\n        customStyles: {},\n        slotOne,\n        nameComposite,\n        slotThreeItalic,\n        slotFour,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkedin || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkedin,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n\nexport const createCompositePersonTabular = CreatePersonTabularElement;\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAM,6BAA6B,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,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,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,MACD,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,YAAY,OAAO;AAC9D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;AAEO,MAAM,+BAA+B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.6.1-beta.1",
+  "version": "1.6.2",
   "description": "UMD Web Elements",
   "type": "module",
   "main": "dist/index.js",