@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/composite/carousel/wide/frames.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frames.mjs","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: Styles.token.spacing.min,\n        lineHeight: 1,\n        color: Styles.token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${Styles.token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: Styles.token.color.gray.light,\n          '&:hover': {\n            color: Styles.token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${Styles.token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: Styles.token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: Styles.token.color.white,\n        border: `1px solid ${Styles.token.color.gray.light}`,\n        display: 'block',\n        padding: Styles.token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          border: `1px solid ${Styles.token.color.gray.dark}`,\n        }),\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: Styles.token.spacing.sm,\n          left: Styles.token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${Styles.token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: Styles.token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.max})`]: {\n          padding: `0 ${Styles.token.spacing.md}`,\n        },\n\n        [`@media (${Styles.token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: Styles.token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${Styles.token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: Styles.token.spacing.lg,\n        },\n\n        [`@media (${Styles.token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"frames.mjs","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type ElementVisual } from '../../../_types';\nimport { type CarouselWideProps } from '../_types';\n\nconst ASPECT_RATIO = '16 / 9';\n\nconst createSlideContent = ({\n  slide,\n  isThemeDark,\n}: {\n  slide: CarouselWideProps['slides'][0];\n  isThemeDark?: boolean;\n}) => {\n  const children: ElementVisual[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: ElementVisual | null = null;\n\n  const closeButton = ElementModel.create({\n    element: document.createElement('button'),\n    className: 'umd-carousel-wide__slide-content-close',\n    attributes: [{ type: 'button' }, { 'aria-label': 'Close content' }],\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        top: 0,\n        right: 0,\n        background: 'transparent',\n        border: 'none',\n        cursor: 'pointer',\n        fontSize: '20px',\n        fontWeight: 'bold',\n        padding: token.spacing.min,\n        lineHeight: 1,\n        color: token.color.gray.dark,\n        transition: 'color 0.2s ease',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          display: 'none',\n        },\n\n        '&:hover, &:focus': {\n          outline: `2px solid ${token.color.blue}`,\n        },\n\n        ...(isThemeDark && {\n          color: token.color.gray.light,\n          '&:hover': {\n            color: token.color.white,\n          },\n        }),\n      },\n    },\n  });\n\n  closeButton.element.innerHTML = '×';\n\n  closeButton.element.addEventListener('click', () => {\n    if (contentContainer) contentContainer.element.style.display = 'none';\n  });\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      ElementModel.headline.sansLarge({\n        element: slide.headline,\n        elementStyles: {\n          element: {\n            color: `${token.color.black}`,\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        },\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: slide.text,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = ElementModel.createDiv({\n    className: 'umd-carousel-wide__slide-content',\n    children,\n    elementStyles: {\n      element: {\n        backgroundColor: token.color.white,\n        border: `1px solid ${token.color.gray.light}`,\n        display: 'block',\n        padding: token.spacing.md,\n        width: '100%',\n        position: 'relative',\n        opacity: 0,\n        transform: 'translateY(20px)',\n        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.black,\n          border: `1px solid ${token.color.gray.dark}`,\n        }),\n\n        [`@media (${token.media.queries.large.max})`]: {\n          borderTop: 'none',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          border: 'none',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          maxWidth: '50%',\n          position: 'absolute',\n          bottom: token.spacing.sm,\n          left: token.spacing.sm,\n\n          ...(isThemeDark && {\n            border: 'none',\n            boxShadow: 'none',\n          }),\n        },\n      },\n    },\n  });\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: ElementVisual[] = [];\n  const slideContentWrapper = createSlideContent({ slide, isThemeDark });\n\n  children.push(\n    assets.image.background({\n      element: slide.image,\n      isScaled: true,\n    }),\n  );\n\n  if (slideContentWrapper) children.push(slideContentWrapper);\n\n  return ElementModel.create({\n    element: document.createElement('figure'),\n    className: 'umd-carousel-wide__slide',\n    children,\n    attributes: [{ 'data-index': `${index}` }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        opacity: 0,\n        transition: 'opacity 0.3s ease-in-out, transform 0.5s ease-in-out',\n        transform: 'translateX(0)',\n        aspectRatio: ASPECT_RATIO,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          position: 'absolute',\n          width: '100%',\n          height: '100%',\n          top: 0,\n          left: 0,\n        },\n\n        '&[data-active=\"true\"]': {\n          opacity: 1,\n          transform: 'translateX(0)',\n          zIndex: 2,\n          display: 'block',\n        },\n\n        '&[data-animating=\"true\"]': {\n          zIndex: 1,\n          display: 'block',\n          opacity: 1,\n\n          [`@media (${token.media.queries.large.max})`]: {\n            position: 'absolute',\n            width: '100%',\n            top: 0,\n            left: 0,\n          },\n        },\n\n        '&[data-direction=\"left\"]': {\n          transform: 'translateX(-100%)',\n        },\n\n        '&[data-direction=\"right\"]': {\n          transform: 'translateX(100%)',\n        },\n\n        '&[data-content-visible=\"true\"] .umd-carousel-wide__slide-content': {\n          opacity: 1,\n          transform: 'translateY(0)',\n        },\n      },\n    },\n  });\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return ElementModel.createDiv({\n    className: isPositionLeft\n      ? 'umd-carousel-wide__preview--left'\n      : 'umd-carousel-wide__preview--right',\n    attributes: [{ 'aria-hidden': 'true' }, { role: 'presentation' }],\n    elementStyles: {\n      element: {\n        display: 'none',\n        overflow: 'hidden',\n        position: 'relative',\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'flex',\n          alignItems: 'flex-end',\n          height: '100%',\n        },\n\n        ['& > * ']: {\n          position: 'absolute !important',\n          bottom: '0 !important',\n          left: '0 !important',\n          width: 'auto !important',\n          height: '75% !important',\n          display: 'block !important',\n          aspectRatio: ASPECT_RATIO,\n\n          ...(isPositionLeft && {\n            right: '0 !important',\n            left: 'auto !important',\n          }),\n\n          ['&:before ']: {\n            content: '\"\"',\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            background: token.color.gray.darker,\n            opacity: 0.5,\n            zIndex: 1,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createMainContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const slideElements = slides.map((slide, index) => {\n    return createMainFrameSlide(slide, index, isThemeDark);\n  });\n\n  // Set first slide as active and content visible\n  if (slideElements.length > 0) {\n    slideElements[0].element.setAttribute('data-active', 'true');\n    slideElements[0].element.setAttribute('data-content-visible', 'true');\n  }\n\n  return {\n    component: ElementModel.createDiv({\n      className: 'umd-carousel-wide__main-container',\n      children: slideElements,\n      elementStyles: {\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      },\n    }),\n    refs: slideElements.map((el) => el.element),\n  };\n};\n\nexport const createFramesContainer = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n) => {\n  const previewLeft = createPreviewContainer('left');\n  const previewRight = createPreviewContainer('right');\n  const previousButton = createControlButton('prev', isThemeDark);\n  const nextButton = createControlButton('next', isThemeDark);\n  const mainContainer = createMainContainer(slides, isThemeDark);\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__frames-container',\n    children: [\n      previewLeft,\n      mainContainer.component,\n      previewRight,\n      previousButton,\n      nextButton,\n    ],\n    elementStyles: {\n      element: {\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.max})`]: {\n          padding: `0 ${token.spacing.md}`,\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          display: 'grid',\n          gridTemplateColumns: '10vw 1fr 10vw',\n          gridGap: token.spacing.md,\n          height: '56vw',\n          maxHeight: '60vh',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          gridTemplateColumns: '15vw 1fr 15vw',\n          gridGap: token.spacing.lg,\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          gridTemplateColumns: '20vw 1fr 20vw',\n        },\n      },\n    },\n    refs: {\n      slidesContainer: mainContainer.component.element as HTMLDivElement,\n      slides: mainContainer.refs,\n      previews: {\n        left: previewLeft.element as HTMLElement,\n        right: previewRight.element as HTMLElement,\n      },\n      controls: {\n        prev: previousButton.element as HTMLButtonElement,\n        next: nextButton.element as HTMLButtonElement,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background"],"mappings":"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"}

package/dist/composite/carousel/wide/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;yBAwQnC,OAAO,iBAAiB;;;;;AAAxC,wBAiDE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;yBAuQnC,OAAO,iBAAiB;;;;;AAAxC,wBAiDE"}

package/dist/composite/carousel/wide/index.js

@@ -1,18 +1,29 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../../node_modules/postcss/lib/postcss.js");
-require("../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../node_modules/postcss-js/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
 const index$1 = require("../../../model/elements/index.js");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
 require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const container = require("./container.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,7 +41,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ANIMATION_TIME = 500;
 const PREVIEW_ANIMATION_TIME = 440;
 const getAdjacentIndices = (currentIndex, totalSlides) => {
@@ -196,7 +207,7 @@ const index = (props) => {
         container: "umd-carousel-wide / inline-size",
         display: "block",
         position: "relative",
-        [`@media (${Styles__namespace.token.media.queries.large.min})`]: {
+        [`@media (${token__namespace.media.queries.large.min})`]: {
           paddingBottom: 0
         }
       }

package/dist/composite/carousel/wide/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\n// Interfaces\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport default (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-carousel-wide',\n    children: [container],\n    attributes: [\n      ...(title ? [{ title }] : [{ title: 'Animated Image Carousel' }]),\n    ],\n    elementStyles: {\n      element: {\n        container: 'umd-carousel-wide / inline-size',\n        display: 'block',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.min})`]: {\n          paddingBottom: 0,\n        },\n      },\n    },\n  });\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background","container","createContainer","index","ElementModel.createDiv","Styles"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport default (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-carousel-wide',\n    children: [container],\n    attributes: [\n      ...(title ? [{ title }] : [{ title: 'Animated Image Carousel' }]),\n    ],\n    elementStyles: {\n      element: {\n        container: 'umd-carousel-wide / inline-size',\n        display: 'block',\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.min})`]: {\n          paddingBottom: 0,\n        },\n      },\n    },\n  });\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background","container","createContainer","index","ElementModel.createDiv","token"],"mappings":"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"}

package/dist/composite/carousel/wide/index.mjs

@@ -1,17 +1,28 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
 import { createDiv } from "../../../model/elements/index.mjs";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { createContainer } from "./container.mjs";
 const ANIMATION_TIME = 500;
 const PREVIEW_ANIMATION_TIME = 440;
@@ -178,7 +189,7 @@ const index = (props) => {
         container: "umd-carousel-wide / inline-size",
         display: "block",
         position: "relative",
-        [`@media (${Styles.token.media.queries.large.min})`]: {
+        [`@media (${token.media.queries.large.min})`]: {
           paddingBottom: 0
         }
       }

package/dist/composite/carousel/wide/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\n// Interfaces\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport default (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-carousel-wide',\n    children: [container],\n    attributes: [\n      ...(title ? [{ title }] : [{ title: 'Animated Image Carousel' }]),\n    ],\n    elementStyles: {\n      element: {\n        container: 'umd-carousel-wide / inline-size',\n        display: 'block',\n        position: 'relative',\n\n        [`@media (${Styles.token.media.queries.large.min})`]: {\n          paddingBottom: 0,\n        },\n      },\n    },\n  });\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background","index","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/wide/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { assets } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createContainer } from './container';\nimport { type CarouselWideProps } from '../_types';\n\ninterface CarouselState {\n  currentIndex: number;\n  isAnimating: boolean;\n  slides: CarouselWideProps['slides'];\n}\n\ninterface CarouselRefs {\n  container: HTMLElement;\n  slidesContainer: HTMLDivElement;\n  slides: HTMLElement[];\n  previews: {\n    left: HTMLElement;\n    right: HTMLElement;\n  };\n  controls: {\n    prev: HTMLButtonElement;\n    next: HTMLButtonElement;\n  };\n  indicator: {\n    element: HTMLElement;\n    position: (index: number) => void;\n  };\n  info: HTMLParagraphElement;\n}\n\n// Constants\nconst ANIMATION_TIME: 500 = 500;\nconst PREVIEW_ANIMATION_TIME: 440 = 440; // 60ms faster than main animation\n\n// Pure animation functions\nconst getAdjacentIndices = (\n  currentIndex: number,\n  totalSlides: number,\n): { leftIndex: number; rightIndex: number } => {\n  const lastIndex = totalSlides - 1;\n  return {\n    leftIndex: currentIndex === 0 ? lastIndex : currentIndex - 1,\n    rightIndex: currentIndex === lastIndex ? 0 : currentIndex + 1,\n  };\n};\n\nconst positionSlideOffScreen = (\n  slide: HTMLElement,\n  direction: 'left' | 'right',\n): void => {\n  slide.setAttribute('data-direction', direction);\n  slide.setAttribute('data-animating', 'true');\n  slide.offsetHeight; // Force reflow\n};\n\nconst activateSlideTransition = (\n  slide: HTMLElement,\n  direction?: 'left' | 'right',\n): void => {\n  if (direction) {\n    slide.setAttribute('data-direction', direction);\n  } else {\n    slide.removeAttribute('data-direction');\n    slide.setAttribute('data-active', 'true');\n  }\n};\n\nconst cleanupSlideTransition = (slide: HTMLElement, isNew: boolean): void => {\n  if (isNew) {\n    slide.removeAttribute('data-animating');\n  } else {\n    slide.removeAttribute('data-active');\n    slide.removeAttribute('data-direction');\n    slide.removeAttribute('data-content-visible');\n  }\n};\n\n// Pure preview functions\nconst createPreviewElement = (\n  slide: CarouselWideProps['slides'][0],\n): HTMLElement => {\n  const imageCopy = slide.image.cloneNode(true) as HTMLImageElement;\n  const preview = assets.image.background({\n    element: imageCopy,\n    isScaled: true,\n  });\n\n  preview.element.style.transition = `transform ${PREVIEW_ANIMATION_TIME}ms ease-in-out`;\n  return preview.element;\n};\n\nconst clearPreviewContainer = (container: HTMLElement): void => {\n  while (container.firstChild) {\n    container.removeChild(container.firstChild);\n  }\n};\n\nconst appendPreviewWithAnimation = (\n  container: HTMLElement,\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): void => {\n  // Position off-screen initially based on animation direction\n  // For advance (forward), new content comes from right\n  // For reverse (backward), new content comes from left\n  preview.style.transform =\n    animationDirection === 'advance' ? 'translateX(100%)' : 'translateX(-100%)';\n\n  container.appendChild(preview);\n\n  // Trigger animation to slide in\n  requestAnimationFrame(() => {\n    preview.style.transform = 'translateX(0)';\n  });\n};\n\nconst animatePreviewOut = (\n  preview: HTMLElement,\n  animationDirection: 'reverse' | 'advance',\n): Promise<void> => {\n  return new Promise((resolve) => {\n    // For advance (forward), old content exits to left\n    // For reverse (backward), old content exits to right\n    preview.style.transform =\n      animationDirection === 'advance'\n        ? 'translateX(-100%)'\n        : 'translateX(100%)';\n\n    setTimeout(() => {\n      if (preview.parentNode) {\n        preview.parentNode.removeChild(preview);\n      }\n      resolve();\n    }, PREVIEW_ANIMATION_TIME);\n  });\n};\n\n// State management\nconst updatePreviews = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  direction?: 'reverse' | 'advance',\n): void => {\n  const { currentIndex, slides } = state;\n  const { leftIndex, rightIndex } = getAdjacentIndices(\n    currentIndex,\n    slides.length,\n  );\n\n  // Handle left preview\n  if (slides[leftIndex]) {\n    const existingLeft = refs.previews.left.firstElementChild as HTMLElement;\n    if (existingLeft && direction) {\n      animatePreviewOut(existingLeft, direction);\n    } else if (existingLeft) {\n      clearPreviewContainer(refs.previews.left);\n    }\n\n    const leftPreview = createPreviewElement(slides[leftIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.left, leftPreview, direction);\n    } else {\n      refs.previews.left.appendChild(leftPreview);\n    }\n  }\n\n  // Handle right preview\n  if (slides[rightIndex]) {\n    const existingRight = refs.previews.right.firstElementChild as HTMLElement;\n    if (existingRight && direction) {\n      animatePreviewOut(existingRight, direction);\n    } else if (existingRight) {\n      clearPreviewContainer(refs.previews.right);\n    }\n\n    const rightPreview = createPreviewElement(slides[rightIndex]);\n    if (direction) {\n      appendPreviewWithAnimation(refs.previews.right, rightPreview, direction);\n    } else {\n      refs.previews.right.appendChild(rightPreview);\n    }\n  }\n};\n\nconst updateInfo = (refs: CarouselRefs, newIndex: number) => {\n  refs.info.textContent = `Slide ${newIndex + 1} Selected`;\n};\n\nconst animateSlides = (\n  refs: CarouselRefs,\n  state: CarouselState,\n  newIndex: number,\n  direction: 'reverse' | 'advance',\n) => {\n  if (state.isAnimating || state.currentIndex === newIndex) return;\n  state.isAnimating = true;\n\n  const currentSlide = refs.slides[state.currentIndex];\n  const newSlide = refs.slides[newIndex];\n\n  // Disable controls during animation\n  refs.controls.prev.setAttribute('disabled', '');\n  refs.controls.next.setAttribute('disabled', '');\n\n  // Position new slide off-screen\n  const newSlideDirection = direction === 'reverse' ? 'left' : 'right';\n  positionSlideOffScreen(newSlide, newSlideDirection);\n\n  // Update indicator position\n  refs.indicator.position(newIndex);\n\n  // Start synchronized animations for all frames\n  requestAnimationFrame(() => {\n    // Animate main slides\n    activateSlideTransition(newSlide);\n    const currentSlideDirection = direction === 'reverse' ? 'right' : 'left';\n    activateSlideTransition(currentSlide, currentSlideDirection);\n\n    // Update previews with animation (this will animate in sync)\n    const nextState = { ...state, currentIndex: newIndex };\n    updatePreviews(refs, nextState, direction);\n  });\n\n  // Clean up after animation\n  setTimeout(() => {\n    // Clean up main slides\n    cleanupSlideTransition(currentSlide, false);\n    cleanupSlideTransition(newSlide, true);\n\n    // Show content with fade-in animation\n    newSlide.setAttribute('data-content-visible', 'true');\n\n    // Re-enable controls\n    refs.controls.prev.removeAttribute('disabled');\n    refs.controls.next.removeAttribute('disabled');\n\n    // Update state\n    state.currentIndex = newIndex;\n    state.isAnimating = false;\n\n    // Update accessibility info\n    updateInfo(refs, newIndex);\n  }, ANIMATION_TIME);\n};\n\nconst setupSliderControls = (refs: CarouselRefs, state: CarouselState) => {\n  const lastIndex = state.slides.length - 1;\n\n  refs.controls.prev.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === lastIndex ? 0 : state.currentIndex + 1;\n    animateSlides(refs, state, newIndex, 'advance');\n  });\n\n  refs.controls.next.addEventListener('click', () => {\n    if (state.isAnimating) return;\n\n    const newIndex =\n      state.currentIndex === 0 ? lastIndex : state.currentIndex - 1;\n    animateSlides(refs, state, newIndex, 'reverse');\n  });\n};\n\n// Main component\nexport default (props: CarouselWideProps) => {\n  const { title } = props;\n\n  // Initialize state early\n  const state: CarouselState = {\n    currentIndex: 0,\n    isAnimating: false,\n    slides: props.slides,\n  };\n\n  const container = createContainer(props, (index: number) => {\n    if (state.isAnimating || state.currentIndex === index) return;\n\n    const direction = state.currentIndex > index ? 'reverse' : 'advance';\n    animateSlides(refs, state, index, direction);\n  });\n\n  const composite = ElementModel.createDiv({\n    className: 'umd-carousel-wide',\n    children: [container],\n    attributes: [\n      ...(title ? [{ title }] : [{ title: 'Animated Image Carousel' }]),\n    ],\n    elementStyles: {\n      element: {\n        container: 'umd-carousel-wide / inline-size',\n        display: 'block',\n        position: 'relative',\n\n        [`@media (${token.media.queries.large.min})`]: {\n          paddingBottom: 0,\n        },\n      },\n    },\n  });\n\n  // Initialize refs\n  const refs: CarouselRefs = {\n    container: composite.element,\n    ...container.refs,\n  };\n\n  // Set up event handlers after DOM is ready\n  requestAnimationFrame(() => {\n    setupSliderControls(refs, state);\n    updatePreviews(refs, state); // Initial preview setup without animation\n  });\n\n  return composite;\n};\n"],"names":["assets.image.background","index","ElementModel.createDiv"],"mappings":"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"}

package/dist/composite/footer/elements/main-section/call-to-action.d.ts

@@ -1,7 +1,8 @@
-export declare const CALL_TO_ACTION_CONTAINER = "umd-footer-call-to-action-container";
-export declare const CallToActionStyles: string;
-export interface CallToActionProps {
+import { BaseProps } from '../../_types';
+import { ElementVisual } from '../../../../_types';
+export interface CallToActionProps extends BaseProps {
     slotCta?: HTMLAnchorElement;
 }
-export declare const createCallToAction: ({ slotCta }: CallToActionProps) => HTMLDivElement;
+declare const _default: (props: CallToActionProps) => ElementVisual;
+export default _default;
 //# sourceMappingURL=call-to-action.d.ts.map

package/dist/composite/footer/elements/main-section/call-to-action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"call-to-action.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,wCAAwC,CAAC;AAE9E,eAAO,MAAM,kBAAkB,QAsB9B,CAAC;AAYF,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,GAAI,aAAa,iBAAiB,mBAYhE,CAAC"}
+{"version":3,"file":"call-to-action.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;yBA+Be,OAAO,iBAAiB,KAAG,aAAa;AAAxD,wBAwBE"}

package/dist/composite/footer/elements/main-section/call-to-action.js

@@ -1,30 +1,26 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
-const CALL_TO_ACTION_CONTAINER = "umd-footer-call-to-action-container";
-const CallToActionStyles = `
-  .${CALL_TO_ACTION_CONTAINER} {
-    margin-left: auto;
+const token = require("@universityofmaryland/web-styles-library/token");
+const index = require("../../../../model/elements/index.js");
+const globals = require("../../globals.js");
+const actions = require("../../../../model/elements/actions.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
   }
-
-  .${CALL_TO_ACTION_CONTAINER} a {
-    display: inline-block;
-    padding: ${Styles.token.spacing.xs} ${Styles.token.spacing["lg"]};
-    background-color: ${Styles.token.color.red};
-    color: ${Styles.token.color.white} !important;
-    transition: background-color 0.3s ease-in-out;
-    font-weight: 700;
-  }
-
-  .${CALL_TO_ACTION_CONTAINER} a:hover,
-  .${CALL_TO_ACTION_CONTAINER} a:focus {
-    background-color: ${Styles.token.color.redDark};
-  }
-
-  .${CALL_TO_ACTION_CONTAINER} a * {
-    color: ${Styles.token.color.white} !important;
-  }
-`;
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const { LARGE } = globals.BREAKPOINTS;
 const makeGivingLink = () => {
   const defaultLink = document.createElement("a");
   defaultLink.textContent = "Support UMD";
@@ -33,17 +29,40 @@ const makeGivingLink = () => {
   defaultLink.rel = "noopener noreferrer";
   return defaultLink;
 };
-const createCallToAction = ({ slotCta }) => {
-  const container = document.createElement("div");
-  container.classList.add(CALL_TO_ACTION_CONTAINER);
-  if (slotCta) {
-    container.appendChild(slotCta);
-  } else {
-    container.appendChild(makeGivingLink());
-  }
-  return container;
+const createLinkElement = (props, link) => {
+  const { isThemeLight } = props;
+  return actions.primary({
+    element: link,
+    elementStyles: {
+      element: {
+        ...isThemeLight && {
+          color: `${token__namespace.color.white} !important`
+        }
+      }
+    }
+  });
+};
+const createCallToActionContainer = (props) => {
+  const { isTypeSimple, slotCta } = props;
+  const baseLink = slotCta ?? makeGivingLink();
+  const styledLink = createLinkElement(props, baseLink);
+  return index.createDiv({
+    className: "umd-footer-call-to-action-container",
+    children: [styledLink],
+    elementStyles: {
+      element: {
+        marginLeft: "auto",
+        ...isTypeSimple && {
+          display: "none"
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          [`& .umd-footer-logo-container`]: {
+            display: "none"
+          }
+        }
+      }
+    }
+  });
 };
-exports.CALL_TO_ACTION_CONTAINER = CALL_TO_ACTION_CONTAINER;
-exports.CallToActionStyles = CallToActionStyles;
-exports.createCallToAction = createCallToAction;
+module.exports = createCallToActionContainer;
 //# sourceMappingURL=call-to-action.js.map

package/dist/composite/footer/elements/main-section/call-to-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"call-to-action.js","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nexport const CALL_TO_ACTION_CONTAINER = 'umd-footer-call-to-action-container';\n\nexport const CallToActionStyles = `\n  .${CALL_TO_ACTION_CONTAINER} {\n    margin-left: auto;\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a {\n    display: inline-block;\n    padding: ${token.spacing.xs} ${token.spacing['lg']};\n    background-color: ${token.color.red};\n    color: ${token.color.white} !important;\n    transition: background-color 0.3s ease-in-out;\n    font-weight: 700;\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a:hover,\n  .${CALL_TO_ACTION_CONTAINER} a:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a * {\n    color: ${token.color.white} !important;\n  }\n`;\n\nconst makeGivingLink = () => {\n  const defaultLink = document.createElement('a');\n  defaultLink.textContent = 'Support UMD';\n  defaultLink.href = 'https://giving.umd.edu/';\n  defaultLink.target = '_blank';\n  defaultLink.rel = 'noopener noreferrer';\n\n  return defaultLink;\n};\n\nexport interface CallToActionProps {\n  slotCta?: HTMLAnchorElement;\n}\n\nexport const createCallToAction = ({ slotCta }: CallToActionProps) => {\n  const container = document.createElement('div');\n\n  container.classList.add(CALL_TO_ACTION_CONTAINER);\n\n  if (slotCta) {\n    container.appendChild(slotCta);\n  } else {\n    container.appendChild(makeGivingLink());\n  }\n\n  return container;\n};\n"],"names":["token"],"mappings":";;;AAEO,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB;AAAA,KAC7B,wBAAwB;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA;AAAA,eAEdA,OAAAA,MAAM,QAAQ,EAAE,IAAIA,aAAM,QAAQ,IAAI,CAAC;AAAA,wBAC9BA,OAAAA,MAAM,MAAM,GAAG;AAAA,aAC1BA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,wBAAwB;AAAA,KACxB,wBAAwB;AAAA,wBACLA,OAAAA,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,KAGtC,wBAAwB;AAAA,aAChBA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAI9B,MAAM,iBAAiB,MAAM;AAC3B,QAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,cAAY,cAAc;AAC1B,cAAY,OAAO;AACnB,cAAY,SAAS;AACrB,cAAY,MAAM;AAElB,SAAO;AACT;AAMO,MAAM,qBAAqB,CAAC,EAAE,cAAiC;AACpE,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,UAAU,IAAI,wBAAwB;AAEhD,MAAI,SAAS;AACX,cAAU,YAAY,OAAO;AAAA,EAC/B,OAAO;AACL,cAAU,YAAY,gBAAgB;AAAA,EACxC;AAEA,SAAO;AACT;;;;"}
+{"version":3,"file":"call-to-action.js","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CallToActionProps extends BaseProps {\n  slotCta?: HTMLAnchorElement;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst makeGivingLink = (): HTMLAnchorElement => {\n  const defaultLink = document.createElement('a');\n  defaultLink.textContent = 'Support UMD';\n  defaultLink.href = 'https://giving.umd.edu/';\n  defaultLink.target = '_blank';\n  defaultLink.rel = 'noopener noreferrer';\n  return defaultLink;\n};\n\nconst createLinkElement = (\n  props: CallToActionProps,\n  link: HTMLAnchorElement,\n): ElementVisual => {\n  const { isThemeLight } = props;\n\n  return ElementModel.actions.primary({\n    element: link,\n    elementStyles: {\n      element: {\n        ...(isThemeLight && {\n          color: `${token.color.white} !important`,\n        }),\n      },\n    },\n  });\n};\n\nexport default (props: CallToActionProps): ElementVisual => {\n  const { isTypeSimple, slotCta } = props;\n  const baseLink = slotCta ?? makeGivingLink();\n  const styledLink = createLinkElement(props, baseLink);\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-call-to-action-container',\n    children: [styledLink],\n    elementStyles: {\n      element: {\n        marginLeft: 'auto',\n\n        ...(isTypeSimple && {\n          display: 'none',\n        }),\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          [`& .umd-footer-logo-container`]: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["BREAKPOINTS","ElementModel.actions.primary","token","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,EAAE,UAAUA,QAAAA;AAElB,MAAM,iBAAiB,MAAyB;AAC9C,QAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,cAAY,cAAc;AAC1B,cAAY,OAAO;AACnB,cAAY,SAAS;AACrB,cAAY,MAAM;AAClB,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,OACA,SACkB;AAClB,QAAM,EAAE,iBAAiB;AAEzB,SAAOC,gBAA6B;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAI,gBAAgB;AAAA,UAClB,OAAO,GAAGC,iBAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,8BAAe,CAAC,UAA4C;AAC1D,QAAM,EAAE,cAAc,QAAA,IAAY;AAClC,QAAM,WAAW,WAAW,eAAA;AAC5B,QAAM,aAAa,kBAAkB,OAAO,QAAQ;AAEpD,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,UAAU;AAAA,IACrB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QAEZ,GAAI,gBAAgB;AAAA,UAClB,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/footer/elements/main-section/call-to-action.mjs

@@ -1,28 +1,8 @@
-import { token } from "@universityofmaryland/web-styles-library";
-const CALL_TO_ACTION_CONTAINER = "umd-footer-call-to-action-container";
-const CallToActionStyles = `
-  .${CALL_TO_ACTION_CONTAINER} {
-    margin-left: auto;
-  }
-
-  .${CALL_TO_ACTION_CONTAINER} a {
-    display: inline-block;
-    padding: ${token.spacing.xs} ${token.spacing["lg"]};
-    background-color: ${token.color.red};
-    color: ${token.color.white} !important;
-    transition: background-color 0.3s ease-in-out;
-    font-weight: 700;
-  }
-
-  .${CALL_TO_ACTION_CONTAINER} a:hover,
-  .${CALL_TO_ACTION_CONTAINER} a:focus {
-    background-color: ${token.color.redDark};
-  }
-
-  .${CALL_TO_ACTION_CONTAINER} a * {
-    color: ${token.color.white} !important;
-  }
-`;
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createDiv } from "../../../../model/elements/index.mjs";
+import { BREAKPOINTS } from "../../globals.mjs";
+import { primary } from "../../../../model/elements/actions.mjs";
+const { LARGE } = BREAKPOINTS;
 const makeGivingLink = () => {
   const defaultLink = document.createElement("a");
   defaultLink.textContent = "Support UMD";
@@ -31,19 +11,42 @@ const makeGivingLink = () => {
   defaultLink.rel = "noopener noreferrer";
   return defaultLink;
 };
-const createCallToAction = ({ slotCta }) => {
-  const container = document.createElement("div");
-  container.classList.add(CALL_TO_ACTION_CONTAINER);
-  if (slotCta) {
-    container.appendChild(slotCta);
-  } else {
-    container.appendChild(makeGivingLink());
-  }
-  return container;
+const createLinkElement = (props, link) => {
+  const { isThemeLight } = props;
+  return primary({
+    element: link,
+    elementStyles: {
+      element: {
+        ...isThemeLight && {
+          color: `${token.color.white} !important`
+        }
+      }
+    }
+  });
+};
+const createCallToActionContainer = (props) => {
+  const { isTypeSimple, slotCta } = props;
+  const baseLink = slotCta ?? makeGivingLink();
+  const styledLink = createLinkElement(props, baseLink);
+  return createDiv({
+    className: "umd-footer-call-to-action-container",
+    children: [styledLink],
+    elementStyles: {
+      element: {
+        marginLeft: "auto",
+        ...isTypeSimple && {
+          display: "none"
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          [`& .umd-footer-logo-container`]: {
+            display: "none"
+          }
+        }
+      }
+    }
+  });
 };
 export {
-  CALL_TO_ACTION_CONTAINER,
-  CallToActionStyles,
-  createCallToAction
+  createCallToActionContainer as default
 };
 //# sourceMappingURL=call-to-action.mjs.map

package/dist/composite/footer/elements/main-section/call-to-action.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"call-to-action.mjs","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nexport const CALL_TO_ACTION_CONTAINER = 'umd-footer-call-to-action-container';\n\nexport const CallToActionStyles = `\n  .${CALL_TO_ACTION_CONTAINER} {\n    margin-left: auto;\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a {\n    display: inline-block;\n    padding: ${token.spacing.xs} ${token.spacing['lg']};\n    background-color: ${token.color.red};\n    color: ${token.color.white} !important;\n    transition: background-color 0.3s ease-in-out;\n    font-weight: 700;\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a:hover,\n  .${CALL_TO_ACTION_CONTAINER} a:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${CALL_TO_ACTION_CONTAINER} a * {\n    color: ${token.color.white} !important;\n  }\n`;\n\nconst makeGivingLink = () => {\n  const defaultLink = document.createElement('a');\n  defaultLink.textContent = 'Support UMD';\n  defaultLink.href = 'https://giving.umd.edu/';\n  defaultLink.target = '_blank';\n  defaultLink.rel = 'noopener noreferrer';\n\n  return defaultLink;\n};\n\nexport interface CallToActionProps {\n  slotCta?: HTMLAnchorElement;\n}\n\nexport const createCallToAction = ({ slotCta }: CallToActionProps) => {\n  const container = document.createElement('div');\n\n  container.classList.add(CALL_TO_ACTION_CONTAINER);\n\n  if (slotCta) {\n    container.appendChild(slotCta);\n  } else {\n    container.appendChild(makeGivingLink());\n  }\n\n  return container;\n};\n"],"names":[],"mappings":";AAEO,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB;AAAA,KAC7B,wBAAwB;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA;AAAA,eAEd,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,IAAI,CAAC;AAAA,wBAC9B,MAAM,MAAM,GAAG;AAAA,aAC1B,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,KAKzB,wBAAwB;AAAA,KACxB,wBAAwB;AAAA,wBACL,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,KAGtC,wBAAwB;AAAA,aAChB,MAAM,MAAM,KAAK;AAAA;AAAA;AAI9B,MAAM,iBAAiB,MAAM;AAC3B,QAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,cAAY,cAAc;AAC1B,cAAY,OAAO;AACnB,cAAY,SAAS;AACrB,cAAY,MAAM;AAElB,SAAO;AACT;AAMO,MAAM,qBAAqB,CAAC,EAAE,cAAiC;AACpE,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,UAAU,IAAI,wBAAwB;AAEhD,MAAI,SAAS;AACX,cAAU,YAAY,OAAO;AAAA,EAC/B,OAAO;AACL,cAAU,YAAY,gBAAgB;AAAA,EACxC;AAEA,SAAO;AACT;"}
+{"version":3,"file":"call-to-action.mjs","sources":["../../../../../source/composite/footer/elements/main-section/call-to-action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface CallToActionProps extends BaseProps {\n  slotCta?: HTMLAnchorElement;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst makeGivingLink = (): HTMLAnchorElement => {\n  const defaultLink = document.createElement('a');\n  defaultLink.textContent = 'Support UMD';\n  defaultLink.href = 'https://giving.umd.edu/';\n  defaultLink.target = '_blank';\n  defaultLink.rel = 'noopener noreferrer';\n  return defaultLink;\n};\n\nconst createLinkElement = (\n  props: CallToActionProps,\n  link: HTMLAnchorElement,\n): ElementVisual => {\n  const { isThemeLight } = props;\n\n  return ElementModel.actions.primary({\n    element: link,\n    elementStyles: {\n      element: {\n        ...(isThemeLight && {\n          color: `${token.color.white} !important`,\n        }),\n      },\n    },\n  });\n};\n\nexport default (props: CallToActionProps): ElementVisual => {\n  const { isTypeSimple, slotCta } = props;\n  const baseLink = slotCta ?? makeGivingLink();\n  const styledLink = createLinkElement(props, baseLink);\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-call-to-action-container',\n    children: [styledLink],\n    elementStyles: {\n      element: {\n        marginLeft: 'auto',\n\n        ...(isTypeSimple && {\n          display: 'none',\n        }),\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          [`& .umd-footer-logo-container`]: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.actions.primary","ElementModel.createDiv"],"mappings":";;;;AAUA,MAAM,EAAE,UAAU;AAElB,MAAM,iBAAiB,MAAyB;AAC9C,QAAM,cAAc,SAAS,cAAc,GAAG;AAC9C,cAAY,cAAc;AAC1B,cAAY,OAAO;AACnB,cAAY,SAAS;AACrB,cAAY,MAAM;AAClB,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,OACA,SACkB;AAClB,QAAM,EAAE,iBAAiB;AAEzB,SAAOA,QAA6B;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAI,gBAAgB;AAAA,UAClB,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,CACD;AACH;AAEA,MAAA,8BAAe,CAAC,UAA4C;AAC1D,QAAM,EAAE,cAAc,QAAA,IAAY;AAClC,QAAM,WAAW,WAAW,eAAA;AAC5B,QAAM,aAAa,kBAAkB,OAAO,QAAQ;AAEpD,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,UAAU;AAAA,IACrB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QAEZ,GAAI,gBAAgB;AAAA,UAClB,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/footer/elements/main-section/campaign.d.ts

@@ -1,7 +1,7 @@
 import { BaseProps } from '../../_types';
-export declare const CAMPAIGN_COLUMN_WRAPPER = "campaign-column-wrapper";
-export declare const CampaignStyles: string;
+import { ElementVisual } from '../../../../_types';
 export interface CampaignProps extends BaseProps {
 }
-export declare const createCampaign: ({ isThemeLight }: CampaignProps) => HTMLDivElement;
+declare const _default: ({ isThemeLight }: CampaignProps) => ElementVisual;
+export default _default;
 //# sourceMappingURL=campaign.d.ts.map

package/dist/composite/footer/elements/main-section/campaign.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"campaign.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE,eAAO,MAAM,cAAc,QAM1B,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;AAEnD,eAAO,MAAM,cAAc,GAAI,kBAAkB,aAAa,mBAmB7D,CAAC"}
+{"version":3,"file":"campaign.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/main-section/campaign.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,SAAS;CAAG;yBAInC,kBAAkB,aAAa,KAAG,aAAa;AAA/D,wBA+CE"}