@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/card/list.js

@@ -1,30 +1,34 @@
 "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 styles = require("@universityofmaryland/web-utilities-library/styles");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../model/elements/index.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 require("../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 const small = require("../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -45,26 +49,22 @@ const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
 const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
 const mediumBreakpoint = token__namespace.media.breakpointValues.large.min;
-const makeDateColumn = (dateSign) => index.createDiv({
-  className: "card-list-date-sign-wrapper",
-  elementStyles: {
-    element: {
-      width: `${token__namespace.spacing.xl}`,
-      order: 1,
-      alignSelf: "flex-start",
-      ...styles.createMediaQuery("max-width", mediumBreakpoint, {
-        display: "none"
-      }),
-      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
-        width: `${token__namespace.spacing["8xl"]}`
-      })
-    }
-  },
-  children: [dateSign]
-});
-const makeTextColumn = (props) => index.createDiv({
-  className: "card-list-text-wrapper",
-  elementStyles: {
+const makeDateColumn = (dateSign) => new webBuilderLibrary.ElementBuilder().withClassName("card-list-date-sign-wrapper").withStyles({
+  element: {
+    width: `${token__namespace.spacing.xl}`,
+    order: 1,
+    alignSelf: "flex-start",
+    ...styles.createMediaQuery("max-width", mediumBreakpoint, {
+      display: "none"
+    }),
+    ...styles.createMediaQuery("min-width", mediumBreakpoint, {
+      width: `${token__namespace.spacing["8xl"]}`
+    })
+  }
+}).withChild(dateSign).build();
+const makeTextColumn = (props) => {
+  const lockup = small.createTextLockupSmall(props);
+  return new webBuilderLibrary.ElementBuilder().withClassName("card-list-text-wrapper").withStyles({
     element: {
       flex: "1 0",
       ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
@@ -75,15 +75,18 @@ const makeTextColumn = (props) => index.createDiv({
         width: "208px"
       })
     }
-  },
-  children: [small.createTextLockupSmall(props)]
-});
+  }).withChild(lockup).build();
+};
 const makeImageColumn = ({
   image,
   isAligned
-}) => index.createDiv({
-  className: "card-list-image-wrapper",
-  elementStyles: {
+}) => {
+  const backgroundImage = background({
+    element: image,
+    isScaled: isAligned,
+    isGifAllowed: false
+  });
+  return new webBuilderLibrary.ElementBuilder().withClassName("card-list-image-wrapper").withStyles({
     element: {
       ...styles.createMediaQuery("max-width", smallBreakpoint, {
         marginLeft: token__namespace.spacing.min,
@@ -113,15 +116,8 @@ const makeImageColumn = ({
         })
       }
     }
-  },
-  children: [
-    background({
-      element: image,
-      isScaled: isAligned,
-      isGifAllowed: false
-    })
-  ]
-});
+  }).withChild(backgroundImage).build();
+};
 const list = (props) => {
   const { image, isAligned, isThemeDark, dateSign } = props;
   let children = [];
@@ -132,33 +128,25 @@ const list = (props) => {
     children.push(makeDateColumn(dateSign));
   }
   children.push(makeTextColumn(props));
-  const wrapper = index.createDiv({
-    className: "card-list-wrapper",
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
-          display: "flex",
-          justifyContent: "space-between"
-        })
-      }
-    },
-    children
-  });
-  return index.createDiv({
-    className: "card-list-container",
-    elementStyles: {
-      element: {
-        height: "100%",
-        overflow: "hidden",
-        ...isThemeDark && {
-          backgroundColor: token__namespace.color.black,
-          color: token__namespace.color.white
-        }
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("card-list-wrapper").withStyles({
+    element: {
+      containerType: "inline-size",
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "flex",
+        justifyContent: "space-between"
+      })
+    }
+  }).withChildren(...children).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName("card-list-container").withStyles({
+    element: {
+      height: "100%",
+      overflow: "hidden",
+      ...isThemeDark && {
+        backgroundColor: token__namespace.color.black,
+        color: token__namespace.color.white
       }
-    },
-    children: [wrapper]
-  });
+    }
+  }).withChild(wrapper).build();
 };
 module.exports = list;
 //# sourceMappingURL=list.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...createMediaQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: `${token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: `${token.spacing.md}`,\n          order: '2',\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '3',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["token","ElementModel.createDiv","createMediaQuery","textLockup.small","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  new ElementBuilder()\n    .withClassName('card-list-date-sign-wrapper')\n    .withStyles({\n      element: {\n        width: `${token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...createMediaQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: `${token.spacing['8xl']}`,\n        }),\n      },\n    })\n    .withChild(dateSign)\n    .build();\n\nconst makeTextColumn = (props: CardListProps) => {\n  const lockup = textLockup.small(props);\n\n  return new ElementBuilder()\n    .withClassName('card-list-text-wrapper')\n    .withStyles({\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: `${token.spacing.md}`,\n          order: '2',\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: isAligned,\n    isGifAllowed: false,\n  });\n\n  return new ElementBuilder()\n    .withClassName('card-list-image-wrapper')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '3',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = new ElementBuilder()\n    .withClassName('card-list-wrapper')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('card-list-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/list.mjs

@@ -1,52 +1,52 @@
-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 { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import { createDiv } from "../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import "../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import { createTextLockupSmall } from "../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const mediumBreakpoint = token.media.breakpointValues.large.min;
-const makeDateColumn = (dateSign) => createDiv({
-  className: "card-list-date-sign-wrapper",
-  elementStyles: {
-    element: {
-      width: `${token.spacing.xl}`,
-      order: 1,
-      alignSelf: "flex-start",
-      ...createMediaQuery("max-width", mediumBreakpoint, {
-        display: "none"
-      }),
-      ...createMediaQuery("min-width", mediumBreakpoint, {
-        width: `${token.spacing["8xl"]}`
-      })
-    }
-  },
-  children: [dateSign]
-});
-const makeTextColumn = (props) => createDiv({
-  className: "card-list-text-wrapper",
-  elementStyles: {
+const makeDateColumn = (dateSign) => new ElementBuilder().withClassName("card-list-date-sign-wrapper").withStyles({
+  element: {
+    width: `${token.spacing.xl}`,
+    order: 1,
+    alignSelf: "flex-start",
+    ...createMediaQuery("max-width", mediumBreakpoint, {
+      display: "none"
+    }),
+    ...createMediaQuery("min-width", mediumBreakpoint, {
+      width: `${token.spacing["8xl"]}`
+    })
+  }
+}).withChild(dateSign).build();
+const makeTextColumn = (props) => {
+  const lockup = createTextLockupSmall(props);
+  return new ElementBuilder().withClassName("card-list-text-wrapper").withStyles({
     element: {
       flex: "1 0",
       ...createMediaQuery("min-width", mediumBreakpointStart, {
@@ -57,15 +57,18 @@ const makeTextColumn = (props) => createDiv({
         width: "208px"
       })
     }
-  },
-  children: [createTextLockupSmall(props)]
-});
+  }).withChild(lockup).build();
+};
 const makeImageColumn = ({
   image,
   isAligned
-}) => createDiv({
-  className: "card-list-image-wrapper",
-  elementStyles: {
+}) => {
+  const backgroundImage = imageContainer({
+    element: image,
+    isScaled: isAligned,
+    isGifAllowed: false
+  });
+  return new ElementBuilder().withClassName("card-list-image-wrapper").withStyles({
     element: {
       ...createMediaQuery("max-width", smallBreakpoint, {
         marginLeft: token.spacing.min,
@@ -95,15 +98,8 @@ const makeImageColumn = ({
         })
       }
     }
-  },
-  children: [
-    imageContainer({
-      element: image,
-      isScaled: isAligned,
-      isGifAllowed: false
-    })
-  ]
-});
+  }).withChild(backgroundImage).build();
+};
 const list = (props) => {
   const { image, isAligned, isThemeDark, dateSign } = props;
   let children = [];
@@ -114,33 +110,25 @@ const list = (props) => {
     children.push(makeDateColumn(dateSign));
   }
   children.push(makeTextColumn(props));
-  const wrapper = createDiv({
-    className: "card-list-wrapper",
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        ...createMediaQuery("min-width", mediumBreakpointStart, {
-          display: "flex",
-          justifyContent: "space-between"
-        })
-      }
-    },
-    children
-  });
-  return createDiv({
-    className: "card-list-container",
-    elementStyles: {
-      element: {
-        height: "100%",
-        overflow: "hidden",
-        ...isThemeDark && {
-          backgroundColor: token.color.black,
-          color: token.color.white
-        }
+  const wrapper = new ElementBuilder().withClassName("card-list-wrapper").withStyles({
+    element: {
+      containerType: "inline-size",
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "flex",
+        justifyContent: "space-between"
+      })
+    }
+  }).withChildren(...children).build();
+  return new ElementBuilder().withClassName("card-list-container").withStyles({
+    element: {
+      height: "100%",
+      overflow: "hidden",
+      ...isThemeDark && {
+        backgroundColor: token.color.black,
+        color: token.color.white
       }
-    },
-    children: [wrapper]
-  });
+    }
+  }).withChild(wrapper).build();
 };
 export {
   list as default

package/dist/composite/card/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...createMediaQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: `${token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: `${token.spacing.md}`,\n          order: '2',\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '3',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["ElementModel.createDiv","textLockup.small","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { textLockup, assets } from 'atomic';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  new ElementBuilder()\n    .withClassName('card-list-date-sign-wrapper')\n    .withStyles({\n      element: {\n        width: `${token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...createMediaQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: `${token.spacing['8xl']}`,\n        }),\n      },\n    })\n    .withChild(dateSign)\n    .build();\n\nconst makeTextColumn = (props: CardListProps) => {\n  const lockup = textLockup.small(props);\n\n  return new ElementBuilder()\n    .withClassName('card-list-text-wrapper')\n    .withStyles({\n      element: {\n        flex: '1 0',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingRight: `${token.spacing.md}`,\n          order: '2',\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: isAligned,\n    isGifAllowed: false,\n  });\n\n  return new ElementBuilder()\n    .withClassName('card-list-image-wrapper')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.min,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '160px',\n          order: '3',\n\n          ...(isAligned && {\n            height: '160px',\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = new ElementBuilder()\n    .withClassName('card-list-wrapper')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'flex',\n          justifyContent: 'space-between',\n        }),\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('card-list-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          color: token.color.white,\n        }),\n      },\n    })\n    .withChild(wrapper)\n    .build();\n};\n"],"names":["textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/overlay/color.d.ts

@@ -1,8 +1,4 @@
 import { CardOverlayProps } from '../_types';
-declare const _default: (props: CardOverlayProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardOverlayProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=color.d.ts.map

package/dist/composite/card/overlay/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/color.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;yBAG7B,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/color.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;yBAG7B,OAAO,gBAAgB;AAAvC,wBAgEE"}

package/dist/composite/card/overlay/color.js

@@ -1,22 +1,26 @@
 "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 layout = require("@universityofmaryland/web-styles-library/layout");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../../model/elements/index.js");
 const icon = require("../../../atomic/actions/icon.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 require("@universityofmaryland/web-utilities-library/accessibility");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
@@ -24,7 +28,6 @@ require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
 const smallScaling = require("../../../atomic/text-lockup/small-scaling.js");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -55,49 +58,41 @@ const color = (props) => {
       })
     );
   }
-  children.push(
-    index.createDiv({
-      className: "card-overlay-color-wrapper",
-      elementStyles: {
-        element: {
-          paddingRight: `${ctaIcon ? token__namespace.spacing["2xl"] : 0}`,
-          height: "100%",
-          [`& > *`]: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            zIndex: 9,
-            position: "relative",
-            maxWidth: `${token__namespace.spacing.maxWidth.smallest}`
-          }
-        }
-      },
-      children: [smallScaling(props)]
-    })
-  );
-  return index.createDiv({
-    className: "card-overlay-color",
-    children,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.md}`,
-        minHeight: "360px",
+  const lockup = smallScaling(props);
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-color-wrapper").withStyles({
+    element: {
+      paddingRight: `${ctaIcon ? token__namespace.spacing["2xl"] : 0}`,
+      height: "100%",
+      [`& > *`]: {
         height: "100%",
-        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 9,
         position: "relative",
-        backgroundColor: token__namespace.color.gray.lightest,
-        ...isThemeDark && {
-          backgroundColor: token__namespace.color.gray.darker
-        },
-        [`& .${layout__namespace.grid.inline.tabletRows.className}`]: {
-          [`@media (${token__namespace.media.queries.tablet.min})`]: {
-            marginTop: "auto !important"
-          }
+        maxWidth: `${token__namespace.spacing.maxWidth.smallest}`
+      }
+    }
+  }).withChild(lockup).build();
+  children.push(wrapper);
+  return new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-color").withStyles({
+    element: {
+      containerType: "inline-size",
+      padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.md}`,
+      minHeight: "360px",
+      height: "100%",
+      overflow: "hidden",
+      position: "relative",
+      backgroundColor: token__namespace.color.gray.lightest,
+      ...isThemeDark && {
+        backgroundColor: token__namespace.color.gray.darker
+      },
+      [`& .${layout__namespace.grid.inline.tabletRows.className}`]: {
+        [`@media (${token__namespace.media.queries.tablet.min})`]: {
+          marginTop: "auto !important"
         }
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 module.exports = color;
 //# sourceMappingURL=color.js.map

package/dist/composite/card/overlay/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${token.spacing.lg} ${token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n\n        [`& .${layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","token","textLockup.smallScaling","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAUC,iBAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UACnD,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAGA,iBAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QAC9C;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAGC,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA,QAChD,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,QAElC,GAAI,eAAe;AAAA,UACjB,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAGpC,CAAC,MAAME,kBAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACjD,CAAC,WAAWF,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YAC9C,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"color.js","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { actions, textLockup } from 'atomic';\nimport { CardOverlayProps } from '../_types';\nimport { type UMDElement } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: UMDElement[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  const lockup = textLockup.smallScaling(props);\n\n  const wrapper = new ElementBuilder()\n    .withClassName('card-overlay-color-wrapper')\n    .withStyles({\n      element: {\n        paddingRight: `${ctaIcon ? token.spacing['2xl'] : 0}`,\n        height: '100%',\n\n        [`& > *`]: {\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n          zIndex: 9,\n          position: 'relative',\n          maxWidth: `${token.spacing.maxWidth.smallest}`,\n        },\n      },\n    })\n    .withChild(lockup)\n    .build();\n\n  children.push(wrapper);\n\n  return new ElementBuilder()\n    .withClassName('card-overlay-color')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        padding: `${token.spacing.lg} ${token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n\n        [`& .${layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":["actions.icon","textLockup.smallScaling","ElementBuilder","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAAyB,CAAA;AAE/B,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,SAASC,aAAwB,KAAK;AAE5C,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,GAAG,UAAUC,iBAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,MACnD,QAAQ;AAAA,MAER,CAAC,OAAO,GAAG;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU,GAAGA,iBAAM,QAAQ,SAAS,QAAQ;AAAA,MAAA;AAAA,IAC9C;AAAA,EACF,CACD,EACA,UAAU,MAAM,EAChB,MAAA;AAEH,WAAS,KAAK,OAAO;AAErB,SAAO,IAAID,kBAAAA,eAAA,EACR,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,SAAS,GAAGC,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA,MAChD,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,MAElC,GAAI,eAAe;AAAA,QACjB,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAGpC,CAAC,MAAMC,kBAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,QACjD,CAAC,WAAWD,iBAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAC9C,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;;"}