@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/atomic/text-lockup/contact.mjs

@@ -1,37 +1,35 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import { phone, email } from "@universityofmaryland/web-icons-library/communication";
 import { pin } from "@universityofmaryland/web-icons-library/location";
 import { linkedin } from "@universityofmaryland/web-icons-library/social";
-import { createDiv } from "../../model/elements/index.mjs";
-import { gridInlineTabletRows, gridInlineRow } from "../../model/elements/layout.mjs";
-import { sansSmaller } from "../../model/elements/headline.mjs";
-import { iconSmall } from "../../model/elements/actions.mjs";
 const makeIcon = ({
   icon,
   isThemeDark
 }) => {
-  const iconElement = iconSmall({
-    element: document.createElement("span"),
-    isThemeDark
-  });
-  iconElement.element.innerHTML = icon;
-  return iconElement;
+  return new ElementBuilder("span").withHTML(icon).styled(
+    elementStyles.action.icon.composeIcon({
+      theme: theme.variant(isThemeDark)
+    })
+  ).build();
 };
 const makeText = ({
   text,
   isThemeDark
 }) => {
-  const textElement = sansSmaller({
-    element: document.createElement("span"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        color: `${token.color.gray.dark}`
-      }
+  return new ElementBuilder("span").withHTML(text).styled(
+    typography.sans.compose("smaller", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      ...!isThemeDark && { color: `${token.color.gray.dark}` }
     }
-  });
-  textElement.element.innerHTML = text;
-  return textElement;
+  }).build();
 };
 const makeContactLink = ({
   element,
@@ -46,28 +44,23 @@ const makeContactLink = ({
       marginTop: "4px",
       lineHeight: "1.2em",
       [`&a:hover, &a:focus`]: {
-        textDecoration: "underline"
+        textDecoration: "underline",
+        ...isThemeDark && {
+          color: `${token.color.white}`
+        }
       }
     }
   };
   if (isLink) {
-    const link = gridInlineRow({
-      element: document.createElement("a"),
-      elementStyles: containerStyles,
-      isThemeDark,
-      children: [iconSpan, textSpan]
-    });
     const ariaLabel = element.getAttribute("aria-label");
-    link.element.setAttribute("href", element.getAttribute("href") || "");
-    if (ariaLabel) link.element.setAttribute("aria-label", ariaLabel);
-    return link;
+    const href = element.getAttribute("href") || "";
+    const linkBuilder = new ElementBuilder("a").styled(layout.grid.inline.row).withStyles(containerStyles).withChildren(iconSpan, textSpan).withAttribute("href", href);
+    if (ariaLabel) {
+      linkBuilder.withAttribute("aria-label", ariaLabel);
+    }
+    return linkBuilder.build();
   }
-  return gridInlineRow({
-    element: document.createElement("div"),
-    elementStyles: containerStyles,
-    isThemeDark,
-    children: [iconSpan, textSpan]
-  });
+  return new ElementBuilder().styled(layout.grid.inline.row).withStyles(containerStyles).withChildren(iconSpan, textSpan).build();
 };
 const contact = ({
   actions,
@@ -77,84 +70,48 @@ const contact = ({
   linkendIn,
   phone: phone$1
 }) => {
-  let children = [];
+  const container = new ElementBuilder().withClassName("text-lockup-contact").withStyles({
+    element: {
+      marginTop: `${token.spacing.sm}`
+    }
+  });
   if (phone$1) {
-    children.push(
-      createDiv({
-        className: "text-lockup-contact-phone",
-        children: [
-          makeContactLink({
-            element: phone$1,
-            icon: phone,
-            isThemeDark
-          })
-        ]
-      })
-    );
+    const phoneElement = new ElementBuilder().withClassName("text-lockup-contact-phone").withChild(
+      makeContactLink({ element: phone$1, icon: phone, isThemeDark })
+    ).build();
+    container.withChild(phoneElement);
   }
   if (email$1) {
-    children.push(
-      createDiv({
-        className: "text-lockup-contact-email",
-        children: [
-          makeContactLink({
-            element: email$1,
-            icon: email,
-            isThemeDark
-          })
-        ]
-      })
-    );
+    const emailElement = new ElementBuilder().withClassName("text-lockup-contact-email").withChild(
+      makeContactLink({ element: email$1, icon: email, isThemeDark })
+    ).build();
+    container.withChild(emailElement);
   }
   if (linkendIn) {
-    children.push(
-      createDiv({
-        className: "text-lockup-contact-linkedin",
-        children: [
-          makeContactLink({
-            element: linkendIn,
-            icon: linkedin,
-            isThemeDark
-          })
-        ]
+    const linkedInElement = new ElementBuilder().withClassName("text-lockup-contact-linkedin").withChild(
+      makeContactLink({
+        element: linkendIn,
+        icon: linkedin,
+        isThemeDark
       })
-    );
+    ).build();
+    container.withChild(linkedInElement);
   }
   if (address) {
-    children.push(
-      createDiv({
-        className: "text-lockup-contact-address",
-        children: [
-          makeContactLink({
-            element: address,
-            icon: pin,
-            isThemeDark
-          })
-        ]
-      })
-    );
+    const addressElement = new ElementBuilder().withClassName("text-lockup-contact-address").withChild(
+      makeContactLink({ element: address, icon: pin, isThemeDark })
+    ).build();
+    container.withChild(addressElement);
   }
   if (actions) {
-    children.push(
-      gridInlineTabletRows({
-        element: actions,
-        elementStyles: {
-          element: {
-            marginTop: token.spacing.sm
-          }
-        }
-      })
-    );
-  }
-  return createDiv({
-    className: "text-lockup-contact",
-    children,
-    elementStyles: {
+    const actionsElement = new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
       element: {
-        marginTop: `${token.spacing.sm}`
+        marginTop: token.spacing.sm
       }
-    }
-  });
+    }).build();
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 export {
   contact as default

package/dist/atomic/text-lockup/contact.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact.mjs","sources":["../../../source/atomic/text-lockup/contact.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { linkedin as iconLinkedIn } from '@universityofmaryland/web-icons-library/social';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../_types';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const iconElement = ElementModel.actions.iconSmall({\n    element: document.createElement('span'),\n    isThemeDark,\n  });\n\n  iconElement.element.innerHTML = icon;\n\n  return iconElement;\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  const textElement = ElementModel.headline.sansSmaller({\n    element: document.createElement('span'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        color: `${token.color.gray.dark}`,\n      },\n    },\n  });\n\n  textElement.element.innerHTML = text;\n\n  return textElement;\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n      },\n    },\n  };\n\n  if (isLink) {\n    const link = ElementModel.layout.gridInlineRow({\n      element: document.createElement('a'),\n      elementStyles: containerStyles,\n      isThemeDark,\n      children: [iconSpan, textSpan],\n    });\n\n    const ariaLabel = element.getAttribute('aria-label');\n\n    link.element.setAttribute('href', element.getAttribute('href') || '');\n    if (ariaLabel) link.element.setAttribute('aria-label', ariaLabel);\n\n    return link;\n  }\n\n  return ElementModel.layout.gridInlineRow({\n    element: document.createElement('div'),\n    elementStyles: containerStyles,\n    isThemeDark,\n    children: [iconSpan, textSpan],\n  });\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  let children: ElementVisual[] = [];\n\n  if (phone) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-phone',\n        children: [\n          makeContactLink({\n            element: phone,\n            icon: iconPhone,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (email) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-email',\n        children: [\n          makeContactLink({\n            element: email,\n            icon: iconEmail,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (linkendIn) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-linkedin',\n        children: [\n          makeContactLink({\n            element: linkendIn,\n            icon: iconLinkedIn,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (address) {\n    children.push(\n      ElementModel.createDiv({\n        className: 'text-lockup-contact-address',\n        children: [\n          makeContactLink({\n            element: address,\n            icon: iconPin,\n            isThemeDark,\n          }),\n        ],\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridInlineTabletRows({\n        element: actions,\n        elementStyles: {\n          element: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-contact',\n    children,\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.iconSmall","ElementModel.headline.sansSmaller","iconPin","ElementModel.layout.gridInlineRow","email","phone","ElementModel.createDiv","iconPhone","iconEmail","iconLinkedIn","ElementModel.layout.gridInlineTabletRows"],"mappings":"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"}
+{"version":3,"file":"contact.mjs","sources":["../../../source/atomic/text-lockup/contact.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 elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport {\n  email as iconEmail,\n  phone as iconPhone,\n} from '@universityofmaryland/web-icons-library/communication';\nimport { pin as iconPin } from '@universityofmaryland/web-icons-library/location';\nimport { linkedin as iconLinkedIn } from '@universityofmaryland/web-icons-library/social';\nimport { type PersonContactProps } from '../_types';\n\nconst makeIcon = ({\n  icon,\n  isThemeDark,\n}: {\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(icon)\n    .styled(\n      elementStyles.action.icon.composeIcon({\n        theme: theme.variant(isThemeDark),\n      }),\n    )\n    .build();\n};\n\nconst makeText = ({\n  text,\n  isThemeDark,\n}: {\n  text: string;\n  isThemeDark?: boolean;\n}) => {\n  return new ElementBuilder('span')\n    .withHTML(text)\n    .styled(\n      typography.sans.compose('smaller', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n      },\n    })\n    .build();\n};\n\nconst makeContactLink = ({\n  element,\n  icon,\n  isThemeDark,\n}: {\n  element: HTMLElement | HTMLAnchorElement;\n  icon: string;\n  isThemeDark?: boolean;\n}) => {\n  const isLink = element.getAttribute('href') && icon !== iconPin;\n  const textSpan = makeText({ text: element.innerHTML, isThemeDark });\n  const iconSpan = makeIcon({ icon, isThemeDark });\n  const containerStyles = {\n    element: {\n      marginTop: '4px',\n      lineHeight: '1.2em',\n\n      [`&a:hover, &a:focus`]: {\n        textDecoration: 'underline',\n\n        ...(isThemeDark && {\n          color: `${token.color.white}`,\n        }),\n      },\n    },\n  };\n\n  if (isLink) {\n    const ariaLabel = element.getAttribute('aria-label');\n    const href = element.getAttribute('href') || '';\n\n    const linkBuilder = new ElementBuilder('a')\n      .styled(layout.grid.inline.row)\n      .withStyles(containerStyles)\n      .withChildren(iconSpan, textSpan)\n      .withAttribute('href', href);\n\n    if (ariaLabel) {\n      linkBuilder.withAttribute('aria-label', ariaLabel);\n    }\n\n    return linkBuilder.build();\n  }\n\n  return new ElementBuilder()\n    .styled(layout.grid.inline.row)\n    .withStyles(containerStyles)\n    .withChildren(iconSpan, textSpan)\n    .build();\n};\n\nexport default ({\n  actions,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n      },\n    });\n\n  if (phone) {\n    const phoneElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-phone')\n      .withChild(\n        makeContactLink({ element: phone, icon: iconPhone, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(phoneElement);\n  }\n\n  if (email) {\n    const emailElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-email')\n      .withChild(\n        makeContactLink({ element: email, icon: iconEmail, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(emailElement);\n  }\n\n  if (linkendIn) {\n    const linkedInElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-linkedin')\n      .withChild(\n        makeContactLink({\n          element: linkendIn,\n          icon: iconLinkedIn,\n          isThemeDark,\n        }),\n      )\n      .build();\n\n    container.withChild(linkedInElement);\n  }\n\n  if (address) {\n    const addressElement = new ElementBuilder()\n      .withClassName('text-lockup-contact-address')\n      .withChild(\n        makeContactLink({ element: address, icon: iconPin, isThemeDark }),\n      )\n      .build();\n\n    container.withChild(addressElement);\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":["iconPin","email","phone","iconPhone","iconEmail","iconLinkedIn"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBAgEc,OAAO,mBAAmB;;;;AAA1C,wBA0BE"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;yBAqEc,OAAO,mBAAmB;;;;AAA1C,wBA0BE"}

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

@@ -1,6 +1,6 @@
 "use strict";
 const animation = require("@universityofmaryland/web-styles-library/animation");
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 const string = require("@universityofmaryland/web-utilities-library/string");
@@ -65,6 +65,11 @@ const HeadlineStyles = `
     [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation__namespace.line.slideUnderWhite
   }
 })}
+
+  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},
+  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { 
+    color: ${token__namespace.color.white};
+  }
 `;
 const ComponentStyles = `
   .${EVENT_DATE_CONTAINER} {

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

@@ -1 +1 @@
-{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":["token","jssToCSS","typography","animation","styles","truncateText","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACAA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/BC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEAD,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACFF,iBAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEAF,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAIJ,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAIC,UAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,IAAAA,WAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAeC,OAAAA,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrCC,qCAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,QAAAF,QAAA;AAC/B;;"}
+{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { \n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":["token","jssToCSS","typography","animation","styles","truncateText","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACAA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/BC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEAD,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGC,sBAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACFF,iBAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEAF,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAGE,qBAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAAA,KAEC,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,KACvD,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,aAC/CH,iBAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAII,UAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,IAAAA,WAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAeC,OAAAA,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrCC,qCAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,QAAAF,QAAA;AAC/B;;"}

package/dist/atomic/text-lockup/date.mjs

@@ -1,5 +1,5 @@
 import * as animation from "@universityofmaryland/web-styles-library/animation";
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import { truncateText } from "@universityofmaryland/web-utilities-library/string";
@@ -45,6 +45,11 @@ const HeadlineStyles = `
     [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite
   }
 })}
+
+  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},
+  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { 
+    color: ${token.color.white};
+  }
 `;
 const ComponentStyles = `
   .${EVENT_DATE_CONTAINER} {

package/dist/atomic/text-lockup/date.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"date.mjs","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACF,MAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAIJ,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAI,SAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,cAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAe,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrC,yBAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,OAAA;AAC/B;"}
+{"version":3,"file":"date.mjs","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { \n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport default (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACF,MAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAAA,KAEC,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,KACvD,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,aAC/C,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGlB,MAAA,OAAe,CAAC,UAA+B;AAC7C,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAI,SAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,cAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAe,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrC,yBAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,OAAA;AAC/B;"}

package/dist/atomic/text-lockup/large.d.ts

@@ -1,6 +1,6 @@
-import { ElementVisual } from '../../_types';
+import { ElementModel } from '../../_types';
 interface TypeTextLockupLarge {
-    headlineComposite?: ElementVisual | null;
+    headlineComposite?: ElementModel<HTMLElement> | null;
     eyebrow?: HTMLElement | null;
     ribbon?: HTMLElement | null;
     text?: HTMLElement | null;
@@ -9,10 +9,6 @@ interface TypeTextLockupLarge {
     isThemeDark?: boolean;
     additionalStyles?: Record<string, unknown>;
 }
-declare const _default: ({ eyebrow, ribbon, headlineComposite, text, textLargest, actions, isThemeDark, additionalStyles, }: TypeTextLockupLarge) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ eyebrow, ribbon, headlineComposite, text, textLargest, actions, isThemeDark, additionalStyles, }: TypeTextLockupLarge) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=large.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"large.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/large.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,UAAU,mBAAmB;IAC3B,iBAAiB,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;yBAEe,oGASb,mBAAmB;;;;;AATtB,wBA+FE"}
+{"version":3,"file":"large.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/large.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,iBAAiB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC5C;yBAEe,oGASb,mBAAmB;AATtB,wBAwGE"}

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

@@ -1,10 +1,10 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../model/elements/index.js");
-const headline = require("../../model/elements/headline.js");
-const text = require("../../model/elements/text.js");
-const richText = require("../../model/elements/rich-text.js");
-const layout = require("../../model/elements/layout.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -22,94 +22,85 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
 const large = ({
   eyebrow,
   ribbon,
   headlineComposite,
-  text: text$1,
+  text,
   textLargest,
   actions,
   isThemeDark,
   additionalStyles
 }) => {
-  const children = [];
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("text-lockup-large").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative",
+      ...additionalStyles
+    }
+  });
   if (eyebrow) {
-    children.push(
-      headline.sansSmall({
-        element: eyebrow,
-        elementStyles: {
-          element: {
-            textTransform: "uppercase",
-            fontWeight: 600,
-            color: token__namespace.color.black
-          },
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
-          }
-        },
-        isThemeDark
+    const eyebrowElement = new webBuilderLibrary.ElementBuilder(eyebrow).styled(
+      typography__namespace.sans.compose("small", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      element: {
+        textTransform: "uppercase",
+        fontWeight: 600,
+        ...!isThemeDark && { color: token__namespace.color.black }
+      },
+      siblingAfter: {
+        marginTop: token__namespace.spacing.sm
+      }
+    }).build();
+    container.withChild(eyebrowElement);
   }
   if (ribbon) {
-    children.push(
-      text.ribbon({
-        element: ribbon,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
-          }
-        }
-      })
-    );
+    const ribbonElement = new webBuilderLibrary.ElementBuilder(ribbon).styled(elementStyles__namespace.text.decoration.ribbon).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.sm
+      }
+    }).build();
+    container.withChild(ribbonElement);
   }
   if (headlineComposite) {
-    children.push(headlineComposite);
+    container.withChild(headlineComposite);
   }
-  if (text$1) {
-    children.push(
-      richText.simpleLarge({
-        element: text$1,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.lg
-          }
-        },
-        isThemeDark
+  if (text) {
+    const textElement = new webBuilderLibrary.ElementBuilder(text).styled(
+      elementStyles__namespace.text.rich.composeSimple({
+        size: "large",
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.lg
+      }
+    }).build();
+    container.withChild(textElement);
   }
   if (textLargest) {
-    children.push(
-      richText.simpleLargest({
-        element: textLargest,
-        elementStyles: {
-          siblingAfter: {
-            marginTop: token__namespace.spacing.lg
-          }
-        },
-        isThemeDark
+    const textLargestElement = new webBuilderLibrary.ElementBuilder(textLargest).styled(
+      elementStyles__namespace.text.rich.composeSimple({
+        size: "largest",
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles({
+      siblingAfter: {
+        marginTop: token__namespace.spacing.lg
+      }
+    }).build();
+    container.withChild(textLargestElement);
   }
   if (actions) {
-    children.push(
-      layout.gridStacked({
-        element: actions
-      })
-    );
+    const actionsElement = new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.stacked).build();
+    container.withChild(actionsElement);
   }
-  return index.createDiv({
-    className: "text-lockup-large",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative",
-        ...additionalStyles
-      }
-    }
-  });
+  return container.build();
 };
 module.exports = large;
 //# sourceMappingURL=large.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"large.js","sources":["../../../source/atomic/text-lockup/large.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\ninterface TypeTextLockupLarge {\n  headlineComposite?: ElementVisual | null;\n  eyebrow?: HTMLElement | null;\n  ribbon?: HTMLElement | null;\n  text?: HTMLElement | null;\n  textLargest?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  additionalStyles?: Record<string, unknown>;\n}\n\nexport default ({\n  eyebrow,\n  ribbon,\n  headlineComposite,\n  text,\n  textLargest,\n  actions,\n  isThemeDark,\n  additionalStyles,\n}: TypeTextLockupLarge) => {\n  const children: ElementVisual[] = [];\n\n  if (eyebrow) {\n    children.push(\n      ElementModel.headline.sansSmall({\n        element: eyebrow,\n        elementStyles: {\n          element: {\n            textTransform: 'uppercase',\n            fontWeight: 600,\n            color: token.color.black,\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (ribbon) {\n    children.push(\n      ElementModel.text.ribbon({\n        element: ribbon,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n      }),\n    );\n  }\n\n  if (headlineComposite) {\n    children.push(headlineComposite);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simpleLarge({\n        element: text,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.lg,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (textLargest) {\n    children.push(\n      ElementModel.richText.simpleLargest({\n        element: textLargest,\n        elementStyles: {\n          siblingAfter: {\n            marginTop: token.spacing.lg,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      ElementModel.layout.gridStacked({\n        element: actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'text-lockup-large',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...additionalStyles,\n      },\n    },\n  });\n};\n"],"names":["text","ElementModel.headline.sansSmall","token","ElementModel.text.ribbon","ElementModel.richText.simpleLarge","ElementModel.richText.simpleLargest","ElementModel.layout.gridStacked","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EAAA,MACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,WAA4B,CAAA;AAElC,MAAI,SAAS;AACX,aAAS;AAAA,MACPC,mBAAgC;AAAA,QAC9B,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,YACP,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,OAAOC,iBAAM,MAAM;AAAA,UAAA;AAAA,UAErB,cAAc;AAAA,YACZ,WAAWA,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,QAAQ;AACV,aAAS;AAAA,MACPC,YAAyB;AAAA,QACvB,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWD,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,MACF,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,mBAAmB;AACrB,aAAS,KAAK,iBAAiB;AAAA,EACjC;AAEA,MAAIF,QAAM;AACR,aAAS;AAAA,MACPI,qBAAkC;AAAA,QAChC,SAASJ;AAAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWE,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,aAAa;AACf,aAAS;AAAA,MACPG,uBAAoC;AAAA,QAClC,SAAS;AAAA,QACT,eAAe;AAAA,UACb,cAAc;AAAA,YACZ,WAAWH,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACPI,mBAAgC;AAAA,QAC9B,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"large.js","sources":["../../../source/atomic/text-lockup/large.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 elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { ElementModel } from '../../_types';\n\ninterface TypeTextLockupLarge {\n  headlineComposite?: ElementModel<HTMLElement> | null;\n  eyebrow?: HTMLElement | null;\n  ribbon?: HTMLElement | null;\n  text?: HTMLElement | null;\n  textLargest?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n  additionalStyles?: Record<string, unknown>;\n}\n\nexport default ({\n  eyebrow,\n  ribbon,\n  headlineComposite,\n  text,\n  textLargest,\n  actions,\n  isThemeDark,\n  additionalStyles,\n}: TypeTextLockupLarge) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-large')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...additionalStyles,\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = new ElementBuilder(eyebrow)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          textTransform: 'uppercase',\n          fontWeight: 600,\n          ...(!isThemeDark && { color: token.color.black }),\n        },\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(eyebrowElement);\n  }\n\n  if (ribbon) {\n    const ribbonElement = new ElementBuilder(ribbon)\n      .styled(elementStyles.text.decoration.ribbon)\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(ribbonElement);\n  }\n\n  if (headlineComposite) {\n    container.withChild(headlineComposite);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          size: 'large',\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (textLargest) {\n    const textLargestElement = new ElementBuilder(textLargest)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          size: 'largest',\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        siblingAfter: {\n          marginTop: token.spacing.lg,\n        },\n      })\n      .build();\n\n    container.withChild(textLargestElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.stacked)\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","typography","theme","token","elementStyles","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,YAAY,IAAIA,kBAAAA,eAAA,EACnB,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,SAAS;AACX,UAAM,iBAAiB,IAAIA,iCAAe,OAAO,EAC9C;AAAA,MACCC,sBAAW,KAAK,QAAQ,SAAS;AAAA,QAC/B,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,SAAS;AAAA,QACP,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,GAAI,CAAC,eAAe,EAAE,OAAOC,iBAAM,MAAM,MAAA;AAAA,MAAM;AAAA,MAEjD,cAAc;AAAA,QACZ,WAAWA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,QAAQ;AACV,UAAM,gBAAgB,IAAIH,iCAAe,MAAM,EAC5C,OAAOI,yBAAc,KAAK,WAAW,MAAM,EAC3C,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAWD,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,aAAa;AAAA,EACnC;AAEA,MAAI,mBAAmB;AACrB,cAAU,UAAU,iBAAiB;AAAA,EACvC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAIH,iCAAe,IAAI,EACxC;AAAA,MACCI,yBAAc,KAAK,KAAK,cAAc;AAAA,QACpC,MAAM;AAAA,QACN,OAAOF,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAWC,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,aAAa;AACf,UAAM,qBAAqB,IAAIH,iCAAe,WAAW,EACtD;AAAA,MACCI,yBAAc,KAAK,KAAK,cAAc;AAAA,QACpC,MAAM;AAAA,QACN,OAAOF,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW;AAAA,MACV,cAAc;AAAA,QACZ,WAAWC,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B,CACD,EACA,MAAA;AAEH,cAAU,UAAU,kBAAkB;AAAA,EACxC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,IAAIH,kBAAAA,eAAe,OAAO,EAC9C,OAAOK,kBAAO,KAAK,OAAO,EAC1B,MAAA;AAEH,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;;"}