@universityofmaryland/web-elements-library 1.6.14 → 1.6.16

package/README.md

@@ -1,6 +1,6 @@
 # University of Maryland Web Elements Library
 
-[![Elements Version](https://img.shields.io/badge/Elements-v1.6.14-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
+[![Elements Version](https://img.shields.io/badge/Elements-v1.6.16-blue)](https://www.npmjs.com/package/@universityofmaryland/web-elements-library)
 
 Foundational UI building blocks for the UMD Design System, providing atomic elements that combine to create complex, accessible, and brand-compliant University of Maryland digital experiences.
 

package/dist/composite/navigation/elements/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAsD,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAE1G,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,GAAG;IAClE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,sBAAsB,GAAG,yBAAyB,GACrD,qBAAqB,GACrB,iCAAiC,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC;AAwMrD,eAAO,MAAM,+BAA+B;2BA7FL,yBAAyB;;;;;;;CAgG/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAEL,yBAAyB,EAC1B,MAAM,WAAW,CAAC;AAGnB,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,GAAG;IAClE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,sBAAsB,GAAG,yBAAyB,GACrD,qBAAqB,GACrB,iCAAiC,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,sBAAsB,CAAC;AAmNrD,eAAO,MAAM,+BAA+B;2BA7FL,yBAAyB;;;;;;;CAgG/D,CAAC"}

package/dist/composite/navigation/elements/drawer/index.js

@@ -2,11 +2,19 @@ import * as token from "@universityofmaryland/web-token-library";
 import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
 import { close_large } from "@universityofmaryland/web-icons-library/controls";
 import { createCompositeNavigationSlider } from "../slider/index.js";
+import { createCompositeNavigationSlides } from "../slider/slides.js";
 const ANIMATION_TIME = 300;
 const ELEMENT_NAV_DRAWER_CONTAINER = "nav-drawer-container";
 const ELEMENT_NAV_DRAWER_OVERLAY = "nav-drawer-overlay";
 const ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = "nav-drawer-overlay-wrapper";
 const ELEMENT_NAV_DRAWER_CLOSE_BUTTON = "nav-drawer-close-button";
+const OVERWRITE_NAV_SLIDER_OVERFLOW = `.${createCompositeNavigationSlides.Elements.overflow}`;
+const slidesWrapper = `
+  ${OVERWRITE_NAV_SLIDER_OVERFLOW} {
+    overflow-y: scroll;
+    height: 100%;
+  }
+`;
 const DrawerButtonClose = `
   .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {
     background-color: ${token.color.red};
@@ -66,6 +74,7 @@ const STYLES_NAV_DRAWER_ELEMENT = `
   ${createCompositeNavigationSlider.Styles}
   ${DrawerButtonClose}
   ${DrawerContainer}
+  ${slidesWrapper}
 `;
 const CreateDrawerButton = (element) => {
   const drawerCloseButton = document.createElement("button");

package/dist/composite/navigation/elements/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport { createCompositeNavigationSlider as NavDrawerSlider, TypeNavSliderRequirements } from '../slider';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport const createCompositeNavigationDrawer = {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["NavDrawerSlider","iconCloseLarge"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/drawer/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { handleKeyboardNavigation } from '@universityofmaryland/web-utilities-library/events';\nimport { close_large as iconCloseLarge } from '@universityofmaryland/web-icons-library/controls';\nimport { TypeMenuDisplayButtonRequirements } from '../menu-button';\nimport {\n  createCompositeNavigationSlider as NavDrawerSlider,\n  TypeNavSliderRequirements,\n} from '../slider';\nimport { createCompositeNavigationSlides as NavDrawerSlides } from '../slider/slides';\n\nexport type TypeNavDrawerRequirements = TypeNavSliderRequirements & {\n  context?: HTMLElement;\n};\n\ntype TypeDrawerCloseButton = {\n  eventClose: () => void;\n};\n\ntype CombinedNavDrawerProps = TypeNavDrawerRequirements &\n  TypeDrawerCloseButton &\n  TypeMenuDisplayButtonRequirements;\n\nexport type TypeDrawerProps = CombinedNavDrawerProps;\n\nconst ANIMATION_TIME = 300;\n\nconst ELEMENT_NAV_DRAWER_CONTAINER = 'nav-drawer-container';\nconst ELEMENT_NAV_DRAWER_OVERLAY = 'nav-drawer-overlay';\nconst ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = 'nav-drawer-overlay-wrapper';\nconst ELEMENT_NAV_DRAWER_CLOSE_BUTTON = 'nav-drawer-close-button';\n\nconst OVERWRITE_NAV_SLIDER_OVERFLOW = `.${NavDrawerSlides.Elements.overflow}`;\n\n// prettier-ignore\nconst slidesWrapper = `\n  ${OVERWRITE_NAV_SLIDER_OVERFLOW} {\n    overflow-y: scroll;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst DrawerButtonClose = `\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {\n    background-color: ${token.color.red};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    padding: 12px;\n    transition: background .5s ease-in-out;\n    order: 2;\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {\n    background-color: ${token.color.redDark};\n  }\n\n  .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {\n    fill: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst DrawerContainer = `\n  .${ELEMENT_NAV_DRAWER_CONTAINER} {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    top: 0;\n    display: none;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY} {\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100vh;\n    width: 100vw;\n    background-color: rgba(0,0,0,0.5);\n    transition: opacity ${ANIMATION_TIME}ms ease-in-out;\n    cursor: pointer;\n    opacity: 0;\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} {\n    display: flex;\n    height: 100%;\n    transition: transform ${ANIMATION_TIME + 100}ms ease-in-out;\n    transform: translateX(-100%);\n  }\n\n  .${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER} > *:not(.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}) {\n    height: 100% !important;\n  }\n`;\n\nconst STYLES_NAV_DRAWER_ELEMENT = `\n  ${NavDrawerSlider.Styles}\n  ${DrawerButtonClose}\n  ${DrawerContainer}\n  ${slidesWrapper}\n`;\n\nconst CreateDrawerButton = (element: TypeDrawerCloseButton) => {\n  const drawerCloseButton = document.createElement('button');\n\n  drawerCloseButton.innerHTML = iconCloseLarge;\n  drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);\n  drawerCloseButton.setAttribute('aria-label', 'Close navigation drawer');\n  drawerCloseButton.addEventListener('click', element.eventClose.bind(element));\n\n  return drawerCloseButton;\n};\n\nconst CreateNavDrawerContainer = (props: TypeDrawerProps) => {\n  const { eventClose } = props;\n  const bodyOverlay = document.createElement('div');\n  const bodyOverlayWrapper = document.createElement('div');\n  const closeButton = CreateDrawerButton(props);\n  const slider = NavDrawerSlider.CreateElement({\n    ...props,\n    displayType: 'drawer-nav',\n  });\n\n  bodyOverlayWrapper.classList.add(ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER);\n\n  bodyOverlayWrapper.appendChild(closeButton);\n  bodyOverlayWrapper.appendChild(slider.container);\n\n  bodyOverlay.classList.add(ELEMENT_NAV_DRAWER_OVERLAY);\n  bodyOverlay.addEventListener('click', eventClose.bind(props));\n  bodyOverlay.appendChild(bodyOverlayWrapper);\n\n  return bodyOverlay;\n};\n\nconst CreateNavDrawerElement = (props: TypeNavDrawerRequirements) =>\n  (() => {\n    const { context, primarySlideLinks } = props;\n    const body = document.querySelector('body') as HTMLBodyElement;\n    const elementContainer = document.createElement('div');\n\n    if (!primarySlideLinks) return null;\n\n    const eventClose = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const slider = bodyOverlay.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n\n      bodyOverlay.style.opacity = '0';\n      bodyOverlayWrapper.style.transform = 'translateX(-100%)';\n\n      setTimeout(() => {\n        bodyOverlay.removeAttribute('style');\n        bodyOverlayWrapper.removeAttribute('style');\n        body.style.overflow = 'auto';\n        elementContainer.style.display = 'none';\n      }, ANIMATION_TIME + 100);\n\n      if (slider) {\n        slider.style.overflowY = `hidden`;\n      }\n    };\n\n    const eventOpen = () => {\n      const bodyOverlay = elementContainer.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY}`,\n      ) as HTMLDivElement;\n      const bodyOverlayWrapper = bodyOverlay.querySelector(\n        `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`,\n      ) as HTMLDivElement;\n      const closeButton = bodyOverlayWrapper.querySelector(\n        `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`,\n      ) as HTMLButtonElement;\n      const slider = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider}`,\n      ) as HTMLDivElement;\n      const activeSlide = bodyOverlayWrapper.querySelector(\n        `.${NavDrawerSlider.Elements.slider} div[data-active]`,\n      ) as HTMLDivElement;\n\n      elementContainer.style.display = 'block';\n      bodyOverlay.style.display = 'block';\n      bodyOverlayWrapper.style.display = 'flex';\n\n      setTimeout(() => {\n        bodyOverlay.style.opacity = '1';\n        bodyOverlayWrapper.style.transform = 'translateX(0)';\n        body.style.overflow = 'hidden';\n        closeButton.focus();\n\n        handleKeyboardNavigation({\n          element: elementContainer,\n          action: () => eventClose(),\n          shadowDomContext: context,\n        });\n      }, 100);\n\n      setTimeout(() => {\n        if (!activeSlide || !slider) return;\n        if (activeSlide.offsetHeight > elementContainer.offsetHeight) {\n          slider.style.overflowY = `scroll`;\n        }\n      }, 200);\n    };\n\n    const children = CreateNavDrawerContainer({\n      ...props,\n      eventOpen,\n      eventClose,\n    });\n\n    elementContainer.classList.add(ELEMENT_NAV_DRAWER_CONTAINER);\n    elementContainer.appendChild(children);\n\n    return {\n      element: elementContainer,\n      events: {\n        eventOpen,\n      },\n    };\n  })();\n\nexport const createCompositeNavigationDrawer = {\n  CreateElement: CreateNavDrawerElement,\n  Styles: STYLES_NAV_DRAWER_ELEMENT,\n};\n"],"names":["NavDrawerSlides","NavDrawerSlider","iconCloseLarge"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,cAAc,EACf,MAAM,UAAU,CAAC;AAIlB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,yBAAyB,CAAC;AAuU7E,eAAO,MAAM,+BAA+B;2BAjKL,yBAAyB;;;;;;;;;;CAuK/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,cAAc,EACf,MAAM,UAAU,CAAC;AAIlB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,yBAAyB,CAAC;AAiV7E,eAAO,MAAM,+BAA+B;2BA3KL,yBAAyB;;;;;;;;;;CAiL/D,CAAC"}

package/dist/composite/navigation/elements/slider/index.js

@@ -179,47 +179,52 @@ const CreateNavSliderElement = (props) => (() => {
     }, ANIMATION_TIME);
   };
   const eventSlide = ({ isRight = false }) => {
+    if (isAnimating) return;
     const activeSlide = elementContainer.querySelector(
       `[${ATTRIBUTE_ACTIVE_SLIDE}]`
     );
     const upcomingSlide = isRight ? getUpcomingSlideParent() : getUpcomingSlide();
-    const slides = [activeSlide, upcomingSlide];
     if (!upcomingSlide) {
       console.error("Missing slide for slide event");
       return null;
     }
+    if (!activeSlide) throw new Error("Missing slide for slide event");
+    const slides = [activeSlide, upcomingSlide];
     const firstLink = upcomingSlide.querySelector("a");
-    const animate = () => {
-      let startPositionForUpcomingSlide = "100%";
-      let transitionPosition = "-100%";
-      if (isRight) {
-        startPositionForUpcomingSlide = "-100%";
-        transitionPosition = "100%";
-      }
-      upcomingSlide.style.left = startPositionForUpcomingSlide;
-      upcomingSlide.style.display = "block";
-      setTimeout(() => {
-        slides.forEach((slide) => {
-          slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;
-          slide.style.transform = `translateX(${transitionPosition})`;
-        });
-        setCurrentSlide({ element: upcomingSlide, withTransition: true });
-      }, 100);
-      setTimeout(() => {
-        slides.forEach((slide) => {
-          slide.style.transition = "none";
-          slide.style.transform = "translateX(0)";
-          slide.style.left = "0";
-          slide.removeAttribute("style");
-        });
-        upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
-        activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
-        if (firstLink) firstLink.focus();
-      }, ANIMATION_TIME + 100);
+    const startPositionForUpcomingSlide = isRight ? "-100%" : "100%";
+    const transitionPosition = isRight ? "100%" : "-100%";
+    isAnimating = true;
+    upcomingSlide.style.left = startPositionForUpcomingSlide;
+    upcomingSlide.style.display = "block";
+    let rafId = requestAnimationFrame(() => {
+      rafId = null;
+      slides.forEach((slide) => {
+        slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;
+        slide.style.transform = `translateX(${transitionPosition})`;
+      });
+      setCurrentSlide({ element: upcomingSlide, withTransition: true });
+    });
+    let cleanedUp = false;
+    const cleanup = () => {
+      if (cleanedUp) return;
+      cleanedUp = true;
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      activeSlide.removeEventListener("transitionend", onTransitionEnd);
+      upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, "");
+      activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);
+      slides.forEach((slide) => {
+        slide.removeAttribute("style");
+      });
+      if (firstLink) firstLink.focus({ preventScroll: true });
+      isAnimating = false;
+    };
+    const onTransitionEnd = (event) => {
+      if (event.target !== activeSlide) return;
+      if (event.propertyName !== "transform") return;
+      cleanup();
     };
-    if (!upcomingSlide || !activeSlide)
-      throw new Error("Missing slide for slide event");
-    animate();
+    activeSlide.addEventListener("transitionend", onTransitionEnd);
+    setTimeout(cleanup, ANIMATION_TIME + 100);
     if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {
       setTimeout(() => {
         upcomingSlide.style.overflowY = `scroll`;
@@ -249,6 +254,7 @@ const CreateNavSliderElement = (props) => (() => {
   const GetContainer = () => elementContainer;
   let upcomingSlideRef = null;
   let currentSlide = null;
+  let isAnimating = false;
   const children = CreateChildrenElements({
     ...props,
     GetContainer,

package/dist/composite/navigation/elements/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createCompositeNavigationSlides as Slides,\n  TypeSlideProps,\n} from './slides';\nimport { createCompositeNavigationSliderFirst as SlideFirst } from './slide-first';\nimport { createCompositeNavigationSliderAction as SlideAction } from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n      const slides = [activeSlide, upcomingSlide];\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n\n      const animate = () => {\n        let startPositionForUpcomingSlide = '100%';\n        let transitionPosition = '-100%';\n\n        if (isRight) {\n          startPositionForUpcomingSlide = '-100%';\n          transitionPosition = '100%';\n        }\n\n        upcomingSlide.style.left = startPositionForUpcomingSlide;\n        upcomingSlide.style.display = 'block';\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n            slide.style.transform = `translateX(${transitionPosition})`;\n          });\n          setCurrentSlide({ element: upcomingSlide, withTransition: true });\n        }, 100);\n\n        setTimeout(() => {\n          slides.forEach((slide) => {\n            slide.style.transition = 'none';\n            slide.style.transform = 'translateX(0)';\n            slide.style.left = '0';\n            slide.removeAttribute('style');\n          });\n\n          upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n          activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n          if (firstLink) firstLink.focus();\n        }, ANIMATION_TIME + 100);\n      };\n\n      if (!upcomingSlide || !activeSlide)\n        throw new Error('Missing slide for slide event');\n\n      animate();\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport const createCompositeNavigationSlider = {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["Slides","SlideAction","SlideFirst","children"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/slider/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { findParent } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createCompositeNavigationSlides as Slides,\n  TypeSlideProps,\n} from './slides';\nimport { createCompositeNavigationSliderFirst as SlideFirst } from './slide-first';\nimport { createCompositeNavigationSliderAction as SlideAction } from './action';\n\ntype TypeSubElements = TypeSlideProps;\n\nexport type TypeNavSliderRequirements = {\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  childrenSlides?: HTMLElement | null;\n  childrenSlideContent?: HTMLSlotElement[];\n  displayType?: string;\n};\n\nexport type TypeNavSliderProps = TypeSubElements & TypeNavSliderRequirements;\n\nconst ANIMATION_TIME = 300;\nconst ATTRIBUTE_CHILD_REF = 'data-child-ref';\nconst ATTRIBUTE_PARENT_REF = 'data-parent-ref';\nconst ATTRIBUTE_ACTIVE_SLIDE = 'data-active';\nconst ATTRIBUTE_ACTIVE_SELECTED = 'data-selected';\nconst ATTRIBUTE_DATA_SLIDE = 'data-slide';\nconst ATTRIBUTE_DISPLAY_TYPE = 'display-type';\n\nconst DISPLAY_TYPE_DRAWER = 'drawer-nav';\nconst DISPLAY_TYPE_INTERIOR_NAV = 'interior-nav';\n\nconst ELEMENT_NAVIGATION_SLIDER_CONTAINER = 'navigation-slider-container';\nconst ELEMENT_NAVIGATION_SLIDER = 'navigation-slider';\nconst ELEMENT_SLIDER_DECORATIVE_LINE = 'navigation-slider-decorative-line';\n\nconst IS_DISPLAY_DRAWER = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_DRAWER}]`;\nconst IS_DISPLAY_INTERIOR = `[${ATTRIBUTE_DISPLAY_TYPE}=${DISPLAY_TYPE_INTERIOR_NAV}]`;\n\nconst OVERWRITE_DISPLAY_DRAWER_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER}`;\nconst OVERWRITE_DISPLAY_DRAWER_DECORATION = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${ELEMENT_SLIDER_DECORATIVE_LINE}`;\nconst OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${Slides.Elements.wrapper}`;\nconst OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_DRAWER} .${SlideAction.Elements.container}`;\n\nconst OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${SlideFirst.Elements.secondaryContainer} .${SlideAction.Elements.container}`;\nconst OVERWRITE_DISPLAY_INTERIOR_HEADLINE = `.${ELEMENT_NAVIGATION_SLIDER_CONTAINER}${IS_DISPLAY_INTERIOR} .${Slides.Elements.headline}`;\n\n// prettier-ignore\nconst OverwriteDisplayDrawer = `\n  ${OVERWRITE_DISPLAY_DRAWER_CONTAINER} {\n    background-color: ${token.color.white};\n    padding: ${token.spacing['2xl']} 0;\n    width: calc(100vw - ${token.spacing['8xl']});\n    max-width: 400px;\n    min-width: 227px;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_SLIDE_WRAPPER} {\n    padding: 0 ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_DECORATION} {\n    display: block;\n  }\n\n  ${OVERWRITE_DISPLAY_DRAWER_ACTION_CONTAINER} {\n    padding-left: ${token.spacing.sm};\n  }\n`;\n\n// prettier-ignore\nconst OverwriteDisplayInterior = `\n  ${OVERWRITE_DISPLAY_INTERIOR_ACTION_CONTAINER} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_SECONDARY_CONTAINER}:last-child {\n    margin-bottom: 0;\n  }\n\n  ${OVERWRITE_DISPLAY_INTERIOR_HEADLINE} {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n    margin-bottom: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst DecorativeLineStyles = `\n  .${ELEMENT_SLIDER_DECORATIVE_LINE} {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 8px;\n    background-color: ${token.color.red};\n    display: none;\n  }\n`;\n\n// prettier-ignore\nconst SliderStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER} {\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: ${token.color.white};\n    display: none;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER} > *[${ATTRIBUTE_ACTIVE_SLIDE}] {\n    display: block;\n  }\n`;\n\nconst SelectedLinkStyles = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] {\n    position: relative;\n  }\n\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} a[${ATTRIBUTE_ACTIVE_SELECTED}] span {\n    display: inline;\n    position: relative;\n    background-position: left calc(100% - 0px);\n    background-repeat: no-repeat;\n    background-size: 100% 2.5px;\n    background-image: linear-gradient(#ffd200, #ffd200);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDER_ELEMENT = `\n  .${ELEMENT_NAVIGATION_SLIDER_CONTAINER} {\n    position: relative;\n    height: 100%;\n    cursor: default;\n  }\n\n  ${Slides.Styles}\n  ${DecorativeLineStyles}\n  ${SliderStyles}\n  ${SelectedLinkStyles}\n  ${OverwriteDisplayDrawer}\n  ${OverwriteDisplayInterior}\n`;\n\nconst CreateChildrenElements = (props: TypeNavSliderProps) => {\n  const { displayType } = props;\n  const sliderContainer = document.createElement('div');\n  const slider = document.createElement('div');\n  const decorativeLine = document.createElement('div');\n  const isDisplayDrawerNav = displayType === DISPLAY_TYPE_DRAWER;\n  let displayTypeSetting = DISPLAY_TYPE_INTERIOR_NAV;\n\n  if (isDisplayDrawerNav) displayTypeSetting = DISPLAY_TYPE_DRAWER;\n\n  Slides.CreateElement({ ...props, slider });\n\n  slider.classList.add(ELEMENT_NAVIGATION_SLIDER);\n\n  decorativeLine.classList.add(ELEMENT_SLIDER_DECORATIVE_LINE);\n  sliderContainer.appendChild(decorativeLine);\n\n  sliderContainer.setAttribute(ATTRIBUTE_DISPLAY_TYPE, displayTypeSetting);\n  sliderContainer.classList.add(ELEMENT_NAVIGATION_SLIDER_CONTAINER);\n  sliderContainer.appendChild(slider);\n\n  sliderContainer.addEventListener('click', (event) => {\n    event.stopPropagation();\n  });\n\n  return sliderContainer;\n};\n\nconst CreateNavSliderElement = (props: TypeNavSliderRequirements) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const getUpcomingSlide = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_PARENT_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n\n      return upcomingSlide;\n    };\n    const getUpcomingSlideParent = () => {\n      const upcomingSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_CHILD_REF}=${upcomingSlideRef}]`,\n      ) as HTMLDivElement;\n      const parent = findParent({\n        element: upcomingSlide,\n        attr: ATTRIBUTE_DATA_SLIDE,\n      });\n\n      return parent;\n    };\n    const sizeContainer = ({\n      withTransition = false,\n    }: {\n      withTransition?: boolean;\n    }) => {\n      let containerSize = 500;\n      if (currentSlide) {\n        const children = Array.from(currentSlide.children) as HTMLDivElement[];\n        containerSize = children.reduce((acc, currentElement) => {\n          return acc + currentElement.offsetHeight;\n        }, 50);\n      }\n\n      elementContainer.style.height = `${containerSize}px`;\n      if (withTransition)\n        elementContainer.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n      setTimeout(() => {\n        elementContainer.style.transition = 'none';\n      }, ANIMATION_TIME);\n    };\n    const eventSlide = ({ isRight = false }: { isRight?: boolean }) => {\n      if (isAnimating) return;\n\n      const activeSlide = elementContainer.querySelector(\n        `[${ATTRIBUTE_ACTIVE_SLIDE}]`,\n      ) as HTMLDivElement;\n      const upcomingSlide = isRight\n        ? getUpcomingSlideParent()\n        : getUpcomingSlide();\n\n      if (!upcomingSlide) {\n        console.error('Missing slide for slide event');\n        return null;\n      }\n      if (!activeSlide) throw new Error('Missing slide for slide event');\n\n      const slides = [activeSlide, upcomingSlide];\n      const firstLink = upcomingSlide.querySelector('a') as HTMLAnchorElement;\n      const startPositionForUpcomingSlide = isRight ? '-100%' : '100%';\n      const transitionPosition = isRight ? '100%' : '-100%';\n\n      isAnimating = true;\n\n      upcomingSlide.style.left = startPositionForUpcomingSlide;\n      upcomingSlide.style.display = 'block';\n\n      // Defer to next frame so display:block is committed before the transition starts.\n      let rafId: number | null = requestAnimationFrame(() => {\n        rafId = null;\n        slides.forEach((slide) => {\n          slide.style.transition = `transform ${ANIMATION_TIME}ms ease-in-out`;\n          slide.style.transform = `translateX(${transitionPosition})`;\n        });\n        setCurrentSlide({ element: upcomingSlide, withTransition: true });\n      });\n\n      let cleanedUp = false;\n      const cleanup = () => {\n        if (cleanedUp) return;\n        cleanedUp = true;\n        if (rafId !== null) cancelAnimationFrame(rafId);\n        activeSlide.removeEventListener('transitionend', onTransitionEnd);\n\n        // Toggle data-active before wiping styles so CSS display:none wins.\n        upcomingSlide.setAttribute(ATTRIBUTE_ACTIVE_SLIDE, '');\n        activeSlide.removeAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n\n        slides.forEach((slide) => {\n          slide.removeAttribute('style');\n        });\n\n        if (firstLink) firstLink.focus({ preventScroll: true });\n        isAnimating = false;\n      };\n      const onTransitionEnd = (event: TransitionEvent) => {\n        // Ignore bubbled transitions from descendants (e.g. chevron icons).\n        if (event.target !== activeSlide) return;\n        if (event.propertyName !== 'transform') return;\n        cleanup();\n      };\n      activeSlide.addEventListener('transitionend', onTransitionEnd);\n      setTimeout(cleanup, ANIMATION_TIME + 100);\n\n      if (upcomingSlide.offsetHeight > elementContainer.offsetHeight) {\n        setTimeout(() => {\n          upcomingSlide.style.overflowY = `scroll`;\n          upcomingSlide.style.height = `100%`;\n        }, ANIMATION_TIME + 100);\n      }\n    };\n    const setUpcomingSlide = (arg: string) => {\n      upcomingSlideRef = arg;\n    };\n    const setCurrentSlide = ({\n      element,\n      withTransition = false,\n    }: {\n      element: HTMLElement;\n      withTransition?: boolean;\n    }) => {\n      currentSlide = element;\n\n      setTimeout(() => {\n        sizeContainer({ withTransition });\n      }, 100);\n    };\n    const eventSlideLeft = () => eventSlide({ isRight: false });\n    const eventSlideRight = () => eventSlide({ isRight: true });\n    const eventReize = () => {\n      setTimeout(() => {\n        sizeContainer({ withTransition: false });\n      }, 200);\n    };\n    const GetContainer = () => elementContainer;\n    let upcomingSlideRef: string | null = null;\n    let currentSlide: HTMLElement | null = null;\n    let isAnimating = false;\n\n    const children = CreateChildrenElements({\n      ...props,\n      GetContainer,\n      eventSlideLeft,\n      eventSlideRight,\n      setUpcomingSlide,\n      setCurrentSlide,\n      ATTRIBUTE_CHILD_REF,\n      ATTRIBUTE_PARENT_REF,\n      ATTRIBUTE_DATA_SLIDE,\n      ATTRIBUTE_ACTIVE_SLIDE,\n      currentSlide,\n    });\n\n    elementContainer.appendChild(children);\n\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventReize();\n      }, 20),\n    );\n\n    return {\n      container: elementContainer,\n      events: {\n        resize: eventReize,\n      },\n    };\n  })();\n\nexport const createCompositeNavigationSlider = {\n  CreateElement: CreateNavSliderElement,\n  Styles: STYLES_NAV_SLIDER_ELEMENT,\n  Elements: {\n    slider: ELEMENT_NAVIGATION_SLIDER,\n  },\n};\n"],"names":["Slides","SlideAction","SlideFirst","children"],"mappings":"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"}

package/dist/composite/navigation/elements/slider/slides.d.ts

@@ -17,6 +17,7 @@ export declare const createCompositeNavigationSlides: {
     Styles: string;
     Elements: {
         container: string;
+        overflow: string;
         wrapper: string;
         headline: string;
     };

package/dist/composite/navigation/elements/slider/slides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slides.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,eAAe,EAChB,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG,eAAe,GAC1C,mBAAmB,GAAG;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAMJ,KAAK,oBAAoB,GAAG,cAAc,GAAG;IAC3C,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAuPF,eAAO,MAAM,+BAA+B;2BAnGZ,oBAAoB;;;;;;;CA2GnD,CAAC"}
+{"version":3,"file":"slides.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,eAAe,EAChB,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG,eAAe,GAC1C,mBAAmB,GAAG;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,eAAe,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjD,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAMJ,KAAK,oBAAoB,GAAG,cAAc,GAAG;IAC3C,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAmPF,eAAO,MAAM,+BAA+B;2BAvGZ,oBAAoB;;;;;;;;CAgHnD,CAAC"}

package/dist/composite/navigation/elements/slider/slides.js

@@ -6,6 +6,7 @@ import { chevron_down } from "@universityofmaryland/web-icons-library/controls";
 import { createCompositeNavigationSliderFirst } from "./slide-first.js";
 import { createCompositeNavigationSliderAction } from "./action.js";
 const ELEMENT_NAV_SLIDE_CONTAINER = "nav-slide-container";
+const ELEMENT_NAV_SLIDE_OVERFLOW = "nav-slide-overflow";
 const ELEMENT_NAV_SLIDE_WRAPPER = "nav-slide-wrapper";
 const ELEMENT_NAV_SLIDE_HEADLINE = "nav-slide-headline";
 const ELEMENT_NAV_SLIDE_BACK_BUTTON = "nav-slide-action-back-button";
@@ -15,12 +16,6 @@ const ContentStyles = `
     margin-top: ${token.spacing.lg};
   }
 `;
-const WrapperStyles = `
-  .${ELEMENT_NAV_SLIDE_WRAPPER} {
-    overflow-y: scroll;
-    height: 100%;
-  }
-`;
 const BackButtonStyles = `
   .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
     display: block;
@@ -75,7 +70,6 @@ const STYLES_NAV_SLIDES = `
   ${BackButtonStyles}
   ${HeadlineStyles}
   ${ContentStyles}
-  ${WrapperStyles}
   ${createCompositeNavigationSliderAction.Styles}
   ${createCompositeNavigationSliderFirst.Styles}
 `;
@@ -155,6 +149,7 @@ const CreateNavSlides = (props) => {
   slides.forEach((slide, i) => {
     const contentRef = slide.getAttribute("content-slot");
     const sliderContainer = document.createElement("div");
+    const sliderOverflow = document.createElement("div");
     const sliderWrapper = document.createElement("div");
     const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);
     const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF);
@@ -176,22 +171,24 @@ const CreateNavSlides = (props) => {
     sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, "");
     sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);
     sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);
+    sliderOverflow.classList.add(ELEMENT_NAV_SLIDE_OVERFLOW);
     if (slideBackButton) sliderWrapper.appendChild(slideBackButton);
     sliderWrapper.appendChild(slideHeadline);
     sliderWrapper.appendChild(slideActions);
     sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);
-    sliderContainer.appendChild(sliderWrapper);
+    sliderOverflow.appendChild(sliderWrapper);
     if (contentRef) {
       const additionalContent = childrenSlideContent?.find(
         (element) => element.getAttribute("name") === contentRef
       );
       if (additionalContent) {
         const contentContainer = document.createElement("div");
-        contentContainer.appendChild(additionalContent);
+        sliderOverflow.appendChild(additionalContent);
         contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);
         sliderContainer.appendChild(contentContainer);
       }
     }
+    sliderContainer.appendChild(sliderOverflow);
     slider.appendChild(sliderContainer);
     if (i === slides.length - 1) {
       setTimeout(() => {
@@ -205,6 +202,7 @@ const createCompositeNavigationSlides = {
   Styles: STYLES_NAV_SLIDES,
   Elements: {
     container: ELEMENT_NAV_SLIDE_CONTAINER,
+    overflow: ELEMENT_NAV_SLIDE_OVERFLOW,
     wrapper: ELEMENT_NAV_SLIDE_WRAPPER,
     headline: ELEMENT_NAV_SLIDE_HEADLINE
   }

package/dist/composite/navigation/elements/slider/slides.js.map

@@ -1 +1 @@
-{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { cloneElementWithoutAttributes } from '@universityofmaryland/web-utilities-library/dom';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  createCompositeNavigationSliderFirst as FirstSlide,\n  TypeFirstSlideProps,\n  TypeFirstSlide,\n} from './slide-first';\nimport {\n  createCompositeNavigationSliderAction as SlideAction,\n  TypeActionProps,\n} from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst WrapperStyles = `\n  .${ELEMENT_NAV_SLIDE_WRAPPER} {\n    overflow-y: scroll;\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${WrapperStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${iconChevronDown} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(cloneElementWithoutAttributes({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderContainer.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        contentContainer.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport const createCompositeNavigationSlides = {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["SlideAction","FirstSlide","iconChevronDown"],"mappings":";;;;;;;AAwCA,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AACnC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAGlC,MAAM,gBAAgB;AAAA,SACb,yBAAyB;AAAA,kBAChB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAKlC,MAAM,gBAAgB;AAAA,KACjB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,mBAAmB;AAAA,KACpB,6BAA6B;AAAA;AAAA,+BAEH,MAAM,MAAM,KAAK;AAAA,qBAC3B,MAAM,QAAQ,EAAE;AAAA,sBACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,OAI/B,6BAA6B;AAAA,uBACb,MAAM,QAAQ,EAAE;AAAA,wBACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,KAInC,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,6BAA6B;AAAA,KAC7B,6BAA6B;AAAA;AAAA;AAAA;AAAA,KAI7B,6BAA6B;AAAA,YACtB,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,oBAGP,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA;AAMrC,MAAM,iBAAiB;AAAA,IACnB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,0BAA0B,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAExD,CAAC,CAAC;AAAA;AAAA,KAEC,0BAA0B;AAAA,qBACV,MAAM,QAAQ,EAAE;AAAA;AAAA,aAExB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,oBAAoB;AAAA,IACtB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACbA,sCAAY,MAAM;AAAA,IAClBC,qCAAW,MAAM;AAAA;AAGrB,MAAM,wBAAwB,CAAC,UAAkC;AAC/D,QAAM,EAAE,iBAAiB,WAAW,iBAAA,IAAqB;AAEzD,MAAI,CAAC,UAAW;AAChB,QAAM,sBAAsB,SAAS,cAAc,KAAK;AACxD,QAAM,kBAAkB,SAAS,cAAc,QAAQ;AAEvD,kBAAgB,YAAY,GAAGC,YAAe;AAC9C,kBAAgB,aAAa,QAAQ,QAAQ;AAC7C,kBAAgB,aAAa,cAAc,8BAA8B;AACzE,kBAAgB,iBAAiB,SAAS,MAAM;AAC9C,qBAAiB,SAAS;AAC1B,oBAAA;AAAA,EACF,CAAC;AAED,sBAAoB,UAAU,IAAI,6BAA6B;AAC/D,sBAAoB,YAAY,eAAe;AAE/C,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC,EAAE,WAAwC;AACrE,QAAM,gBAAgB,SAAS,cAAc,GAAG;AAEhD,gBAAc,YAAY,8BAA8B,EAAE,SAAS,KAAA,CAAM,CAAC;AAC1E,gBAAc,UAAU,IAAI,0BAA0B;AAEtD,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,UAAkC;AAC5D,QAAM,EAAE,UAAU;AAElB,QAAM,wBAAwB,SAAS,cAAc,KAAK;AAC1D,QAAM,cAAc,MAAM,UAAU,IAAI;AACxC,QAAM,QAAQ,MAAM;AAAA,IAClB,YAAY,iBAAiB,GAAG;AAAA,EAAA;AAGlC,MAAI,MAAM,SAAS,GAAG;AACpB,UAAM;AAAA,MAAQ,CAAC,SACb,sBAAsB;AAAA,QACpBF,sCAAY,cAAc,EAAE,GAAG,OAAO,MAAM;AAAA,MAAA;AAAA,IAC9C;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,UAAmC;AAC3D,QAAM,EAAE,WAAW;AACnB,SAAO,YAAYC,qCAAW,cAAc,KAAK,CAAC;AACpD;AAEA,MAAM,kBAAkB,CAAC,UAAgC;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MAAI,gBAAgB;AACpB,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,EAAE,GAAG,OAAO,eAAe;AAC5C;AAAA,EACF;AAEA,QAAM,SAAS,MAAM;AAAA,IACnB,eAAe,iBAAiB,IAAI,oBAAoB,GAAG;AAAA,EAAA;AAE7D,QAAM,eAAe,oBACjB,MAAM,KAAK,kBAAkB,iBAAiB,GAAG,CAAC,IAClD,CAAA;AACJ,QAAM,iBAAiB,8BACnB,MAAM,KAAK,4BAA4B,iBAAiB,YAAY,CAAC,IACrE,CAAA;AACJ,QAAM,aAAa,MAAM;AAAA,IACvB,eAAe,iBAAiB,IAAI,mBAAmB,GAAG;AAAA,EAAA;AAE5D,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,SAAO,QAAQ,CAAC,OAAO,MAAM;AAC3B,UAAM,aAAa,MAAM,aAAa,cAAc;AACpD,UAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,UAAM,gBAAgB,MAAM,aAAa,sBAAsB;AAC/D,UAAM,YAAY,MAAM,aAAa,oBAAoB;AACzD,UAAM,gBAAgB,cAAc;AAAA,MAClC,CAAC,WAAW,OAAO,aAAa,mBAAmB,MAAM;AAAA,IAAA;AAG3D,QAAI,CAAC,eAAe;AAClB,cAAQ,MAAM,iCAAiC,SAAS,EAAE;AAC1D;AAAA,IACF;AAEA,UAAM,kBAAkB,sBAAsB,EAAE,GAAG,OAAO,WAAW;AACrE,UAAM,gBAAgB,oBAAoB,EAAE,MAAM,eAAe;AACjE,UAAM,eAAe,mBAAmB,EAAE,GAAG,OAAO,OAAO;AAG3D,QAAI,eAAe;AACjB,sBAAgB,aAAa,GAAG,sBAAsB,IAAI,EAAE;AAC5D,sBAAgB,EAAE,SAAS,iBAAiB;AAC5C,sBAAgB;AAAA,IAClB;AAEA,oBAAgB,aAAa,GAAG,oBAAoB,IAAI,EAAE;AAC1D,oBAAgB,UAAU,IAAI,2BAA2B;AACzD,oBAAgB,aAAa,GAAG,oBAAoB,IAAI,GAAG,SAAS,EAAE;AAEtE,QAAI,gBAAiB,eAAc,YAAY,eAAe;AAC9D,kBAAc,YAAY,aAAa;AACvC,kBAAc,YAAY,YAAY;AAEtC,kBAAc,UAAU,IAAI,yBAAyB;AACrD,oBAAgB,YAAY,aAAa;AAEzC,QAAI,YAAY;AACd,YAAM,oBAAoB,sBAAsB;AAAA,QAC9C,CAAC,YAAY,QAAQ,aAAa,MAAM,MAAM;AAAA,MAAA;AAGhD,UAAI,mBAAmB;AACrB,cAAM,mBAAmB,SAAS,cAAc,KAAK;AAErD,yBAAiB,YAAY,iBAAiB;AAC9C,yBAAiB,UAAU,IAAI,yBAAyB;AAExD,wBAAgB,YAAY,gBAAgB;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO,YAAY,eAAe;AAElC,QAAI,MAAM,OAAO,SAAS,GAAG;AAC3B,iBAAW,MAAM;AACf,yBAAiB,EAAE,GAAG,OAAO,eAAe;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kCAAkC;AAAA,EAC7C,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;"}
+{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { cloneElementWithoutAttributes } from '@universityofmaryland/web-utilities-library/dom';\nimport { chevron_down as iconChevronDown } from '@universityofmaryland/web-icons-library/controls';\nimport {\n  createCompositeNavigationSliderFirst as FirstSlide,\n  TypeFirstSlideProps,\n  TypeFirstSlide,\n} from './slide-first';\nimport {\n  createCompositeNavigationSliderAction as SlideAction,\n  TypeActionProps,\n} from './action';\n\nexport type TypeSlideProps = TypeActionProps &\n  TypeFirstSlideProps & {\n    ATTRIBUTE_DATA_SLIDE: string;\n    ATTRIBUTE_ACTIVE_SLIDE: string;\n    childrenSlides?: HTMLElement | null;\n    childrenSlideContent?: HTMLSlotElement[];\n    primarySlideLinks?: HTMLElement | null;\n    primarySlidesSecondaryLinks?: HTMLElement | null;\n    eventSlideRight: () => void;\n  };\n\ntype TypeSlideBackContainer = TypeSlideProps & {\n  parentRef: string;\n};\n\ntype TypeDrawerChildSlide = TypeSlideProps & {\n  slider: HTMLElement;\n};\n\ntype TypeSlideFirstContainer = TypeDrawerChildSlide & TypeFirstSlide;\n\ntype TypeSliderSlideActions = TypeSlideProps & {\n  slide: HTMLDivElement;\n};\n\nconst ELEMENT_NAV_SLIDE_CONTAINER = 'nav-slide-container';\nconst ELEMENT_NAV_SLIDE_OVERFLOW = 'nav-slide-overflow';\nconst ELEMENT_NAV_SLIDE_WRAPPER = 'nav-slide-wrapper';\nconst ELEMENT_NAV_SLIDE_HEADLINE = 'nav-slide-headline';\nconst ELEMENT_NAV_SLIDE_BACK_BUTTON = 'nav-slide-action-back-button';\nconst ELEMENT_NAV_SLIDE_CONTENT = 'nav-slide-action-content';\n\n// prettier-ignore\nconst ContentStyles = `\n  * + .${ELEMENT_NAV_SLIDE_CONTENT} {\n    margin-top: ${token.spacing.lg};\n  }\n`;\n\n// prettier-ignore\nconst BackButtonStyles = `\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n    display: block;\n    border-bottom: 1px solid ${token.color.black};\n    margin-bottom: ${token.spacing.sm};\n    padding-bottom: ${token.spacing.sm};\n  }\n\n  @media (min-width: 480px) {\n    .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {\n      margin-bottom: ${token.spacing.md};\n      padding-bottom: ${token.spacing.md};\n    }\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button {\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-Spacing: 1px;\n    display: flex;\n    align-items: center;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:focus {\n    text-decoration: underline;\n  }\n\n  .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {\n    fill: ${token.color.red};\n    width: 12px;\n    height: 12px;\n    margin-right: ${token.spacing.min};\n    transform: rotate(90deg);\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_NAV_SLIDE_HEADLINE} {\n    margin-bottom: ${token.spacing.md};\n    font-weight: 700;\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_NAV_SLIDES = `\n  ${BackButtonStyles}\n  ${HeadlineStyles}\n  ${ContentStyles}\n  ${SlideAction.Styles}\n  ${FirstSlide.Styles}\n`;\n\nconst createSlideBackButton = (props: TypeSlideBackContainer) => {\n  const { eventSlideRight, parentRef, setUpcomingSlide } = props;\n\n  if (!parentRef) return;\n  const backButtonContainer = document.createElement('div');\n  const slideBackButton = document.createElement('button');\n\n  slideBackButton.innerHTML = `${iconChevronDown} Back`;\n  slideBackButton.setAttribute('type', 'button');\n  slideBackButton.setAttribute('aria-label', 'Previous level of navigation');\n  slideBackButton.addEventListener('click', () => {\n    setUpcomingSlide(parentRef);\n    eventSlideRight();\n  });\n\n  backButtonContainer.classList.add(ELEMENT_NAV_SLIDE_BACK_BUTTON);\n  backButtonContainer.appendChild(slideBackButton);\n\n  return backButtonContainer;\n};\n\nconst createSlideHeadline = ({ link }: { link: HTMLAnchorElement }) => {\n  const slideHeadline = document.createElement('p');\n\n  slideHeadline.appendChild(cloneElementWithoutAttributes({ element: link }));\n  slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);\n\n  return slideHeadline;\n};\n\nconst createSlideActions = (props: TypeSliderSlideActions) => {\n  const { slide } = props;\n\n  const slideActionsContainer = document.createElement('div');\n  const clonedSlide = slide.cloneNode(true) as HTMLDivElement;\n  const links = Array.from(\n    clonedSlide.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    links.forEach((link) =>\n      slideActionsContainer.appendChild(\n        SlideAction.CreateElement({ ...props, link }),\n      ),\n    );\n  }\n\n  return slideActionsContainer;\n};\n\nconst CreateFirstSlide = (props: TypeSlideFirstContainer) => {\n  const { slider } = props;\n  slider.appendChild(FirstSlide.CreateElement(props));\n};\n\nconst CreateNavSlides = (props: TypeDrawerChildSlide) => {\n  const {\n    slider,\n    setCurrentSlide,\n    childrenSlides,\n    childrenSlideContent,\n    primarySlideLinks,\n    primarySlidesSecondaryLinks,\n    ATTRIBUTE_PARENT_REF,\n    ATTRIBUTE_CHILD_REF,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    ATTRIBUTE_DATA_SLIDE,\n  } = props;\n  let isContextMenu = false;\n  if (!childrenSlides) {\n    CreateFirstSlide({ ...props, isContextMenu });\n    return;\n  }\n\n  const slides = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_PARENT_REF}]`),\n  ) as HTMLDivElement[];\n  const primaryLinks = primarySlideLinks\n    ? Array.from(primarySlideLinks.querySelectorAll('a'))\n    : [];\n  const secondaryLinks = primarySlidesSecondaryLinks\n    ? Array.from(primarySlidesSecondaryLinks.querySelectorAll(':scope > *'))\n    : [];\n  const childLinks = Array.from(\n    childrenSlides.querySelectorAll(`[${ATTRIBUTE_CHILD_REF}]`),\n  ) as HTMLAnchorElement[];\n  const parentOptions = [\n    ...primaryLinks,\n    ...secondaryLinks,\n    ...childLinks,\n  ] as HTMLAnchorElement[];\n\n  slides.forEach((slide, i) => {\n    const contentRef = slide.getAttribute('content-slot');\n    const sliderContainer = document.createElement('div');\n    const sliderOverflow = document.createElement('div');\n    const sliderWrapper = document.createElement('div');\n    const isSlideActive = slide.hasAttribute(ATTRIBUTE_ACTIVE_SLIDE);\n    const parentRef = slide.getAttribute(ATTRIBUTE_PARENT_REF) as string;\n    const parentElement = parentOptions.find(\n      (option) => option.getAttribute(ATTRIBUTE_CHILD_REF) === parentRef,\n    );\n\n    if (!parentElement) {\n      console.error(`No parent reference found for ${parentRef}`);\n      return;\n    }\n\n    const slideBackButton = createSlideBackButton({ ...props, parentRef });\n    const slideHeadline = createSlideHeadline({ link: parentElement });\n    const slideActions = createSlideActions({ ...props, slide });\n\n    // Context Menu\n    if (isSlideActive) {\n      sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, ``);\n      setCurrentSlide({ element: sliderContainer });\n      isContextMenu = true;\n    }\n\n    sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n    sliderContainer.classList.add(ELEMENT_NAV_SLIDE_CONTAINER);\n    sliderContainer.setAttribute(`${ATTRIBUTE_PARENT_REF}`, `${parentRef}`);\n\n    sliderOverflow.classList.add(ELEMENT_NAV_SLIDE_OVERFLOW);\n\n    if (slideBackButton) sliderWrapper.appendChild(slideBackButton);\n    sliderWrapper.appendChild(slideHeadline);\n    sliderWrapper.appendChild(slideActions);\n\n    sliderWrapper.classList.add(ELEMENT_NAV_SLIDE_WRAPPER);\n    sliderOverflow.appendChild(sliderWrapper);\n\n    if (contentRef) {\n      const additionalContent = childrenSlideContent?.find(\n        (element) => element.getAttribute('name') === contentRef,\n      );\n\n      if (additionalContent) {\n        const contentContainer = document.createElement('div');\n\n        sliderOverflow.appendChild(additionalContent);\n        contentContainer.classList.add(ELEMENT_NAV_SLIDE_CONTENT);\n\n        sliderContainer.appendChild(contentContainer);\n      }\n    }\n\n    sliderContainer.appendChild(sliderOverflow);\n    slider.appendChild(sliderContainer);\n\n    if (i === slides.length - 1) {\n      setTimeout(() => {\n        CreateFirstSlide({ ...props, isContextMenu });\n      }, 100);\n    }\n  });\n};\n\nexport const createCompositeNavigationSlides = {\n  CreateElement: CreateNavSlides,\n  Styles: STYLES_NAV_SLIDES,\n  Elements: {\n    container: ELEMENT_NAV_SLIDE_CONTAINER,\n    overflow: ELEMENT_NAV_SLIDE_OVERFLOW,\n    wrapper: ELEMENT_NAV_SLIDE_WRAPPER,\n    headline: ELEMENT_NAV_SLIDE_HEADLINE,\n  },\n};\n"],"names":["SlideAction","FirstSlide","iconChevronDown"],"mappings":";;;;;;;AAwCA,MAAM,8BAA8B;AACpC,MAAM,6BAA6B;AACnC,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AACnC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAGlC,MAAM,gBAAgB;AAAA,SACb,yBAAyB;AAAA,kBAChB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAKlC,MAAM,mBAAmB;AAAA,KACpB,6BAA6B;AAAA;AAAA,+BAEH,MAAM,MAAM,KAAK;AAAA,qBAC3B,MAAM,QAAQ,EAAE;AAAA,sBACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,OAI/B,6BAA6B;AAAA,uBACb,MAAM,QAAQ,EAAE;AAAA,wBACf,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,KAInC,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,6BAA6B;AAAA,KAC7B,6BAA6B;AAAA;AAAA;AAAA;AAAA,KAI7B,6BAA6B;AAAA,YACtB,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,oBAGP,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA;AAMrC,MAAM,iBAAiB;AAAA,IACnB,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,0BAA0B,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAExD,CAAC,CAAC;AAAA;AAAA,KAEC,0BAA0B;AAAA,qBACV,MAAM,QAAQ,EAAE;AAAA;AAAA,aAExB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,oBAAoB;AAAA,IACtB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,IACbA,sCAAY,MAAM;AAAA,IAClBC,qCAAW,MAAM;AAAA;AAGrB,MAAM,wBAAwB,CAAC,UAAkC;AAC/D,QAAM,EAAE,iBAAiB,WAAW,iBAAA,IAAqB;AAEzD,MAAI,CAAC,UAAW;AAChB,QAAM,sBAAsB,SAAS,cAAc,KAAK;AACxD,QAAM,kBAAkB,SAAS,cAAc,QAAQ;AAEvD,kBAAgB,YAAY,GAAGC,YAAe;AAC9C,kBAAgB,aAAa,QAAQ,QAAQ;AAC7C,kBAAgB,aAAa,cAAc,8BAA8B;AACzE,kBAAgB,iBAAiB,SAAS,MAAM;AAC9C,qBAAiB,SAAS;AAC1B,oBAAA;AAAA,EACF,CAAC;AAED,sBAAoB,UAAU,IAAI,6BAA6B;AAC/D,sBAAoB,YAAY,eAAe;AAE/C,SAAO;AACT;AAEA,MAAM,sBAAsB,CAAC,EAAE,WAAwC;AACrE,QAAM,gBAAgB,SAAS,cAAc,GAAG;AAEhD,gBAAc,YAAY,8BAA8B,EAAE,SAAS,KAAA,CAAM,CAAC;AAC1E,gBAAc,UAAU,IAAI,0BAA0B;AAEtD,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,UAAkC;AAC5D,QAAM,EAAE,UAAU;AAElB,QAAM,wBAAwB,SAAS,cAAc,KAAK;AAC1D,QAAM,cAAc,MAAM,UAAU,IAAI;AACxC,QAAM,QAAQ,MAAM;AAAA,IAClB,YAAY,iBAAiB,GAAG;AAAA,EAAA;AAGlC,MAAI,MAAM,SAAS,GAAG;AACpB,UAAM;AAAA,MAAQ,CAAC,SACb,sBAAsB;AAAA,QACpBF,sCAAY,cAAc,EAAE,GAAG,OAAO,MAAM;AAAA,MAAA;AAAA,IAC9C;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC,UAAmC;AAC3D,QAAM,EAAE,WAAW;AACnB,SAAO,YAAYC,qCAAW,cAAc,KAAK,CAAC;AACpD;AAEA,MAAM,kBAAkB,CAAC,UAAgC;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MAAI,gBAAgB;AACpB,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,EAAE,GAAG,OAAO,eAAe;AAC5C;AAAA,EACF;AAEA,QAAM,SAAS,MAAM;AAAA,IACnB,eAAe,iBAAiB,IAAI,oBAAoB,GAAG;AAAA,EAAA;AAE7D,QAAM,eAAe,oBACjB,MAAM,KAAK,kBAAkB,iBAAiB,GAAG,CAAC,IAClD,CAAA;AACJ,QAAM,iBAAiB,8BACnB,MAAM,KAAK,4BAA4B,iBAAiB,YAAY,CAAC,IACrE,CAAA;AACJ,QAAM,aAAa,MAAM;AAAA,IACvB,eAAe,iBAAiB,IAAI,mBAAmB,GAAG;AAAA,EAAA;AAE5D,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,SAAO,QAAQ,CAAC,OAAO,MAAM;AAC3B,UAAM,aAAa,MAAM,aAAa,cAAc;AACpD,UAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,UAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,UAAM,gBAAgB,MAAM,aAAa,sBAAsB;AAC/D,UAAM,YAAY,MAAM,aAAa,oBAAoB;AACzD,UAAM,gBAAgB,cAAc;AAAA,MAClC,CAAC,WAAW,OAAO,aAAa,mBAAmB,MAAM;AAAA,IAAA;AAG3D,QAAI,CAAC,eAAe;AAClB,cAAQ,MAAM,iCAAiC,SAAS,EAAE;AAC1D;AAAA,IACF;AAEA,UAAM,kBAAkB,sBAAsB,EAAE,GAAG,OAAO,WAAW;AACrE,UAAM,gBAAgB,oBAAoB,EAAE,MAAM,eAAe;AACjE,UAAM,eAAe,mBAAmB,EAAE,GAAG,OAAO,OAAO;AAG3D,QAAI,eAAe;AACjB,sBAAgB,aAAa,GAAG,sBAAsB,IAAI,EAAE;AAC5D,sBAAgB,EAAE,SAAS,iBAAiB;AAC5C,sBAAgB;AAAA,IAClB;AAEA,oBAAgB,aAAa,GAAG,oBAAoB,IAAI,EAAE;AAC1D,oBAAgB,UAAU,IAAI,2BAA2B;AACzD,oBAAgB,aAAa,GAAG,oBAAoB,IAAI,GAAG,SAAS,EAAE;AAEtE,mBAAe,UAAU,IAAI,0BAA0B;AAEvD,QAAI,gBAAiB,eAAc,YAAY,eAAe;AAC9D,kBAAc,YAAY,aAAa;AACvC,kBAAc,YAAY,YAAY;AAEtC,kBAAc,UAAU,IAAI,yBAAyB;AACrD,mBAAe,YAAY,aAAa;AAExC,QAAI,YAAY;AACd,YAAM,oBAAoB,sBAAsB;AAAA,QAC9C,CAAC,YAAY,QAAQ,aAAa,MAAM,MAAM;AAAA,MAAA;AAGhD,UAAI,mBAAmB;AACrB,cAAM,mBAAmB,SAAS,cAAc,KAAK;AAErD,uBAAe,YAAY,iBAAiB;AAC5C,yBAAiB,UAAU,IAAI,yBAAyB;AAExD,wBAAgB,YAAY,gBAAgB;AAAA,MAC9C;AAAA,IACF;AAEA,oBAAgB,YAAY,cAAc;AAC1C,WAAO,YAAY,eAAe;AAElC,QAAI,MAAM,OAAO,SAAS,GAAG;AAC3B,iBAAW,MAAM;AACf,yBAAiB,EAAE,GAAG,OAAO,eAAe;AAAA,MAC9C,GAAG,GAAG;AAAA,IACR;AAAA,EACF,CAAC;AACH;AAEO,MAAM,kCAAkC;AAAA,EAC7C,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAEd;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.6.14",
+  "version": "1.6.16",
   "description": "UMD Web Elements",
   "type": "module",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
     "@types/postcss-js": "^4.0.4",
     "@universityofmaryland/web-builder-library": "^1.0.3",
     "@universityofmaryland/web-icons-library": "^1.0.4",
-    "@universityofmaryland/web-styles-library": "^1.8.9",
+    "@universityofmaryland/web-styles-library": "^1.8.10",
     "@universityofmaryland/web-token-library": "^1.0.1",
     "@universityofmaryland/web-utilities-library": "^1.0.5"
   },