@universityofmaryland/web-feeds-library 1.2.2 → 1.2.6

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

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/news/list.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport * as feedElements from 'elements';\nimport * as feedMacros from 'macros';\nimport * as feedFetch from './common/fetch';\nimport * as feedDisplay from './common/display';\nimport * as dataComposed from './common/data';\nimport { type ListProps, type FeedDisplay } from './_types';\nimport { type ElementModel } from '../../_types';\n\nexport default (props: ListProps): ElementModel =>\n  (() => {\n    const { isThemeDark } = props;\n    const loader = feedMacros.loader.create({ isThemeDark });\n    const container = document.createElement('div');\n    const setTotalEntries = (count: number) => (totalEntries = count);\n    const setOffset = (count: number) => (offset = offset + count);\n    const setStyles = (additonalStyles: string) => (styles += additonalStyles);\n    const getContainer = () => container;\n    const getTotalEntries = () => totalEntries;\n    const getOffset = () => offset;\n    const getStyles = () => styles;\n    const getShadowRoot = () => shadowRoot;\n    let totalEntries = 0;\n    let offset = 0;\n    let styles = `\n      ${loader.styles}\n    `;\n    let shadowRoot: ShadowRoot | null = null;\n\n    const helperFunctions = {\n      setTotalEntries,\n      setOffset,\n      setStyles,\n      getContainer,\n      getOffset,\n      getTotalEntries,\n      getStyles,\n      getShadowRoot,\n    };\n\n    const callback = (shadow: ShadowRoot) => {\n      shadowRoot = shadow;\n    };\n\n    const displayResults = async ({ feedData }: FeedDisplay) => {\n      await feedDisplay.resultLoad({\n        ...props,\n        ...helperFunctions,\n        displayResults,\n        entries: feedData.map((entry) =>\n          Composite.card.list({\n            ...dataComposed.display({ entry, isThemeDark }),\n            image: feedElements.asset.standard({\n              images: entry.image,\n              url: entry.url,\n            }),\n            isAligned: false,\n          }),\n        ),\n      });\n\n      if (shadowRoot) {\n        feedDisplay.setShadowStyles({\n          shadowRoot,\n          styles,\n        });\n      }\n    };\n\n    container.appendChild(loader.element);\n\n    feedFetch.start({\n      ...props,\n      ...helperFunctions,\n      displayResults,\n      displayResultStart: feedDisplay.resultStart,\n      displayNoResults: feedDisplay.noResults,\n      layoutElement: feedElements.layout.stacked(isThemeDark),\n    });\n\n    return {\n      element: container,\n      styles,\n      events: {\n        callback,\n      },\n    };\n  })();\n"],"names":["loader","feedMacros.loader","feedDisplay.resultLoad","dataComposed.display","feedElements.asset.standard","feedDisplay.setShadowStyles","feedFetch.start","feedDisplay.resultStart","feedDisplay.noResults","feedElements.layout.stacked"],"mappings":";;;;;;;;;;;AASA,MAAA,OAAe,CAAC,WACb,MAAM;AACL,QAAM,EAAE,gBAAgB;AACxB,QAAMA,WAASC,OAAkB,OAAO,EAAE,aAAa;AACvD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,kBAAkB,CAAC,UAAmB,eAAe;AAC3D,QAAM,YAAY,CAAC,UAAmB,SAAS,SAAS;AACxD,QAAM,YAAY,CAAC,oBAA6B,UAAU;AAC1D,QAAM,eAAe,MAAM;AAC3B,QAAM,kBAAkB,MAAM;AAC9B,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAgB,MAAM;AAC5B,MAAI,eAAe;AACnB,MAAI,SAAS;AACb,MAAI,SAAS;AAAA,QACTD,SAAO,MAAM;AAAA;AAEjB,MAAI,aAAgC;AAEpC,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,iBAAiB,OAAO,EAAE,eAA4B;AAC1D,UAAME,WAAuB;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,SAAS,SAAS;AAAA,QAAI,CAAC,UACrB,UAAU,KAAK,KAAK;AAAA,UAClB,GAAGC,QAAqB,EAAE,OAAO,aAAa;AAAA,UAC9C,OAAOC,SAA4B;AAAA,YACjC,QAAQ,MAAM;AAAA,YACd,KAAK,MAAM;AAAA,UAAA,CACZ;AAAA,UACD,WAAW;AAAA,QAAA,CACZ;AAAA,MAAA;AAAA,IACH,CACD;AAED,QAAI,YAAY;AACdC,sBAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,EACF;AAEA,YAAU,YAAYL,SAAO,OAAO;AAEpCM,QAAgB;AAAA,IACd,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,oBAAoBC;AAAAA,IACpB,kBAAkBC;AAAAA,IAClB,eAAeC,QAA4B,WAAW;AAAA,EAAA,CACvD;AAED,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/news/list.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport * as feedElements from 'elements';\nimport * as feedMacros from 'macros';\nimport * as feedFetch from './common/fetch';\nimport * as feedDisplay from './common/display';\nimport * as dataComposed from './common/data';\nimport { type ListProps, type FeedDisplay } from './_types';\nimport { type ElementModel } from '../../_types';\n\nexport default (props: ListProps): ElementModel =>\n  (() => {\n    const { isThemeDark } = props;\n    const loader = feedMacros.loader.create({ isThemeDark });\n    const container = document.createElement('div');\n    const setTotalEntries = (count: number) => (totalEntries = count);\n    const setOffset = (count: number) => (offset = offset + count);\n    const setStyles = (additonalStyles: string) => (styles += additonalStyles);\n    const getContainer = () => container;\n    const getTotalEntries = () => totalEntries;\n    const getOffset = () => offset;\n    const getStyles = () => styles;\n    const getShadowRoot = () => shadowRoot;\n    let totalEntries = 0;\n    let offset = 0;\n    let styles = `\n      ${loader.styles}\n    `;\n    let shadowRoot: ShadowRoot | null = null;\n\n    const helperFunctions = {\n      setTotalEntries,\n      setOffset,\n      setStyles,\n      getContainer,\n      getOffset,\n      getTotalEntries,\n      getStyles,\n      getShadowRoot,\n    };\n\n    const callback = (shadow: ShadowRoot) => {\n      shadowRoot = shadow;\n    };\n\n    const displayResults = async ({ feedData }: FeedDisplay) => {\n      await feedDisplay.resultLoad({\n        ...props,\n        ...helperFunctions,\n        displayResults,\n        entries: feedData.map((entry) =>\n          Composite.card.list({\n            ...dataComposed.display({ entry, isThemeDark }),\n            image: feedElements.asset.standard({\n              images: entry.image,\n              url: entry.url,\n            }),\n            isAligned: false,\n          }),\n        ),\n      });\n\n      if (shadowRoot) {\n        feedDisplay.setShadowStyles({\n          shadowRoot,\n          styles,\n        });\n      }\n    };\n\n    container.appendChild(loader.element);\n\n    feedFetch.start({\n      ...props,\n      ...helperFunctions,\n      displayResults,\n      displayResultStart: feedDisplay.resultStart,\n      displayNoResults: feedDisplay.noResults,\n      layoutElement: feedElements.layout.stacked(isThemeDark),\n    });\n\n    return {\n      element: container,\n      styles,\n      events: {\n        callback,\n      },\n    };\n  })();\n"],"names":["loader","feedMacros.loader","feedDisplay.resultLoad","dataComposed.display","feedElements.asset.standard","feedDisplay.setShadowStyles","feedFetch.start","feedDisplay.resultStart","feedDisplay.noResults","feedElements.layout.stacked"],"mappings":";;;;;;;;;;;;;AASA,MAAA,OAAe,CAAC,WACb,MAAM;AACL,QAAM,EAAE,gBAAgB;AACxB,QAAMA,WAASC,OAAkB,OAAO,EAAE,aAAa;AACvD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,kBAAkB,CAAC,UAAmB,eAAe;AAC3D,QAAM,YAAY,CAAC,UAAmB,SAAS,SAAS;AACxD,QAAM,YAAY,CAAC,oBAA6B,UAAU;AAC1D,QAAM,eAAe,MAAM;AAC3B,QAAM,kBAAkB,MAAM;AAC9B,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAgB,MAAM;AAC5B,MAAI,eAAe;AACnB,MAAI,SAAS;AACb,MAAI,SAAS;AAAA,QACTD,SAAO,MAAM;AAAA;AAEjB,MAAI,aAAgC;AAEpC,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,WAAW,CAAC,WAAuB;AACvC,iBAAa;AAAA,EACf;AAEA,QAAM,iBAAiB,OAAO,EAAE,eAA4B;AAC1D,UAAME,WAAuB;AAAA,MAC3B,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,SAAS,SAAS;AAAA,QAAI,CAAC,UACrB,UAAU,KAAK,KAAK;AAAA,UAClB,GAAGC,QAAqB,EAAE,OAAO,aAAa;AAAA,UAC9C,OAAOC,SAA4B;AAAA,YACjC,QAAQ,MAAM;AAAA,YACd,KAAK,MAAM;AAAA,UAAA,CACZ;AAAA,UACD,WAAW;AAAA,QAAA,CACZ;AAAA,MAAA;AAAA,IACH,CACD;AAED,QAAI,YAAY;AACdC,sBAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAAA,EACF;AAEA,YAAU,YAAYL,SAAO,OAAO;AAEpCM,QAAgB;AAAA,IACd,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,oBAAoBC;AAAAA,IACpB,kBAAkBC;AAAAA,IAClB,eAAeC,QAA4B,WAAW;AAAA,EAAA,CACvD;AAED,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;"}

package/dist/elements/layout.d.ts

@@ -1,27 +1,15 @@
-export declare const stacked: (isThemeDark?: boolean) => {
-    element: HTMLElement;
-    styles: string;
-};
+import { ElementModel } from '../_types';
+export declare const stacked: (isThemeDark?: boolean) => ElementModel;
 export declare const grid: ({ count, }: {
     count?: number;
     isTypeGap?: boolean;
-}) => {
-    element: HTMLElement;
-    styles: string;
-};
+}) => ElementModel;
 export declare const gridGap: ({ count, }: {
     count?: number;
-}) => {
-    element: HTMLElement;
-    styles: string;
-};
+}) => ElementModel;
 export declare const gridOffsetGap: ({ count, isLayoutReversed, overwriteStickyPosition, }: {
     count?: number;
     isLayoutReversed?: boolean;
     overwriteStickyPosition?: number;
-}) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+}) => ElementModel;
 //# sourceMappingURL=layout.d.ts.map

package/dist/elements/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../source/elements/layout.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,GAClB,cAAc,OAAO,KACpB;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAyBrC,CAAC;AAEL,eAAO,MAAM,IAAI,GAAI,YAElB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,KAAG;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAiBtC,CAAC;AAEL,eAAO,MAAM,OAAO,GAAI,YAErB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,KAAG;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAetC,CAAC;AAEL,eAAO,MAAM,aAAa,GAAI,uDAI3B;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;;;;CAyCG,CAAC"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../source/elements/layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,eAAO,MAAM,OAAO,GAClB,cAAc,OAAO,KACpB,YAyBS,CAAC;AAEb,eAAO,MAAM,IAAI,GAAI,YAElB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,KAAG,YAkBH,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,YAErB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,KAAG,YAgBH,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,uDAI3B;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,KAAG,YA0CH,CAAC"}

package/dist/elements/layout.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 const webElementsLibrary = require("@universityofmaryland/web-elements-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -19,30 +20,29 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const stacked = (isThemeDark) => webElementsLibrary.Model.ElementModel.layout.gridStacked({
-  element: document.createElement("div"),
-  elementStyles: {
-    element: {
-      gridGap: `${Styles__namespace.token.spacing.md}`,
-      [` > *`]: {
-        containerType: "inline-size"
-      },
-      [` > *:not(:last-child)`]: {
-        paddingBottom: `${Styles__namespace.token.spacing.md}`,
-        marginBottom: `${Styles__namespace.token.spacing.md}`,
-        borderBottom: `${isThemeDark ? `1px solid ${Styles__namespace.token.color.gray.dark}` : `1px solid ${Styles__namespace.token.color.gray.light}`}`
-      },
-      [`& .${Styles__namespace.element.asset.image.wrapperScaled.className}`]: {
-        alignSelf: "flex-start"
-      }
+const stacked = (isThemeDark) => new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.grid.stacked).withStyles({
+  element: {
+    gridGap: `${Styles__namespace.token.spacing.md}`,
+    [` > *`]: {
+      containerType: "inline-size"
+    },
+    [` > *:not(:last-child)`]: {
+      paddingBottom: `${Styles__namespace.token.spacing.md}`,
+      marginBottom: `${Styles__namespace.token.spacing.md}`,
+      borderBottom: `${isThemeDark ? `1px solid ${Styles__namespace.token.color.gray.dark}` : `1px solid ${Styles__namespace.token.color.gray.light}`}`
+    },
+    [`& .${Styles__namespace.element.asset.image.wrapperScaled.className}`]: {
+      alignSelf: "flex-start"
     }
   }
-});
+}).build();
 const grid = ({
   count = 2
-}) => webElementsLibrary.Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles__namespace.layout.grid.columnsTwo;
+  if (count === 3) gridStyle = Styles__namespace.layout.grid.columnsThree;
+  if (count === 4) gridStyle = Styles__namespace.layout.grid.columnsFour;
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         containerType: "inline-size",
@@ -51,36 +51,32 @@ const grid = ({
         }
       }
     }
-  },
-  isGap: false,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 const gridGap = ({
   count = 2
-}) => webElementsLibrary.Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles__namespace.layout.grid.gap.two;
+  if (count === 3) gridStyle = Styles__namespace.layout.grid.gap.three;
+  if (count === 4) gridStyle = Styles__namespace.layout.grid.gap.four;
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         alignSelf: "flex-start",
         containerType: "inline-size"
       }
     }
-  },
-  isGap: true,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 const gridOffsetGap = ({
   count = 2,
   isLayoutReversed,
   overwriteStickyPosition = 0
-}) => webElementsLibrary.Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles__namespace.layout.grid.gap.two;
+  if (count === 3) gridStyle = Styles__namespace.layout.grid.gap.three;
+  if (count === 4) gridStyle = Styles__namespace.layout.grid.gap.four;
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         alignSelf: "flex-start",
@@ -108,12 +104,8 @@ const gridOffsetGap = ({
         }
       }
     }
-  },
-  isGap: true,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 exports.grid = grid;
 exports.gridGap = gridGap;
 exports.gridOffsetGap = gridOffsetGap;

package/dist/elements/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["../../source/elements/layout.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model, Composite } from '@universityofmaryland/web-elements-library';\n\nexport const stacked = (\n  isThemeDark?: boolean,\n): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        gridGap: `${Styles.token.spacing.md}`,\n        [` > *`]: {\n          containerType: 'inline-size',\n        },\n\n        [` > *:not(:last-child)`]: {\n          paddingBottom: `${Styles.token.spacing.md}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n          borderBottom: `${\n            isThemeDark\n              ? `1px solid ${Styles.token.color.gray.dark}`\n              : `1px solid ${Styles.token.color.gray.light}`\n          }`,\n        },\n\n        [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {\n          alignSelf: 'flex-start',\n        },\n      },\n    },\n  });\n\nexport const grid = ({\n  count = 2,\n}: {\n  count?: number;\n  isTypeGap?: boolean;\n}): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          containerType: 'inline-size',\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            minHeight: '560px !important',\n          },\n        },\n      },\n    },\n    isGap: false,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n\nexport const gridGap = ({\n  count = 2,\n}: {\n  count?: number;\n}): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n      },\n    },\n    isGap: true,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n\nexport const gridOffsetGap = ({\n  count = 2,\n  isLayoutReversed,\n  overwriteStickyPosition = 0,\n}: {\n  count?: number;\n  isLayoutReversed?: boolean;\n  overwriteStickyPosition?: number;\n}) =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n\n        [` > *:first-child`]: {\n          order: isLayoutReversed ? 2 : -1,\n        },\n\n        [`& .${Composite.card.overlay.imageClassRef}`]: {\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            height: 'inherit',\n            position: 'sticky',\n            top: `${overwriteStickyPosition}px`,\n          },\n\n          [`*`]: {\n            color: `${Styles.token.color.white}`,\n          },\n\n          [`& > div`]: {\n            [`@media (${Styles.token.media.queries.large.min})`]: {\n              minHeight: '560px !important',\n            },\n          },\n\n          [`.${Styles.element.asset.image.wrapperScaled.className}`]: {\n            position: 'absolute',\n          },\n        },\n      },\n    },\n    isGap: true,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n"],"names":["Model","Styles","Composite"],"mappings":"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"}
+{"version":3,"file":"layout.js","sources":["../../source/elements/layout.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { Composite } from '@universityofmaryland/web-elements-library';\nimport { type ElementModel } from '../_types';\n\nexport const stacked = (\n  isThemeDark?: boolean,\n): ElementModel =>\n  new ElementBuilder()\n    .styled(Styles.layout.grid.stacked)\n    .withStyles({\n      element: {\n        gridGap: `${Styles.token.spacing.md}`,\n        [` > *`]: {\n          containerType: 'inline-size',\n        },\n\n        [` > *:not(:last-child)`]: {\n          paddingBottom: `${Styles.token.spacing.md}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n          borderBottom: `${\n            isThemeDark\n              ? `1px solid ${Styles.token.color.gray.dark}`\n              : `1px solid ${Styles.token.color.gray.light}`\n          }`,\n        },\n\n        [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {\n          alignSelf: 'flex-start',\n        },\n      },\n    })\n    .build();\n\nexport const grid = ({\n  count = 2,\n}: {\n  count?: number;\n  isTypeGap?: boolean;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.columnsTwo;\n  if (count === 3) gridStyle = Styles.layout.grid.columnsThree;\n  if (count === 4) gridStyle = Styles.layout.grid.columnsFour;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          containerType: 'inline-size',\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            minHeight: '560px !important',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport const gridGap = ({\n  count = 2,\n}: {\n  count?: number;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.gap.two;\n  if (count === 3) gridStyle = Styles.layout.grid.gap.three;\n  if (count === 4) gridStyle = Styles.layout.grid.gap.four;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n      },\n    })\n    .build();\n};\n\nexport const gridOffsetGap = ({\n  count = 2,\n  isLayoutReversed,\n  overwriteStickyPosition = 0,\n}: {\n  count?: number;\n  isLayoutReversed?: boolean;\n  overwriteStickyPosition?: number;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.gap.two;\n  if (count === 3) gridStyle = Styles.layout.grid.gap.three;\n  if (count === 4) gridStyle = Styles.layout.grid.gap.four;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n\n        [` > *:first-child`]: {\n          order: isLayoutReversed ? 2 : -1,\n        },\n\n        [`& .${Composite.card.overlay.imageClassRef}`]: {\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            height: 'inherit',\n            position: 'sticky',\n            top: `${overwriteStickyPosition}px`,\n          },\n\n          [`*`]: {\n            color: `${Styles.token.color.white}`,\n          },\n\n          [`& > div`]: {\n            [`@media (${Styles.token.media.queries.large.min})`]: {\n              minHeight: '560px !important',\n            },\n          },\n\n          [`.${Styles.element.asset.image.wrapperScaled.className}`]: {\n            position: 'absolute',\n          },\n        },\n      },\n    })\n    .build();\n};\n"],"names":["ElementBuilder","Styles","Composite"],"mappings":"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"}

package/dist/elements/layout.mjs

@@ -1,29 +1,29 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { Model, Composite } from "@universityofmaryland/web-elements-library";
-const stacked = (isThemeDark) => Model.ElementModel.layout.gridStacked({
-  element: document.createElement("div"),
-  elementStyles: {
-    element: {
-      gridGap: `${Styles.token.spacing.md}`,
-      [` > *`]: {
-        containerType: "inline-size"
-      },
-      [` > *:not(:last-child)`]: {
-        paddingBottom: `${Styles.token.spacing.md}`,
-        marginBottom: `${Styles.token.spacing.md}`,
-        borderBottom: `${isThemeDark ? `1px solid ${Styles.token.color.gray.dark}` : `1px solid ${Styles.token.color.gray.light}`}`
-      },
-      [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {
-        alignSelf: "flex-start"
-      }
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { Composite } from "@universityofmaryland/web-elements-library";
+const stacked = (isThemeDark) => new ElementBuilder().styled(Styles.layout.grid.stacked).withStyles({
+  element: {
+    gridGap: `${Styles.token.spacing.md}`,
+    [` > *`]: {
+      containerType: "inline-size"
+    },
+    [` > *:not(:last-child)`]: {
+      paddingBottom: `${Styles.token.spacing.md}`,
+      marginBottom: `${Styles.token.spacing.md}`,
+      borderBottom: `${isThemeDark ? `1px solid ${Styles.token.color.gray.dark}` : `1px solid ${Styles.token.color.gray.light}`}`
+    },
+    [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {
+      alignSelf: "flex-start"
     }
   }
-});
+}).build();
 const grid = ({
   count = 2
-}) => Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles.layout.grid.columnsTwo;
+  if (count === 3) gridStyle = Styles.layout.grid.columnsThree;
+  if (count === 4) gridStyle = Styles.layout.grid.columnsFour;
+  return new ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         containerType: "inline-size",
@@ -32,36 +32,32 @@ const grid = ({
         }
       }
     }
-  },
-  isGap: false,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 const gridGap = ({
   count = 2
-}) => Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles.layout.grid.gap.two;
+  if (count === 3) gridStyle = Styles.layout.grid.gap.three;
+  if (count === 4) gridStyle = Styles.layout.grid.gap.four;
+  return new ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         alignSelf: "flex-start",
         containerType: "inline-size"
       }
     }
-  },
-  isGap: true,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 const gridOffsetGap = ({
   count = 2,
   isLayoutReversed,
   overwriteStickyPosition = 0
-}) => Model.ElementModel.layout.grid({
-  element: document.createElement("div"),
-  elementStyles: {
+}) => {
+  let gridStyle = Styles.layout.grid.gap.two;
+  if (count === 3) gridStyle = Styles.layout.grid.gap.three;
+  if (count === 4) gridStyle = Styles.layout.grid.gap.four;
+  return new ElementBuilder().styled(gridStyle).withStyles({
     element: {
       [` > *`]: {
         alignSelf: "flex-start",
@@ -89,12 +85,8 @@ const gridOffsetGap = ({
         }
       }
     }
-  },
-  isGap: true,
-  isColumnsTwo: count === 2,
-  isColumnsThree: count === 3,
-  isColumnsFour: count === 4
-});
+  }).build();
+};
 export {
   grid,
   gridGap,

package/dist/elements/layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","sources":["../../source/elements/layout.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model, Composite } from '@universityofmaryland/web-elements-library';\n\nexport const stacked = (\n  isThemeDark?: boolean,\n): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        gridGap: `${Styles.token.spacing.md}`,\n        [` > *`]: {\n          containerType: 'inline-size',\n        },\n\n        [` > *:not(:last-child)`]: {\n          paddingBottom: `${Styles.token.spacing.md}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n          borderBottom: `${\n            isThemeDark\n              ? `1px solid ${Styles.token.color.gray.dark}`\n              : `1px solid ${Styles.token.color.gray.light}`\n          }`,\n        },\n\n        [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {\n          alignSelf: 'flex-start',\n        },\n      },\n    },\n  });\n\nexport const grid = ({\n  count = 2,\n}: {\n  count?: number;\n  isTypeGap?: boolean;\n}): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          containerType: 'inline-size',\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            minHeight: '560px !important',\n          },\n        },\n      },\n    },\n    isGap: false,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n\nexport const gridGap = ({\n  count = 2,\n}: {\n  count?: number;\n}): { element: HTMLElement; styles: string } =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n      },\n    },\n    isGap: true,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n\nexport const gridOffsetGap = ({\n  count = 2,\n  isLayoutReversed,\n  overwriteStickyPosition = 0,\n}: {\n  count?: number;\n  isLayoutReversed?: boolean;\n  overwriteStickyPosition?: number;\n}) =>\n  Model.ElementModel.layout.grid({\n    element: document.createElement('div'),\n    elementStyles: {\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n\n        [` > *:first-child`]: {\n          order: isLayoutReversed ? 2 : -1,\n        },\n\n        [`& .${Composite.card.overlay.imageClassRef}`]: {\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            height: 'inherit',\n            position: 'sticky',\n            top: `${overwriteStickyPosition}px`,\n          },\n\n          [`*`]: {\n            color: `${Styles.token.color.white}`,\n          },\n\n          [`& > div`]: {\n            [`@media (${Styles.token.media.queries.large.min})`]: {\n              minHeight: '560px !important',\n            },\n          },\n\n          [`.${Styles.element.asset.image.wrapperScaled.className}`]: {\n            position: 'absolute',\n          },\n        },\n      },\n    },\n    isGap: true,\n    isColumnsTwo: count === 2,\n    isColumnsThree: count === 3,\n    isColumnsFour: count === 4,\n  });\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.mjs","sources":["../../source/elements/layout.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { Composite } from '@universityofmaryland/web-elements-library';\nimport { type ElementModel } from '../_types';\n\nexport const stacked = (\n  isThemeDark?: boolean,\n): ElementModel =>\n  new ElementBuilder()\n    .styled(Styles.layout.grid.stacked)\n    .withStyles({\n      element: {\n        gridGap: `${Styles.token.spacing.md}`,\n        [` > *`]: {\n          containerType: 'inline-size',\n        },\n\n        [` > *:not(:last-child)`]: {\n          paddingBottom: `${Styles.token.spacing.md}`,\n          marginBottom: `${Styles.token.spacing.md}`,\n          borderBottom: `${\n            isThemeDark\n              ? `1px solid ${Styles.token.color.gray.dark}`\n              : `1px solid ${Styles.token.color.gray.light}`\n          }`,\n        },\n\n        [`& .${Styles.element.asset.image.wrapperScaled.className}`]: {\n          alignSelf: 'flex-start',\n        },\n      },\n    })\n    .build();\n\nexport const grid = ({\n  count = 2,\n}: {\n  count?: number;\n  isTypeGap?: boolean;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.columnsTwo;\n  if (count === 3) gridStyle = Styles.layout.grid.columnsThree;\n  if (count === 4) gridStyle = Styles.layout.grid.columnsFour;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          containerType: 'inline-size',\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            minHeight: '560px !important',\n          },\n        },\n      },\n    })\n    .build();\n};\n\nexport const gridGap = ({\n  count = 2,\n}: {\n  count?: number;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.gap.two;\n  if (count === 3) gridStyle = Styles.layout.grid.gap.three;\n  if (count === 4) gridStyle = Styles.layout.grid.gap.four;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n      },\n    })\n    .build();\n};\n\nexport const gridOffsetGap = ({\n  count = 2,\n  isLayoutReversed,\n  overwriteStickyPosition = 0,\n}: {\n  count?: number;\n  isLayoutReversed?: boolean;\n  overwriteStickyPosition?: number;\n}): ElementModel => {\n  let gridStyle = Styles.layout.grid.gap.two;\n  if (count === 3) gridStyle = Styles.layout.grid.gap.three;\n  if (count === 4) gridStyle = Styles.layout.grid.gap.four;\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: 'flex-start',\n          containerType: 'inline-size',\n        },\n\n        [` > *:first-child`]: {\n          order: isLayoutReversed ? 2 : -1,\n        },\n\n        [`& .${Composite.card.overlay.imageClassRef}`]: {\n          [`@media (${Styles.token.media.queries.large.min})`]: {\n            height: 'inherit',\n            position: 'sticky',\n            top: `${overwriteStickyPosition}px`,\n          },\n\n          [`*`]: {\n            color: `${Styles.token.color.white}`,\n          },\n\n          [`& > div`]: {\n            [`@media (${Styles.token.media.queries.large.min})`]: {\n              minHeight: '560px !important',\n            },\n          },\n\n          [`.${Styles.element.asset.image.wrapperScaled.className}`]: {\n            position: 'absolute',\n          },\n        },\n      },\n    })\n    .build();\n};\n"],"names":[],"mappings":"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"}

package/dist/macros/lazy-load.d.ts

@@ -1,3 +1,4 @@
+import { ElementModel } from '../_types';
 type LazyLoadCreate = {
     callback: (args: any) => void;
     isThemeDark?: boolean;
@@ -9,11 +10,7 @@ declare const _default: {
     remove: ({ container }: {
         container: HTMLElement;
     }) => void;
-    create: ({ callback, isThemeDark, isLazyLoad, totalEntries, offset, }: LazyLoadCreate) => {
-        element: HTMLElement;
-        className: string;
-        styles: string;
-    } | undefined;
+    create: ({ callback, isThemeDark, isLazyLoad, totalEntries, offset, }: LazyLoadCreate) => ElementModel | undefined;
 };
 export default _default;
 //# sourceMappingURL=lazy-load.d.ts.map

package/dist/macros/lazy-load.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../../source/macros/lazy-load.ts"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;;4BAuC6B;QAAE,SAAS,EAAE,WAAW,CAAA;KAAE;2EA/BtD,cAAc;;;;;;AAuCjB,wBAGE"}
+{"version":3,"file":"lazy-load.d.ts","sourceRoot":"","sources":["../../source/macros/lazy-load.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;;4BAkC6B;QAAE,SAAS,EAAE,WAAW,CAAA;KAAE;2EA1BtD,cAAc,KAAG,YAAY,GAAG,SAAS;;AAkC5C,wBAGE"}

package/dist/macros/lazy-load.js

@@ -1,6 +1,6 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const webElementsLibrary = require("@universityofmaryland/web-elements-library");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -30,24 +30,15 @@ const create = ({
   if (!offset) return;
   if (!callback) return;
   if (offset >= totalEntries) return;
-  const composite = webElementsLibrary.Model.ElementModel.layout.alignedCenter({
-    element: document.createElement("div"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        marginTop: `${Styles__namespace.token.spacing.lg}`
-      }
+  const button = document.createElement("button");
+  button.innerHTML = "Load more";
+  button.addEventListener("click", callback);
+  const ctaButton = new webBuilderLibrary.ElementBuilder(button).styled(Styles__namespace.element.action.outline.normal).build();
+  return new webBuilderLibrary.ElementBuilder().styled(Styles__namespace.layout.alignment.block.center).withChild(ctaButton).withStyles({
+    element: {
+      marginTop: `${Styles__namespace.token.spacing.lg}`
     }
-  });
-  const ctaButton = webElementsLibrary.Model.ElementModel.actions.outlineOptions({
-    element: document.createElement("button"),
-    isThemeDark
-  });
-  ctaButton.element.innerHTML = "Load more";
-  ctaButton.element.addEventListener("click", callback);
-  composite.element.appendChild(ctaButton.element);
-  composite.styles += ctaButton.styles;
-  return composite;
+  }).build();
 };
 const remove = ({ container }) => {
   const button = container.querySelector(

package/dist/macros/lazy-load.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.js","sources":["../../source/macros/lazy-load.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model } from '@universityofmaryland/web-elements-library';\n\ntype LazyLoadCreate = {\n  callback: (args: any) => void;\n  isThemeDark?: boolean;\n  isLazyLoad: boolean;\n  totalEntries: number | null;\n  offset: number;\n};\n\nconst create = ({\n  callback,\n  isThemeDark,\n  isLazyLoad,\n  totalEntries,\n  offset,\n}: LazyLoadCreate) => {\n  if (!isLazyLoad) return;\n  if (!totalEntries) return;\n  if (!offset) return;\n  if (!callback) return;\n  if (offset >= totalEntries) return;\n\n  const composite = Model.ElementModel.layout.alignedCenter({\n    element: document.createElement('div'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.lg}`,\n      },\n    },\n  });\n\n  const ctaButton = Model.ElementModel.actions.outlineOptions({\n    element: document.createElement('button'),\n    isThemeDark,\n  });\n\n  ctaButton.element.innerHTML = 'Load more';\n  ctaButton.element.addEventListener('click', callback);\n\n  composite.element.appendChild(ctaButton.element);\n  composite.styles += ctaButton.styles;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`,\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\nexport default {\n  remove,\n  create,\n};\n"],"names":["Model","Styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAWA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAc;AACnB,MAAI,CAAC,OAAQ;AACb,MAAI,CAAC,SAAU;AACf,MAAI,UAAU,aAAc;AAE5B,QAAM,YAAYA,mBAAAA,MAAM,aAAa,OAAO,cAAc;AAAA,IACxD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,IACvC;AAAA,EACF,CACD;AAED,QAAM,YAAYD,mBAAAA,MAAM,aAAa,QAAQ,eAAe;AAAA,IAC1D,SAAS,SAAS,cAAc,QAAQ;AAAA,IACxC;AAAA,EAAA,CACD;AAED,YAAU,QAAQ,YAAY;AAC9B,YAAU,QAAQ,iBAAiB,SAAS,QAAQ;AAEpD,YAAU,QAAQ,YAAY,UAAU,OAAO;AAC/C,YAAU,UAAU,UAAU;AAE9B,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAM,SAAS,UAAU;AAAA,IACvB,IAAIC,kBAAO,OAAO,UAAU,MAAM,OAAO,SAAS;AAAA,EAAA;AAGpD,MAAI,eAAe,OAAA;AACrB;AAEA,MAAA,WAAe;AAAA,EACb;AAAA,EACA;AACF;;"}
+{"version":3,"file":"lazy-load.js","sources":["../../source/macros/lazy-load.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { type ElementModel } from '../_types';\n\ntype LazyLoadCreate = {\n  callback: (args: any) => void;\n  isThemeDark?: boolean;\n  isLazyLoad: boolean;\n  totalEntries: number | null;\n  offset: number;\n};\n\nconst create = ({\n  callback,\n  isThemeDark,\n  isLazyLoad,\n  totalEntries,\n  offset,\n}: LazyLoadCreate): ElementModel | undefined => {\n  if (!isLazyLoad) return;\n  if (!totalEntries) return;\n  if (!offset) return;\n  if (!callback) return;\n  if (offset >= totalEntries) return;\n\n  const button = document.createElement('button');\n  button.innerHTML = 'Load more';\n  button.addEventListener('click', callback);\n\n  const ctaButton = new ElementBuilder(button)\n    .styled(Styles.element.action.outline.normal)\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.alignment.block.center)\n    .withChild(ctaButton)\n    .withStyles({\n      element: {\n        marginTop: `${Styles.token.spacing.lg}`,\n      },\n    })\n    .build();\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`,\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\nexport default {\n  remove,\n  create,\n};\n"],"names":["ElementBuilder","Styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgD;AAC9C,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAc;AACnB,MAAI,CAAC,OAAQ;AACb,MAAI,CAAC,SAAU;AACf,MAAI,UAAU,aAAc;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,YAAY;AACnB,SAAO,iBAAiB,SAAS,QAAQ;AAEzC,QAAM,YAAY,IAAIA,iCAAe,MAAM,EACxC,OAAOC,kBAAO,QAAQ,OAAO,QAAQ,MAAM,EAC3C,MAAA;AAEH,SAAO,IAAID,kBAAAA,eAAA,EACR,OAAOC,kBAAO,OAAO,UAAU,MAAM,MAAM,EAC3C,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EACvC,CACD,EACA,MAAA;AACL;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAM,SAAS,UAAU;AAAA,IACvB,IAAIA,kBAAO,OAAO,UAAU,MAAM,OAAO,SAAS;AAAA,EAAA;AAGpD,MAAI,eAAe,OAAA;AACrB;AAEA,MAAA,WAAe;AAAA,EACb;AAAA,EACA;AACF;;"}

package/dist/macros/lazy-load.mjs

@@ -1,5 +1,5 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { Model } from "@universityofmaryland/web-elements-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 const create = ({
   callback,
   isThemeDark,
@@ -12,24 +12,15 @@ const create = ({
   if (!offset) return;
   if (!callback) return;
   if (offset >= totalEntries) return;
-  const composite = Model.ElementModel.layout.alignedCenter({
-    element: document.createElement("div"),
-    isThemeDark,
-    elementStyles: {
-      element: {
-        marginTop: `${Styles.token.spacing.lg}`
-      }
+  const button = document.createElement("button");
+  button.innerHTML = "Load more";
+  button.addEventListener("click", callback);
+  const ctaButton = new ElementBuilder(button).styled(Styles.element.action.outline.normal).build();
+  return new ElementBuilder().styled(Styles.layout.alignment.block.center).withChild(ctaButton).withStyles({
+    element: {
+      marginTop: `${Styles.token.spacing.lg}`
     }
-  });
-  const ctaButton = Model.ElementModel.actions.outlineOptions({
-    element: document.createElement("button"),
-    isThemeDark
-  });
-  ctaButton.element.innerHTML = "Load more";
-  ctaButton.element.addEventListener("click", callback);
-  composite.element.appendChild(ctaButton.element);
-  composite.styles += ctaButton.styles;
-  return composite;
+  }).build();
 };
 const remove = ({ container }) => {
   const button = container.querySelector(

package/dist/macros/lazy-load.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-load.mjs","sources":["../../source/macros/lazy-load.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { Model } from '@universityofmaryland/web-elements-library';\n\ntype LazyLoadCreate = {\n  callback: (args: any) => void;\n  isThemeDark?: boolean;\n  isLazyLoad: boolean;\n  totalEntries: number | null;\n  offset: number;\n};\n\nconst create = ({\n  callback,\n  isThemeDark,\n  isLazyLoad,\n  totalEntries,\n  offset,\n}: LazyLoadCreate) => {\n  if (!isLazyLoad) return;\n  if (!totalEntries) return;\n  if (!offset) return;\n  if (!callback) return;\n  if (offset >= totalEntries) return;\n\n  const composite = Model.ElementModel.layout.alignedCenter({\n    element: document.createElement('div'),\n    isThemeDark,\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.lg}`,\n      },\n    },\n  });\n\n  const ctaButton = Model.ElementModel.actions.outlineOptions({\n    element: document.createElement('button'),\n    isThemeDark,\n  });\n\n  ctaButton.element.innerHTML = 'Load more';\n  ctaButton.element.addEventListener('click', callback);\n\n  composite.element.appendChild(ctaButton.element);\n  composite.styles += ctaButton.styles;\n\n  return composite;\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`,\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\nexport default {\n  remove,\n  create,\n};\n"],"names":[],"mappings":";;AAWA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAc;AACnB,MAAI,CAAC,OAAQ;AACb,MAAI,CAAC,SAAU;AACf,MAAI,UAAU,aAAc;AAE5B,QAAM,YAAY,MAAM,aAAa,OAAO,cAAc;AAAA,IACxD,SAAS,SAAS,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,WAAW,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,MAAA;AAAA,IACvC;AAAA,EACF,CACD;AAED,QAAM,YAAY,MAAM,aAAa,QAAQ,eAAe;AAAA,IAC1D,SAAS,SAAS,cAAc,QAAQ;AAAA,IACxC;AAAA,EAAA,CACD;AAED,YAAU,QAAQ,YAAY;AAC9B,YAAU,QAAQ,iBAAiB,SAAS,QAAQ;AAEpD,YAAU,QAAQ,YAAY,UAAU,OAAO;AAC/C,YAAU,UAAU,UAAU;AAE9B,SAAO;AACT;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAM,SAAS,UAAU;AAAA,IACvB,IAAI,OAAO,OAAO,UAAU,MAAM,OAAO,SAAS;AAAA,EAAA;AAGpD,MAAI,eAAe,OAAA;AACrB;AAEA,MAAA,WAAe;AAAA,EACb;AAAA,EACA;AACF;"}
+{"version":3,"file":"lazy-load.mjs","sources":["../../source/macros/lazy-load.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { type ElementModel } from '../_types';\n\ntype LazyLoadCreate = {\n  callback: (args: any) => void;\n  isThemeDark?: boolean;\n  isLazyLoad: boolean;\n  totalEntries: number | null;\n  offset: number;\n};\n\nconst create = ({\n  callback,\n  isThemeDark,\n  isLazyLoad,\n  totalEntries,\n  offset,\n}: LazyLoadCreate): ElementModel | undefined => {\n  if (!isLazyLoad) return;\n  if (!totalEntries) return;\n  if (!offset) return;\n  if (!callback) return;\n  if (offset >= totalEntries) return;\n\n  const button = document.createElement('button');\n  button.innerHTML = 'Load more';\n  button.addEventListener('click', callback);\n\n  const ctaButton = new ElementBuilder(button)\n    .styled(Styles.element.action.outline.normal)\n    .build();\n\n  return new ElementBuilder()\n    .styled(Styles.layout.alignment.block.center)\n    .withChild(ctaButton)\n    .withStyles({\n      element: {\n        marginTop: `${Styles.token.spacing.lg}`,\n      },\n    })\n    .build();\n};\n\nconst remove = ({ container }: { container: HTMLElement }) => {\n  const button = container.querySelector(\n    `.${Styles.layout.alignment.block.center.className}`,\n  ) as HTMLDivElement;\n\n  if (button) button.remove();\n};\n\nexport default {\n  remove,\n  create,\n};\n"],"names":[],"mappings":";;AAYA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgD;AAC9C,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAc;AACnB,MAAI,CAAC,OAAQ;AACb,MAAI,CAAC,SAAU;AACf,MAAI,UAAU,aAAc;AAE5B,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,SAAO,YAAY;AACnB,SAAO,iBAAiB,SAAS,QAAQ;AAEzC,QAAM,YAAY,IAAI,eAAe,MAAM,EACxC,OAAO,OAAO,QAAQ,OAAO,QAAQ,MAAM,EAC3C,MAAA;AAEH,SAAO,IAAI,eAAA,EACR,OAAO,OAAO,OAAO,UAAU,MAAM,MAAM,EAC3C,UAAU,SAAS,EACnB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,WAAW,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,IAAA;AAAA,EACvC,CACD,EACA,MAAA;AACL;AAEA,MAAM,SAAS,CAAC,EAAE,gBAA4C;AAC5D,QAAM,SAAS,UAAU;AAAA,IACvB,IAAI,OAAO,OAAO,UAAU,MAAM,OAAO,SAAS;AAAA,EAAA;AAGpD,MAAI,eAAe,OAAA;AACrB;AAEA,MAAA,WAAe;AAAA,EACb;AAAA,EACA;AACF;"}

package/dist/macros/loader.d.ts

@@ -1,11 +1,8 @@
+import { ElementModel } from '../_types';
 declare const _default: {
     create: ({ isThemeDark }: {
         isThemeDark?: boolean;
-    }) => {
-        element: HTMLElement;
-        className: string;
-        styles: string;
-    };
+    }) => ElementModel;
     display: ({ container, isThemeDark, }: {
         container: HTMLElement;
         isThemeDark?: boolean;

package/dist/macros/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../source/macros/loader.ts"],"names":[],"mappings":";8BAkCiC;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE;;;;;2CAmGvD;QACD,SAAS,EAAE,WAAW,CAAC;QACvB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;4BAZ8B;QAAE,SAAS,EAAE,WAAW,CAAA;KAAE;;AAkBzD,wBAIE"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../source/macros/loader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;;8BAiCb;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAG,YAAY;2CAuGtE;QACD,SAAS,EAAE,WAAW,CAAC;QACvB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;4BAZ8B;QAAE,SAAS,EAAE,WAAW,CAAA;KAAE;;AAkBzD,wBAIE"}