@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

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

@@ -1 +1 @@
-{"version":3,"file":"frames.js","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","token","ElementModel.headline.sansLarge","ElementModel.richText.simple","ElementModel.createDiv","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}
+{"version":3,"file":"frames.js","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } 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: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\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    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\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    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\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 new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\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    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\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    .build();\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: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\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":["ElementBuilder","token","Styles","theme","index","assets.image.background","createControlButton","createElementWithRefs"],"mappings":"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"}

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

@@ -1,12 +1,17 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 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, create } from "../../../model/elements/index.mjs";
 import "@universityofmaryland/web-icons-library/arrows";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
@@ -22,11 +27,8 @@ 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 { createElementWithRefs } from "./_elementModel.mjs";
 import { createControlButton } from "./controls.mjs";
-import { sansLarge } from "../../../model/elements/headline.mjs";
-import { simple } from "../../../model/elements/rich-text.mjs";
 const ASPECT_RATIO = "16 / 9";
 const createSlideContent = ({
   slide,
@@ -34,105 +36,99 @@ const createSlideContent = ({
 }) => {
   const children = [];
   let contentContainer = null;
-  const closeButton = create({
-    element: document.createElement("button"),
-    className: "umd-carousel-wide__slide-content-close",
-    attributes: [{ type: "button" }, { "aria-label": "Close content" }],
-    elementStyles: {
-      element: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        background: "transparent",
-        border: "none",
-        cursor: "pointer",
-        fontSize: "20px",
-        fontWeight: "bold",
-        padding: token.spacing.min,
-        lineHeight: 1,
-        color: token.color.gray.dark,
-        transition: "color 0.2s ease",
-        [`@media (${token.media.queries.large.max})`]: {
-          display: "none"
-        },
-        "&:hover, &:focus": {
-          outline: `2px solid ${token.color.blue}`
-        },
-        ...isThemeDark && {
-          color: token.color.gray.light,
-          "&:hover": {
-            color: token.color.white
-          }
+  const closeButton = new ElementBuilder("button").withClassName("umd-carousel-wide__slide-content-close").withAttribute("type", "button").withAttribute("aria-label", "Close content").withHTML("×").withStyles({
+    element: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "20px",
+      fontWeight: "bold",
+      padding: token.spacing.min,
+      lineHeight: 1,
+      color: token.color.gray.dark,
+      transition: "color 0.2s ease",
+      [`@media (${token.media.queries.large.max})`]: {
+        display: "none"
+      },
+      "&:hover, &:focus": {
+        outline: `2px solid ${token.color.blue}`
+      },
+      ...isThemeDark && {
+        color: token.color.gray.light,
+        "&:hover": {
+          color: token.color.white
         }
       }
     }
-  });
-  closeButton.element.innerHTML = "×";
-  closeButton.element.addEventListener("click", () => {
-    if (contentContainer) contentContainer.element.style.display = "none";
-  });
+  }).withModifier((el) => {
+    el.addEventListener("click", () => {
+      if (contentContainer) contentContainer.element.style.display = "none";
+    });
+  }).build();
   children.push(closeButton);
   if (slide.headline) {
     children.push(
-      sansLarge({
-        element: slide.headline,
-        elementStyles: {
-          element: {
+      new ElementBuilder(slide.headline).styled(
+        Styles.typography.sans.compose("large", {
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          ...!isThemeDark && {
             color: `${token.color.black}`
-          },
-          siblingAfter: {
-            marginTop: token.spacing.sm
           }
         },
-        isThemeDark
-      })
+        siblingAfter: {
+          marginTop: token.spacing.sm
+        }
+      }).build()
     );
   }
   if (slide.text) {
     children.push(
-      simple({
-        element: slide.text,
-        isThemeDark
-      })
+      new ElementBuilder(slide.text).styled(
+        Styles.element.text.rich.composeSimple({
+          theme: theme.fontColor(isThemeDark)
+        })
+      ).build()
     );
   }
   if (children.length === 1) return null;
-  contentContainer = createDiv({
-    className: "umd-carousel-wide__slide-content",
-    children,
-    elementStyles: {
-      element: {
-        backgroundColor: token.color.white,
-        border: `1px solid ${token.color.gray.light}`,
-        display: "block",
-        padding: token.spacing.md,
-        width: "100%",
-        position: "relative",
-        opacity: 0,
-        transform: "translateY(20px)",
-        transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
+  contentContainer = new ElementBuilder().withClassName("umd-carousel-wide__slide-content").withStyles({
+    element: {
+      backgroundColor: token.color.white,
+      border: `1px solid ${token.color.gray.light}`,
+      display: "block",
+      padding: token.spacing.md,
+      width: "100%",
+      position: "relative",
+      opacity: 0,
+      transform: "translateY(20px)",
+      transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
+      ...isThemeDark && {
+        backgroundColor: token.color.black,
+        border: `1px solid ${token.color.gray.dark}`
+      },
+      [`@media (${token.media.queries.large.max})`]: {
+        borderTop: "none"
+      },
+      [`@media (${token.media.queries.tablet.min})`]: {
+        border: "none",
+        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+        maxWidth: "50%",
+        position: "absolute",
+        bottom: token.spacing.sm,
+        left: token.spacing.sm,
         ...isThemeDark && {
-          backgroundColor: token.color.black,
-          border: `1px solid ${token.color.gray.dark}`
-        },
-        [`@media (${token.media.queries.large.max})`]: {
-          borderTop: "none"
-        },
-        [`@media (${token.media.queries.tablet.min})`]: {
           border: "none",
-          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
-          maxWidth: "50%",
-          position: "absolute",
-          bottom: token.spacing.sm,
-          left: token.spacing.sm,
-          ...isThemeDark && {
-            border: "none",
-            boxShadow: "none"
-          }
+          boxShadow: "none"
         }
       }
     }
-  });
+  }).withChildren(...children).build();
   return contentContainer;
 };
 const createMainFrameSlide = (slide, index$1, isThemeDark) => {
@@ -145,98 +141,90 @@ const createMainFrameSlide = (slide, index$1, isThemeDark) => {
     })
   );
   if (slideContentWrapper) children.push(slideContentWrapper);
-  return create({
-    element: document.createElement("figure"),
-    className: "umd-carousel-wide__slide",
-    children,
-    attributes: [{ "data-index": `${index$1}` }],
-    elementStyles: {
-      element: {
-        display: "none",
-        opacity: 0,
-        transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
+  return new ElementBuilder("figure").withClassName("umd-carousel-wide__slide").withAttribute("data-index", `${index$1}`).withStyles({
+    element: {
+      display: "none",
+      opacity: 0,
+      transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
+      transform: "translateX(0)",
+      aspectRatio: ASPECT_RATIO,
+      [`@media (${token.media.queries.tablet.min})`]: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        left: 0
+      },
+      '&[data-active="true"]': {
+        opacity: 1,
         transform: "translateX(0)",
-        aspectRatio: ASPECT_RATIO,
-        [`@media (${token.media.queries.tablet.min})`]: {
+        zIndex: 2,
+        display: "block"
+      },
+      '&[data-animating="true"]': {
+        zIndex: 1,
+        display: "block",
+        opacity: 1,
+        [`@media (${token.media.queries.large.max})`]: {
           position: "absolute",
           width: "100%",
-          height: "100%",
           top: 0,
           left: 0
-        },
-        '&[data-active="true"]': {
-          opacity: 1,
-          transform: "translateX(0)",
-          zIndex: 2,
-          display: "block"
-        },
-        '&[data-animating="true"]': {
-          zIndex: 1,
-          display: "block",
-          opacity: 1,
-          [`@media (${token.media.queries.large.max})`]: {
-            position: "absolute",
-            width: "100%",
-            top: 0,
-            left: 0
-          }
-        },
-        '&[data-direction="left"]': {
-          transform: "translateX(-100%)"
-        },
-        '&[data-direction="right"]': {
-          transform: "translateX(100%)"
-        },
-        '&[data-content-visible="true"] .umd-carousel-wide__slide-content': {
-          opacity: 1,
-          transform: "translateY(0)"
         }
+      },
+      '&[data-direction="left"]': {
+        transform: "translateX(-100%)"
+      },
+      '&[data-direction="right"]': {
+        transform: "translateX(100%)"
+      },
+      '&[data-content-visible="true"] .umd-carousel-wide__slide-content': {
+        opacity: 1,
+        transform: "translateY(0)"
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 const createPreviewContainer = (position) => {
   const isPositionLeft = position === "left";
-  return createDiv({
-    className: isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right",
-    attributes: [{ "aria-hidden": "true" }, { role: "presentation" }],
-    elementStyles: {
-      element: {
-        display: "none",
-        overflow: "hidden",
-        position: "relative",
-        [`@media (${token.media.queries.tablet.min})`]: {
-          display: "flex",
-          alignItems: "flex-end",
-          height: "100%"
+  return new ElementBuilder().withClassName(
+    isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right"
+  ).withAttribute("aria-hidden", "true").withAttribute("role", "presentation").withStyles({
+    element: {
+      display: "none",
+      overflow: "hidden",
+      position: "relative",
+      [`@media (${token.media.queries.tablet.min})`]: {
+        display: "flex",
+        alignItems: "flex-end",
+        height: "100%"
+      },
+      ["& > * "]: {
+        position: "absolute !important",
+        bottom: "0 !important",
+        left: "0 !important",
+        width: "auto !important",
+        height: "75% !important",
+        display: "block !important",
+        aspectRatio: ASPECT_RATIO,
+        ...isPositionLeft && {
+          right: "0 !important",
+          left: "auto !important"
         },
-        ["& > * "]: {
-          position: "absolute !important",
-          bottom: "0 !important",
-          left: "0 !important",
-          width: "auto !important",
-          height: "75% !important",
-          display: "block !important",
-          aspectRatio: ASPECT_RATIO,
-          ...isPositionLeft && {
-            right: "0 !important",
-            left: "auto !important"
-          },
-          ["&:before "]: {
-            content: '""',
-            position: "absolute",
-            top: "0",
-            left: "0",
-            right: "0",
-            bottom: "0",
-            background: token.color.gray.darker,
-            opacity: 0.5,
-            zIndex: 1
-          }
+        ["&:before "]: {
+          content: '""',
+          position: "absolute",
+          top: "0",
+          left: "0",
+          right: "0",
+          bottom: "0",
+          background: token.color.gray.darker,
+          opacity: 0.5,
+          zIndex: 1
         }
       }
     }
-  });
+  }).build();
 };
 const createMainContainer = (slides, isThemeDark) => {
   const slideElements = slides.map((slide, index) => {
@@ -247,16 +235,12 @@ const createMainContainer = (slides, isThemeDark) => {
     slideElements[0].element.setAttribute("data-content-visible", "true");
   }
   return {
-    component: createDiv({
-      className: "umd-carousel-wide__main-container",
-      children: slideElements,
-      elementStyles: {
-        element: {
-          position: "relative",
-          overflow: "hidden"
-        }
+    component: new ElementBuilder().withClassName("umd-carousel-wide__main-container").withStyles({
+      element: {
+        position: "relative",
+        overflow: "hidden"
       }
-    }),
+    }).withChildren(...slideElements).build(),
     refs: slideElements.map((el) => el.element)
   };
 };

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 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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"}
+{"version":3,"file":"frames.mjs","sources":["../../../../source/composite/carousel/wide/frames.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { assets } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { createControlButton } from './controls';\nimport { type CarouselWideProps } from '../_types';\nimport { type UMDElement } 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: UMDElement[] = [];\n\n  // Create content container first to get reference\n  let contentContainer: UMDElement | null = null;\n\n  const closeButton = new ElementBuilder('button')\n    .withClassName('umd-carousel-wide__slide-content-close')\n    .withAttribute('type', 'button')\n    .withAttribute('aria-label', 'Close content')\n    .withHTML('×')\n    .withStyles({\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    .withModifier((el) => {\n      el.addEventListener('click', () => {\n        if (contentContainer) contentContainer.element.style.display = 'none';\n      });\n    })\n    .build();\n\n  children.push(closeButton);\n\n  if (slide.headline) {\n    children.push(\n      new ElementBuilder(slide.headline)\n        .styled(\n          Styles.typography.sans.compose('large', {\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .withStyles({\n          element: {\n            ...(!isThemeDark && {\n              color: `${token.color.black}`,\n            }),\n          },\n          siblingAfter: {\n            marginTop: token.spacing.sm,\n          },\n        })\n        .build(),\n    );\n  }\n\n  if (slide.text) {\n    children.push(\n      new ElementBuilder(slide.text)\n        .styled(\n          Styles.element.text.rich.composeSimple({\n            theme: theme.fontColor(isThemeDark),\n          }),\n        )\n        .build(),\n    );\n  }\n\n  if (children.length === 1) return null;\n\n  contentContainer = new ElementBuilder()\n    .withClassName('umd-carousel-wide__slide-content')\n    .withStyles({\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    .withChildren(...children)\n    .build();\n\n  return contentContainer;\n};\n\nconst createMainFrameSlide = (\n  slide: CarouselWideProps['slides'][0],\n  index: number,\n  isThemeDark?: boolean,\n) => {\n  const children: UMDElement[] = [];\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 new ElementBuilder('figure')\n    .withClassName('umd-carousel-wide__slide')\n    .withAttribute('data-index', `${index}`)\n    .withStyles({\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    .withChildren(...children)\n    .build();\n};\n\nconst createPreviewContainer = (position: 'left' | 'right') => {\n  const isPositionLeft = position === 'left';\n  return new ElementBuilder()\n    .withClassName(\n      isPositionLeft\n        ? 'umd-carousel-wide__preview--left'\n        : 'umd-carousel-wide__preview--right',\n    )\n    .withAttribute('aria-hidden', 'true')\n    .withAttribute('role', 'presentation')\n    .withStyles({\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    .build();\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: new ElementBuilder()\n      .withClassName('umd-carousel-wide__main-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withChildren(...slideElements)\n      .build(),\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":["index","assets.image.background"],"mappings":"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"}

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

@@ -1,8 +1,4 @@
 import { CarouselWideProps } from '../_types';
-declare const _default: (props: CarouselWideProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: CarouselWideProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

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;yBAuQnC,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,wBAuDE"}