@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1,10 +1,9 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
-const index = require("../../../model/elements/index.js");
-const headline = require("../../../model/elements/headline.js");
-const richText = require("../../../model/elements/rich-text.js");
-const layout = require("../../../model/elements/layout.js");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,6 +22,7 @@ function _interopNamespaceDefault(e) {
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const ANIMATION_CONFIGS = {
   line: `
     @keyframes intro-line {
@@ -50,138 +50,128 @@ const ANIMATION_CONFIGS = {
   `
 };
 const createHeadline = (props) => {
-  const { headline: headline$1 } = props;
-  if (!headline$1) return;
-  return headline.sansLargest({
-    element: headline$1,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase"
-      }
+  const { headline, isThemeDark } = props;
+  if (!headline) return null;
+  return new webBuilderLibrary.ElementBuilder(headline).styled(
+    Styles__namespace.typography.sans.compose("largest", {
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase"
     }
-  });
+  }).build();
 };
 const createText = (props) => {
-  const { text } = props;
-  if (!text) return;
-  return richText.simpleLarge({
-    element: text,
-    elementStyles: {
-      element: {
-        [`* + &`]: {
-          marginTop: token__namespace.spacing.sm
-        }
+  const { text, isThemeDark } = props;
+  if (!text) return null;
+  return new webBuilderLibrary.ElementBuilder(text).styled(
+    Styles__namespace.element.text.rich.composeSimple({
+      size: "large",
+      theme: theme.theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      [`* + &`]: {
+        marginTop: token__namespace.spacing.sm
       }
     }
-  });
+  }).build();
 };
 const createActions = (props) => {
   const { actions } = props;
-  if (!actions) return;
-  return layout.gridInlineTabletRows({
-    element: actions,
-    elementStyles: {
-      element: {
-        justifyContent: "center",
-        alignItems: "center",
-        [`* + &`]: {
-          marginTop: token__namespace.spacing.md
-        }
+  if (!actions) return null;
+  return new webBuilderLibrary.ElementBuilder(actions).styled(Styles__namespace.layout.grid.inline.tabletRows).withStyles({
+    element: {
+      justifyContent: "center",
+      alignItems: "center",
+      [`* + &`]: {
+        marginTop: token__namespace.spacing.md
       }
     }
-  });
+  }).build();
 };
 const createTextContainer = (props) => {
-  const { headline: headline2, text, actions, includesAnimation, isThemeDark } = props;
-  const headlineElement = createHeadline({ headline: headline2 });
-  const textElement = createText({ text });
+  const { headline, text, actions, includesAnimation, isThemeDark } = props;
+  const headlineElement = createHeadline({ headline, isThemeDark });
+  const textElement = createText({ text, isThemeDark });
   const actionsElement = createActions({ actions });
-  const children = [headlineElement, textElement, actionsElement].filter(
-    Boolean
-  );
-  return index.createDiv({
-    className: "intro-default-container-text",
-    children,
-    elementStyles: {
-      element: {
-        ...includesAnimation && {
-          opacity: 0
-        },
-        ["& > *, p"]: {
-          ...!headline2 && {
-            ...typography__namespace.sans.transformations.largerBold,
-            color: token__namespace.color.black,
-            ...isThemeDark && {
-              color: token__namespace.color.white
-            }
-          }
-        },
-        [".intro-default-animated &"]: {
-          transform: "translateY(100px)",
-          animation: "intro-fade-in 1s forwards",
-          animationDelay: "0.2s"
-        },
-        [`&:before`]: {
-          ...includesAnimation && {
-            height: 0,
-            transform: `translateY(${token__namespace.spacing.lg})`
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container-text").withStyles({
+    element: {
+      ...includesAnimation && {
+        opacity: 0
+      },
+      ["& > *, p"]: {
+        ...!headline && {
+          ...typography__namespace.sans.transformations.largerBold,
+          color: token__namespace.color.black,
+          ...isThemeDark && {
+            color: token__namespace.color.white
           }
         }
+      },
+      [".intro-default-animated &"]: {
+        transform: "translateY(100px)",
+        animation: "intro-fade-in 1s forwards",
+        animationDelay: "0.2s"
+      },
+      [`&:before`]: {
+        ...includesAnimation && {
+          height: 0,
+          transform: `translateY(${token__namespace.spacing.lg})`
+        }
       }
     }
   });
+  if (headlineElement) {
+    container.withChild(headlineElement);
+  }
+  if (textElement) {
+    container.withChild(textElement);
+  }
+  if (actionsElement) {
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 const createWrapper = (props) => {
   const textContainerElement = createTextContainer(props);
-  return index.createDiv({
-    className: "intro-default-container-wrapper",
-    children: [textContainerElement],
-    elementStyles: {
-      element: {
-        textAlign: "center"
-      }
+  return new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container-wrapper").withChild(textContainerElement).withStyles({
+    element: {
+      textAlign: "center"
     }
-  });
+  }).build();
 };
 const createContainer = (props) => {
   const { isThemeDark, hasSeparator, includesAnimation } = props;
   const wrapperElement = createWrapper(props);
-  return index.createDiv({
-    className: "intro-default-container",
-    children: [wrapperElement],
-    elementStyles: {
-      element: {
-        maxWidth: token__namespace.spacing.maxWidth.small,
-        margin: "0 auto",
+  return new webBuilderLibrary.ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
+    element: {
+      maxWidth: token__namespace.spacing.maxWidth.small,
+      margin: "0 auto",
+      ...hasSeparator && {
+        paddingTop: token__namespace.spacing["6xl"],
+        position: "relative"
+      },
+      [`&:before`]: {
         ...hasSeparator && {
-          paddingTop: token__namespace.spacing["6xl"],
-          position: "relative"
-        },
-        [`&:before`]: {
-          ...hasSeparator && {
-            content: '""',
-            backgroundColor: token__namespace.color.red,
-            position: "absolute",
-            height: token__namespace.spacing["4xl"],
-            width: "2px",
-            left: "calc(50% - 1px)",
-            top: 0
-          }
-        },
-        ["&.intro-default-animated:before"]: {
-          ...includesAnimation && {
-            animation: "intro-line 1.2s forwards"
-          }
-        },
-        [`& *`]: {
-          ...isThemeDark && {
-            color: token__namespace.color.white
-          }
+          content: '""',
+          backgroundColor: token__namespace.color.red,
+          position: "absolute",
+          height: token__namespace.spacing["4xl"],
+          width: "2px",
+          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;

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 * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\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 = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\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        ['.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};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\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          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\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\nexport default (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"],"names":["token","headline","ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","typography","observer"],"mappings":"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"}
+{"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';\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'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, isThemeDark } = props;\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(\n      Styles.element.text.rich.composeSimple({\n        size: 'large',\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\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, 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        ['& > *, p']: {\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        ['.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\nexport default (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"],"names":["token","ElementBuilder","Styles","theme","typography","observer"],"mappings":"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"}

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

@@ -1,9 +1,8 @@
-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 { createDiv } from "../../../model/elements/index.mjs";
-import { sansLargest } from "../../../model/elements/headline.mjs";
-import { simpleLarge } from "../../../model/elements/rich-text.mjs";
-import { gridInlineTabletRows } from "../../../model/elements/layout.mjs";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const ANIMATION_CONFIGS = {
   line: `
     @keyframes intro-line {
@@ -31,138 +30,128 @@ const ANIMATION_CONFIGS = {
   `
 };
 const createHeadline = (props) => {
-  const { headline } = props;
-  if (!headline) return;
-  return sansLargest({
-    element: headline,
-    elementStyles: {
-      element: {
-        fontWeight: 800,
-        textTransform: "uppercase"
-      }
+  const { headline, isThemeDark } = props;
+  if (!headline) return null;
+  return new ElementBuilder(headline).styled(
+    Styles.typography.sans.compose("largest", {
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      fontWeight: 800,
+      textTransform: "uppercase"
     }
-  });
+  }).build();
 };
 const createText = (props) => {
-  const { text } = props;
-  if (!text) return;
-  return simpleLarge({
-    element: text,
-    elementStyles: {
-      element: {
-        [`* + &`]: {
-          marginTop: token.spacing.sm
-        }
+  const { text, isThemeDark } = props;
+  if (!text) return null;
+  return new ElementBuilder(text).styled(
+    Styles.element.text.rich.composeSimple({
+      size: "large",
+      theme: theme.fontColor(isThemeDark)
+    })
+  ).withStyles({
+    element: {
+      [`* + &`]: {
+        marginTop: token.spacing.sm
       }
     }
-  });
+  }).build();
 };
 const createActions = (props) => {
   const { actions } = props;
-  if (!actions) return;
-  return gridInlineTabletRows({
-    element: actions,
-    elementStyles: {
-      element: {
-        justifyContent: "center",
-        alignItems: "center",
-        [`* + &`]: {
-          marginTop: token.spacing.md
-        }
+  if (!actions) return null;
+  return new ElementBuilder(actions).styled(Styles.layout.grid.inline.tabletRows).withStyles({
+    element: {
+      justifyContent: "center",
+      alignItems: "center",
+      [`* + &`]: {
+        marginTop: token.spacing.md
       }
     }
-  });
+  }).build();
 };
 const createTextContainer = (props) => {
   const { headline, text, actions, includesAnimation, isThemeDark } = props;
-  const headlineElement = createHeadline({ headline });
-  const textElement = createText({ text });
+  const headlineElement = createHeadline({ headline, isThemeDark });
+  const textElement = createText({ text, isThemeDark });
   const actionsElement = createActions({ actions });
-  const children = [headlineElement, textElement, actionsElement].filter(
-    Boolean
-  );
-  return createDiv({
-    className: "intro-default-container-text",
-    children,
-    elementStyles: {
-      element: {
-        ...includesAnimation && {
-          opacity: 0
-        },
-        ["& > *, p"]: {
-          ...!headline && {
-            ...typography.sans.transformations.largerBold,
-            color: token.color.black,
-            ...isThemeDark && {
-              color: token.color.white
-            }
-          }
-        },
-        [".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").withStyles({
+    element: {
+      ...includesAnimation && {
+        opacity: 0
+      },
+      ["& > *, p"]: {
+        ...!headline && {
+          ...typography.sans.transformations.largerBold,
+          color: token.color.black,
+          ...isThemeDark && {
+            color: token.color.white
           }
         }
+      },
+      [".intro-default-animated &"]: {
+        transform: "translateY(100px)",
+        animation: "intro-fade-in 1s forwards",
+        animationDelay: "0.2s"
+      },
+      [`&:before`]: {
+        ...includesAnimation && {
+          height: 0,
+          transform: `translateY(${token.spacing.lg})`
+        }
       }
     }
   });
+  if (headlineElement) {
+    container.withChild(headlineElement);
+  }
+  if (textElement) {
+    container.withChild(textElement);
+  }
+  if (actionsElement) {
+    container.withChild(actionsElement);
+  }
+  return container.build();
 };
 const createWrapper = (props) => {
   const textContainerElement = createTextContainer(props);
-  return createDiv({
-    className: "intro-default-container-wrapper",
-    children: [textContainerElement],
-    elementStyles: {
-      element: {
-        textAlign: "center"
-      }
+  return new ElementBuilder().withClassName("intro-default-container-wrapper").withChild(textContainerElement).withStyles({
+    element: {
+      textAlign: "center"
     }
-  });
+  }).build();
 };
 const createContainer = (props) => {
   const { isThemeDark, hasSeparator, includesAnimation } = props;
   const wrapperElement = createWrapper(props);
-  return createDiv({
-    className: "intro-default-container",
-    children: [wrapperElement],
-    elementStyles: {
-      element: {
-        maxWidth: token.spacing.maxWidth.small,
-        margin: "0 auto",
+  return new ElementBuilder().withClassName("intro-default-container").withChild(wrapperElement).withStyles({
+    element: {
+      maxWidth: token.spacing.maxWidth.small,
+      margin: "0 auto",
+      ...hasSeparator && {
+        paddingTop: token.spacing["6xl"],
+        position: "relative"
+      },
+      [`&:before`]: {
         ...hasSeparator && {
-          paddingTop: token.spacing["6xl"],
-          position: "relative"
-        },
-        [`&:before`]: {
-          ...hasSeparator && {
-            content: '""',
-            backgroundColor: token.color.red,
-            position: "absolute",
-            height: token.spacing["4xl"],
-            width: "2px",
-            left: "calc(50% - 1px)",
-            top: 0
-          }
-        },
-        ["&.intro-default-animated:before"]: {
-          ...includesAnimation && {
-            animation: "intro-line 1.2s forwards"
-          }
-        },
-        [`& *`]: {
-          ...isThemeDark && {
-            color: token.color.white
-          }
+          content: '""',
+          backgroundColor: token.color.red,
+          position: "absolute",
+          height: token.spacing["4xl"],
+          width: "2px",
+          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;

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

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../../source/composite/layout/section-intro/small.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../_types';\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 = (props: Pick<SectionIntroProps, 'headline'>) => {\n  const { headline } = props;\n  if (!headline) return;\n\n  return ElementModel.headline.sansLargest({\n    element: headline,\n    elementStyles: {\n      element: {\n        fontWeight: 800,\n        textTransform: 'uppercase',\n      },\n    },\n  });\n};\n\nconst createText = (props: Pick<SectionIntroProps, 'text'>) => {\n  const { text } = props;\n  if (!text) return;\n\n  return ElementModel.richText.simpleLarge({\n    element: text,\n    elementStyles: {\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    },\n  });\n};\n\nconst createActions = (props: Pick<SectionIntroProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        justifyContent: 'center',\n        alignItems: 'center',\n\n        [`* + &`]: {\n          marginTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n\nconst createTextContainer = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark' | 'includesAnimation'\n  >,\n) => {\n  const { headline, text, actions, includesAnimation, isThemeDark } = props;\n\n  const headlineElement = createHeadline({ headline });\n  const textElement = createText({ text });\n  const actionsElement = createActions({ actions });\n\n  const children = [headlineElement, textElement, actionsElement].filter(\n    Boolean,\n  ) as ElementVisual[];\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-text',\n    children,\n    elementStyles: {\n      element: {\n        ...(includesAnimation && {\n          opacity: 0,\n        }),\n\n        ['& > *, p']: {\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        ['.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};\n\nconst createWrapper = (\n  props: Pick<\n    SectionIntroProps,\n    'headline' | 'text' | 'actions' | 'isThemeDark'\n  >,\n) => {\n  const textContainerElement = createTextContainer(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container-wrapper',\n    children: [textContainerElement],\n    elementStyles: {\n      element: {\n        textAlign: 'center',\n      },\n    },\n  });\n};\n\nconst createContainer = (\n  props: Pick<\n    SectionIntroProps,\n    | 'isThemeDark'\n    | 'hasSeparator'\n    | 'headline'\n    | 'text'\n    | 'actions'\n    | 'includesAnimation'\n  >,\n) => {\n  const { isThemeDark, hasSeparator, includesAnimation } = props;\n\n  const wrapperElement = createWrapper(props);\n\n  return ElementModel.createDiv({\n    className: 'intro-default-container',\n    children: [wrapperElement],\n    elementStyles: {\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          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    },\n  });\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\nexport default (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"],"names":["ElementModel.headline.sansLargest","ElementModel.richText.simpleLarge","ElementModel.layout.gridInlineTabletRows","ElementModel.createDiv","observer"],"mappings":"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"}
+{"version":3,"file":"small.mjs","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';\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'>,\n): ElementModel<HTMLElement> | null => {\n  const { text, isThemeDark } = props;\n  if (!text) return null;\n\n  return new ElementBuilder(text)\n    .styled(\n      Styles.element.text.rich.composeSimple({\n        size: 'large',\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\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, 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        ['& > *, p']: {\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        ['.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\nexport default (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"],"names":["observer"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import { ElementVisual } from '../../../_types';
+import { ElementModel } from '../../../_types';
 export interface SectionIntroWideProps {
     headline?: HTMLElement | null;
     actions?: HTMLElement | null;
     isThemeDark?: boolean;
 }
-declare const _default: (props: SectionIntroWideProps) => ElementVisual;
+declare const _default: (props: SectionIntroWideProps) => ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=wide.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wide.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAwFe,OAAO,qBAAqB;AAA5C,wBAAwE"}
+{"version":3,"file":"wide.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/section-intro/wide.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAsFe,OAAO,qBAAqB;AAA5C,wBAAwE"}