@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1,21 +1,25 @@
-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 layout from "@universityofmaryland/web-styles-library/layout";
 import "@universityofmaryland/web-styles-library/element";
+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 icon from "../../../atomic/actions/icon.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.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";
@@ -23,7 +27,6 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
 import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const color = (props) => {
   const { isThemeDark, ctaIcon } = props;
   const children = [];
@@ -36,49 +39,41 @@ const color = (props) => {
       })
     );
   }
-  children.push(
-    createDiv({
-      className: "card-overlay-color-wrapper",
-      elementStyles: {
-        element: {
-          paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`,
-          height: "100%",
-          [`& > *`]: {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            zIndex: 9,
-            position: "relative",
-            maxWidth: `${token.spacing.maxWidth.smallest}`
-          }
-        }
-      },
-      children: [smallScaling(props)]
-    })
-  );
-  return createDiv({
-    className: "card-overlay-color",
-    children,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        padding: `${token.spacing.lg} ${token.spacing.md}`,
-        minHeight: "360px",
+  const lockup = smallScaling(props);
+  const wrapper = new ElementBuilder().withClassName("card-overlay-color-wrapper").withStyles({
+    element: {
+      paddingRight: `${ctaIcon ? token.spacing["2xl"] : 0}`,
+      height: "100%",
+      [`& > *`]: {
         height: "100%",
-        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 9,
         position: "relative",
-        backgroundColor: token.color.gray.lightest,
-        ...isThemeDark && {
-          backgroundColor: token.color.gray.darker
-        },
-        [`& .${layout.grid.inline.tabletRows.className}`]: {
-          [`@media (${token.media.queries.tablet.min})`]: {
-            marginTop: "auto !important"
-          }
+        maxWidth: `${token.spacing.maxWidth.smallest}`
+      }
+    }
+  }).withChild(lockup).build();
+  children.push(wrapper);
+  return new ElementBuilder().withClassName("card-overlay-color").withStyles({
+    element: {
+      containerType: "inline-size",
+      padding: `${token.spacing.lg} ${token.spacing.md}`,
+      minHeight: "360px",
+      height: "100%",
+      overflow: "hidden",
+      position: "relative",
+      backgroundColor: token.color.gray.lightest,
+      ...isThemeDark && {
+        backgroundColor: token.color.gray.darker
+      },
+      [`& .${layout.grid.inline.tabletRows.className}`]: {
+        [`@media (${token.media.queries.tablet.min})`]: {
+          marginTop: "auto !important"
         }
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 export {
   color as default

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

@@ -1 +1 @@
-{"version":3,"file":"color.mjs","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","textLockup.smallScaling"],"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,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAU,MAAM,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,GAAG,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QAC9C;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,QAChD,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAElC,GAAI,eAAe;AAAA,UACjB,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAGpC,CAAC,MAAM,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACjD,CAAC,WAAW,MAAM,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.mjs","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"],"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,IAAI,eAAA,EACjB,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,GAAG,UAAU,MAAM,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,GAAG,MAAM,QAAQ,SAAS,QAAQ;AAAA,MAAA;AAAA,IAC9C;AAAA,EACF,CACD,EACA,UAAU,MAAM,EAChB,MAAA;AAEH,WAAS,KAAK,OAAO;AAErB,SAAO,IAAI,eAAA,EACR,cAAc,oBAAoB,EAClC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAChD,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,GAAI,eAAe;AAAA,QACjB,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAGpC,CAAC,MAAM,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,QACjD,CAAC,WAAW,MAAM,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;"}

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

@@ -4,10 +4,6 @@ interface CardIconProps {
     image?: HTMLImageElement | null;
     isThemeDark?: boolean;
 }
-declare const _default: (props: CardIconProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CardIconProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/icon.ts"],"names":[],"mappings":"AAKA,UAAU,aAAa;IACrB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAEe,OAAO,aAAa;;;;;AAApC,wBAkDE"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/icon.ts"],"names":[],"mappings":"AAKA,UAAU,aAAa;IACrB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAEe,OAAO,aAAa;AAApC,wBAmDE"}

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

@@ -1,7 +1,10 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 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");
@@ -12,10 +15,12 @@ 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");
+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");
@@ -23,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) {
@@ -44,20 +48,16 @@ const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const icon = (props) => {
   const children = [];
   if (props.image) {
-    const imageContainer = index.createDiv({
-      className: "card-overlay-icon-image",
-      elementStyles: {
-        element: {
-          display: "flex",
-          justifyContent: "flex-end",
-          marginBottom: `${token__namespace.spacing.lg}`,
-          "& *": {
-            maxHeight: "120px"
-          }
+    const imageContainer = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-icon-image").withStyles({
+      element: {
+        display: "flex",
+        justifyContent: "flex-end",
+        marginBottom: `${token__namespace.spacing.lg}`,
+        "& *": {
+          maxHeight: "120px"
         }
       }
-    });
-    imageContainer.element.appendChild(props.image);
+    }).withChild(props.image).build();
     children.push(imageContainer);
   }
   children.push(
@@ -68,24 +68,20 @@ const icon = (props) => {
       }
     })
   );
-  return index.createDiv({
-    className: "card-overlay-icon",
-    children,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        height: "100%",
-        overflow: "hidden",
-        position: "relative",
-        padding: `${token__namespace.spacing.md}`,
-        paddingTop: `${token__namespace.spacing.sm}`,
-        backgroundColor: token__namespace.color.gray.lightest,
-        ...props.isThemeDark && {
-          backgroundColor: token__namespace.color.gray.darker
-        }
+  return new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-icon").withStyles({
+    element: {
+      containerType: "inline-size",
+      height: "100%",
+      overflow: "hidden",
+      position: "relative",
+      padding: `${token__namespace.spacing.md}`,
+      paddingTop: `${token__namespace.spacing.sm}`,
+      backgroundColor: token__namespace.color.gray.lightest,
+      ...props.isThemeDark && {
+        backgroundColor: token__namespace.color.gray.darker
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 module.exports = icon;
 //# sourceMappingURL=icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${token.spacing.md}`,\n        paddingTop: `${token.spacing.sm}`,\n        backgroundColor: token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","token","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,MAAAA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAGC,iBAAM,QAAQ,EAAE;AAAA,UAEjC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAGC,iBAAM,QAAQ,EAAE;AAAA,QAC5B,YAAY,GAAGA,iBAAM,QAAQ,EAAE;AAAA,QAC/B,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,QAElC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"icon.js","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { textLockup } from 'atomic';\nimport { type UMDElement } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: UMDElement[] = [];\n\n  if (props.image) {\n    const imageContainer = new ElementBuilder()\n      .withClassName('card-overlay-icon-image')\n      .withStyles({\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      })\n      .withChild(props.image)\n      .build();\n\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return new ElementBuilder()\n    .withClassName('card-overlay-icon')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${token.spacing.md}`,\n        paddingTop: `${token.spacing.sm}`,\n        backgroundColor: token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":["ElementBuilder","token","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAAyB,CAAA;AAE/B,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiB,IAAIA,kBAAAA,eAAA,EACxB,cAAc,yBAAyB,EACvC,WAAW;AAAA,MACV,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc,GAAGC,iBAAM,QAAQ,EAAE;AAAA,QAEjC,OAAO;AAAA,UACL,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF,CACD,EACA,UAAU,MAAM,KAAK,EACrB,MAAA;AAEH,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAO,IAAIF,kBAAAA,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS,GAAGC,iBAAM,QAAQ,EAAE;AAAA,MAC5B,YAAY,GAAGA,iBAAM,QAAQ,EAAE;AAAA,MAC/B,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,MAElC,GAAI,MAAM,eAAe;AAAA,QACvB,iBAAiBA,iBAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IACpC;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;;"}

package/dist/composite/card/overlay/icon.mjs

@@ -1,6 +1,9 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { createDiv } from "../../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 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";
@@ -11,10 +14,12 @@ 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 "@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";
@@ -22,24 +27,19 @@ import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
 import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 const icon = (props) => {
   const children = [];
   if (props.image) {
-    const imageContainer = createDiv({
-      className: "card-overlay-icon-image",
-      elementStyles: {
-        element: {
-          display: "flex",
-          justifyContent: "flex-end",
-          marginBottom: `${token.spacing.lg}`,
-          "& *": {
-            maxHeight: "120px"
-          }
+    const imageContainer = new ElementBuilder().withClassName("card-overlay-icon-image").withStyles({
+      element: {
+        display: "flex",
+        justifyContent: "flex-end",
+        marginBottom: `${token.spacing.lg}`,
+        "& *": {
+          maxHeight: "120px"
         }
       }
-    });
-    imageContainer.element.appendChild(props.image);
+    }).withChild(props.image).build();
     children.push(imageContainer);
   }
   children.push(
@@ -50,24 +50,20 @@ const icon = (props) => {
       }
     })
   );
-  return createDiv({
-    className: "card-overlay-icon",
-    children,
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        height: "100%",
-        overflow: "hidden",
-        position: "relative",
-        padding: `${token.spacing.md}`,
-        paddingTop: `${token.spacing.sm}`,
-        backgroundColor: token.color.gray.lightest,
-        ...props.isThemeDark && {
-          backgroundColor: token.color.gray.darker
-        }
+  return new ElementBuilder().withClassName("card-overlay-icon").withStyles({
+    element: {
+      containerType: "inline-size",
+      height: "100%",
+      overflow: "hidden",
+      position: "relative",
+      padding: `${token.spacing.md}`,
+      paddingTop: `${token.spacing.sm}`,
+      backgroundColor: token.color.gray.lightest,
+      ...props.isThemeDark && {
+        backgroundColor: token.color.gray.darker
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 export {
   icon as default

package/dist/composite/card/overlay/icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${token.spacing.md}`,\n        paddingTop: `${token.spacing.sm}`,\n        backgroundColor: token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,UAEjC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,QAC5B,YAAY,GAAG,MAAM,QAAQ,EAAE;AAAA,QAC/B,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAElC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { textLockup } from 'atomic';\nimport { type UMDElement } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: UMDElement[] = [];\n\n  if (props.image) {\n    const imageContainer = new ElementBuilder()\n      .withClassName('card-overlay-icon-image')\n      .withStyles({\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      })\n      .withChild(props.image)\n      .build();\n\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return new ElementBuilder()\n    .withClassName('card-overlay-icon')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${token.spacing.md}`,\n        paddingTop: `${token.spacing.sm}`,\n        backgroundColor: token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":["textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAAyB,CAAA;AAE/B,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,yBAAyB,EACvC,WAAW;AAAA,MACV,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,QAEjC,OAAO;AAAA,UACL,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF,CACD,EACA,UAAU,MAAM,KAAK,EACrB,MAAA;AAEH,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPA,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAO,IAAI,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC5B,YAAY,GAAG,MAAM,QAAQ,EAAE;AAAA,MAC/B,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAElC,GAAI,MAAM,eAAe;AAAA,QACvB,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IACpC;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;"}

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

@@ -5,7 +5,8 @@ export declare const createCardOverlayImage: (props: CardOverlayProps) => {
         load: () => void;
     };
     element: HTMLElement;
-    className: string;
     styles: string;
+    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    destroy?: () => void;
 };
 //# sourceMappingURL=image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,eAAO,MAAM,QAAQ,uBAAuB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB;;;;;;;CAsM7D,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,eAAO,MAAM,QAAQ,uBAAuB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB;;;;;;;;CA2M7D,CAAC"}

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

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
-const brand = require("@universityofmaryland/web-icons-library/brand");
-const string = require("@universityofmaryland/web-utilities-library/string");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../../model/elements/index.js");
+const string = require("@universityofmaryland/web-utilities-library/string");
+const brand = require("@universityofmaryland/web-icons-library/brand");
 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");
@@ -20,6 +24,7 @@ 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");
@@ -27,8 +32,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");
-const layout = require("../../../model/elements/layout.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -46,6 +49,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const classRef = "card-overlay-image";
 const createCardOverlayImage = (props) => {
   const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;
@@ -112,35 +116,27 @@ const createCardOverlayImage = (props) => {
   }
   if (dateSign) {
     wrapperChildren.push(
-      layout.backgroundBoxWhite({
-        element: document.createElement("div"),
-        elementStyles: {
-          element: {
-            alignSelf: `flex-start`
-          },
-          siblingAfter: {
-            marginTop: `${token__namespace.spacing.min}`
-          }
+      new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.background.box.white).withStyles({
+        element: {
+          alignSelf: `flex-start`
         },
-        children: [dateSign]
-      })
+        siblingAfter: {
+          marginTop: `${token__namespace.spacing.min}`
+        }
+      }).withChild(dateSign).build()
     );
   }
   if (isQuote) {
-    const quoteWrapper = index.createDiv({
-      className: "card-overlay-image-quote-wrapper",
-      elementStyles: {
-        element: {
-          width: "41px",
-          height: "30px",
-          marginBottom: `${token__namespace.spacing.xs}`,
-          "& svg": {
-            fill: `${token__namespace.color.red}`
-          }
+    const quoteWrapper = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-image-quote-wrapper").withStyles({
+      element: {
+        width: "41px",
+        height: "30px",
+        marginBottom: `${token__namespace.spacing.xs}`,
+        "& svg": {
+          fill: `${token__namespace.color.red}`
         }
       }
-    });
-    quoteWrapper.element.innerHTML = brand.quote;
+    }).withHTML(brand.quote).build();
     wrapperChildren.push(quoteWrapper);
   }
   wrapperChildren.push(
@@ -149,74 +145,59 @@ const createCardOverlayImage = (props) => {
       isThemeDark: true
     })
   );
-  const textWrapper = index.createDiv({
-    className: "card-overlay-image-text-wrapper",
-    elementStyles: {
-      element: {
-        height: "auto",
-        paddingRight: `${ctaIcon ? token__namespace.spacing["2xl"] : 0}`
+  const textContent = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-image-text-content").withStyles({
+    element: {
+      maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: 9,
+      position: "relative",
+      [" & * "]: {
+        color: `${token__namespace.color.white}`
       }
-    },
-    children: [
-      index.createDiv({
-        children: wrapperChildren,
-        className: "card-overlay-image-text-content",
-        elementStyles: {
-          element: {
-            maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            zIndex: 9,
-            position: "relative"
-          }
-        }
-      })
-    ]
-  });
-  const composite = index.createDiv({
-    className: classRef,
-    children: [
-      index.createDiv({
-        className: "card-overlay-image-container",
-        children: [...children, textWrapper],
-        elementStyles: {
-          element: {
-            position: "relative",
-            padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.md}`,
-            paddingTop: `${token__namespace.spacing["4xl"]}`,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "flex-end",
-            minHeight: "360px",
-            height: "100%",
-            overflow: "hidden",
-            ...styles.createMediaQuery(
-              "min-width",
-              token__namespace.media.breakpointValues.medium.min,
-              {
-                paddingTop: `${token__namespace.spacing["8xl"]}`,
-                minHeight: `424px`
-              }
-            )
-          }
-        }
-      })
-    ],
-    elementStyles: {
-      element: {
-        height: "100%",
-        containerType: "inline-size",
-        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
-          opacity: 0.7
-        },
-        ["&:hover img, &:focus img"]: {
-          transform: "scale(1)",
-          transition: "transform 0.5s ease-in-out"
+    }
+  }).withChildren(...wrapperChildren).build();
+  const textWrapper = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-image-text-wrapper").withStyles({
+    element: {
+      height: "auto",
+      paddingRight: `${ctaIcon ? token__namespace.spacing["2xl"] : 0}`
+    }
+  }).withChild(textContent).build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("card-overlay-image-container").withStyles({
+    element: {
+      position: "relative",
+      padding: `${token__namespace.spacing.lg} ${token__namespace.spacing.md}`,
+      paddingTop: `${token__namespace.spacing["4xl"]}`,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      minHeight: "360px",
+      height: "100%",
+      overflow: "hidden",
+      ...styles.createMediaQuery(
+        "min-width",
+        token__namespace.media.breakpointValues.medium.min,
+        {
+          paddingTop: `${token__namespace.spacing["8xl"]}`,
+          minHeight: `424px`
         }
+      )
+    }
+  }).withChildren(...children, textWrapper).build();
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName(classRef).withStyles({
+    element: {
+      height: "100%",
+      containerType: "inline-size",
+      [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]: {
+        opacity: 0.7
+      },
+      ["&:hover img, &:focus img"]: {
+        transform: "scale(1)",
+        transition: "transform 0.5s ease-in-out"
       }
     }
-  });
+  }).withChild(container).build();
   return {
     ...composite,
     events: {