@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

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

@@ -0,0 +1,280 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index$1 = require("../../../utilities/accessibility/index.js");
+const index = require("../../../utilities/theme/index.js");
+const { spacing } = Styles.token;
+const ELEMENT_NAME = "umd-layout-image-expand";
+const ELEMENT_EXPLAND_DECLARATION = "layout-image-expand-declaration";
+const ELEMENT_EXPAND_CONTAINER = "layout-image-expand-container";
+const ELEMENT_EXPAND_IMAGE_CONTAINER = "layout-image-expand-image-container";
+const ELEMENT_EXPAND_IMAGE_POSITION = "layout-image-expand-image-position";
+const ELEMENT_EXPAND_IMAGE_SIZE = "layout-image-expand-image-size";
+const ELEMENT_EXPAND_IMAGE_OVERLAY = "layout-image-expand-image-overlay";
+const ELEMENT_EXPAND_TEXT_CONTAINER = "layout-image-expand-text-container";
+const ELEMENT_EXPAND_TEXT_LOCK = "layout-image-expand-text-lock";
+const ELEMENT_EXPAND_TEXT_ANIMATION = "layout-image-expand-text-animation";
+const TextLock = `
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: Styles.layout.space.horizontal.larger
+  }
+})}
+
+  .${ELEMENT_EXPAND_TEXT_LOCK} {
+    display: flex;
+    height: 100%;
+  }
+`;
+const TextContainer = `
+  .${ELEMENT_EXPAND_TEXT_CONTAINER} {
+    position: relative;
+    padding-top: ${Styles.token.spacing.max};
+    padding-bottom: ${Styles.token.spacing.max};
+    height: 100%;
+    z-index: 9999;
+  }
+`;
+const TextAnimation = `
+  .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+    width: 100vw;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+        position: absolute;
+        top: 0;
+        height: 80vh;
+        transform: translateY(80vh);
+      }
+    }
+  }
+
+  @media (${Styles.token.media.queries.tablet.min}) {
+    @media (prefers-reduced-motion: no-preference) {
+      @supports (animation-timeline: view()) {
+        .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+          transform: translateY(100vh);
+        }
+      }
+    }
+  }
+`;
+const ImageOverlayContainer = `
+  @keyframes img-overlay {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,0.65);
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
+        opacity: 1;
+        animation: img-overlay forwards;
+        animation-timeline: view();
+        animation-range-start: 70vh;
+        animation-range-end: 100vh;
+      }
+    }
+  }
+`;
+const ImageSizeContainer = `
+  @keyframes img-size {
+    to { width: 100%; height: 100vh; }
+  }
+
+  .${ELEMENT_EXPAND_IMAGE_SIZE} {
+    overflow: hidden;
+    position: relative;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_SIZE} {
+        width: ${Styles.token.spacing.maxWidth.smallest};
+        height: 70vh;
+        animation: img-size ease-in-out forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: 200vh;
+      }
+    }
+  }
+
+  @supports not (animation-timeline: view()) {
+    .${ELEMENT_EXPAND_IMAGE_SIZE} {
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${ELEMENT_EXPAND_IMAGE_SIZE} {
+      height: 100%;
+    }
+  }
+`;
+const ImagePosition = `
+  .${ELEMENT_EXPAND_IMAGE_POSITION} {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_POSITION} {
+        display: flex;
+        justify-content: center;
+        position: sticky;
+        top: 0; 
+        animation: img-position ease-in-out forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: 200vh;
+      }
+    }
+  }
+
+  @supports not (animation-timeline: view()) {
+    .${ELEMENT_EXPAND_IMAGE_POSITION} {
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${ELEMENT_EXPAND_IMAGE_POSITION} {
+      height: 100%;
+    }
+  }
+`;
+const ImageContainer = `
+  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
+        position: relative;
+      }
+    }
+  }
+`;
+const Container = `
+  .${ELEMENT_EXPAND_CONTAINER} {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+`;
+const STYLES_LAYOUT_IMAGE_EXPAND = `
+  .${ELEMENT_EXPLAND_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+    overflow: clip;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPLAND_DECLARATION} {
+        height: 180vh;
+      }
+    }
+  }
+
+  @media (${Styles.token.media.queries.tablet.min}) {
+    @media (prefers-reduced-motion: no-preference) {
+      @supports (animation-timeline: view()) {
+        .${ELEMENT_EXPLAND_DECLARATION} {
+          height: 200vh;
+        }
+      }
+    }
+  }
+
+  .${ELEMENT_EXPLAND_DECLARATION} img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${Container}
+  ${ImageContainer}
+  ${ImageSizeContainer}
+  ${ImagePosition}
+  ${ImageOverlayContainer}
+  ${TextAnimation}
+  ${TextContainer}
+  ${TextLock}
+`;
+const CreateImageContainer = ({ image }) => {
+  const imageContainer = document.createElement("div");
+  const imagePosition = document.createElement("div");
+  const imageSize = document.createElement("div");
+  const imageOverlay = document.createElement("div");
+  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);
+  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);
+  imageSize.appendChild(image);
+  imageSize.appendChild(imageOverlay);
+  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);
+  imagePosition.appendChild(imageSize);
+  imageContainer.appendChild(imagePosition);
+  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);
+  return imageContainer;
+};
+const CreateTextContainer = ({ content }) => {
+  const textAnimation = document.createElement("div");
+  const textContainer = document.createElement("div");
+  const textLock = document.createElement("div");
+  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);
+  textLock.appendChild(content);
+  textContainer.appendChild(textLock);
+  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);
+  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);
+  textAnimation.appendChild(textContainer);
+  return textAnimation;
+};
+const expand = (props) => {
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const imageContainer = CreateImageContainer(props);
+  const textContainer = CreateTextContainer(props);
+  const sizeImageForText = () => {
+    const textContainerHeight = textContainer.clientHeight + index.convertPixelStringToNumber(spacing["2xl"]) * 2;
+    const imageContainerHeight = container.clientHeight;
+    if (textContainerHeight > imageContainerHeight) {
+      container.style.minHeight = `${textContainerHeight}px`;
+    }
+  };
+  if (index$1.isScreenZoomed() && !index$1.isPrefferdReducedMotion()) {
+    textContainer.style.height = "90vh";
+    textContainer.style.transform = "translateY(0)";
+  }
+  if (!CSS.supports("animation-timeline", "view()")) {
+    setTimeout(() => {
+      sizeImageForText();
+    }, 1e3);
+    window.addEventListener("resize", () => sizeImageForText());
+  }
+  container.appendChild(imageContainer);
+  container.appendChild(textContainer);
+  container.classList.add(ELEMENT_EXPAND_CONTAINER);
+  declaration.appendChild(container);
+  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);
+  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };
+};
+module.exports = expand;
+//# sourceMappingURL=expand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expand.js","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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\nexport default (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      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\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"],"names":["token","Utility.theme.convertJSSObjectToStyles","layout","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}

package/dist/composite/layout/image/expand.mjs

@@ -0,0 +1,281 @@
+import { token, layout } from "@universityofmaryland/web-styles-library";
+import { isScreenZoomed, isPrefferdReducedMotion } from "../../../utilities/accessibility/index.mjs";
+import { convertJSSObjectToStyles, convertPixelStringToNumber } from "../../../utilities/theme/index.mjs";
+const { spacing } = token;
+const ELEMENT_NAME = "umd-layout-image-expand";
+const ELEMENT_EXPLAND_DECLARATION = "layout-image-expand-declaration";
+const ELEMENT_EXPAND_CONTAINER = "layout-image-expand-container";
+const ELEMENT_EXPAND_IMAGE_CONTAINER = "layout-image-expand-image-container";
+const ELEMENT_EXPAND_IMAGE_POSITION = "layout-image-expand-image-position";
+const ELEMENT_EXPAND_IMAGE_SIZE = "layout-image-expand-image-size";
+const ELEMENT_EXPAND_IMAGE_OVERLAY = "layout-image-expand-image-overlay";
+const ELEMENT_EXPAND_TEXT_CONTAINER = "layout-image-expand-text-container";
+const ELEMENT_EXPAND_TEXT_LOCK = "layout-image-expand-text-lock";
+const ELEMENT_EXPAND_TEXT_ANIMATION = "layout-image-expand-text-animation";
+const TextLock = `
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger
+  }
+})}
+
+  .${ELEMENT_EXPAND_TEXT_LOCK} {
+    display: flex;
+    height: 100%;
+  }
+`;
+const TextContainer = `
+  .${ELEMENT_EXPAND_TEXT_CONTAINER} {
+    position: relative;
+    padding-top: ${token.spacing.max};
+    padding-bottom: ${token.spacing.max};
+    height: 100%;
+    z-index: 9999;
+  }
+`;
+const TextAnimation = `
+  .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+    width: 100vw;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+        position: absolute;
+        top: 0;
+        height: 80vh;
+        transform: translateY(80vh);
+      }
+    }
+  }
+
+  @media (${token.media.queries.tablet.min}) {
+    @media (prefers-reduced-motion: no-preference) {
+      @supports (animation-timeline: view()) {
+        .${ELEMENT_EXPAND_TEXT_ANIMATION} {
+          transform: translateY(100vh);
+        }
+      }
+    }
+  }
+`;
+const ImageOverlayContainer = `
+  @keyframes img-overlay {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(0,0,0,0.65);
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
+        opacity: 1;
+        animation: img-overlay forwards;
+        animation-timeline: view();
+        animation-range-start: 70vh;
+        animation-range-end: 100vh;
+      }
+    }
+  }
+`;
+const ImageSizeContainer = `
+  @keyframes img-size {
+    to { width: 100%; height: 100vh; }
+  }
+
+  .${ELEMENT_EXPAND_IMAGE_SIZE} {
+    overflow: hidden;
+    position: relative;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_SIZE} {
+        width: ${token.spacing.maxWidth.smallest};
+        height: 70vh;
+        animation: img-size ease-in-out forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: 200vh;
+      }
+    }
+  }
+
+  @supports not (animation-timeline: view()) {
+    .${ELEMENT_EXPAND_IMAGE_SIZE} {
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${ELEMENT_EXPAND_IMAGE_SIZE} {
+      height: 100%;
+    }
+  }
+`;
+const ImagePosition = `
+  .${ELEMENT_EXPAND_IMAGE_POSITION} {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_POSITION} {
+        display: flex;
+        justify-content: center;
+        position: sticky;
+        top: 0; 
+        animation: img-position ease-in-out forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: 200vh;
+      }
+    }
+  }
+
+  @supports not (animation-timeline: view()) {
+    .${ELEMENT_EXPAND_IMAGE_POSITION} {
+      height: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .${ELEMENT_EXPAND_IMAGE_POSITION} {
+      height: 100%;
+    }
+  }
+`;
+const ImageContainer = `
+  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
+        position: relative;
+      }
+    }
+  }
+`;
+const Container = `
+  .${ELEMENT_EXPAND_CONTAINER} {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+`;
+const STYLES_LAYOUT_IMAGE_EXPAND = `
+  .${ELEMENT_EXPLAND_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+    overflow: clip;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_EXPLAND_DECLARATION} {
+        height: 180vh;
+      }
+    }
+  }
+
+  @media (${token.media.queries.tablet.min}) {
+    @media (prefers-reduced-motion: no-preference) {
+      @supports (animation-timeline: view()) {
+        .${ELEMENT_EXPLAND_DECLARATION} {
+          height: 200vh;
+        }
+      }
+    }
+  }
+
+  .${ELEMENT_EXPLAND_DECLARATION} img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${Container}
+  ${ImageContainer}
+  ${ImageSizeContainer}
+  ${ImagePosition}
+  ${ImageOverlayContainer}
+  ${TextAnimation}
+  ${TextContainer}
+  ${TextLock}
+`;
+const CreateImageContainer = ({ image }) => {
+  const imageContainer = document.createElement("div");
+  const imagePosition = document.createElement("div");
+  const imageSize = document.createElement("div");
+  const imageOverlay = document.createElement("div");
+  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);
+  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);
+  imageSize.appendChild(image);
+  imageSize.appendChild(imageOverlay);
+  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);
+  imagePosition.appendChild(imageSize);
+  imageContainer.appendChild(imagePosition);
+  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);
+  return imageContainer;
+};
+const CreateTextContainer = ({ content }) => {
+  const textAnimation = document.createElement("div");
+  const textContainer = document.createElement("div");
+  const textLock = document.createElement("div");
+  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);
+  textLock.appendChild(content);
+  textContainer.appendChild(textLock);
+  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);
+  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);
+  textAnimation.appendChild(textContainer);
+  return textAnimation;
+};
+const expand = (props) => {
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const imageContainer = CreateImageContainer(props);
+  const textContainer = CreateTextContainer(props);
+  const sizeImageForText = () => {
+    const textContainerHeight = textContainer.clientHeight + convertPixelStringToNumber(spacing["2xl"]) * 2;
+    const imageContainerHeight = container.clientHeight;
+    if (textContainerHeight > imageContainerHeight) {
+      container.style.minHeight = `${textContainerHeight}px`;
+    }
+  };
+  if (isScreenZoomed() && !isPrefferdReducedMotion()) {
+    textContainer.style.height = "90vh";
+    textContainer.style.transform = "translateY(0)";
+  }
+  if (!CSS.supports("animation-timeline", "view()")) {
+    setTimeout(() => {
+      sizeImageForText();
+    }, 1e3);
+    window.addEventListener("resize", () => sizeImageForText());
+  }
+  container.appendChild(imageContainer);
+  container.appendChild(textContainer);
+  container.classList.add(ELEMENT_EXPAND_CONTAINER);
+  declaration.appendChild(container);
+  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);
+  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };
+};
+export {
+  expand as default
+};
+//# sourceMappingURL=expand.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expand.mjs","sources":["../../../../source/composite/layout/image/expand.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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: view()) {\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\nexport default (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      Utility.theme.convertPixelStringToNumber(spacing['2xl']) * 2;\n    const imageContainerHeight = container.clientHeight;\n\n    if (textContainerHeight > imageContainerHeight) {\n      container.style.minHeight = `${textContainerHeight}px`;\n    }\n  };\n\n  if (\n    Utility.accessibility.isScreenZoomed() &&\n    !Utility.accessibility.isPrefferdReducedMotion()\n  ) {\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"],"names":["Utility.theme.convertJSSObjectToStyles","Utility.theme.convertPixelStringToNumber","Utility.accessibility.isScreenZoomed","Utility.accessibility.isPrefferdReducedMotion"],"mappings":"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"}

package/dist/composite/layout/image/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const expand = require("./expand.js");
+exports.expand = expand;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/composite/layout/image/index.mjs

@@ -0,0 +1,5 @@
+import { default as default2 } from "./expand.mjs";
+export {
+  default2 as expand
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/layout/image/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/composite/layout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./box/index.js");
+const index$1 = require("./image/index.js");
+const index$2 = require("./section-intro/index.js");
+const index$3 = require("./sticky-columns/index.js");
+const index$4 = require("./scroll-top/index.js");
+exports.box = index;
+exports.image = index$1;
+exports.sectionIntro = index$2;
+exports.stickyColumns = index$3;
+exports.scrollTop = index$4;
+//# sourceMappingURL=index.js.map

package/dist/composite/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/composite/layout/index.mjs

@@ -0,0 +1,13 @@
+import * as index from "./box/index.mjs";
+import * as index$1 from "./image/index.mjs";
+import * as index$2 from "./section-intro/index.mjs";
+import { default as default2 } from "./sticky-columns/index.mjs";
+import { default as default3 } from "./scroll-top/index.mjs";
+export {
+  index as box,
+  index$1 as image,
+  default3 as scrollTop,
+  index$2 as sectionIntro,
+  default2 as stickyColumns
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/layout/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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":"AAGA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;gCAsCqB,kBAAkB;;;;;;;AAAzC,wBAsGO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/scroll-top/index.ts"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;yBAsCc,OAAO,kBAAkB;;;;;;;AAAzC,wBAsGO"}