@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

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

@@ -1,125 +1,84 @@
 import * as token from "@universityofmaryland/web-token-library";
-import { createCompositeCarouselBlocks } from "../elements/blocks.js";
-import "../elements/full-screen.js";
-import "../elements/overlay.js";
-import "../elements/image.js";
-const ATTRIBUTE_THEME = "data-theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-carousel-thumbnail";
-const ELEMENT_THUMBNAIL_DECLARATION = "carousel-thumbnail-declaration";
-const ELEMENT_THUMBNAIL_CONTAINER = "carousel-thumbnail-container";
-const ELEMENT_PERSON_SLIDE = "carousel-person-slide";
-const ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = "carousel-thumbnail-button";
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${createCompositeCarouselBlocks.Elements.button}`;
-const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;
-const OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_CONTAINER} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token.color.black};
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token.color.white};
-  }
-
-  ${OVERWRITE_THEME_DARK_SLIDE} {
-    border: 1px solid ${token.color.gray.dark};
-    border-left: none;
-  }
-
-  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {
-    border-left: 1px solid ${token.color.gray.dark};
-  }
-`;
-const OverwriteCarouselStyles = `
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
-    left: -${token.spacing.md};
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
-    right: -${token.spacing.md};
-  }
-`;
-const PersonSlideStyles = `
-  .${ELEMENT_PERSON_SLIDE} {
-    border: 1px solid ${token.color.gray.light};
-    border-left: none;
-    padding: ${token.spacing.lg};
-  }
-
-  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {
-    border-left: 1px solid ${token.color.gray.light};
-  }
-`;
-const STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `
-  .${ELEMENT_THUMBNAIL_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_THUMBNAIL_CONTAINER} {
-    overflow: hidden;
-    padding: 0 ${token.spacing.md};
-  }
-
-  ${createCompositeCarouselBlocks.Styles}
-  ${PersonSlideStyles}
-  ${OverwriteCarouselStyles}
-  ${OverwriteThemeDark}
-`;
-const CreatePerson = ({ block }) => {
-  const container = document.createElement("div");
-  container.appendChild(block);
-  container.classList.add(ELEMENT_PERSON_SLIDE);
-  return container;
-};
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { createCompositeCarouselBlocks } from "../elements/equal-width-items.js";
+import { buttonColorsOnBlack } from "../elements/nav-button.js";
+import "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-icons-library/controls";
+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/communication";
+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/card-stack.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
+import "../../../atomic/text-lockup/small.js";
+import "@universityofmaryland/web-utilities-library/events";
 const createCompositeCarouselThumbnail = (props) => (() => {
   const { blocks, isThemeDark } = props;
-  const elementDeclaration = document.createElement("div");
-  const elementContainer = document.createElement("div");
-  const slide = document.createElement("div");
-  const blocksWrapper = blocks.map(
-    (block) => CreatePerson({
-      block
-    })
-  );
+  const slide = new ElementBuilder().build().element;
+  const CreatePerson = ({ block }) => new ElementBuilder().withClassName("carousel-person-slide").withStyles({
+    element: {
+      border: `1px solid ${token.color.gray.light}`,
+      ...isThemeDark && { border: `1px solid ${token.color.gray.dark}` },
+      borderLeft: "none",
+      padding: token.spacing.lg,
+      "&:first-child": {
+        borderLeft: `1px solid ${token.color.gray.light}`,
+        ...isThemeDark && { borderLeft: `1px solid ${token.color.gray.dark}` }
+      }
+    }
+  }).withChild(block).build();
+  const blocksWrapperModels = blocks.map((block) => CreatePerson({ block }));
+  const blocksWrapper = blocksWrapperModels.map((model) => model.element);
+  const blocksStyles = blocksWrapperModels[0] ? blocksWrapperModels[0].styles : "";
   const carousel = createCompositeCarouselBlocks.CreateElement({
     blocks: blocksWrapper,
     slide,
-    overwriteDisplayLogic: {
-      mobileBreakpoint: 500,
-      tabletBreakpoint: 900,
-      desktopBreakpoint: 1200,
-      desktopCount: 3,
-      maxCount: 4,
-      blockGap: 0,
-      showHint: false,
-      showMobileHint: false
+    mobileBreakpoint: token.media.breakpointValues.medium.min,
+    tabletBreakpoint: token.media.breakpointValues.desktop.min,
+    desktopBreakpoint: token.media.breakpointValues.highDef.min,
+    desktopCount: 3,
+    maxCount: 4,
+    blockGap: 0,
+    showHint: false,
+    showMobileHint: false,
+    button: {
+      outsetOffset: token.spacing.md,
+      ...isThemeDark && buttonColorsOnBlack()
     }
   });
-  elementContainer.appendChild(carousel.element);
-  elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);
-  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);
-  elementDeclaration.appendChild(elementContainer);
-  return {
-    element: elementDeclaration,
-    styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,
-    events: {
-      reize: carousel.events.resize,
-      load: carousel.events.load
+  const containerModel = new ElementBuilder().withClassName("carousel-thumbnail-container").withStyles({
+    element: {
+      overflow: "hidden",
+      padding: `0 ${token.spacing.md}`,
+      ...isThemeDark && { backgroundColor: token.color.black }
+    }
+  }).withChild(carousel).build();
+  const declarationModel = new ElementBuilder().withClassName("carousel-thumbnail-declaration").withStyles({
+    element: {
+      containerType: "inline-size"
     }
-  };
+  }).withChild(containerModel).withEvents({
+    resize: carousel.events.resize,
+    load: carousel.events.load
+  }).build();
+  declarationModel.styles += blocksStyles;
+  return declarationModel;
 })();
 export {
   createCompositeCarouselThumbnail

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-carousel-thumbnail';\nconst ELEMENT_THUMBNAIL_DECLARATION = 'carousel-thumbnail-declaration';\nconst ELEMENT_THUMBNAIL_CONTAINER = 'carousel-thumbnail-container';\nconst ELEMENT_PERSON_SLIDE = 'carousel-person-slide';\nconst ELEMENT_CAROUSEL_THUMBNAIL_BUTTON = 'carousel-thumbnail-button';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${ELEMENT_THUMBNAIL_DECLARATION} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_CAROUSEL_THUMBNAIL_BUTTON}`;\nconst OVERWRITE_THEME_DARK_SLIDE = `.${ELEMENT_THUMBNAIL_CONTAINER}${IS_THEME_DARK} .${ELEMENT_PERSON_SLIDE}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.black};\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE} {\n    border: 1px solid ${token.color.gray.dark};\n    border-left: none;\n  }\n\n  ${OVERWRITE_THEME_DARK_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n    left: -${token.spacing.md};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n    right: -${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst PersonSlideStyles = `\n  .${ELEMENT_PERSON_SLIDE} {\n    border: 1px solid ${token.color.gray.light};\n    border-left: none;\n    padding: ${token.spacing.lg};\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} .${ELEMENT_PERSON_SLIDE}:first-child {\n    border-left: 1px solid ${token.color.gray.light};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_CAROUSEL_THUMBNAIL_ELEMENT = `\n  .${ELEMENT_THUMBNAIL_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_THUMBNAIL_CONTAINER} {\n    overflow: hidden;\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${carouselElements.blocks.Styles}\n  ${PersonSlideStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreatePerson = ({ block }: { block: HTMLElement }) => {\n  const container = document.createElement('div');\n\n  container.appendChild(block);\n  container.classList.add(ELEMENT_PERSON_SLIDE);\n\n  return container;\n};\n\nexport const createCompositeCarouselThumbnail = (props: TypeCarouselThumbnailProps) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const elementDeclaration = document.createElement('div');\n    const elementContainer = document.createElement('div');\n    const slide = document.createElement('div');\n    const blocksWrapper = blocks.map((block) =>\n      CreatePerson({\n        block,\n      }),\n    );\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 500,\n        tabletBreakpoint: 900,\n        desktopBreakpoint: 1200,\n        desktopCount: 3,\n        maxCount: 4,\n        blockGap: 0,\n        showHint: false,\n        showMobileHint: false,\n      },\n    });\n\n    elementContainer.appendChild(carousel.element);\n    elementContainer.classList.add(ELEMENT_THUMBNAIL_CONTAINER);\n    if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    elementDeclaration.classList.add(ELEMENT_THUMBNAIL_DECLARATION);\n    elementDeclaration.appendChild(elementContainer);\n\n    return {\n      element: elementDeclaration,\n      styles: STYLES_CAROUSEL_THUMBNAIL_ELEMENT,\n      events: {\n        reize: carousel.events.resize,\n        load: carousel.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/thumbnail/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselThumbnailProps = {\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n};\n\nexport const createCompositeCarouselThumbnail = (\n  props: TypeCarouselThumbnailProps,\n) =>\n  (() => {\n    const { blocks, isThemeDark } = props;\n    const slide = new ElementBuilder().build().element;\n\n    const CreatePerson = ({ block }: { block: HTMLElement }) =>\n      new ElementBuilder()\n        .withClassName('carousel-person-slide')\n        .withStyles({\n          element: {\n            border: `1px solid ${token.color.gray.light}`,\n            ...(isThemeDark && { border: `1px solid ${token.color.gray.dark}` }),\n            borderLeft: 'none',\n            padding: token.spacing.lg,\n            '&:first-child': {\n              borderLeft: `1px solid ${token.color.gray.light}`,\n              ...(isThemeDark && { borderLeft: `1px solid ${token.color.gray.dark}` }),\n            },\n          },\n        })\n        .withChild(block)\n        .build();\n\n    const blocksWrapperModels = blocks.map((block) => CreatePerson({ block }));\n    const blocksWrapper = blocksWrapperModels.map((model) => model.element);\n    const blocksStyles = blocksWrapperModels[0] ? blocksWrapperModels[0].styles : '';\n\n    const carousel = carouselElements.blocks.CreateElement({\n      blocks: blocksWrapper,\n      slide,\n      mobileBreakpoint: token.media.breakpointValues.medium.min,\n      tabletBreakpoint: token.media.breakpointValues.desktop.min,\n      desktopBreakpoint: token.media.breakpointValues.highDef.min,\n      desktopCount: 3,\n      maxCount: 4,\n      blockGap: 0,\n      showHint: false,\n      showMobileHint: false,\n      button: {\n        outsetOffset: token.spacing.md,\n        ...(isThemeDark && carouselElements.buttonColorsOnBlack()),\n      },\n    });\n\n    const containerModel = new ElementBuilder()\n      .withClassName('carousel-thumbnail-container')\n      .withStyles({\n        element: {\n          overflow: 'hidden',\n          padding: `0 ${token.spacing.md}`,\n          ...(isThemeDark && { backgroundColor: token.color.black }),\n        },\n      })\n      .withChild(carousel)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('carousel-thumbnail-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({\n        resize: carousel.events.resize,\n        load: carousel.events.load,\n      })\n      .build();\n\n    declarationModel.styles += blocksStyles;\n\n    return declarationModel;\n  })();\n"],"names":["carouselElements.blocks","carouselElements.buttonColorsOnBlack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,mCAAmC,CAC9C,WAEC,MAAM;AACL,QAAM,EAAE,QAAQ,YAAA,IAAgB;AAChC,QAAM,QAAQ,IAAI,iBAAiB,QAAQ;AAE3C,QAAM,eAAe,CAAC,EAAE,YACtB,IAAI,eAAA,EACD,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,MAAM,KAAK,KAAK;AAAA,MAC3C,GAAI,eAAe,EAAE,QAAQ,aAAa,MAAM,MAAM,KAAK,IAAI,GAAA;AAAA,MAC/D,YAAY;AAAA,MACZ,SAAS,MAAM,QAAQ;AAAA,MACvB,iBAAiB;AAAA,QACf,YAAY,aAAa,MAAM,MAAM,KAAK,KAAK;AAAA,QAC/C,GAAI,eAAe,EAAE,YAAY,aAAa,MAAM,MAAM,KAAK,IAAI,GAAA;AAAA,MAAG;AAAA,IACxE;AAAA,EACF,CACD,EACA,UAAU,KAAK,EACf,MAAA;AAEL,QAAM,sBAAsB,OAAO,IAAI,CAAC,UAAU,aAAa,EAAE,MAAA,CAAO,CAAC;AACzE,QAAM,gBAAgB,oBAAoB,IAAI,CAAC,UAAU,MAAM,OAAO;AACtE,QAAM,eAAe,oBAAoB,CAAC,IAAI,oBAAoB,CAAC,EAAE,SAAS;AAE9E,QAAM,WAAWA,8BAAwB,cAAc;AAAA,IACrD,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB,MAAM,MAAM,iBAAiB,OAAO;AAAA,IACtD,kBAAkB,MAAM,MAAM,iBAAiB,QAAQ;AAAA,IACvD,mBAAmB,MAAM,MAAM,iBAAiB,QAAQ;AAAA,IACxD,cAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,QAAQ;AAAA,MACN,cAAc,MAAM,QAAQ;AAAA,MAC5B,GAAI,eAAeC,oBAAiB;AAAA,IAAoB;AAAA,EAC1D,CACD;AAED,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS,KAAK,MAAM,QAAQ,EAAE;AAAA,MAC9B,GAAI,eAAe,EAAE,iBAAiB,MAAM,MAAM,MAAA;AAAA,IAAM;AAAA,EAC1D,CACD,EACA,UAAU,QAAQ,EAClB,MAAA;AAEH,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,gCAAgC,EAC9C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,IAAA;AAAA,EACjB,CACD,EACA,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,QAAQ,SAAS,OAAO;AAAA,IACxB,MAAM,SAAS,OAAO;AAAA,EAAA,CACvB,EACA,MAAA;AAEH,mBAAiB,UAAU;AAE3B,SAAO;AACT,GAAA;"}

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

@@ -1,23 +1,24 @@
 import { CarouselWideProps } from '../_types';
-export declare const createContainer: (props: CarouselWideProps, onIndicatorClick?: (index: number) => void) => import('./_elementModel').ElementWithRefsReturn<{
-    indicator: {
-        position: (index: number) => void;
-        element: HTMLElement;
-        styles: string;
-        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
-        destroy?: () => void;
-        events?: Record<string, Function>;
+export declare const createContainer: (props: CarouselWideProps, onIndicatorClick?: (index: number) => void) => {
+    element: HTMLElement;
+    styles: string;
+    refs: {
+        indicator: {
+            element: HTMLElement;
+            styles: string;
+            position: (index: number) => void;
+        };
+        slidesContainer: HTMLDivElement;
+        slides: HTMLElement[];
+        previews: {
+            left: HTMLElement;
+            right: HTMLElement;
+        };
+        controls: {
+            prev: HTMLButtonElement;
+            next: HTMLButtonElement;
+        };
+        info: HTMLParagraphElement;
     };
-    slidesContainer: HTMLDivElement;
-    slides: HTMLElement[];
-    previews: {
-        left: HTMLElement;
-        right: HTMLElement;
-    };
-    controls: {
-        prev: HTMLButtonElement;
-        next: HTMLButtonElement;
-    };
-    info: HTMLParagraphElement;
-}>;
+};
 //# sourceMappingURL=container.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAuBnD,eAAO,MAAM,eAAe,GAC1B,OAAO,iBAAiB,EACxB,mBAAmB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;UAuBhB,oBAAoB;EAK/C,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAsBnD,eAAO,MAAM,eAAe,GAC1B,OAAO,iBAAiB,EACxB,mBAAmB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;cAgEhB,oBAAoB;;CAK/C,CAAC"}

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

@@ -1,9 +1,9 @@
+import * as token from "@universityofmaryland/web-token-library";
 import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { createIndicator } from "./controls.js";
 import { createFramesContainer } from "./frames.js";
-import { createElementWithRefs } from "./_elementModel.js";
 const createAriaLive = () => {
-  const liveText = new ElementBuilder("p").withClassName("umd-carousel-wide__aria-live").withAttribute("aria-live", "polite").withStyles({
+  const liveText = new ElementBuilder("p").withClassName("umd-carousel-wide__aria-live").withClassName("sr-only").withAttribute("aria-live", "polite").withStyles({
     element: {
       position: "absolute",
       left: "-10000px",
@@ -12,7 +12,6 @@ const createAriaLive = () => {
       overflow: "hidden"
     }
   }).withText("Slide 1 Selected").build();
-  liveText.element.classList.add("sr-only");
   return liveText;
 };
 const createContainer = (props, onIndicatorClick) => {
@@ -26,20 +25,46 @@ const createContainer = (props, onIndicatorClick) => {
     props.isThemeDark,
     onIndicatorClick
   );
-  return createElementWithRefs({
-    className: "umd-carousel-wide__container",
-    children: [info, framesContainer, indicatorWrapper],
-    elementStyles: {
-      element: {
-        position: "relative"
+  const buttonWrapperModel = new ElementBuilder().withClassName("umd-carousel-wide__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(framesContainer.buttons.prev, framesContainer.buttons.next).build();
+  const indicatorModel = new ElementBuilder().withClassName("umd-carousel-wide__indicator").withStyles({
+    element: {
+      width: "100%"
+    }
+  }).withChild(indicatorWrapper).build();
+  const model = new ElementBuilder().withClassName("umd-carousel-wide__container").withStyles({
+    element: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      [`@media (${token.media.queries.desktop.min})`]: {
+        display: "block"
+      }
+    }
+  }).withChildren(info, framesContainer, indicatorModel, buttonWrapperModel).build();
+  return {
+    element: model.element,
+    styles: model.styles,
     refs: {
       info: info.element,
       ...framesContainer.refs,
-      indicator: indicatorWrapper.refs.indicator
+      indicator: indicatorWrapper
     }
-  });
+  };
 };
 export {
   createContainer

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

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = new ElementBuilder('p')\n    .withClassName('umd-carousel-wide__aria-live')\n    .withAttribute('aria-live', 'polite')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    })\n    .withText('Slide 1 Selected')\n    .build();\n\n  liveText.element.classList.add('sr-only');\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__container',\n    children: [info, framesContainer, indicatorWrapper],\n    elementStyles: {\n      element: {\n        position: 'relative',\n      },\n    },\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper.refs.indicator,\n    },\n  });\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAW,IAAI,eAAe,GAAG,EACpC,cAAc,8BAA8B,EAC5C,cAAc,aAAa,QAAQ,EACnC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,SAAS,kBAAkB,EAC3B,MAAA;AAEH,WAAS,QAAQ,UAAU,IAAI,SAAS;AAExC,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,iBAAiB,gBAAgB;AAAA,IAClD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW,iBAAiB,KAAK;AAAA,IAAA;AAAA,EACnC,CACD;AACH;"}
+{"version":3,"file":"container.js","sources":["../../../../source/composite/carousel/wide/container.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { createIndicator } from './controls';\nimport { createFramesContainer } from './frames';\nimport { type CarouselWideProps } from '../_types';\n\nconst createAriaLive = () => {\n  const liveText = new ElementBuilder('p')\n    .withClassName('umd-carousel-wide__aria-live')\n    .withClassName('sr-only')\n    .withAttribute('aria-live', 'polite')\n    .withStyles({\n      element: {\n        position: 'absolute',\n        left: '-10000px',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\n      },\n    })\n    .withText('Slide 1 Selected')\n    .build();\n\n  return liveText;\n};\n\nexport const createContainer = (\n  props: CarouselWideProps,\n  onIndicatorClick?: (index: number) => void,\n) => {\n  const info = createAriaLive();\n  const framesContainer = createFramesContainer(\n    props.slides,\n    props.isThemeDark,\n  );\n\n  const indicatorWrapper = createIndicator(\n    props.slides,\n    props.isThemeDark,\n    onIndicatorClick,\n  );\n\n  const buttonWrapperModel = new ElementBuilder()\n    .withClassName('umd-carousel-wide__buttons')\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        gap: token.spacing.min,\n        width: '100%',\n        marginTop: token.spacing.md,\n        marginBottom: token.spacing.md,\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: 'auto',\n          marginTop: 0,\n          marginBottom: 0,\n        },\n      },\n    })\n    .withChildren(framesContainer.buttons.prev, framesContainer.buttons.next)\n    .build();\n\n  const indicatorModel = new ElementBuilder()\n    .withClassName('umd-carousel-wide__indicator')\n    .withStyles({\n      element: {\n        width: '100%',\n      },\n    })\n    .withChild(indicatorWrapper)\n    .build();\n\n  const model = new ElementBuilder()\n    .withClassName('umd-carousel-wide__container')\n    .withStyles({\n      element: {\n        position: 'relative',\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'center',\n        [`@media (${token.media.queries.desktop.min})`]: {\n          display: 'block',\n        },\n      },\n    })\n    .withChildren(info, framesContainer, indicatorModel, buttonWrapperModel)\n    .build();\n\n  return {\n    element: model.element,\n    styles: model.styles,\n    refs: {\n      info: info.element as HTMLParagraphElement,\n      ...framesContainer.refs,\n      indicator: indicatorWrapper,\n    },\n  };\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,iBAAiB,MAAM;AAC3B,QAAM,WAAW,IAAI,eAAe,GAAG,EACpC,cAAc,8BAA8B,EAC5C,cAAc,SAAS,EACvB,cAAc,aAAa,QAAQ,EACnC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,SAAS,kBAAkB,EAC3B,MAAA;AAEH,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,OACA,qBACG;AACH,QAAM,OAAO,eAAA;AACb,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EAAA;AAGF,QAAM,qBAAqB,IAAI,eAAA,EAC5B,cAAc,4BAA4B,EAC1C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,KAAK,MAAM,QAAQ;AAAA,MACnB,OAAO;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,MACzB,cAAc,MAAM,QAAQ;AAAA,MAC5B,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF,CACD,EACA,aAAa,gBAAgB,QAAQ,MAAM,gBAAgB,QAAQ,IAAI,EACvE,MAAA;AAEH,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT,CACD,EACA,UAAU,gBAAgB,EAC1B,MAAA;AAEH,QAAM,QAAQ,IAAI,eAAA,EACf,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD,EACA,aAAa,MAAM,iBAAiB,gBAAgB,kBAAkB,EACtE,MAAA;AAEH,SAAO;AAAA,IACL,SAAS,MAAM;AAAA,IACf,QAAQ,MAAM;AAAA,IACd,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,GAAG,gBAAgB;AAAA,MACnB,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;"}

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

@@ -1,13 +1,8 @@
 import { CarouselWideProps } from '../_types';
 export declare const createControlButton: (type: "prev" | "next", isThemeDark?: boolean) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
-export declare const createIndicator: (slides: CarouselWideProps["slides"], isThemeDark?: boolean, callback?: (index: number) => void) => import('./_elementModel').ElementWithRefsReturn<{
-    indicator: {
-        position: (index: number) => void;
-        element: HTMLElement;
-        styles: string;
-        update?: (props: Partial<import('../../../../builder/dist/index.d.ts').BuilderOptions>) => void;
-        destroy?: () => void;
-        events?: Record<string, Function>;
-    };
-}>;
+export declare const createIndicator: (slides: CarouselWideProps["slides"], isThemeDark?: boolean, callback?: (index: number) => void) => {
+    element: HTMLElement;
+    styles: string;
+    position: (index: number) => void;
+};
 //# sourceMappingURL=controls.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/controls.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,MAAM,EACrB,cAAc,OAAO,kFAkFtB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO,EACrB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;EA4BnC,CAAC"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/controls.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,MAAM,EACrB,cAAc,OAAO,kFAyCtB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO,EACrB,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;CAQnC,CAAC"}

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

@@ -1,117 +1,47 @@
-import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import * as token from "@universityofmaryland/web-token-library";
-import { arrow_left } from "@universityofmaryland/web-icons-library/arrows";
-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 { createAnimationIndicator } from "../../../atomic/animations/actions/indicator.js";
-import "../../../atomic/animations/brand/chevron-scroll.js";
-import "../../../atomic/animations/brand/card-stack.js";
-import "@universityofmaryland/web-styles-library";
-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 "@universityofmaryland/web-utilities-library/theme";
-import "../../../atomic/layout/block/stacked.js";
-import "../../../atomic/layout/overlay/modal.js";
-import "../../../atomic/layout/person/columns.js";
-import "@universityofmaryland/web-icons-library/social";
-import "../../../atomic/text-lockup/date.js";
-import "../../../atomic/text-lockup/small.js";
-import { createElementWithRefs } from "./_elementModel.js";
+import { createCarouselIndicatorWrapper } from "../elements/indicator-wrapper.js";
+import { createCarouselNavButton, buttonColorsOnWhite } from "../elements/nav-button.js";
 const createControlButton = (type, isThemeDark) => {
   const isPrev = type === "prev";
-  const altText = isPrev ? "Reverse to the previous Slide" : "Advanced to the Next Slide";
-  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;
+  `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;
   const buttonDesktopPosition = `calc(15vw - (${token.spacing["xl"]} + ${token.spacing.md}))`;
   const buttonHighPosition = `calc(20vw - (${token.spacing["xl"]} + ${token.spacing.md}))`;
-  const srText = new ElementBuilder("span").withClassName("sr-only").withText(altText).build();
-  const button = new ElementBuilder("button").withClassName(
-    isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next"
-  ).withStyles({
+  return createCarouselNavButton({
+    className: isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next",
+    direction: type,
+    label: isPrev ? "Go to previous slide" : "Go to next slide"
+  }).withStyles({
     element: {
-      backgroundColor: isThemeDark ? token.color.red : token.color.white,
-      height: token.spacing.lg,
       padding: token.spacing.min,
-      position: "absolute",
-      transform: `${isPrev ? " rotate(180deg)" : ""}`,
+      position: "relative",
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      right: "auto",
       zIndex: 3,
       transition: "background 0.5s",
-      width: token.spacing.lg,
-      [`@media (${token.media.queries.large.max})`]: {
-        top: `calc(22vw + ${token.spacing.sm})`,
-        left: isPrev ? "auto" : `${token.spacing["xl"]}`,
-        right: isPrev ? `${token.spacing["xl"]}` : "auto"
-      },
-      [`@media (${token.media.queries.tablet.min})`]: {
-        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
-        left: isPrev ? "auto" : buttonTabletPosition,
-        right: isPrev ? buttonTabletPosition : "auto",
-        bottom: "35%"
-      },
+      ...buttonColorsOnWhite(isThemeDark),
       [`@media (${token.media.queries.desktop.min})`]: {
-        width: token.spacing["2xl"],
-        height: token.spacing["2xl"],
+        position: "absolute",
+        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
         padding: token.spacing.xs,
-        left: isPrev ? "auto" : buttonDesktopPosition,
-        right: isPrev ? buttonDesktopPosition : "auto"
+        left: isPrev ? buttonDesktopPosition : "auto",
+        right: isPrev ? "auto" : buttonDesktopPosition,
+        bottom: "35%"
       },
       [`@media (${token.media.queries.highDef.min})`]: {
-        left: isPrev ? "auto" : buttonHighPosition,
-        right: isPrev ? buttonHighPosition : "auto"
-      },
-      "& svg": {
-        height: "100%",
-        width: "100%",
-        fill: isThemeDark ? token.color.white : token.color.black,
-        transition: "fill 0.5s"
-      },
-      "&:hover, &:focus": {
-        backgroundColor: isThemeDark ? token.color.redDark : token.color.red,
-        "& svg": {
-          fill: token.color.white
-        }
+        left: isPrev ? buttonHighPosition : "auto",
+        right: isPrev ? "auto" : buttonHighPosition
       }
     }
-  }).withModifier((el) => {
-    el.append(srText.element);
-    el.insertAdjacentHTML("afterbegin", arrow_left);
   }).build();
-  return button;
 };
 const createIndicator = (slides, isThemeDark, callback) => {
-  const indicator = createAnimationIndicator({
+  return createCarouselIndicatorWrapper({
     count: slides.length,
     isThemeDark,
-    callback: callback || (() => {
-    })
-  });
-  return createElementWithRefs({
-    className: "umd-carousel-wide__drawer",
-    children: [indicator],
-    elementStyles: {
-      element: {
-        display: "flex",
-        justifyContent: "center",
-        margin: "auto",
-        padding: token.spacing.md,
-        [`@media (${token.media.queries.tablet.min})`]: {
-          padding: 0,
-          paddingTop: token.spacing.lg
-        }
-      }
-    },
-    refs: {
-      indicator
-    }
+    isBackground: false,
+    callback
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { arrow_left as iconArrowLeft } from '@universityofmaryland/web-icons-library/arrows';\nimport { animations } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n\n  const srText = new ElementBuilder('span')\n    .withClassName('sr-only')\n    .withText(altText)\n    .build();\n\n  const button = new ElementBuilder('button')\n    .withClassName(\n      isPrev\n        ? 'umd-carousel-wide__control--prev'\n        : 'umd-carousel-wide__control--next',\n    )\n    .withStyles({\n      element: {\n        backgroundColor: isThemeDark ? token.color.red : token.color.white,\n        height: token.spacing.lg,\n        padding: token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: token.spacing.lg,\n\n        [`@media (${token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${token.spacing['xl']}`,\n          right: isPrev ? `${token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n          padding: token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark ? token.color.white : token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,\n\n          '& svg': {\n            fill: token.color.white,\n          },\n        },\n      },\n    })\n    .withModifier((el) => {\n      el.append(srText.element);\n      el.insertAdjacentHTML('afterbegin', iconArrowLeft);\n    })\n    .build();\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: token.spacing.md,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["iconArrowLeft","animations.actions.indicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,sBAAsB,CACjC,MACA,gBACG;AACH,QAAM,SAAS,SAAS;AACxB,QAAM,UAAU,SACZ,kCACA;AAEJ,QAAM,uBAAuB,gBAAgB,MAAM,QAAQ,EAAE,MAAM,MAAM,QAAQ,EAAE;AACnF,QAAM,wBAAwB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AACvF,QAAM,qBAAqB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AAEpF,QAAM,SAAS,IAAI,eAAe,MAAM,EACrC,cAAc,SAAS,EACvB,SAAS,OAAO,EAChB,MAAA;AAEH,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC;AAAA,IACC,SACI,qCACA;AAAA,EAAA,EAEL,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB,cAAc,MAAM,MAAM,MAAM,MAAM,MAAM;AAAA,MAC7D,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAS,MAAM,QAAQ;AAAA,MACvB,UAAU;AAAA,MACV,WAAW,GAAG,SAAS,oBAAoB,EAAE;AAAA,MAC7C,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,MAAM,QAAQ;AAAA,MAErB,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QAC7C,KAAK,eAAe,MAAM,QAAQ,EAAE;AAAA,QACpC,MAAM,SAAS,SAAS,GAAG,MAAM,QAAQ,IAAI,CAAC;AAAA,QAC9C,OAAO,SAAS,GAAG,MAAM,QAAQ,IAAI,CAAC,KAAK;AAAA,MAAA;AAAA,MAG7C,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,WAAW;AAAA,QACX,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,uBAAuB;AAAA,QACvC,QAAQ;AAAA,MAAA;AAAA,MAGV,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,OAAO,MAAM,QAAQ,KAAK;AAAA,QAC1B,QAAQ,MAAM,QAAQ,KAAK;AAAA,QAC3B,SAAS,MAAM,QAAQ;AAAA,QACvB,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,wBAAwB;AAAA,MAAA;AAAA,MAG1C,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,qBAAqB;AAAA,MAAA;AAAA,MAGvC,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM,cAAc,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA,QACpD,YAAY;AAAA,MAAA;AAAA,MAGd,oBAAoB;AAAA,QAClB,iBAAiB,cAAc,MAAM,MAAM,UAAU,MAAM,MAAM;AAAA,QAEjE,SAAS;AAAA,UACP,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,CAAC,OAAO;AACpB,OAAG,OAAO,OAAO,OAAO;AACxB,OAAG,mBAAmB,cAAcA,UAAa;AAAA,EACnD,CAAC,EACA,MAAA;AAEH,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,QACA,aACA,aACG;AACH,QAAM,YAAYC,yBAA6B;AAAA,IAC7C,OAAO,OAAO;AAAA,IACd;AAAA,IACA,UAAU,aAAa,MAAM;AAAA,IAAC;AAAA,EAAA,CAC/B;AAED,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAAC,SAAS;AAAA,IACpB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,SAAS,MAAM,QAAQ;AAAA,QAEvB,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAC9C,SAAS;AAAA,UACT,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,IAEF,MAAM;AAAA,MACJ;AAAA,IAAA;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"controls.js","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createCarouselIndicatorWrapper } from '../elements/indicator-wrapper';\nimport { createCarouselNavButton, buttonColorsOnWhite } from '../elements/nav-button';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  return createCarouselNavButton({\n    className: isPrev ? 'umd-carousel-wide__control--prev' : 'umd-carousel-wide__control--next',\n    direction: type,\n    label: isPrev ? 'Go to previous slide' : 'Go to next slide',\n  })\n    .withStyles({\n      element: {\n        padding: token.spacing.min,\n        position: 'relative',\n        top: 'auto',\n        bottom: 'auto',\n        left: 'auto',\n        right: 'auto',\n        zIndex: 3,\n        transition: 'background 0.5s',\n        ...buttonColorsOnWhite(isThemeDark),\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          position: 'absolute',\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          padding: token.spacing.xs,\n          left: isPrev ? buttonDesktopPosition : 'auto',\n          right: isPrev ? 'auto' : buttonDesktopPosition,\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? buttonHighPosition : 'auto',\n          right: isPrev ? 'auto' : buttonHighPosition,\n        },\n\n\n      },\n    })\n    .build();\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  return createCarouselIndicatorWrapper({\n    count: slides.length,\n    isThemeDark,\n    isBackground: false,\n    callback,\n  });\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,sBAAsB,CACjC,MACA,gBACG;AACH,QAAM,SAAS,SAAS;AACK,kBAAgB,MAAM,QAAQ,EAAE,MAAM,MAAM,QAAQ,EAAE;AACnF,QAAM,wBAAwB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AACvF,QAAM,qBAAqB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AACpF,SAAO,wBAAwB;AAAA,IAC7B,WAAW,SAAS,qCAAqC;AAAA,IACzD,WAAW;AAAA,IACX,OAAO,SAAS,yBAAyB;AAAA,EAAA,CAC1C,EACE,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS,MAAM,QAAQ;AAAA,MACvB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,GAAG,oBAAoB,WAAW;AAAA,MAElC,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ;AAAA,QACvB,MAAM,SAAS,wBAAwB;AAAA,QACvC,OAAO,SAAS,SAAS;AAAA,QACzB,QAAQ;AAAA,MAAA;AAAA,MAGV,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,MAAM,SAAS,qBAAqB;AAAA,QACpC,OAAO,SAAS,SAAS;AAAA,MAAA;AAAA,IAC3B;AAAA,EAGF,CACD,EACA,MAAA;AACL;AAEO,MAAM,kBAAkB,CAC7B,QACA,aACA,aACG;AACH,SAAO,+BAA+B;AAAA,IACpC,OAAO,OAAO;AAAA,IACd;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EAAA,CACD;AACH;"}

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

@@ -1,14 +1,22 @@
 import { CarouselWideProps } from '../_types';
-export declare const createFramesContainer: (slides: CarouselWideProps["slides"], isThemeDark?: boolean) => import('./_elementModel').ElementWithRefsReturn<{
-    slidesContainer: HTMLDivElement;
-    slides: HTMLElement[];
-    previews: {
-        left: HTMLElement;
-        right: HTMLElement;
+export declare const createFramesContainer: (slides: CarouselWideProps["slides"], isThemeDark?: boolean) => {
+    element: HTMLElement;
+    styles: string;
+    buttons: {
+        prev: import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+        next: import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
     };
-    controls: {
-        prev: HTMLButtonElement;
-        next: HTMLButtonElement;
+    refs: {
+        slidesContainer: HTMLDivElement;
+        slides: HTMLElement[];
+        previews: {
+            left: HTMLElement;
+            right: HTMLElement;
+        };
+        controls: {
+            prev: HTMLButtonElement;
+            next: HTMLButtonElement;
+        };
     };
-}>;
+};
 //# sourceMappingURL=frames.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/frames.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AA2SnD,eAAO,MAAM,qBAAqB,GAChC,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO;qBA4CmC,cAAc;;;cAGnC,WAAW;eACT,WAAW;;;cAGV,iBAAiB;cACrB,iBAAiB;;EAIpD,CAAC"}
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/frames.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAuRnD,eAAO,MAAM,qBAAqB,GAChC,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO;;;;;;;;yBA+CyB,cAAc;;;kBAGzB,WAAW;mBACT,WAAW;;;kBAGV,iBAAiB;kBACrB,iBAAiB;;;CAIpD,CAAC"}