@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/carousel/elements/full-screen.js

@@ -1,6 +1,7 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { combineStyles } from "@universityofmaryland/web-utilities-library/styles";
 import { close_large } from "@universityofmaryland/web-icons-library/controls";
-import "@universityofmaryland/web-builder-library";
 import "@universityofmaryland/web-styles-library/element";
 import "@universityofmaryland/web-styles-library/layout";
 import "@universityofmaryland/web-styles-library/animation";
@@ -12,7 +13,6 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../../atomic/animations/brand/chevron-scroll.js";
 import "../../../atomic/animations/brand/card-stack.js";
 import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/accessibility";
@@ -23,49 +23,42 @@ import "../../../atomic/layout/block/stacked.js";
 import { createModal } from "../../../atomic/layout/overlay/modal.js";
 import "../../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../../atomic/text-lockup/small.js";
-const ELEMENT_CLOSE_BUTTON = "carousel-fixed-screen-button";
-const STYLES_FIXED_FULL_SCREEN = `
-
-
-  .${ELEMENT_CLOSE_BUTTON} {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-
-  @media (${token.media.queries.tablet.min}) {
-    .${ELEMENT_CLOSE_BUTTON} {
-      top: calc(10vh - 22px);
-      right: calc(10vw - 22px);
+const createCompositeCarouselFullScreen = ({ content }) => {
+  const modal = createModal({ content });
+  const modalEvents = modal.events;
+  const closeButtonModel = new ElementBuilder("button").withClassName("carousel-fixed-screen-button").withAttribute("type", "button").withAria({ label: "Close" }).withHTML(close_large).withStyles({
+    element: {
+      position: "absolute",
+      top: "10px",
+      right: "10px",
+      [`@media (${token.media.queries.tablet.min})`]: {
+        top: "calc(10vh - 22px)",
+        right: "calc(10vw - 22px)"
+      },
+      "& svg": {
+        fill: token.color.white,
+        width: "20px",
+        height: "20px"
+      }
     }
-  }
-
-  .${ELEMENT_CLOSE_BUTTON} > svg {
-    fill: ${token.color.white};
-    width: 20px;
-    height: 20px;
-  }
-`;
-const createCompositeCarouselFullScreen = ({ content, callback }) => {
-  const modal = createModal({ content, callback });
-  const closeButton = document.createElement("button");
-  let styles = STYLES_FIXED_FULL_SCREEN;
-  styles += modal.styles;
-  closeButton.setAttribute("type", "button");
-  closeButton.setAttribute("aria-label", "Close");
-  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);
-  closeButton.innerHTML = close_large;
-  closeButton.addEventListener("click", modal.events.hide);
-  modal.element.appendChild(closeButton);
+  }).on("click", () => {
+    if (!modalEvents) {
+      return;
+    }
+    modalEvents.hide();
+  }).build();
+  modal.element.appendChild(closeButtonModel.element);
+  const show = modalEvents ? modalEvents.show : () => {
+  };
+  const hide = modalEvents ? modalEvents.hide : () => {
+  };
   return {
     element: modal.element,
-    styles,
-    events: {
-      show: modal.events.show,
-      hide: modal.events.hide
-    }
+    styles: combineStyles(modal.styles, closeButtonModel.styles),
+    events: { show, hide }
   };
 };
 export {

package/dist/composite/carousel/elements/full-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\nconst ELEMENT_CLOSE_BUTTON = 'carousel-fixed-screen-button';\n\nconst STYLES_FIXED_FULL_SCREEN = `\n\n\n  .${ELEMENT_CLOSE_BUTTON} {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CLOSE_BUTTON} {\n      top: calc(10vh - 22px);\n      right: calc(10vw - 22px);\n    }\n  }\n\n  .${ELEMENT_CLOSE_BUTTON} > svg {\n    fill: ${token.color.white};\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nexport const createCompositeCarouselFullScreen = ({ content, callback }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content, callback });\n  const closeButton = document.createElement('button');\n  let styles = STYLES_FIXED_FULL_SCREEN;\n\n  styles += modal.styles;\n\n  closeButton.setAttribute('type', 'button');\n  closeButton.setAttribute('aria-label', 'Close');\n  closeButton.classList.add(ELEMENT_CLOSE_BUTTON);\n  closeButton.innerHTML = iconCloseLarge;\n  closeButton.addEventListener('click', modal.events.hide);\n\n  modal.element.appendChild(closeButton);\n\n  return {\n    element: modal.element,\n    styles,\n    events: {\n      show: modal.events.show,\n      hide: modal.events.hide,\n    },\n  };\n};\n"],"names":["layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,uBAAuB;AAE7B,MAAM,2BAA2B;AAAA;AAAA;AAAA,KAG5B,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMb,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,oBAAoB;AAAA,YACb,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtB,MAAM,oCAAoC,CAAC,EAAE,SAAS,eAAyC;AACpG,QAAM,QAAQA,YAAqB,EAAE,SAAS,UAAU;AACxD,QAAM,cAAc,SAAS,cAAc,QAAQ;AACnD,MAAI,SAAS;AAEb,YAAU,MAAM;AAEhB,cAAY,aAAa,QAAQ,QAAQ;AACzC,cAAY,aAAa,cAAc,OAAO;AAC9C,cAAY,UAAU,IAAI,oBAAoB;AAC9C,cAAY,YAAYC;AACxB,cAAY,iBAAiB,SAAS,MAAM,OAAO,IAAI;AAEvD,QAAM,QAAQ,YAAY,WAAW;AAErC,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAEJ;"}
+{"version":3,"file":"full-screen.js","sources":["../../../../source/composite/carousel/elements/full-screen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { combineStyles } from '@universityofmaryland/web-utilities-library/styles';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { layout } from 'atomic';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement;\n  callback: () => void;\n};\n\ntype FullScreenModel = {\n  element: HTMLElement;\n  styles: string;\n  events: {\n    show: () => void;\n    hide: () => void;\n  };\n};\n\nexport const createCompositeCarouselFullScreen = ({ content }: TypeFixedFullScreenProps) => {\n  const modal = layout.overlay.modal({ content });\n  const modalEvents = modal.events;\n\n  const closeButtonModel = new ElementBuilder('button')\n    .withClassName('carousel-fixed-screen-button')\n    .withAttribute('type', 'button')\n    .withAria({ label: 'Close' })\n    .withHTML(iconCloseLarge)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: '10px',\n        right: '10px',\n        [`@media (${token.media.queries.tablet.min})`]: {\n          top: 'calc(10vh - 22px)',\n          right: 'calc(10vw - 22px)',\n        },\n        '& svg': {\n          fill: token.color.white,\n          width: '20px',\n          height: '20px',\n        },\n      },\n    })\n    .on('click', () => {\n      if (!modalEvents) {\n        return;\n      }\n      modalEvents.hide();\n    })\n    .build();\n\n  modal.element.appendChild(closeButtonModel.element);\n\n  const show = modalEvents ? modalEvents.show : () => {};\n  const hide = modalEvents ? modalEvents.hide : () => {};\n\n  return {\n    element: modal.element,\n    styles: combineStyles(modal.styles, closeButtonModel.styles),\n    events: { show, hide },\n  } as FullScreenModel;\n};\n"],"names":["layout.overlay.modal","iconCloseLarge"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,oCAAoC,CAAC,EAAE,cAAwC;AAC1F,QAAM,QAAQA,YAAqB,EAAE,SAAS;AAC9C,QAAM,cAAc,MAAM;AAE1B,QAAM,mBAAmB,IAAI,eAAe,QAAQ,EACjD,cAAc,8BAA8B,EAC5C,cAAc,QAAQ,QAAQ,EAC9B,SAAS,EAAE,OAAO,QAAA,CAAS,EAC3B,SAASC,WAAc,EACvB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,KAAK;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,gBAAY,KAAA;AAAA,EACd,CAAC,EACA,MAAA;AAEH,QAAM,QAAQ,YAAY,iBAAiB,OAAO;AAElD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AACrD,QAAM,OAAO,cAAc,YAAY,OAAO,MAAM;AAAA,EAAC;AAErD,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,QAAQ,cAAc,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAC3D,QAAQ,EAAE,MAAM,KAAA;AAAA,EAAK;AAEzB;"}

package/dist/composite/carousel/elements/image.d.ts

@@ -2,10 +2,22 @@ type TypeCarouselImageProps = {
     slides: HTMLElement[];
     callback?: (index: number) => void;
     maxHeight?: number;
+    isThemeDark?: boolean;
+    includeButtonWrapper?: boolean;
 };
-export declare const createCompositeCarouselImage: (props: TypeCarouselImageProps) => {
-    element: HTMLDivElement;
+type CarouselImageModel = {
+    element: HTMLElement;
     styles: string;
+    buttons: {
+        prev: {
+            element: HTMLElement;
+            styles: string;
+        };
+        next: {
+            element: HTMLElement;
+            styles: string;
+        };
+    };
     events: {
         Load: () => void;
         EventMoveTo: (index: number) => void;
@@ -14,5 +26,6 @@ export declare const createCompositeCarouselImage: (props: TypeCarouselImageProp
         EventSlideRight: () => void;
     };
 };
+export declare const createCompositeCarouselImage: (props: TypeCarouselImageProps) => CarouselImageModel;
 export {};
 //# sourceMappingURL=image.d.ts.map

package/dist/composite/carousel/elements/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAMA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwNF,eAAO,MAAM,4BAA4B,GAAI,OAAO,sBAAsB;;;;;6BA6B1C,MAAM;;;;;CAyEhC,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/image.ts"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,IAAI,EAAE;YAAE,OAAO,EAAE,WAAW,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,IAAI,EAAE;YAAE,OAAO,EAAE,WAAW,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAC5G,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,IAAI,CAAC;QACjB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACrC,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;KAC7B,CAAC;CACH,CAAC;AAqLF,eAAO,MAAM,4BAA4B,GAAI,OAAO,sBAAsB,uBAuKpE,CAAC"}

package/dist/composite/carousel/elements/image.js

@@ -1,142 +1,118 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { getResponsiveImageSize } from "@universityofmaryland/web-utilities-library/media";
 import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
-import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
+import { createCarouselNavButton, buttonColorsOnGray } from "./nav-button.js";
 const ANIMATION_DURATION = 500;
 const ATTRIBUTE_ACTIVE_SLIDE = "data-active-slide";
-const ELEMENT_CAROUSEL_DECLARATION = "carousel-image-slider-container";
-const ELEMENT_CAROUSEL_CONTAINER = "carousel-image-slider";
-const ELEMENT_CAROUSEL_SLIDE = "carousel-image-slide";
-const ELEMENT_CAROUSEL_SLIDER_BUTTON = "carousel-slider-button";
-const OVERWRITE_ACTIVE_SLIDE = `.${ELEMENT_CAROUSEL_SLIDE}[${ATTRIBUTE_ACTIVE_SLIDE}]`;
-const SliderButtons = `
-  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} {
-    background-color: ${token.color.white};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 50%;
-    z-index: 99;
-  }
-
-  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type {
-    left: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:first-of-type svg {
-    transform: rotate(180deg);
-  }
-
-  .${ELEMENT_CAROUSEL_SLIDER_BUTTON}:last-of-type {
-    right: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_CAROUSEL_SLIDER_BUTTON} svg {
-    fill: ${token.color.black};
-    width: 16px;
-  }
-`;
-const SlideStyles = `
-  .${ELEMENT_CAROUSEL_SLIDE} {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    left: 100%;
-    display: none;
-    transition: transform ${ANIMATION_DURATION}ms ease-in-out;
-  }
-
-  ${OVERWRITE_ACTIVE_SLIDE} {
-    z-index: 99;
-    left: 0;
-    display: block;
-    transform: translateX(0);
-  }
-`;
-const SliderStyles = `
-  .${ELEMENT_CAROUSEL_CONTAINER} {
-    position: relative;
-  }
-`;
-const STYLES_CAROUSEL_IMAGE_ELEMENT = `
-  .${ELEMENT_CAROUSEL_DECLARATION} {
-    overflow: hidden;
-  }
-
-  ${SliderStyles}
-  ${SlideStyles}
-  ${SliderButtons}
-`;
+const BUTTON_CLASS_NEXT = "carousel-slider-button--next";
+const BUTTON_CLASS_PREV = "carousel-slider-button--prev";
 const CreateButton = ({
   EventSlide,
-  isRight = true
+  isRight = true,
+  isThemeDark
 }) => {
-  const button = document.createElement("button");
-  button.setAttribute("type", "button");
-  button.classList.add(ELEMENT_CAROUSEL_SLIDER_BUTTON);
-  button.innerHTML = arrow_right;
-  if (!isRight) {
-    button.setAttribute("aria-label", "Previous");
-  } else {
-    button.setAttribute("aria-label", "Next");
-  }
-  button.addEventListener("click", (event) => {
+  const buttonClassName = isRight ? BUTTON_CLASS_NEXT : BUTTON_CLASS_PREV;
+  const buttonDirection = isRight ? "next" : "prev";
+  return createCarouselNavButton({
+    className: buttonClassName,
+    direction: buttonDirection
+  }).withStyles({
+    element: {
+      position: "relative",
+      top: "auto",
+      left: "auto",
+      right: "auto",
+      zIndex: 99,
+      ...buttonColorsOnGray(isThemeDark),
+      [`@media (${token.media.queries.desktop.min})`]: {
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        right: "auto",
+        ...isRight && {
+          left: "auto",
+          right: 0
+        }
+      }
+    }
+  }).on("click", (event) => {
+    const button = event.currentTarget;
     event.stopPropagation();
-    if (isRight) EventSlide({});
-    if (!isRight) EventSlide({ forward: false });
+    if (isRight) {
+      EventSlide({});
+    } else {
+      EventSlide({ forward: false });
+    }
     button.disabled = true;
     setTimeout(() => {
       button.disabled = false;
     }, ANIMATION_DURATION + 100);
-  });
-  return button;
+  }).build();
+};
+const CreateSlide = ({ slide }) => {
+  return new ElementBuilder(slide).withClassName("carousel-image-slide").withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "absolute",
+      left: "100%",
+      display: "none",
+      transition: `transform ${ANIMATION_DURATION}ms ease-in-out`,
+      "&[data-active-slide]": {
+        zIndex: 99,
+        left: 0,
+        display: "block",
+        transform: "translateX(0)"
+      }
+    }
+  }).build();
 };
 const SetCarouselSize = ({
   slider,
   activeSlide,
-  transition = false,
   maxHeight
 }) => {
   const windowHeight = window.innerHeight - 48;
   const children = Array.from(activeSlide.children);
-  const buttons = Array.from(
-    slider.querySelectorAll(`.${ELEMENT_CAROUSEL_SLIDER_BUTTON}`)
-  );
+  const sliderContainer = slider.parentElement;
+  const sliderWrapper = sliderContainer && sliderContainer.parentElement;
+  const buttonRoot = sliderWrapper || sliderContainer;
+  const buttons = buttonRoot ? Array.from(buttonRoot.querySelectorAll(`.${BUTTON_CLASS_PREV}, .${BUTTON_CLASS_NEXT}`)) : [];
   const img = activeSlide.querySelector("img");
-  const maxWindowHeight = maxHeight ? maxHeight > windowHeight ? windowHeight : maxHeight : windowHeight;
+  const maxWindowHeight = Math.min(maxHeight || windowHeight, windowHeight);
   const imageSize = getResponsiveImageSize({
     image: img,
     parentNode: slider,
     maxWindowHeight
   });
-  const imageContainer = children.find(
-    (child) => child.contains(img)
-  );
+  const imageContainer = children.find((child) => child.contains(img));
+  const isMobile = window.matchMedia(`(${token.media.queries.tablet.max})`).matches;
   let size = imageSize;
   imageContainer.style.height = `${imageSize}px`;
+  if (isMobile) {
+    buttons.forEach((button) => {
+      button.style.top = "";
+    });
+  } else {
+    buttons.forEach((button) => {
+      button.style.top = `${imageSize / 2 - button.offsetHeight / 2}px`;
+    });
+  }
   if (children.length > 1) {
-    size = children.reduce((acc, currentElement) => {
-      return currentElement.offsetHeight + acc;
+    size = children.reduce((accumulator, currentElement) => {
+      return currentElement.offsetHeight + accumulator;
     }, 0);
   }
-  buttons.forEach((button) => button.style.top = `${imageSize / 2}px`);
-  if (transition) {
-    slider.style.transition = `height ${ANIMATION_DURATION}ms ease-in-out`;
-  } else {
-    slider.style.transition = `none`;
-  }
   slider.style.height = `${size}px`;
 };
 const SlideActiveSlide = ({
   slide,
   isRight = true
 }) => {
-  const transformDirection = isRight ? "translateX(-100%)" : "translateX(100%)";
-  slide.style.transform = `${transformDirection}`;
+  const transformDirection = isRight ? "-100%" : "100%";
+  slide.style.transform = `translateX(${transformDirection})`;
   setTimeout(() => {
     slide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
   }, ANIMATION_DURATION);
@@ -149,14 +125,14 @@ const SlideUpcomingSlide = ({
   isRight = true
 }) => {
   const amount = "90";
-  const transformDirection = isRight ? `translateX(-${amount}%)` : `translateX(${amount}%)`;
+  const translate = isRight ? `translateX(-${amount}%)` : `translateX(${amount}%)`;
   const startingPosition = isRight ? `${amount}%` : `-${amount}%`;
   slide.style.zIndex = "9";
   slide.style.transition = `transform ${ANIMATION_DURATION}ms ease-in-out`;
   slide.style.display = "block";
   slide.style.left = `${startingPosition}`;
   setTimeout(() => {
-    slide.style.transform = `${transformDirection}`;
+    slide.style.transform = translate;
   }, 1);
   setTimeout(() => {
     slide.style.transition = "none";
@@ -169,92 +145,141 @@ const SlideUpcomingSlide = ({
   }, ANIMATION_DURATION + 100);
 };
 const createCompositeCarouselImage = (props) => (() => {
-  const { slides, callback, maxHeight } = props;
-  const container = document.createElement("div");
-  const slider = document.createElement("div");
+  const { slides, callback, maxHeight, isThemeDark, includeButtonWrapper = true } = props;
   let activeIndex = 0;
-  let styles = STYLES_CAROUSEL_IMAGE_ELEMENT;
+  let sliderElement = null;
   const EventSlide = ({ forward = true }) => {
     SlideActiveSlide({ slide: slides[activeIndex], isRight: forward });
     if (forward) {
       activeIndex = activeIndex + 1;
-      if (activeIndex >= slides.length) activeIndex = 0;
+      if (activeIndex >= slides.length) {
+        activeIndex = 0;
+      }
     } else {
       activeIndex = activeIndex - 1;
-      if (activeIndex < 0) activeIndex = slides.length - 1;
+      if (activeIndex < 0) {
+        activeIndex = slides.length - 1;
+      }
     }
     SlideUpcomingSlide({ slide: slides[activeIndex], isRight: forward });
-    SetCarouselSize({
-      slider,
-      activeSlide: slides[activeIndex],
-      transition: true,
-      maxHeight
-    });
-    if (callback) callback(activeIndex);
+    if (sliderElement) {
+      SetCarouselSize({
+        slider: sliderElement,
+        activeSlide: slides[activeIndex],
+        maxHeight
+      });
+    }
+    if (callback) {
+      callback(activeIndex);
+    }
   };
   const EventMoveTo = (index) => {
     SlideActiveSlide({ slide: slides[activeIndex], isRight: true });
     activeIndex = index;
     SlideUpcomingSlide({ slide: slides[activeIndex], isRight: true });
-    SetCarouselSize({
-      slider,
-      activeSlide: slides[activeIndex],
-      transition: true,
-      maxHeight
-    });
-    if (callback) callback(activeIndex);
+    if (sliderElement) {
+      SetCarouselSize({
+        slider: sliderElement,
+        activeSlide: slides[activeIndex],
+        maxHeight
+      });
+    }
+    if (callback) {
+      callback(activeIndex);
+    }
   };
   const EventSlideLeft = () => EventSlide({ forward: false });
   const EventSlideRight = () => EventSlide({ forward: true });
   const EventSwipe = () => {
-    const swipes = (isrightswipe) => {
-      if (!isrightswipe) {
+    const swipes = (isRightSwipe) => {
+      if (!isRightSwipe) {
         EventSlide({ forward: true });
       } else {
         EventSlide({ forward: false });
       }
     };
-    setupSwipeDetection({
-      container: slider,
-      callback: swipes
-    });
+    if (sliderElement) {
+      setupSwipeDetection({ container: sliderElement, callback: swipes });
+    }
   };
   const EventResize = () => {
-    SetCarouselSize({ slider, activeSlide: slides[activeIndex], maxHeight });
+    if (!sliderElement || sliderElement.offsetWidth === 0) {
+      return;
+    }
+    SetCarouselSize({
+      slider: sliderElement,
+      activeSlide: slides[activeIndex],
+      maxHeight
+    });
   };
   const Load = () => {
     const setSize = () => {
+      if (!sliderElement) return;
       const activeSlide = slides[activeIndex];
-      SetCarouselSize({ slider, activeSlide, maxHeight });
+      SetCarouselSize({ slider: sliderElement, activeSlide, maxHeight });
       activeSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
     };
     setTimeout(setSize, 100);
     setTimeout(setSize, 300);
   };
-  slider.classList.add(ELEMENT_CAROUSEL_CONTAINER);
-  slides.forEach((slide) => slide.classList.add(ELEMENT_CAROUSEL_SLIDE));
-  slider.append(...slides);
-  slider.appendChild(CreateButton({ EventSlide, isRight: false }));
-  slider.appendChild(
-    CreateButton({
-      EventSlide,
-      isRight: true
-    })
-  );
-  container.classList.add(ELEMENT_CAROUSEL_DECLARATION);
-  container.appendChild(slider);
+  const prevButtonModel = CreateButton({ EventSlide, isRight: false, isThemeDark });
+  const nextButtonModel = CreateButton({ EventSlide, isRight: true, isThemeDark });
+  const slidesElements = slides.map((slide) => CreateSlide({ slide }));
+  const sliderModel = new ElementBuilder().withClassName("carousel-image-slider").withStyles({
+    element: {
+      position: "relative",
+      overflow: "hidden",
+      width: "100%"
+    }
+  }).ref((element) => {
+    sliderElement = element;
+  }).withChildren(...slidesElements).build();
+  const containerBuilder = new ElementBuilder().withClassName("carousel-image-slider-container").withStyles({
+    element: {
+      position: "relative",
+      width: "100%",
+      ...includeButtonWrapper && {
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        [`@media (${token.media.queries.desktop.min})`]: {
+          display: "block"
+        }
+      }
+    }
+  }).withChild(sliderModel);
+  if (includeButtonWrapper) {
+    const buttonWrapperModel = new ElementBuilder().withClassName("carousel-image-slider-buttons").withStyles({
+      element: {
+        display: "flex",
+        justifyContent: "center",
+        gap: token.spacing.min,
+        width: "100%",
+        marginTop: token.spacing.md,
+        marginBottom: token.spacing.md,
+        [`@media (${token.media.queries.desktop.min})`]: {
+          width: "auto",
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }).withChildren(prevButtonModel, nextButtonModel).build();
+    containerBuilder.withChild(buttonWrapperModel);
+  }
+  const containerModel = containerBuilder.withEvents({
+    Load,
+    EventMoveTo,
+    EventResize,
+    EventSlideLeft,
+    EventSlideRight
+  }).build();
   window.addEventListener("resize", debounce(EventResize, 10));
   EventSwipe();
   return {
-    element: container,
-    styles,
-    events: {
-      Load,
-      EventMoveTo,
-      EventResize,
-      EventSlideLeft,
-      EventSlideRight
-    }
+    element: containerModel.element,
+    styles: containerModel.styles,
+    buttons: { prev: prevButtonModel, next: nextButtonModel },
+    events: containerModel.events
   };
 })();
 export {