@universityofmaryland/web-elements-library 1.6.0 → 1.6.1-beta.1

package/dist/atomic/assets/image/gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\nconst applyGifToggle = (image: HTMLImageElement, container: HTMLElement) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n  };\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n  };\n  const sizeCanvas = ({ container }: { container: HTMLElement | null }) => {\n    if (!container) return;\n    const image = container.querySelector('img');\n    const canvas = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!container || !canvas || !image) return;\n\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    // Get container dimensions\n    const containerWidth = container.clientWidth;\n    const containerHeight = container.clientHeight;\n\n    // Set canvas display dimensions to match container\n    canvas.style.width = '100%';\n    canvas.style.height = `${image.clientHeight}px`;\n    canvas.style.position = 'absolute';\n    canvas.style.top = '0';\n    canvas.style.left = '0';\n\n    // Set canvas actual dimensions\n    canvas.width = containerWidth;\n    canvas.height = containerHeight;\n\n    // Calculate dimensions to maintain aspect ratio while covering\n    const imgRatio = image.naturalWidth / image.naturalHeight;\n    const containerRatio = containerWidth / containerHeight;\n\n    let drawWidth,\n      drawHeight,\n      offsetX = 0,\n      offsetY = 0;\n\n    if (imgRatio > containerRatio) {\n      // Image is wider than container relative to height\n      drawHeight = containerHeight;\n      drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n      offsetX = (containerWidth - drawWidth) / 2;\n    } else {\n      // Image is taller than container relative to width\n      drawWidth = containerWidth;\n      drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n      offsetY = (containerHeight - drawHeight) / 2;\n    }\n\n    // Clear the canvas and draw the image with cover behavior\n    ctx.clearRect(0, 0, containerWidth, containerHeight);\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n  };\n  let isPlaying = true;\n\n  button.setAttribute('type', 'button');\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (isPlaying) {\n      setButtonPause();\n      isPlaying = false;\n    } else {\n      setButtonPlay();\n      isPlaying = true;\n    }\n  });\n\n  image.addEventListener('load', () => {\n    container.appendChild(canvas);\n    container.appendChild(button);\n    setButtonPlay();\n\n    setTimeout(() => {\n      sizeCanvas({ container });\n    }, 100);\n  });\n\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas({ container });\n    }, 50),\n  );\n};\n\nexport const createImageGif = ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay","container","image","canvas"],"mappings":";;;;AAQA,MAAM,sBAAsB,CAC1B,YAC4B;AAC5B,MAAI,mBAAmB,kBAAkB;AACvC,WAAO;AAAA,EACT;AAEA,MAAI,mBAAmB,mBAAmB;AACxC,WAAO,QAAQ,cAAc,KAAK;AAAA,EACpC;AAEA,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,OAAyB,cAA2B;AAC1E,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,QAAM,gBAAgB,MAAM;AAC1B,WAAO,aAAa,cAAc,OAAO;AACzC,WAAO,YAAYA;AACnB,WAAO,MAAM,UAAU;AACvB,UAAM,MAAM,UAAU;AAAA,EACxB;AACA,QAAM,iBAAiB,MAAM;AAC3B,WAAO,aAAa,cAAc,MAAM;AACxC,WAAO,YAAYC;AACnB,WAAO,MAAM,UAAU;AACvB,UAAM,MAAM,UAAU;AAAA,EACxB;AACA,QAAM,aAAa,CAAC,EAAE,WAAAC,iBAAmD;AACvE,QAAI,CAACA,WAAW;AAChB,UAAMC,SAAQD,WAAU,cAAc,KAAK;AAC3C,UAAME,UAASF,WAAU,cAAc,QAAQ;AAE/C,QAAI,CAACA,cAAa,CAACE,WAAU,CAACD,OAAO;AAErC,UAAM,MAAMC,QAAO,WAAW,IAAI;AAGlC,UAAM,iBAAiBF,WAAU;AACjC,UAAM,kBAAkBA,WAAU;AAGlCE,YAAO,MAAM,QAAQ;AACrBA,YAAO,MAAM,SAAS,GAAGD,OAAM,YAAY;AAC3CC,YAAO,MAAM,WAAW;AACxBA,YAAO,MAAM,MAAM;AACnBA,YAAO,MAAM,OAAO;AAGpBA,YAAO,QAAQ;AACfA,YAAO,SAAS;AAGhB,UAAM,WAAWD,OAAM,eAAeA,OAAM;AAC5C,UAAM,iBAAiB,iBAAiB;AAExC,QAAI,WACF,YACA,UAAU,GACV,UAAU;AAEZ,QAAI,WAAW,gBAAgB;AAE7B,mBAAa;AACb,kBAAYA,OAAM,gBAAgB,kBAAkBA,OAAM;AAC1D,iBAAW,iBAAiB,aAAa;AAAA,IAC3C,OAAO;AAEL,kBAAY;AACZ,mBAAaA,OAAM,iBAAiB,iBAAiBA,OAAM;AAC3D,iBAAW,kBAAkB,cAAc;AAAA,IAC7C;AAGA,QAAI,UAAU,GAAG,GAAG,gBAAgB,eAAe;AACnD,QAAI,wBAAwB;AAC5B,QAAI,UAAUA,QAAO,SAAS,SAAS,WAAW,UAAU;AAAA,EAC9D;AACA,MAAI,YAAY;AAEhB,SAAO,aAAa,QAAQ,QAAQ;AACpC,SAAO,iBAAiB,SAAS,CAAC,UAAU;AAC1C,UAAM,eAAA;AACN,UAAM,gBAAA;AAEN,QAAI,WAAW;AACb,qBAAA;AACA,kBAAY;AAAA,IACd,OAAO;AACL,oBAAA;AACA,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,QAAQ,MAAM;AACnC,cAAU,YAAY,MAAM;AAC5B,cAAU,YAAY,MAAM;AAC5B,kBAAA;AAEA,eAAW,MAAM;AACf,iBAAW,EAAE,WAAW;AAAA,IAC1B,GAAG,GAAG;AAAA,EACR,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,iBAAW,EAAE,WAAW;AAAA,IAC1B,GAAG,EAAE;AAAA,EAAA;AAET;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AACF,MAEM;AACJ,QAAM,QAAQ,oBAAoB,OAAO;AAEzC,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,QAAM,WAAW,mBAAmB;AACpC,QAAM,YAAY,WAAW,UAAU,SAAS,cAAc,KAAK;AAEnE,QAAM,YAAY,IAAI,eAAe,SAAS,EAC3C,OAAO,OAAO,QAAQ,MAAM,IAAI,MAAM,EACtC,aAAa,CAAC,OAAO;AACpB,QAAI,CAAC,UAAU;AACb,SAAG,YAAY,OAAO;AAAA,IACxB;AACA,mBAAe,OAAO,EAAE;AAAA,EAC1B,CAAC,EACA,MAAA;AAEH,SAAO;AACT;"}
+{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\n/**\n * GIF loading state interface\n */\ninterface GifState {\n  isLoaded: boolean;\n  isPlaying: boolean;\n  originalSrc: string;\n}\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\n/**\n * Renders the first frame of the GIF to the canvas\n */\nconst renderFirstFrame = (\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  container: HTMLElement,\n) => {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const containerWidth = container.clientWidth;\n  const containerHeight = container.clientHeight;\n\n  canvas.width = containerWidth;\n  canvas.height = containerHeight;\n\n  // Calculate dimensions to maintain aspect ratio while covering\n  const imgRatio = image.naturalWidth / image.naturalHeight;\n  const containerRatio = containerWidth / containerHeight;\n\n  let drawWidth: number;\n  let drawHeight: number;\n  let offsetX = 0;\n  let offsetY = 0;\n\n  if (imgRatio > containerRatio) {\n    drawHeight = containerHeight;\n    drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n    offsetX = (containerWidth - drawWidth) / 2;\n  } else {\n    drawWidth = containerWidth;\n    drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n    offsetY = (containerHeight - drawHeight) / 2;\n  }\n\n  ctx.clearRect(0, 0, containerWidth, containerHeight);\n  ctx.imageSmoothingEnabled = true;\n  ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n};\n\n/**\n * Sets up the IntersectionObserver for lazy loading the GIF\n */\nconst setupLazyLoading = (\n  container: HTMLElement,\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  button: HTMLButtonElement,\n  state: GifState,\n  onLoad: () => void,\n) => {\n  // Handle non-browser environments\n  if (typeof IntersectionObserver === 'undefined') {\n    // Load immediately if IntersectionObserver is not available\n    state.isLoaded = true;\n    button.style.display = 'flex';\n    onLoad();\n    return null;\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting && !state.isLoaded) {\n          state.isLoaded = true;\n\n          // Restore the original src to load the animated GIF\n          image.src = state.originalSrc;\n\n          // Show the button once loaded\n          image.addEventListener(\n            'load',\n            () => {\n              button.style.display = 'flex';\n              onLoad();\n            },\n            { once: true },\n          );\n\n          observer.disconnect();\n        }\n      });\n    },\n    {\n      threshold: 0.1,\n      rootMargin: '50px', // Start loading slightly before visible\n    },\n  );\n\n  observer.observe(container);\n\n  return observer;\n};\n\nconst applyGifToggle = (\n  image: HTMLImageElement,\n  container: HTMLElement,\n  state: GifState,\n) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n    state.isPlaying = true;\n  };\n\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n    state.isPlaying = false;\n  };\n\n  const sizeCanvas = () => {\n    if (!container) return;\n    const img = container.querySelector('img');\n    const canvasEl = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!canvasEl || !img) return;\n\n    // Set canvas display dimensions to match container\n    canvasEl.style.width = '100%';\n    canvasEl.style.height = `${img.clientHeight}px`;\n    canvasEl.style.position = 'absolute';\n    canvasEl.style.top = '0';\n    canvasEl.style.left = '0';\n\n    if (state.isLoaded && img.complete && img.naturalWidth > 0) {\n      renderFirstFrame(img, canvasEl, container);\n    }\n  };\n\n  // Initialize button but hide until GIF is loaded\n  button.setAttribute('type', 'button');\n  button.style.display = 'none';\n\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (state.isPlaying) {\n      setButtonPause();\n    } else {\n      setButtonPlay();\n    }\n  });\n\n  // Add canvas immediately for placeholder\n  container.appendChild(canvas);\n  container.appendChild(button);\n\n  // Initially hide the animated image (show canvas placeholder)\n  image.style.opacity = '0';\n  image.style.transition = 'opacity 0.2s ease-in-out';\n  canvas.style.opacity = '1';\n  canvas.style.transition = 'opacity 0.2s ease-in-out';\n\n  // Handle initial image load for first frame capture\n  const captureFirstFrame = () => {\n    sizeCanvas();\n    renderFirstFrame(image, canvas, container);\n  };\n\n  // If image is already loaded (from cache), capture first frame immediately\n  if (image.complete && image.naturalWidth > 0) {\n    captureFirstFrame();\n  } else {\n    image.addEventListener('load', captureFirstFrame, { once: true });\n  }\n\n  // Set up lazy loading observer\n  setupLazyLoading(container, image, canvas, button, state, () => {\n    // Once loaded, render the first frame properly and set to play\n    sizeCanvas();\n    setButtonPlay();\n  });\n\n  // Handle resize\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas();\n    }, 50),\n  );\n};\n\nexport const createImageGif = ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  // Store original src and create state\n  const state: GifState = {\n    isLoaded: false,\n    isPlaying: false,\n    originalSrc: image.src,\n  };\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el, state);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay"],"mappings":"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"}

package/dist/atomic/assets/image/index.d.ts

@@ -1,4 +1,5 @@
 export { createImageBackground as background } from './background';
 export { createImageGif as gif } from './gif';
+export { createLazyImage as lazy, type LazyImageOptions, type LazyImageResult } from './lazy';
 export { imagePlaceholder as placeholder } from './placeholder';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/assets/image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9F,OAAO,EAAE,gBAAgB,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/atomic/assets/image/index.js

@@ -1,9 +1,11 @@
 import { createImageBackground } from "./background.js";
 import { createImageGif } from "./gif.js";
+import { createLazyImage } from "./lazy.js";
 import { imagePlaceholder } from "./placeholder.js";
 export {
   createImageBackground as background,
   createImageGif as gif,
+  createLazyImage as lazy,
   imagePlaceholder as placeholder
 };
 //# sourceMappingURL=index.js.map

package/dist/atomic/assets/image/index.js.map

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

package/dist/atomic/assets/image/lazy.d.ts

@@ -0,0 +1,19 @@
+export interface LazyImageOptions {
+    image: HTMLImageElement;
+    placeholder?: HTMLElement;
+    rootMargin?: string;
+    threshold?: number;
+    onLoadStart?: () => void;
+    onLoad?: () => void;
+    onError?: (error: Event) => void;
+    wrapperStyles?: Record<string, any>;
+}
+export interface LazyImageResult {
+    element: HTMLElement;
+    styles: string;
+    load: () => void;
+    isLoaded: () => boolean;
+    destroy: () => void;
+}
+export declare const createLazyImage: (options: LazyImageOptions) => LazyImageResult;
+//# sourceMappingURL=lazy.d.ts.map

package/dist/atomic/assets/image/lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/lazy.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAE/B,KAAK,EAAE,gBAAgB,CAAC;IAExB,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC;AAKD,MAAM,WAAW,eAAe;IAE9B,OAAO,EAAE,WAAW,CAAC;IAErB,MAAM,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAmDD,eAAO,MAAM,eAAe,GAAI,SAAS,gBAAgB,KAAG,eAgJ3D,CAAC"}

package/dist/atomic/assets/image/lazy.js

@@ -0,0 +1,117 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+const wrapperBaseStyles = {
+  className: "umd-asset-image-lazy",
+  position: "relative",
+  display: "inline-block",
+  overflow: "hidden"
+};
+const placeholderBaseStyles = {
+  className: "umd-asset-image-lazy-placeholder",
+  position: "absolute",
+  top: "0",
+  left: "0",
+  width: "100%",
+  height: "100%",
+  backgroundColor: "#f0f0f0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "opacity 0.3s ease-in-out"
+};
+const createLazyImage = (options) => {
+  const {
+    image,
+    placeholder,
+    rootMargin = "50px",
+    threshold = 0.1,
+    onLoadStart,
+    onLoad,
+    onError,
+    wrapperStyles = {}
+  } = options;
+  let isLoaded = false;
+  let observer = null;
+  const originalSrc = image.src;
+  const originalSrcset = image.srcset;
+  image.removeAttribute("src");
+  image.removeAttribute("srcset");
+  image.setAttribute("data-lazy-src", originalSrc);
+  if (originalSrcset) {
+    image.setAttribute("data-lazy-srcset", originalSrcset);
+  }
+  image.style.opacity = "0";
+  image.style.transition = "opacity 0.3s ease-in-out";
+  const placeholderElement = placeholder || new ElementBuilder("div").withClassName(placeholderBaseStyles.className).withStyles({ element: placeholderBaseStyles }).build().element;
+  const loadImage = () => {
+    if (isLoaded) return;
+    onLoadStart?.();
+    const handleLoad = () => {
+      isLoaded = true;
+      image.style.opacity = "1";
+      if (placeholderElement.parentNode) {
+        placeholderElement.style.opacity = "0";
+        setTimeout(() => {
+          placeholderElement.remove();
+        }, 300);
+      }
+      onLoad?.();
+    };
+    const handleError = (event) => {
+      onError?.(event);
+    };
+    image.addEventListener("load", handleLoad, { once: true });
+    image.addEventListener("error", handleError, { once: true });
+    const lazySrc = image.getAttribute("data-lazy-src");
+    const lazySrcset = image.getAttribute("data-lazy-srcset");
+    if (lazySrc) {
+      image.src = lazySrc;
+    }
+    if (lazySrcset) {
+      image.srcset = lazySrcset;
+    }
+  };
+  const setupObserver = (container) => {
+    if (typeof IntersectionObserver === "undefined") {
+      loadImage();
+      return;
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !isLoaded) {
+            loadImage();
+            observer?.disconnect();
+          }
+        });
+      },
+      {
+        rootMargin,
+        threshold
+      }
+    );
+    observer.observe(container);
+  };
+  const destroy = () => {
+    observer?.disconnect();
+    observer = null;
+  };
+  const composite = new ElementBuilder("div").withClassName(wrapperBaseStyles.className).withStyles({
+    element: {
+      ...wrapperBaseStyles,
+      ...wrapperStyles
+    }
+  }).withChild(placeholderElement).withChild(image).withModifier((el) => {
+    setupObserver(el);
+  }).build();
+  return {
+    element: composite.element,
+    styles: composite.styles,
+    load: loadImage,
+    isLoaded: () => isLoaded,
+    destroy
+  };
+};
+export {
+  createLazyImage
+};
+//# sourceMappingURL=lazy.js.map

package/dist/atomic/assets/image/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","sources":["../../../../source/atomic/assets/image/lazy.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\n/**\n * Options for lazy loading image wrapper\n */\nexport interface LazyImageOptions {\n  /** The image element to lazy load */\n  image: HTMLImageElement;\n  /** Optional placeholder element to show while loading */\n  placeholder?: HTMLElement;\n  /** IntersectionObserver root margin. Defaults to '50px' */\n  rootMargin?: string;\n  /** IntersectionObserver threshold. Defaults to 0.1 */\n  threshold?: number;\n  /** Callback when image starts loading */\n  onLoadStart?: () => void;\n  /** Callback when image finishes loading */\n  onLoad?: () => void;\n  /** Callback when image fails to load */\n  onError?: (error: Event) => void;\n  /** Optional custom styles for the wrapper */\n  wrapperStyles?: Record<string, any>;\n}\n\n/**\n * Return type for lazy image element\n */\nexport interface LazyImageResult {\n  /** The wrapper element */\n  element: HTMLElement;\n  /** Associated CSS styles */\n  styles: string;\n  /** Manually trigger loading (useful for programmatic control) */\n  load: () => void;\n  /** Check if image has been loaded */\n  isLoaded: () => boolean;\n  /** Disconnect the observer and cleanup */\n  destroy: () => void;\n}\n\n/**\n * Wrapper container styles\n */\nconst wrapperBaseStyles = {\n  className: 'umd-asset-image-lazy',\n  position: 'relative' as const,\n  display: 'inline-block',\n  overflow: 'hidden',\n};\n\n/**\n * Default placeholder styles for lazy loading\n */\nconst placeholderBaseStyles = {\n  className: 'umd-asset-image-lazy-placeholder',\n  position: 'absolute' as const,\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  backgroundColor: '#f0f0f0',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'opacity 0.3s ease-in-out',\n};\n\n/**\n * Creates a lazy loading wrapper for images using IntersectionObserver.\n * Defers image loading until the element enters the viewport.\n *\n * @param options - Configuration options for lazy loading\n * @returns LazyImageResult with element, styles, and control methods\n *\n * @example\n * ```typescript\n * import { createLazyImage } from '@universityofmaryland/web-elements-library/atomic';\n *\n * const img = document.createElement('img');\n * img.src = 'large-image.jpg';\n *\n * const lazyImage = createLazyImage({\n *   image: img,\n *   onLoad: () => console.log('Image loaded'),\n * });\n *\n * document.body.appendChild(lazyImage.element);\n * ```\n */\nexport const createLazyImage = (options: LazyImageOptions): LazyImageResult => {\n  const {\n    image,\n    placeholder,\n    rootMargin = '50px',\n    threshold = 0.1,\n    onLoadStart,\n    onLoad,\n    onError,\n    wrapperStyles = {},\n  } = options;\n\n  // State tracking\n  let isLoaded = false;\n  let observer: IntersectionObserver | null = null;\n\n  // Store original src and prevent immediate loading\n  const originalSrc = image.src;\n  const originalSrcset = image.srcset;\n\n  // Clear src to prevent loading\n  image.removeAttribute('src');\n  image.removeAttribute('srcset');\n\n  // Add data attributes for restoration\n  image.setAttribute('data-lazy-src', originalSrc);\n  if (originalSrcset) {\n    image.setAttribute('data-lazy-srcset', originalSrcset);\n  }\n\n  // Initially hide the image\n  image.style.opacity = '0';\n  image.style.transition = 'opacity 0.3s ease-in-out';\n\n  // Create placeholder if not provided\n  const placeholderElement =\n    placeholder ||\n    new ElementBuilder('div')\n      .withClassName(placeholderBaseStyles.className)\n      .withStyles({ element: placeholderBaseStyles })\n      .build().element;\n\n  /**\n   * Loads the image by restoring src/srcset\n   */\n  const loadImage = () => {\n    if (isLoaded) return;\n\n    onLoadStart?.();\n\n    const handleLoad = () => {\n      isLoaded = true;\n      image.style.opacity = '1';\n\n      // Hide placeholder\n      if (placeholderElement.parentNode) {\n        (placeholderElement as HTMLElement).style.opacity = '0';\n        setTimeout(() => {\n          placeholderElement.remove();\n        }, 300);\n      }\n\n      onLoad?.();\n    };\n\n    const handleError = (event: Event) => {\n      onError?.(event);\n    };\n\n    image.addEventListener('load', handleLoad, { once: true });\n    image.addEventListener('error', handleError, { once: true });\n\n    // Restore src to trigger load\n    const lazySrc = image.getAttribute('data-lazy-src');\n    const lazySrcset = image.getAttribute('data-lazy-srcset');\n\n    if (lazySrc) {\n      image.src = lazySrc;\n    }\n    if (lazySrcset) {\n      image.srcset = lazySrcset;\n    }\n  };\n\n  /**\n   * Sets up the IntersectionObserver\n   */\n  const setupObserver = (container: HTMLElement) => {\n    // Handle non-browser environments\n    if (typeof IntersectionObserver === 'undefined') {\n      // Load immediately if IntersectionObserver is not available\n      loadImage();\n      return;\n    }\n\n    observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting && !isLoaded) {\n            loadImage();\n            observer?.disconnect();\n          }\n        });\n      },\n      {\n        rootMargin,\n        threshold,\n      },\n    );\n\n    observer.observe(container);\n  };\n\n  /**\n   * Cleanup function\n   */\n  const destroy = () => {\n    observer?.disconnect();\n    observer = null;\n  };\n\n  // Build the wrapper\n  const composite = new ElementBuilder('div')\n    .withClassName(wrapperBaseStyles.className)\n    .withStyles({\n      element: {\n        ...wrapperBaseStyles,\n        ...wrapperStyles,\n      },\n    })\n    .withChild(placeholderElement)\n    .withChild(image)\n    .withModifier((el) => {\n      setupObserver(el);\n    })\n    .build();\n\n  return {\n    element: composite.element as HTMLElement,\n    styles: composite.styles,\n    load: loadImage,\n    isLoaded: () => isLoaded,\n    destroy,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/atomic/assets/video/observed-auto-play.d.ts

@@ -3,7 +3,9 @@ interface CardVideoShortProps {
     isAutoplay?: boolean;
     isScaled?: boolean;
     additionalElementStyles?: Record<string, any>;
+    videoPreload?: 'none' | 'metadata' | 'auto';
+    videoFetchPriority?: 'high' | 'low' | 'auto';
 }
-export declare const createVideoObservedAutoPlay: ({ video, isAutoplay, isScaled, additionalElementStyles, }: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createVideoObservedAutoPlay: ({ video, isAutoplay, isScaled, additionalElementStyles, videoPreload, videoFetchPriority, }: CardVideoShortProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=observed-auto-play.d.ts.map

package/dist/atomic/assets/video/observed-auto-play.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B,GAAI,2DAKzC,mBAAmB,kFAsDhB,CAAC"}
+{"version":3,"file":"observed-auto-play.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE9C,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAE5C,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9C;AAED,eAAO,MAAM,2BAA2B,GAAI,6FAOzC,mBAAmB,kFAyDhB,CAAC"}

package/dist/atomic/assets/video/observed-auto-play.js

@@ -4,7 +4,9 @@ const createVideoObservedAutoPlay = ({
   video,
   isAutoplay = false,
   isScaled = false,
-  additionalElementStyles
+  additionalElementStyles,
+  videoPreload = "metadata",
+  videoFetchPriority = "auto"
 }) => (() => {
   const observer = new IntersectionObserver(
     (entries) => {
@@ -39,7 +41,10 @@ const createVideoObservedAutoPlay = ({
     }
   };
   video.removeAttribute("controls");
-  video.setAttribute("preload", "true");
+  video.setAttribute("preload", videoPreload);
+  if (videoFetchPriority !== "auto") {
+    video.setAttribute("fetchpriority", videoFetchPriority);
+  }
   video.setAttribute("playsinline", "");
   video.setAttribute("muted", "");
   video.setAttribute("loop", "");

package/dist/atomic/assets/video/observed-auto-play.js.map

@@ -1 +1 @@
-{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { createVideoToggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n}\n\nexport const createVideoObservedAutoPlay = ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite?.events?.setPlay();\n            } else {\n              video.addEventListener(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\n              );\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite?.events?.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', 'true');\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = createVideoToggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":[],"mappings":";;AAUO,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,MAAM;AACpC,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,kBAAkB;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAAC,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}
+{"version":3,"file":"observed-auto-play.js","sources":["../../../../source/atomic/assets/video/observed-auto-play.ts"],"sourcesContent":["import { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport { createVideoToggle } from './toggle';\n\ninterface CardVideoShortProps {\n  video: HTMLVideoElement;\n  isAutoplay?: boolean;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  /** Control video preload strategy. Defaults to 'metadata' */\n  videoPreload?: 'none' | 'metadata' | 'auto';\n  /** Control fetch priority for the video. Defaults to 'auto' */\n  videoFetchPriority?: 'high' | 'low' | 'auto';\n}\n\nexport const createVideoObservedAutoPlay = ({\n  video,\n  isAutoplay = false,\n  isScaled = false,\n  additionalElementStyles,\n  videoPreload = 'metadata',\n  videoFetchPriority = 'auto',\n}: CardVideoShortProps) =>\n  (() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            if (video.readyState >= 2) {\n              composite?.events?.setPlay();\n            } else {\n              video.addEventListener(\n                'loadeddata',\n                () => composite?.events?.setPlay(),\n                {\n                  once: true,\n                },\n              );\n\n              if (video.readyState === 0) {\n                video.load();\n              }\n            }\n          } else {\n            composite?.events?.setPause();\n          }\n        });\n      },\n      {\n        threshold: 0.25,\n      },\n    );\n    const callback = (isPlaying: boolean) => {\n      if (isPlaying && observer) {\n        observer.disconnect();\n      }\n    };\n\n    video.removeAttribute('controls');\n    video.setAttribute('preload', videoPreload);\n    if (videoFetchPriority !== 'auto') {\n      video.setAttribute('fetchpriority', videoFetchPriority);\n    }\n    video.setAttribute('playsinline', '');\n    video.setAttribute('muted', '');\n    video.setAttribute('loop', '');\n\n    const composite = createVideoToggle({\n      video,\n      additionalElementStyles,\n      isScaled,\n      callback,\n    });\n\n    if (!isPreferredReducedMotion() && isAutoplay) {\n      observer.observe(composite.element);\n    }\n\n    return composite;\n  })();\n"],"names":[],"mappings":";;AAcO,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf,qBAAqB;AACvB,OACG,MAAM;AACL,QAAM,WAAW,IAAI;AAAA,IACnB,CAAC,YAAY;AACX,cAAQ,QAAQ,CAAC,UAAU;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,MAAM,cAAc,GAAG;AACzB,uBAAW,QAAQ,QAAA;AAAA,UACrB,OAAO;AACL,kBAAM;AAAA,cACJ;AAAA,cACA,MAAM,WAAW,QAAQ,QAAA;AAAA,cACzB;AAAA,gBACE,MAAM;AAAA,cAAA;AAAA,YACR;AAGF,gBAAI,MAAM,eAAe,GAAG;AAC1B,oBAAM,KAAA;AAAA,YACR;AAAA,UACF;AAAA,QACF,OAAO;AACL,qBAAW,QAAQ,SAAA;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE,WAAW;AAAA,IAAA;AAAA,EACb;AAEF,QAAM,WAAW,CAAC,cAAuB;AACvC,QAAI,aAAa,UAAU;AACzB,eAAS,WAAA;AAAA,IACX;AAAA,EACF;AAEA,QAAM,gBAAgB,UAAU;AAChC,QAAM,aAAa,WAAW,YAAY;AAC1C,MAAI,uBAAuB,QAAQ;AACjC,UAAM,aAAa,iBAAiB,kBAAkB;AAAA,EACxD;AACA,QAAM,aAAa,eAAe,EAAE;AACpC,QAAM,aAAa,SAAS,EAAE;AAC9B,QAAM,aAAa,QAAQ,EAAE;AAE7B,QAAM,YAAY,kBAAkB;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,MAAI,CAAC,yBAAA,KAA8B,YAAY;AAC7C,aAAS,QAAQ,UAAU,OAAO;AAAA,EACpC;AAEA,SAAO;AACT,GAAA;"}

package/dist/atomic/layout/person/columns.d.ts

@@ -6,5 +6,5 @@ export declare const image: ({ customStyles, image, isThemeDark, }: {
 }) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const details: (props: PersonTextLockupPropsWithStyles) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const contact: (props: PersonContactPropsWithStyles) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export declare const information: ({ actions, additionalContact, address, association, customStyles, email, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonFullProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const information: ({ actions, additionalContact, address, slotTwo, customStyles, email, isThemeDark, slotOne, linkedin, name, phone, slotThreeItalic, slotFour, }: PersonFullProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=columns.d.ts.map

package/dist/atomic/layout/person/columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kFA4CA,CAAC;AAuBF,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B,kFAc7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B,kFAuB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,wIAczB,eAAe,kFA6BjB,CAAC"}
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kFA6CA,CAAC;AAuBF,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B,kFAc7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B,kFAuB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,gJAczB,eAAe,kFA6BjB,CAAC"}

package/dist/atomic/layout/person/columns.js

@@ -37,7 +37,8 @@ const image = ({
 }) => {
   const backgroundImage = createImageBackground({
     element: image2,
-    isScaled: false
+    isScaled: false,
+    imageLoading: "lazy"
   });
   return new ElementBuilder().withClassName("person-column-image").withStyles({
     element: {
@@ -72,21 +73,21 @@ const image = ({
 };
 const personLockup = ({
   actions,
-  association,
+  slotTwo,
   isThemeDark,
-  job,
+  slotOne,
   name,
   nameComposite,
-  pronouns,
-  subText
+  slotThreeItalic,
+  slotFour
 }) => createTextLockupPerson({
   actions,
   name,
   nameComposite,
-  job,
-  association,
-  pronouns,
-  subText,
+  slotOne,
+  slotTwo,
+  slotThreeItalic,
+  slotFour,
   isThemeDark
 });
 const details = (props) => {
@@ -135,24 +136,24 @@ const information = ({
   actions,
   additionalContact,
   address,
-  association,
+  slotTwo,
   customStyles = {},
   email,
   isThemeDark,
-  job,
+  slotOne,
   linkedin,
   name,
   phone,
-  pronouns,
-  subText
+  slotThreeItalic,
+  slotFour
 }) => {
   const person = personLockup({
-    association,
+    slotTwo,
     isThemeDark,
-    job,
+    slotOne,
     name,
-    pronouns,
-    subText
+    slotThreeItalic,
+    slotFour
   });
   const contact2 = contactLockup({
     actions,

package/dist/atomic/layout/person/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement | HTMLAnchorElement;\n  isThemeDark?: boolean;\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: false,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-image')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          minWidth: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n            minWidth: '140px',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = personLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-details')\n    .withStyles({\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = contactLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  const person = personLockup({\n    association,\n    isThemeDark,\n    job,\n    name,\n    pronouns,\n    subText,\n  });\n\n  const contact = contactLockup({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-information')\n    .withStyles({\n      element: {\n        ...customStyles,\n      },\n    })\n    .withChildren(person, contact)\n    .build();\n};\n"],"names":["image","assets.image.background","textLockup.person","textLockup.contact","contact"],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement | HTMLAnchorElement;\n  isThemeDark?: boolean;\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: false,\n    imageLoading: 'lazy',\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-image')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          minWidth: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n            minWidth: '140px',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nconst personLockup = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    slotOne,\n    slotTwo,\n    slotThreeItalic,\n    slotFour,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = personLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-details')\n    .withStyles({\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = contactLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  slotTwo,\n  customStyles = {},\n  email,\n  isThemeDark,\n  slotOne,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonFullProps) => {\n  const person = personLockup({\n    slotTwo,\n    isThemeDark,\n    slotOne,\n    name,\n    slotThreeItalic,\n    slotFour,\n  });\n\n  const contact = contactLockup({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-information')\n    .withStyles({\n      element: {\n        ...customStyles,\n      },\n    })\n    .withChildren(person, contact)\n    .build();\n};\n"],"names":["image","assets.image.background","textLockup.person","textLockup.contact","contact"],"mappings":"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"}

package/dist/atomic/text-lockup/person.d.ts

@@ -1,3 +1,3 @@
 import { PersonTextLockupProps } from '../_types';
-export declare const createTextLockupPerson: ({ actions, association, isThemeDark, job, name, nameComposite, pronouns, subText, }: PersonTextLockupProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createTextLockupPerson: ({ actions, slotTwo, isThemeDark, slotOne, name, nameComposite, slotThreeItalic, slotFour, }: PersonTextLockupProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=person.d.ts.map

package/dist/atomic/text-lockup/person.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,qFASpC,qBAAqB,kFA4JvB,CAAC"}
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/person.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD,eAAO,MAAM,sBAAsB,GAAI,6FASpC,qBAAqB,kFAiKvB,CAAC"}

package/dist/atomic/text-lockup/person.js

@@ -7,13 +7,13 @@ import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
 const createTextLockupPerson = ({
   actions,
-  association,
+  slotTwo,
   isThemeDark,
-  job,
+  slotOne,
   name,
   nameComposite,
-  pronouns,
-  subText
+  slotThreeItalic,
+  slotFour
 }) => {
   const container = new ElementBuilder().withClassName("text-lockup-person-container").withStyles({
     element: {
@@ -33,7 +33,7 @@ const createTextLockupPerson = ({
         color: theme.foreground(isThemeDark)
       })
     };
-    const nameElement = new ElementBuilder(name).styled(headlineStyles).withStyles({
+    const nameElement = new ElementBuilder(name).withClassName("person-name").styled(headlineStyles).withStyles({
       element: {
         fontWeight: "700",
         [`& + *`]: {
@@ -46,8 +46,8 @@ const createTextLockupPerson = ({
     }).withModifier((el) => wrapTextNodeInSpan(el)).build();
     container.withChild(nameElement);
   }
-  if (job) {
-    const jobElement = new ElementBuilder(job).styled(
+  if (slotOne) {
+    const slotOneElement = new ElementBuilder(slotOne).withClassName("slot-one").styled(
       typography.sans.compose("small", {
         theme: theme.fontColor(isThemeDark)
       })
@@ -60,10 +60,10 @@ const createTextLockupPerson = ({
         color: "currentColor"
       }
     }).build();
-    container.withChild(jobElement);
+    container.withChild(slotOneElement);
   }
-  if (association) {
-    const associationElement = new ElementBuilder(association).styled(
+  if (slotTwo) {
+    const slotTwoElement = new ElementBuilder(slotTwo).withClassName("slot-two").styled(
       typography.sans.compose("small", {
         theme: theme.fontColor(isThemeDark)
       })
@@ -83,11 +83,11 @@ const createTextLockupPerson = ({
         color: "currentColor"
       }
     }).build();
-    container.withChild(associationElement);
+    container.withChild(slotTwoElement);
   }
-  if (pronouns) {
-    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;
-    const pronounsElement = new ElementBuilder(pronouns).styled(
+  if (slotThreeItalic) {
+    slotThreeItalic.innerHTML = `<i>${slotThreeItalic.innerHTML}</i>`;
+    const slotThreeItalicElement = new ElementBuilder(slotThreeItalic).withClassName("slot-three-italic").styled(
       typography.sans.compose("small", {
         theme: theme.fontColor(isThemeDark)
       })
@@ -102,10 +102,10 @@ const createTextLockupPerson = ({
         }
       }
     }).build();
-    container.withChild(pronounsElement);
+    container.withChild(slotThreeItalicElement);
   }
-  if (subText) {
-    const subTextElement = new ElementBuilder(subText).styled(
+  if (slotFour) {
+    const slotFourElement = new ElementBuilder(slotFour).withClassName("slot-four").styled(
       typography.sans.compose("small", {
         theme: theme.fontColor(isThemeDark)
       })
@@ -117,7 +117,7 @@ const createTextLockupPerson = ({
         marginTop: "4px"
       }
     }).build();
-    container.withChild(subTextElement);
+    container.withChild(slotFourElement);
   }
   if (actions) {
     const actionsElement = new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({

package/dist/atomic/text-lockup/person.js.map

@@ -1 +1 @@
-{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (job) {\n    const jobElement = new ElementBuilder(job)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(jobElement);\n  }\n\n  if (association) {\n    const associationElement = new ElementBuilder(association)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(associationElement);\n  }\n\n  if (pronouns) {\n    pronouns.innerHTML = `<i>${pronouns.innerHTML}</i>`;\n    const pronounsElement = new ElementBuilder(pronouns)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`&  *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    container.withChild(pronounsElement);\n  }\n\n  if (subText) {\n    const subTextElement = new ElementBuilder(subText)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(subTextElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}
+{"version":3,"file":"person.js","sources":["../../../source/atomic/text-lockup/person.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { type PersonTextLockupProps } from '../_types';\n\nexport const createTextLockupPerson = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupProps) => {\n  const container = new ElementBuilder()\n    .withClassName('text-lockup-person-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (nameComposite && !name) {\n    container.withChild(nameComposite);\n  }\n\n  if (name) {\n    const headlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameElement = new ElementBuilder(name)\n      .withClassName('person-name')\n      .styled(headlineStyles)\n      .withStyles({\n        element: {\n          fontWeight: '700',\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(nameElement);\n  }\n\n  if (slotOne) {\n    const slotOneElement = new ElementBuilder(slotOne)\n      .withClassName('slot-one')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: `1.25em`,\n\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotOneElement);\n  }\n\n  if (slotTwo) {\n    const slotTwoElement = new ElementBuilder(slotTwo)\n      .withClassName('slot-two')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          lineHeight: '1.2em',\n          display: 'block',\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`& a:hover, a:focus`]: {\n            textDecoration: 'underline',\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .build();\n\n    container.withChild(slotTwoElement);\n  }\n\n  if (slotThreeItalic) {\n    slotThreeItalic.innerHTML = `<i>${slotThreeItalic.innerHTML}</i>`;\n    const slotThreeItalicElement = new ElementBuilder(slotThreeItalic)\n      .withClassName('slot-three-italic')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n\n          [`& + *`]: {\n            marginTop: '4px',\n          },\n\n          [`&  *`]: {\n            color: 'currentColor',\n          },\n        },\n      })\n      .build();\n\n    container.withChild(slotThreeItalicElement);\n  }\n\n  if (slotFour) {\n    const slotFourElement = new ElementBuilder(slotFour)\n      .withClassName('slot-four')\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles({\n        element: {\n          ...(!isThemeDark && { color: `${token.color.gray.dark}` }),\n        },\n        siblingAfter: {\n          marginTop: '4px',\n        },\n      })\n      .build();\n\n    container.withChild(slotFourElement);\n  }\n\n  if (actions) {\n    const actionsElement = new ElementBuilder(actions)\n      .styled(layout.grid.inline.tabletRows)\n      .withStyles({\n        element: {\n          marginTop: token.spacing.sm,\n        },\n      })\n      .build();\n\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/composite/card/_types.d.ts

@@ -1,4 +1,4 @@
-import { ContentElement, ImageElement, LinkElement, ThemeProps, UMDElement } from '../../_types';
+import { ContentElement, ImageElement, LinkElement, ThemeProps, UMDElement, LoadingProps } from '../../_types';
 export type CardImageOrLinkElement = ImageElement | LinkElement;
 export declare enum CardVariant {
     Block = "block",
@@ -13,7 +13,7 @@ export interface CardEventProps {
     eventMeta?: UMDElement;
     dateSign?: UMDElement;
 }
-export interface CardBlockProps extends CardMediaProps, CardEventProps, Pick<ThemeProps, 'isThemeDark'> {
+export interface CardBlockProps extends CardMediaProps, CardEventProps, LoadingProps, Pick<ThemeProps, 'isThemeDark'> {
     headline: ContentElement;
     text?: ContentElement;
     actions?: ContentElement;
@@ -24,14 +24,14 @@ export interface CardBlockProps extends CardMediaProps, CardEventProps, Pick<The
     hasEyebrowRibbon?: boolean;
     isTransparent?: boolean;
 }
-export interface CardListProps extends CardMediaProps, CardEventProps, Pick<ThemeProps, 'isThemeDark'> {
+export interface CardListProps extends CardMediaProps, CardEventProps, LoadingProps, Pick<ThemeProps, 'isThemeDark'> {
     headline: ContentElement;
     text?: ContentElement;
     actions?: ContentElement;
     eyebrow?: ContentElement;
     date?: ContentElement;
 }
-export interface CardOverlayProps extends CardEventProps, Partial<Pick<ThemeProps, 'isThemeDark' | 'isThemeLight'>> {
+export interface CardOverlayProps extends CardEventProps, LoadingProps, Partial<Pick<ThemeProps, 'isThemeDark' | 'isThemeLight'>> {
     headline: ContentElement;
     text?: ContentElement;
     actions?: ContentElement;

package/dist/composite/card/_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/card/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,WAAW,CAAC;AAKhE,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAKD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAKD,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAKD,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAKD,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC;IAC3D,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/card/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,WAAW,CAAC;AAKhE,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAKD,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAKD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAKD,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,cAAc,EACd,YAAY,EACZ,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAKD,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,cAAc,EACd,YAAY,EACZ,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAKD,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,YAAY,EACZ,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,cAAc,CAAC,CAAC;IAC3D,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/composite/card/block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA4D7D,CAAC"}
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../../../source/composite/card/block.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFA8D7D,CAAC"}