@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/layout/image/expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  isScreenZoomed,\n  isPreferredReducedMotion,\n} from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst { spacing } = token;\n\nconst ELEMENT_NAME = 'umd-layout-image-expand';\nconst ELEMENT_EXPLAND_DECLARATION = 'layout-image-expand-declaration';\nconst ELEMENT_EXPAND_CONTAINER = 'layout-image-expand-container';\n\nconst ELEMENT_EXPAND_IMAGE_CONTAINER = 'layout-image-expand-image-container';\nconst ELEMENT_EXPAND_IMAGE_POSITION = 'layout-image-expand-image-position';\nconst ELEMENT_EXPAND_IMAGE_SIZE = 'layout-image-expand-image-size';\nconst ELEMENT_EXPAND_IMAGE_OVERLAY = 'layout-image-expand-image-overlay';\n\nconst ELEMENT_EXPAND_TEXT_CONTAINER = 'layout-image-expand-text-container';\nconst ELEMENT_EXPAND_TEXT_LOCK = 'layout-image-expand-text-lock';\nconst ELEMENT_EXPAND_TEXT_ANIMATION = 'layout-image-expand-text-animation';\n\n// prettier-ignore\nconst TextLock = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  .${ELEMENT_EXPAND_TEXT_LOCK} {\n    display: flex;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextContainer = `\n  .${ELEMENT_EXPAND_TEXT_CONTAINER} {\n    position: relative;\n    padding-top: ${token.spacing.max};\n    padding-bottom: ${token.spacing.max};\n    height: 100%;\n    z-index: 9999;\n  }\n`;\n\n// prettier-ignore\nconst TextAnimation = `\n  .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n    width: 100vw;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n        position: absolute;\n        top: 0;\n        height: 80vh;\n        transform: translateY(80vh);\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPAND_TEXT_ANIMATION} {\n          transform: translateY(100vh);\n        }\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageOverlayContainer = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: rgba(0,0,0,0.65);\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {\n        opacity: 1;\n        animation: img-overlay forwards;\n        animation-timeline: view();\n        animation-range-start: 70vh;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageSizeContainer = `\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n\n  .${ELEMENT_EXPAND_IMAGE_SIZE} {\n    overflow: hidden;\n    position: relative;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_SIZE} {\n        width: ${token.spacing.maxWidth.smallest};\n        height: 70vh;\n        animation: img-size ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_SIZE} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImagePosition = `\n  .${ELEMENT_EXPAND_IMAGE_POSITION} {\n    width: 100%;\n    margin: 0 auto;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_POSITION} {\n        display: flex;\n        justify-content: center;\n        position: sticky;\n        top: 0; \n        animation: img-position ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: 200vh;\n      }\n    }\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_EXPAND_IMAGE_POSITION} {\n      height: 100%;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ImageContainer = `\n  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {\n        position: relative;\n      }\n    }\n  }\n`;\n\n// prettier-ignore\nconst Container = `\n  .${ELEMENT_EXPAND_CONTAINER} {\n    height: 100%;\n    width: 100%;\n    position: relative;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_LAYOUT_IMAGE_EXPAND = `\n  .${ELEMENT_EXPLAND_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: clip;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_EXPLAND_DECLARATION} {\n        height: 180vh;\n      }\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    @media (prefers-reduced-motion: no-preference) {\n      @supports (animation-timeline: scroll()) {\n        .${ELEMENT_EXPLAND_DECLARATION} {\n          height: 200vh;\n        }\n      }\n    }\n  }\n\n  .${ELEMENT_EXPLAND_DECLARATION} img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ${Container}\n  ${ImageContainer}\n  ${ImageSizeContainer}\n  ${ImagePosition}\n  ${ImageOverlayContainer}\n  ${TextAnimation}\n  ${TextContainer}\n  ${TextLock}\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageContainer = document.createElement('div');\n  const imagePosition = document.createElement('div');\n  const imageSize = document.createElement('div');\n  const imageOverlay = document.createElement('div');\n\n  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);\n\n  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);\n  imageSize.appendChild(image);\n  imageSize.appendChild(imageOverlay);\n\n  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);\n  imagePosition.appendChild(imageSize);\n\n  imageContainer.appendChild(imagePosition);\n  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);\n\n  return imageContainer;\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textAnimation = document.createElement('div');\n  const textContainer = document.createElement('div');\n  const textLock = document.createElement('div');\n\n  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);\n  textLock.appendChild(content);\n\n  textContainer.appendChild(textLock);\n  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);\n\n  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);\n  textAnimation.appendChild(textContainer);\n\n  return textAnimation;\n};\n\nconst CreateImageExpandElement = (props: TypeLayoutImageExpandProps) => {\n  const declaration = document.createElement('div');\n  const container = document.createElement('div');\n  const imageContainer = CreateImageContainer(props);\n  const textContainer = CreateTextContainer(props);\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainer.clientHeight +\n      parsePixelValue(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (isScreenZoomed() && !isPreferredReducedMotion()) {\n    textContainer.style.height = '90vh';\n    textContainer.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  container.appendChild(imageContainer);\n  container.appendChild(textContainer);\n  container.classList.add(ELEMENT_EXPAND_CONTAINER);\n\n  declaration.appendChild(container);\n  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);\n\n  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };\n};\n\nexport const createCompositeLayoutImageExpand = CreateImageExpandElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  parsePixelValue,\n  withViewTimelineAnimation,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  isScreenZoomed,\n  isPreferredReducedMotion,\n} from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeLayoutImageExpandProps = {\n  content: HTMLElement;\n  image: HTMLImageElement;\n};\n\nconst KEYFRAMES = `\n  @keyframes img-overlay {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes img-size {\n    to { width: 100%; height: 100vh; }\n  }\n`;\n\nconst CreateImageContainer = ({ image }: TypeLayoutImageExpandProps) => {\n  const imageOverlay = new ElementBuilder()\n    .withClassName('layout-image-expand-image-overlay')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: '100%',\n        width: '100%',\n        background: 'rgba(0,0,0,0.65)',\n        opacity: 1,\n        ...withViewTimelineAnimation({\n          animation: 'img-overlay forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: '70vh',\n          animationRangeEnd: '100vh',\n        }),\n      },\n    })\n    .build();\n\n  const imageSize = new ElementBuilder()\n    .withClassName('layout-image-expand-image-size')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        position: 'relative',\n        ...withViewTimelineAnimation({\n          width: token.spacing.maxWidth.smallest,\n          height: '70vh',\n          animation: 'img-size ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: 'cover',\n          animationRangeEnd: '200vh',\n        }),\n        '@supports not (animation-timeline: scroll())': {\n          height: '100%',\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n          height: '100%',\n        },\n        '& img': {\n          display: 'block',\n          width: '100%',\n          height: '100%',\n          objectFit: 'cover',\n        },\n      },\n    })\n    .withChildren(image, imageOverlay)\n    .build();\n\n  const imagePosition = new ElementBuilder()\n    .withClassName('layout-image-expand-image-position')\n    .withStyles({\n      element: {\n        width: '100%',\n        margin: '0 auto',\n        ...withViewTimelineAnimation({\n          display: 'flex',\n          justifyContent: 'center',\n          position: 'sticky',\n          top: 0,\n          animation: 'img-position ease-in-out forwards',\n          animationTimeline: 'view()',\n          animationRangeStart: 'cover',\n          animationRangeEnd: '200vh',\n        }),\n        '@supports not (animation-timeline: scroll())': {\n          height: '100%',\n        },\n        '@media (prefers-reduced-motion: reduce)': {\n          height: '100%',\n        },\n      },\n    })\n    .withChild(imageSize)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('layout-image-expand-image-container')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        ...withViewTimelineAnimation({\n          position: 'relative',\n        }),\n      },\n    })\n    .withChild(imagePosition)\n    .build();\n};\n\nconst CreateTextContainer = ({ content }: TypeLayoutImageExpandProps) => {\n  const textLock = new ElementBuilder()\n    .withClassName('layout-image-expand-text-lock')\n    .withStyles({\n      element: {\n        ...layout.space.horizontal.larger,\n        display: 'flex',\n        height: '100%',\n      },\n    })\n    .withChild(content)\n    .build();\n\n  const textContainer = new ElementBuilder()\n    .withClassName('layout-image-expand-text-container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        paddingTop: token.spacing.max,\n        paddingBottom: token.spacing.max,\n        height: '100%',\n        zIndex: 9999,\n      },\n    })\n    .withChild(textLock)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('layout-image-expand-text-animation')\n    .withStyles({\n      element: {\n        width: '100vw',\n        ...withViewTimelineAnimation({\n          position: 'absolute',\n          top: 0,\n          height: '80vh',\n          transform: 'translateY(80vh)',\n        }),\n        [`@media (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({\n            transform: 'translateY(100vh)',\n          }),\n        },\n      },\n    })\n    .withChild(textContainer)\n    .build();\n};\n\nconst CreateImageExpandElement = (props: TypeLayoutImageExpandProps) => {\n  const imageContainerModel = CreateImageContainer(props);\n  const textContainerModel = CreateTextContainer(props);\n  let containerElement!: HTMLElement;\n\n  const sizeImageForText = () => {\n    const textContainerHeight =\n      textContainerModel.element.clientHeight +\n      parsePixelValue(token.spacing['2xl']) * 2;\n    const imageContainerHeight = containerElement.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      containerElement.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  const containerModel = new ElementBuilder()\n    .withClassName('layout-image-expand-container')\n    .withStyles({\n      element: {\n        height: '100%',\n        width: '100%',\n        position: 'relative',\n      },\n    })\n    .ref((element) => {\n      containerElement = element;\n    })\n    .withChildren(imageContainerModel, textContainerModel)\n    .build();\n\n  const declarationModel = new ElementBuilder()\n    .withClassName('layout-image-expand-declaration')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        overflow: 'clip',\n        ...withViewTimelineAnimation({ height: '180vh' }),\n        [`@media (${token.media.queries.tablet.min})`]: {\n          ...withViewTimelineAnimation({ height: '200vh' }),\n        },\n      },\n    })\n    .withChild(containerModel)\n    .build();\n\n  declarationModel.styles += KEYFRAMES;\n\n  if (isScreenZoomed() && !isPreferredReducedMotion()) {\n    textContainerModel.element.style.height = '90vh';\n    textContainerModel.element.style.transform = 'translateY(0)';\n  }\n\n  if (!CSS.supports('animation-timeline', 'view()')) {\n    setTimeout(() => {\n      sizeImageForText();\n    }, 1000);\n    window.addEventListener('resize', () => sizeImageForText());\n  }\n\n  return declarationModel;\n};\n\nexport const createCompositeLayoutImageExpand = CreateImageExpandElement;\n"],"names":[],"mappings":"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"}

package/dist/composite/layout/scroll-top/index.d.ts

@@ -1,12 +1,6 @@
 type TypeScrollTopProps = {
     isFixed?: boolean;
 };
-export declare const createCompositeLayoutScrollTop: (props: TypeScrollTopProps) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        load: () => void;
-    };
-};
+export declare const createCompositeLayoutScrollTop: (props: TypeScrollTopProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/layout/scroll-top/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8IF,eAAO,MAAM,8BAA8B,UAxGJ,kBAAkB;;;;;;CAwGW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"names":[],"mappings":"AAKA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAqIF,eAAO,MAAM,8BAA8B,UAnIJ,kBAAkB,kFAmIW,CAAC"}

package/dist/composite/layout/scroll-top/index.js

@@ -1,52 +1,60 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { arrow_up } from "@universityofmaryland/web-icons-library/arrows";
-const ELEMENT_NAME = "umd-element-scroll-top";
-const ELEMENT_SCROLL_TOP_DECLARATION = "scroll-top-declarion";
-const ELEMENT_SCROLL_TOP_CONTAINER = "scroll-top-container";
-const STYLES_SCROLL_TOP_ELEMENT = `
-  .${ELEMENT_SCROLL_TOP_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_SCROLL_TOP_CONTAINER} {
-    background-color: ${token.color.black};
-    width: 100%;
-    height: 100%;
-    min-height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid ${token.color.gold};
-    cursor: pointer;
-    transition: transform 250ms ease-in-out;
-  }
-
-  .${ELEMENT_SCROLL_TOP_CONTAINER} svg {
-    display: block;
-    width: 14px;
-    height: 14px;
-  }
-`;
 const CreateScrollTopElement = (props) => (() => {
+  const DEFAULT_STARTING_POSITION = `translateX(100vh)`;
   const { isFixed = false } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("button");
-  const text = document.createElement("span");
-  const defaultStartingPosition = `translateX(100vh)`;
-  const getSpacing = () => window.innerWidth > 768 ? 40 : 8;
   let startingPosition = null;
   let isShowing = false;
+  const textBuilder = new ElementBuilder("span").withClassName("sr-only").withHTML("Scroll To Top");
+  const containerBuilder = new ElementBuilder("button").withClassName("scroll-top-container").withHTML(arrow_up).withChild(textBuilder).withStyles({
+    element: {
+      backgroundColor: token.color.black,
+      width: "100%",
+      height: "100%",
+      minHeight: "40px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      border: `1px solid ${token.color.gold}`,
+      cursor: "pointer",
+      transition: "transform 250ms ease-in-out",
+      "& svg": {
+        display: "block",
+        width: "14px",
+        height: "14px"
+      }
+    }
+  }).on("click", () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  });
+  const declarationBuilder = new ElementBuilder().withClassName("scroll-top-declarion").withChild(containerBuilder).withStyles({
+    element: {
+      container: "umd-element-scroll-top / inline-size",
+      width: "100%",
+      height: "100%",
+      ...isFixed && {
+        width: "40px",
+        height: "40px",
+        position: "absolute",
+        inset: "0",
+        margin: "auto"
+      }
+    }
+  });
+  const container = containerBuilder.getElement();
+  const declaration = declarationBuilder.getElement();
   const eventResize = () => {
     startingPosition = declaration.getBoundingClientRect().right;
+    if (isFixed && !isShowing) {
+      setHiddenPosition();
+    }
   };
   const eventScroll = () => {
-    const windowHeight = window.innerHeight;
     const pagePosition = window.scrollY;
-    const isPastFirstView = pagePosition > windowHeight;
-    const isNearBottom = pagePosition + windowHeight >= document.body.scrollHeight - windowHeight;
-    const showWindow = isPastFirstView && !isNearBottom;
-    if (showWindow) {
+    const isPastFirstView = pagePosition > 0;
+    if (isPastFirstView) {
       setVisiblePosition();
     } else {
       setHiddenPosition();
@@ -59,58 +67,38 @@ const CreateScrollTopElement = (props) => (() => {
     }
   };
   const setHiddenPosition = () => {
-    if (isShowing) {
-      isShowing = false;
-      if (startingPosition) {
-        const spacing = getSpacing();
-        const translateAmount = window.innerWidth - startingPosition;
-        const position = translateAmount + spacing + container.offsetWidth;
-        container.style.transform = `translateX(${position}px)`;
-      } else {
-        container.style.transform = defaultStartingPosition;
+    const getSpacing = () => {
+      if (window.innerWidth > 768) {
+        return 40;
       }
+      return 8;
+    };
+    isShowing = false;
+    if (startingPosition) {
+      const spacing = getSpacing();
+      const translateAmount = window.innerWidth - startingPosition;
+      const position = translateAmount + spacing + container.offsetWidth;
+      container.style.transform = `translateX(${position}px)`;
+    } else {
+      container.style.transform = DEFAULT_STARTING_POSITION;
     }
   };
   const load = () => {
     startingPosition = declaration.getBoundingClientRect().right;
     container.style.transition = "none";
-    setHiddenPosition();
+    if (isFixed) {
+      eventScroll();
+    }
     setTimeout(() => {
       container.style.transition = "transform 250ms ease-in-out";
     }, 100);
   };
-  text.classList.add("sr-only");
-  text.innerHTML = "Scroll To Top";
-  container.classList.add(ELEMENT_SCROLL_TOP_CONTAINER);
-  container.addEventListener("click", () => {
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: "smooth"
-    });
-  });
-  container.innerHTML = arrow_up;
-  container.appendChild(text);
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_SCROLL_TOP_DECLARATION);
   if (isFixed) {
-    container.style.transform = defaultStartingPosition;
-    window.addEventListener(
-      "scroll",
-      debounce(() => eventScroll(), 10)
-    );
-    window.addEventListener(
-      "resize",
-      debounce(() => eventResize(), 20)
-    );
+    container.style.transform = DEFAULT_STARTING_POSITION;
+    window.addEventListener("scroll", debounce(eventScroll, 10));
+    window.addEventListener("resize", debounce(eventResize, 20));
   }
-  return {
-    element: declaration,
-    styles: STYLES_SCROLL_TOP_ELEMENT,
-    events: {
-      load
-    }
-  };
+  return declarationBuilder.withEvents({ load }).build();
 })();
 const createCompositeLayoutScrollTop = CreateScrollTopElement;
 export {

package/dist/composite/layout/scroll-top/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { arrow_up as iconArrowUp } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeScrollTopProps = {\n  isFixed?: boolean;\n};\n\nconst ELEMENT_NAME = 'umd-element-scroll-top';\nconst ELEMENT_SCROLL_TOP_DECLARATION = 'scroll-top-declarion';\nconst ELEMENT_SCROLL_TOP_CONTAINER = 'scroll-top-container';\n\n// prettier-ignore\nconst STYLES_SCROLL_TOP_ELEMENT = `\n  .${ELEMENT_SCROLL_TOP_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} {\n    background-color: ${token.color.black};\n    width: 100%;\n    height: 100%;\n    min-height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid ${token.color.gold};\n    cursor: pointer;\n    transition: transform 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SCROLL_TOP_CONTAINER} svg {\n    display: block;\n    width: 14px;\n    height: 14px;\n  }\n`;\n\n// @media (${token.media.queries.medium.max}) {\n//   .${ELEMENT_SCROLL_TOP_CONTAINER} {\n//     display: none;\n//   }\n// }\n\nconst CreateScrollTopElement = (props: TypeScrollTopProps) =>\n  (() => {\n    const { isFixed = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('button');\n    const text = document.createElement('span');\n    const defaultStartingPosition = `translateX(100vh)`;\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isPastFirstView = pagePosition > windowHeight;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight;\n      const showWindow = isPastFirstView && !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    text.classList.add('sr-only');\n    text.innerHTML = 'Scroll To Top';\n\n    container.classList.add(ELEMENT_SCROLL_TOP_CONTAINER);\n    container.addEventListener('click', () => {\n      window.scrollTo({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    });\n    container.innerHTML = iconArrowUp;\n    container.appendChild(text);\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SCROLL_TOP_DECLARATION);\n\n    if (isFixed) {\n      container.style.transform = defaultStartingPosition;\n\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 10),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      styles: STYLES_SCROLL_TOP_ELEMENT,\n      events: {\n        load,\n      },\n    };\n  })();\n\nexport const createCompositeLayoutScrollTop = CreateScrollTopElement;\n"],"names":["iconArrowUp"],"mappings":";;;AAQA,MAAM,eAAe;AACrB,MAAM,iCAAiC;AACvC,MAAM,+BAA+B;AAGrC,MAAM,4BAA4B;AAAA,KAC7B,8BAA8B;AAAA,iBAClB,YAAY;AAAA;AAAA;AAAA,KAGxB,4BAA4B;AAAA,wBACT,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOjB,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,KAKnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAajC,MAAM,yBAAyB,CAAC,WAC7B,MAAM;AACL,QAAM,EAAE,UAAU,MAAA,IAAU;AAC5B,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,QAAM,0BAA0B;AAChC,QAAM,aAAa,MAAO,OAAO,aAAa,MAAM,KAAK;AACzD,MAAI,mBAAkC;AACtC,MAAI,YAAY;AAEhB,QAAM,cAAc,MAAM;AACxB,uBAAmB,YAAY,wBAAwB;AAAA,EACzD;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,eAAe,OAAO;AAC5B,UAAM,eAAe,OAAO;AAC5B,UAAM,kBAAkB,eAAe;AACvC,UAAM,eACJ,eAAe,gBACf,SAAS,KAAK,eAAe;AAC/B,UAAM,aAAa,mBAAmB,CAAC;AAEvC,QAAI,YAAY;AACd,yBAAA;AAAA,IACF,OAAO;AACL,wBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,YAAY;AAC5B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,WAAW;AACb,kBAAY;AAEZ,UAAI,kBAAkB;AACpB,cAAM,UAAU,WAAA;AAChB,cAAM,kBAAkB,OAAO,aAAa;AAC5C,cAAM,WAAW,kBAAkB,UAAU,UAAU;AAEvD,kBAAU,MAAM,YAAY,cAAc,QAAQ;AAAA,MACpD,OAAO;AACL,kBAAU,MAAM,YAAY;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,MAAM;AACjB,uBAAmB,YAAY,wBAAwB;AACvD,cAAU,MAAM,aAAa;AAC7B,sBAAA;AAEA,eAAW,MAAM;AACf,gBAAU,MAAM,aAAa;AAAA,IAC/B,GAAG,GAAG;AAAA,EACR;AAEA,OAAK,UAAU,IAAI,SAAS;AAC5B,OAAK,YAAY;AAEjB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,iBAAiB,SAAS,MAAM;AACxC,WAAO,SAAS;AAAA,MACd,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX;AAAA,EACH,CAAC;AACD,YAAU,YAAYA;AACtB,YAAU,YAAY,IAAI;AAE1B,cAAY,YAAY,SAAS;AACjC,cAAY,UAAU,IAAI,8BAA8B;AAExD,MAAI,SAAS;AACX,cAAU,MAAM,YAAY;AAE5B,WAAO;AAAA,MACL;AAAA,MACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACA,SAAS,MAAM,YAAA,GAAe,EAAE;AAAA,IAAA;AAAA,EAEpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ,GAAA;AAEK,MAAM,iCAAiC;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { arrow_up as iconArrowUp } from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeScrollTopProps = {\n  isFixed?: boolean;\n};\n\nconst CreateScrollTopElement = (props: TypeScrollTopProps) =>\n  (() => {\n    const DEFAULT_STARTING_POSITION = `translateX(100vh)`;\n    const { isFixed = false } = props;\n\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const textBuilder = new ElementBuilder('span')\n      .withClassName('sr-only')\n      .withHTML('Scroll To Top');\n\n    const containerBuilder = new ElementBuilder('button')\n      .withClassName('scroll-top-container')\n      .withHTML(iconArrowUp)\n      .withChild(textBuilder)\n      .withStyles({\n        element: {\n          backgroundColor: token.color.black,\n          width: '100%',\n          height: '100%',\n          minHeight: '40px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          border: `1px solid ${token.color.gold}`,\n          cursor: 'pointer',\n          transition: 'transform 250ms ease-in-out',\n          '& svg': {\n            display: 'block',\n            width: '14px',\n            height: '14px',\n          },\n        },\n      })\n      .on('click', () => {\n        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n      });\n\n    const declarationBuilder = new ElementBuilder()\n      .withClassName('scroll-top-declarion')\n      .withChild(containerBuilder)\n      .withStyles({\n        element: {\n          container: 'umd-element-scroll-top / inline-size',\n          width: '100%',\n          height: '100%',\n          ...(isFixed && {\n            width: '40px',\n            height: '40px',\n            position: 'absolute',\n            inset: '0',\n            margin: 'auto',\n          }),\n        },\n      });\n\n    const container = containerBuilder.getElement() as HTMLButtonElement;\n    const declaration = declarationBuilder.getElement() as HTMLDivElement;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n\n      if (isFixed && !isShowing) {\n        setHiddenPosition();\n      }\n    };\n\n    const eventScroll = () => {\n      const pagePosition = window.scrollY;\n      const isPastFirstView = pagePosition > 0;\n\n      if (isPastFirstView) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      const getSpacing = () => {\n        if (window.innerWidth > 768) {\n          return 40;\n        }\n\n        return 8;\n      };\n\n      isShowing = false;\n\n      if (startingPosition) {\n        const spacing = getSpacing();\n        const translateAmount = window.innerWidth - startingPosition;\n        const position = translateAmount + spacing + container.offsetWidth;\n\n        container.style.transform = `translateX(${position}px)`;\n      } else {\n        container.style.transform = DEFAULT_STARTING_POSITION;\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().right;\n      container.style.transition = 'none';\n\n      if (isFixed) {\n        eventScroll();\n      }\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    if (isFixed) {\n      container.style.transform = DEFAULT_STARTING_POSITION;\n\n      window.addEventListener('scroll', debounce(eventScroll, 10));\n      window.addEventListener('resize', debounce(eventResize, 20));\n    }\n\n    return declarationBuilder.withEvents({ load }).build();\n  })();\n\nexport const createCompositeLayoutScrollTop = CreateScrollTopElement;\n"],"names":["iconArrowUp"],"mappings":"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"}

package/dist/composite/layout/sticky-columns/index.d.ts

@@ -4,8 +4,8 @@ type TypeStickyProps = {
     isStickyLast?: boolean | null;
     topPosition?: string | null;
 };
-export declare const createCompositeLayoutStickyColumns: (element: TypeStickyProps) => {
-    element: HTMLDivElement;
+export declare const createCompositeLayoutStickyColumns: (props: TypeStickyProps) => {
+    element: HTMLElement;
     styles: string;
     events: {
         setPosition: ({ value }: {

package/dist/composite/layout/sticky-columns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAuGF,eAAO,MAAM,kCAAkC,YA5CF,eAAe;;;;iCAM1B;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;CAsCkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"names":[],"mappings":"AAIA,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AA+EF,eAAO,MAAM,kCAAkC,UA7EJ,eAAe;;;;iCAIxB;YAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;SAAE;;CAyEkB,CAAC"}

package/dist/composite/layout/sticky-columns/index.js

@@ -1,84 +1,56 @@
 import * as token from "@universityofmaryland/web-token-library";
 import * as layout from "@universityofmaryland/web-styles-library/layout";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-const ELEMENT_NAME = "umd-sticky-columns";
-const ATTRIBUTE_STICKY_LAST = "sticky-last";
-const ELEMENT_STICKY_CONTAINER = "sticky-columns-container";
-const ELEMENT_STICKY_CONTAINER_WRAPPER = "sticky-columns-container-wrapper";
-const ELEMENT_STICKY_COLUMN = "sticky-column";
-const ELEMENT_STATIC_COLUMN = "static-column";
-const OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;
-const OverwriteStickyLast = `
-  @media (min-width: ${token.media.breakpoints.highDef.min}) {
-    ${OVERWRITE_STICKY_LAST_STICKY} {
-       order: 2;
-     }
-  }
-`;
-const ColumnSticky = `
-  @media (min-width: ${token.media.breakpoints.highDef.min}) {
-    .${ELEMENT_STICKY_COLUMN} {
-      position: sticky;
-      top: 32px;
-    }
-  }
-`;
-const STYLES_STICKY_COLUMNS_ELEMENT = `
-  .${ELEMENT_STICKY_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two
-  }
-})}
-
-  .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
-    align-items: start;
-    grid-template-columns: 1fr;
-  }
-
-  @media (min-width: ${token.media.breakpoints.highDef.min}) {
-    .${ELEMENT_STICKY_CONTAINER_WRAPPER} {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  ${ColumnSticky}
-  ${OverwriteStickyLast}
-`;
-const CreateStickyColumnsElement = (element) => {
-  const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const stickyElement = document.createElement("div");
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+const CreateStickyColumnsElement = (props) => {
+  const { stickyColumn, staticColumn, isStickyLast, topPosition } = props;
+  let stickyColumnElement = null;
   const setPosition = ({ value }) => {
+    if (!stickyColumnElement) return;
     if (value) {
-      stickyElement.style.top = value;
+      stickyColumnElement.style.top = value;
     } else {
-      stickyElement.style.removeProperty("top");
+      stickyColumnElement.style.removeProperty("top");
     }
   };
-  if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, "");
-  container.classList.add(ELEMENT_STICKY_CONTAINER);
-  wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);
-  if (stickyColumn) {
-    stickyElement.classList.add(ELEMENT_STICKY_COLUMN);
-    stickyElement.appendChild(stickyColumn);
-    wrapper.appendChild(stickyElement);
-  }
-  if (staticColumn) {
-    staticColumn.classList.add(ELEMENT_STATIC_COLUMN);
-    wrapper.appendChild(staticColumn);
-  }
-  container.appendChild(wrapper);
+  const createStickyColumn = () => {
+    if (!stickyColumn) return null;
+    return new ElementBuilder().withClassName("sticky-column").withStyles({
+      element: {
+        [`@media (${token.media.queries.highDef.min})`]: {
+          position: "sticky",
+          top: "32px",
+          ...isStickyLast && { order: 2 }
+        }
+      }
+    }).withChild(stickyColumn).ref((element) => {
+      stickyColumnElement = element;
+    });
+  };
+  const createStaticColumn = () => {
+    if (!staticColumn) return null;
+    return new ElementBuilder(staticColumn).withClassName("static-column");
+  };
+  const children = [createStickyColumn(), createStaticColumn()].filter((child) => child !== null);
+  const wrapperModel = new ElementBuilder().withClassName("sticky-columns-container-wrapper").styled(layout.grid.gap.two).withStyles({
+    element: {
+      alignItems: "start",
+      gridTemplateColumns: "1fr",
+      [`@media (${token.media.queries.highDef.min})`]: {
+        gridTemplateColumns: "1fr 1fr"
+      }
+    }
+  }).withChildren(...children).build();
+  const containerModel = new ElementBuilder().withClassName("sticky-columns-container").withStyles({
+    element: {
+      containerType: "inline-size"
+    }
+  }).withChild(wrapperModel).build();
   if (topPosition) {
     setPosition({ value: topPosition });
   }
   return {
-    element: container,
-    styles: STYLES_STICKY_COLUMNS_ELEMENT,
+    element: containerModel.element,
+    styles: containerModel.styles,
     events: {
       setPosition
     }

package/dist/composite/layout/sticky-columns/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeStickyProps = {\n  stickyColumn?: HTMLElement | null;\n  staticColumn?: HTMLElement | null;\n  isStickyLast?: boolean | null;\n  topPosition?: string | null;\n};\n\nconst ELEMENT_NAME = 'umd-sticky-columns';\nconst ATTRIBUTE_STICKY_LAST = 'sticky-last';\n\nconst ELEMENT_STICKY_CONTAINER = 'sticky-columns-container';\nconst ELEMENT_STICKY_CONTAINER_WRAPPER = 'sticky-columns-container-wrapper';\n\nconst ELEMENT_STICKY_COLUMN = 'sticky-column';\nconst ELEMENT_STATIC_COLUMN = 'static-column';\n\nconst OVERWRITE_STICKY_LAST_STICKY = `.${ELEMENT_STICKY_CONTAINER}[${ATTRIBUTE_STICKY_LAST}] .${ELEMENT_STICKY_COLUMN}`;\n\n// prettier-ignore\nconst OverwriteStickyLast = `\n  @media (min-width: ${token.media.breakpoints.highDef.min}) {\n    ${OVERWRITE_STICKY_LAST_STICKY} {\n       order: 2;\n     }\n  }\n`;\n\n// prettier-ignore\nconst ColumnSticky = `\n  @media (min-width: ${token.media.breakpoints.highDef.min}) {\n    .${ELEMENT_STICKY_COLUMN} {\n      position: sticky;\n      top: 32px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_STICKY_COLUMNS_ELEMENT = `\n  .${ELEMENT_STICKY_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_STICKY_CONTAINER_WRAPPER}`]: layout.grid.gap.two,\n    },\n  })}\n\n  .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n    align-items: start;\n    grid-template-columns: 1fr;\n  }\n\n  @media (min-width: ${token.media.breakpoints.highDef.min}) {\n    .${ELEMENT_STICKY_CONTAINER_WRAPPER} {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  ${ColumnSticky}\n  ${OverwriteStickyLast}\n`;\n\nconst CreateStickyColumnsElement = (element: TypeStickyProps) => {\n  const { stickyColumn, staticColumn, isStickyLast, topPosition } = element;\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const stickyElement = document.createElement('div');\n\n  const setPosition = ({ value }: { value: string | null }) => {\n    if (value) {\n      stickyElement.style.top = value;\n    } else {\n      stickyElement.style.removeProperty('top');\n    }\n  };\n\n  if (isStickyLast) container.setAttribute(ATTRIBUTE_STICKY_LAST, '');\n  container.classList.add(ELEMENT_STICKY_CONTAINER);\n  wrapper.classList.add(ELEMENT_STICKY_CONTAINER_WRAPPER);\n\n  if (stickyColumn) {\n    stickyElement.classList.add(ELEMENT_STICKY_COLUMN);\n    stickyElement.appendChild(stickyColumn);\n    wrapper.appendChild(stickyElement);\n  }\n\n  if (staticColumn) {\n    staticColumn.classList.add(ELEMENT_STATIC_COLUMN);\n    wrapper.appendChild(staticColumn);\n  }\n\n  container.appendChild(wrapper);\n\n  if (topPosition) {\n    setPosition({ value: topPosition });\n  }\n\n  return {\n    element: container,\n    styles: STYLES_STICKY_COLUMNS_ELEMENT,\n    events: {\n      setPosition,\n    },\n  };\n};\n\nexport const createCompositeLayoutStickyColumns = CreateStickyColumnsElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AACjC,MAAM,mCAAmC;AAEzC,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,+BAA+B,IAAI,wBAAwB,IAAI,qBAAqB,MAAM,qBAAqB;AAGrH,MAAM,sBAAsB;AAAA,uBACL,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,MACpD,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe;AAAA,uBACE,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,gCAAgC;AAAA,KACjC,wBAAwB;AAAA,iBACZ,YAAY;AAAA;AAAA;AAAA,IAGzB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,gCAAgC,EAAE,GAAG,OAAO,KAAK,IAAI;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,KAEC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKd,MAAM,MAAM,YAAY,QAAQ,GAAG;AAAA,OACnD,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,YAAY;AAAA,IACZ,mBAAmB;AAAA;AAGvB,MAAM,6BAA6B,CAAC,YAA6B;AAC/D,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,gBAAgB,SAAS,cAAc,KAAK;AAElD,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,OAAO;AACT,oBAAc,MAAM,MAAM;AAAA,IAC5B,OAAO;AACL,oBAAc,MAAM,eAAe,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,MAAI,aAAc,WAAU,aAAa,uBAAuB,EAAE;AAClE,YAAU,UAAU,IAAI,wBAAwB;AAChD,UAAQ,UAAU,IAAI,gCAAgC;AAEtD,MAAI,cAAc;AAChB,kBAAc,UAAU,IAAI,qBAAqB;AACjD,kBAAc,YAAY,YAAY;AACtC,YAAQ,YAAY,aAAa;AAAA,EACnC;AAEA,MAAI,cAAc;AAChB,iBAAa,UAAU,IAAI,qBAAqB;AAChD,YAAQ,YAAY,YAAY;AAAA,EAClC;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;AAEO,MAAM,qCAAqC;"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/layout/sticky-columns/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\ntype TypeStickyProps = {\n  stickyColumn?: HTMLElement | null;\n  staticColumn?: HTMLElement | null;\n  isStickyLast?: boolean | null;\n  topPosition?: string | null;\n};\n\nconst CreateStickyColumnsElement = (props: TypeStickyProps) => {\n  const { stickyColumn, staticColumn, isStickyLast, topPosition } = props;\n  let stickyColumnElement: HTMLElement | null = null;\n\n  const setPosition = ({ value }: { value: string | null }) => {\n    if (!stickyColumnElement) return;\n    if (value) {\n      stickyColumnElement.style.top = value;\n    } else {\n      stickyColumnElement.style.removeProperty('top');\n    }\n  };\n\n  const createStickyColumn = () => {\n    if (!stickyColumn) return null;\n    return new ElementBuilder()\n      .withClassName('sticky-column')\n      .withStyles({\n        element: {\n          [`@media (${token.media.queries.highDef.min})`]: {\n            position: 'sticky',\n            top: '32px',\n            ...(isStickyLast && { order: 2 }),\n          },\n        },\n      })\n      .withChild(stickyColumn)\n      .ref((element) => {\n        stickyColumnElement = element;\n      });\n  };\n\n  const createStaticColumn = () => {\n    if (!staticColumn) return null;\n    return new ElementBuilder(staticColumn).withClassName('static-column');\n  };\n\n  const children = [createStickyColumn(), createStaticColumn()].filter((child) => child !== null);\n\n  const wrapperModel = new ElementBuilder()\n    .withClassName('sticky-columns-container-wrapper')\n    .styled(layout.grid.gap.two)\n    .withStyles({\n      element: {\n        alignItems: 'start',\n        gridTemplateColumns: '1fr',\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '1fr 1fr',\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n\n  const containerModel = new ElementBuilder()\n    .withClassName('sticky-columns-container')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n      },\n    })\n    .withChild(wrapperModel)\n    .build();\n\n  if (topPosition) {\n    setPosition({ value: topPosition });\n  }\n\n  return {\n    element: containerModel.element,\n    styles: containerModel.styles,\n    events: {\n      setPosition,\n    },\n  };\n};\n\nexport const createCompositeLayoutStickyColumns = CreateStickyColumnsElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,6BAA6B,CAAC,UAA2B;AAC7D,QAAM,EAAE,cAAc,cAAc,cAAc,gBAAgB;AAClE,MAAI,sBAA0C;AAE9C,QAAM,cAAc,CAAC,EAAE,YAAsC;AAC3D,QAAI,CAAC,oBAAqB;AAC1B,QAAI,OAAO;AACT,0BAAoB,MAAM,MAAM;AAAA,IAClC,OAAO;AACL,0BAAoB,MAAM,eAAe,KAAK;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,aAAc,QAAO;AAC1B,WAAO,IAAI,eAAA,EACR,cAAc,eAAe,EAC7B,WAAW;AAAA,MACV,SAAS;AAAA,QACP,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC/C,UAAU;AAAA,UACV,KAAK;AAAA,UACL,GAAI,gBAAgB,EAAE,OAAO,EAAA;AAAA,QAAE;AAAA,MACjC;AAAA,IACF,CACD,EACA,UAAU,YAAY,EACtB,IAAI,CAAC,YAAY;AAChB,4BAAsB;AAAA,IACxB,CAAC;AAAA,EACL;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC,aAAc,QAAO;AAC1B,WAAO,IAAI,eAAe,YAAY,EAAE,cAAc,eAAe;AAAA,EACvE;AAEA,QAAM,WAAW,CAAC,mBAAA,GAAsB,mBAAA,CAAoB,EAAE,OAAO,CAAC,UAAU,UAAU,IAAI;AAE9F,QAAM,eAAe,IAAI,iBACtB,cAAc,kCAAkC,EAChD,OAAO,OAAO,KAAK,IAAI,GAAG,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,qBAAqB;AAAA,MACrB,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,qBAAqB;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AAEH,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,UAAU,YAAY,EACtB,MAAA;AAEH,MAAI,aAAa;AACf,gBAAY,EAAE,OAAO,aAAa;AAAA,EACpC;AAEA,SAAO;AAAA,IACL,SAAS,eAAe;AAAA,IACxB,QAAQ,eAAe;AAAA,IACvB,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EACF;AAEJ;AAEO,MAAM,qCAAqC;"}

package/dist/composite/media/elements/gif.js

@@ -12,7 +12,7 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
+import "@universityofmaryland/web-utilities-library/styles";
 import "../../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
@@ -21,10 +21,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
 const CreateGifElement = ({ image }) => {
   const container = document.createElement("div");

package/dist/composite/media/inline/caption.d.ts

@@ -4,10 +4,12 @@ export type TypeMediaInlineRequirements = {
     isThemeDark?: boolean;
 };
 export declare const createCompositeMediaInlineCaption: (props: TypeMediaInlineRequirements) => {
-    element: HTMLDivElement;
     events: {
-        load: () => void;
+        load: () => null | undefined;
     };
+    element: HTMLElement;
     styles: string;
+    update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
+    destroy?: () => void;
 };
 //# sourceMappingURL=caption.d.ts.map

package/dist/composite/media/inline/caption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqHF,eAAO,MAAM,iCAAiC,UAxFP,2BAA2B;;;;;;CAwFK,CAAC"}
+{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/composite/media/inline/caption.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA8GF,eAAO,MAAM,iCAAiC,UA5GP,2BAA2B;;;;;;;;CA4GK,CAAC"}