@universityofmaryland/web-elements-library 1.4.8 → 1.5.0-beta.0

package/dist/composite/navigation/elements/slider/slide-first.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slide-first.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_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\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":["Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}
+{"version":3,"file":"slide-first.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slide-first.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport Slides from './slides';\nimport SlideAction, { TypeActionProps } from './action';\n\nexport type TypeFirstSlideProps = TypeActionProps & {\n  ATTRIBUTE_ACTIVE_SLIDE: string;\n  ATTRIBUTE_DATA_SLIDE: string;\n  currentSlide: HTMLElement | null;\n  primarySlideLinks?: HTMLElement | null;\n  primarySlidesSecondaryLinks?: HTMLElement | null;\n  primarySlideContent?: HTMLElement | null;\n  setCurrentSlide: (arg: {\n    element: HTMLElement;\n    withTransition?: boolean;\n  }) => void;\n  eventSlideRight: () => void;\n};\n\nexport type TypeFirstSlide = TypeFirstSlideProps & {\n  isContextMenu: boolean;\n};\n\nconst ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER = 'nav-slider-first-slide-container';\nconst ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER =\n  'nav-slider-first-slide-primary-links-container';\nconst ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER =\n  'nav-slider-secondary-links-container';\nconst ELEMENT_SLIDER_ADDITIONAL_CONTENT = 'nav-slider-additional-content';\n\nconst OVERWRITE_ACTION_PRIMARY_CONTAINER = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.container}`;\nconst OVERWRITE_ACTION_PRIMARY_LINK = `.${ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER} .${SlideAction.Elements.link}`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryLink = `\n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_ACTION_PRIMARY_LINK}`]: typography.sans.large,\n    },\n  })}\n\n  ${OVERWRITE_ACTION_PRIMARY_LINK} {\n    font-weight: 700;\n    line-height: 1.3em;\n  }\n`;\n\n//prettier-ignore;\nconst OverwriteSlidePrimaryContainer = `\n  ${OVERWRITE_ACTION_PRIMARY_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\n//prettier-ignore;\nconst SecondaryLinksContainer = `\n  .${ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER} .${SlideAction.Elements.container}:last-child {\n    border-bottom: 1px solid ${token.color.gray.light};\n    padding-bottom: ${token.spacing.md};\n  }\n`;\n\n//prettier-ignore;\nconst AdditonalContent = `\n  .${ELEMENT_SLIDER_ADDITIONAL_CONTENT} {\n    padding-top: ${token.spacing.md};\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDE_FIRST_ELEMENT = `\n  ${SecondaryLinksContainer}\n  ${AdditonalContent}\n  ${OverwriteSlidePrimaryContainer}\n  ${OverwriteSlidePrimaryLink}\n`;\n\nconst createPrimaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideLinks } = props;\n\n  if (!primarySlideLinks) return null;\n\n  const links = Array.from(\n    primarySlideLinks.querySelectorAll('a'),\n  ) as HTMLAnchorElement[];\n\n  if (links.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_PRIMARY_LINKS_CONTAINER);\n\n    links.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createSecondaryLinks = (props: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlidesSecondaryLinks } = props;\n\n  if (!primarySlidesSecondaryLinks) return null;\n\n  const elements = Array.from(\n    primarySlidesSecondaryLinks.querySelectorAll(':scope > *'),\n  ) as HTMLAnchorElement[];\n\n  if (elements.length > 0) {\n    container.classList.add(ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER);\n\n    elements.forEach((link) =>\n      container.appendChild(SlideAction.CreateElement({ ...props, link })),\n    );\n\n    return container;\n  }\n\n  return null;\n};\n\nconst createAdditonalContent = (element: TypeFirstSlideProps) => {\n  const container = document.createElement('div');\n  const { primarySlideContent } = element;\n\n  if (!primarySlideContent) return null;\n\n  container.classList.add(ELEMENT_SLIDER_ADDITIONAL_CONTENT);\n  container.appendChild(primarySlideContent);\n\n  return container;\n};\n\nconst CreateSlideFirstElement = (props: TypeFirstSlide) => {\n  const {\n    setCurrentSlide,\n    ATTRIBUTE_DATA_SLIDE,\n    ATTRIBUTE_ACTIVE_SLIDE,\n    isContextMenu,\n  } = props;\n  const sliderContainer = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const primarlyLinkContent = createPrimaryLinks(props);\n  const secondaryLinkContent = createSecondaryLinks(props);\n  const additionalContent = createAdditonalContent(props);\n\n  sliderContainer.classList.add(ELEMENT_SLIDER_FIRST_SLIDE_CONTAINER);\n  sliderContainer.setAttribute(`${ATTRIBUTE_DATA_SLIDE}`, '');\n\n  if (!isContextMenu) {\n    sliderContainer.setAttribute(`${ATTRIBUTE_ACTIVE_SLIDE}`, '');\n    setCurrentSlide({ element: sliderContainer });\n  }\n\n  if (primarlyLinkContent) wrapper.appendChild(primarlyLinkContent);\n  if (secondaryLinkContent) wrapper.appendChild(secondaryLinkContent);\n  if (additionalContent) wrapper.appendChild(additionalContent);\n\n  wrapper.classList.add(Slides.Elements.wrapper);\n  sliderContainer.appendChild(wrapper);\n\n  return sliderContainer;\n};\n\nexport default {\n  CreateElement: CreateSlideFirstElement,\n  Styles: STYLES_SLIDE_FIRST_ELEMENT,\n  Elements: {\n    secondaryContainer: ELEMENT_SLIDER_SECONDARY_LINKS_CONTAINER,\n  },\n};\n"],"names":[],"mappings":"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"}

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":"AAEA,OAAmB,EAAE,mBAAmB,EAAkB,MAAM,eAAe,CAAC;AAChF,OAAoB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAExD,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;;2BA2I8B,oBAAoB;;;;;;;;AAmGpD,wBAQE"}
+{"version":3,"file":"slides.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"names":[],"mappings":"AAKA,OAAmB,EAAE,mBAAmB,EAAkB,MAAM,eAAe,CAAC;AAChF,OAAoB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAExD,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;;2BA2I8B,oBAAoB;;;;;;;;AAmGpD,wBAQE"}

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

@@ -1,10 +1,29 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../../../utilities/assets/icons.js");
-const modify = require("../../../../utilities/markup/modify.js");
-const index = require("../../../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
+const controls = require("@universityofmaryland/web-icons-library/controls");
 const slideFirst = require("./slide-first.js");
 const action = require("./action.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const ELEMENT_NAV_SLIDE_CONTAINER = "nav-slide-container";
 const ELEMENT_NAV_SLIDE_WRAPPER = "nav-slide-wrapper";
 const ELEMENT_NAV_SLIDE_HEADLINE = "nav-slide-headline";
@@ -12,21 +31,21 @@ const ELEMENT_NAV_SLIDE_BACK_BUTTON = "nav-slide-action-back-button";
 const ELEMENT_NAV_SLIDE_CONTENT = "nav-slide-action-content";
 const ContentStyles = `
   * + .${ELEMENT_NAV_SLIDE_CONTENT} {
-    margin-top: ${Styles.token.spacing.lg};
+    margin-top: ${token__namespace.spacing.lg};
   }
 `;
 const BackButtonStyles = `
   .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
     display: block;
-    border-bottom: 1px solid ${Styles.token.color.black};
-    margin-bottom: ${Styles.token.spacing.sm};
-    padding-bottom: ${Styles.token.spacing.sm};
+    border-bottom: 1px solid ${token__namespace.color.black};
+    margin-bottom: ${token__namespace.spacing.sm};
+    padding-bottom: ${token__namespace.spacing.sm};
   }
 
   @media (min-width: 480px) {
     .${ELEMENT_NAV_SLIDE_BACK_BUTTON} {
-      margin-bottom: ${Styles.token.spacing.md};
-      padding-bottom: ${Styles.token.spacing.md};
+      margin-bottom: ${token__namespace.spacing.md};
+      padding-bottom: ${token__namespace.spacing.md};
     }
   }
 
@@ -36,7 +55,7 @@ const BackButtonStyles = `
     letter-Spacing: 1px;
     display: flex;
     align-items: center;
-    color: ${Styles.token.color.black};
+    color: ${token__namespace.color.black};
   }
 
   .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button:hover,
@@ -45,24 +64,24 @@ const BackButtonStyles = `
   }
 
   .${ELEMENT_NAV_SLIDE_BACK_BUTTON} button svg {
-    fill: ${Styles.token.color.red};
+    fill: ${token__namespace.color.red};
     width: 12px;
     height: 12px;
-    margin-right: ${Styles.token.spacing.min};
+    margin-right: ${token__namespace.spacing.min};
     transform: rotate(90deg);
   }
 `;
 const HeadlineStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: Styles.typography.sans.large
+    [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography__namespace.sans.large
   }
 })}
 
   .${ELEMENT_NAV_SLIDE_HEADLINE} {
-    margin-bottom: ${Styles.token.spacing.md};
+    margin-bottom: ${token__namespace.spacing.md};
     font-weight: 700;
-    color: ${Styles.token.color.black};
+    color: ${token__namespace.color.black};
   }
 `;
 const STYLES_NAV_SLIDES = `
@@ -77,7 +96,7 @@ const createSlideBackButton = (props) => {
   if (!parentRef) return;
   const backButtonContainer = document.createElement("div");
   const slideBackButton = document.createElement("button");
-  slideBackButton.innerHTML = `${icons.CHEVRON_SMALL} Back`;
+  slideBackButton.innerHTML = `${controls.chevron_down} Back`;
   slideBackButton.setAttribute("type", "button");
   slideBackButton.setAttribute("aria-label", "Previous level of navigation");
   slideBackButton.addEventListener("click", () => {
@@ -90,7 +109,7 @@ const createSlideBackButton = (props) => {
 };
 const createSlideHeadline = ({ link }) => {
   const slideHeadline = document.createElement("p");
-  slideHeadline.appendChild(modify.cleanCopy({ element: link }));
+  slideHeadline.appendChild(dom.cloneElementWithoutAttributes({ element: link }));
   slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);
   return slideHeadline;
 };

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 { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } 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 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  ${Utility.theme.convertJSSObjectToStyles({\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 = `${Utility.asset.icon.CHEVRON_SMALL} 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(Utility.markup.modify.cleanCopy({ 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 default {\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":["token","Utility.theme.convertJSSObjectToStyles","typography","SlideAction","FirstSlide","Utility.asset.icon.CHEVRON_SMALL","Utility.markup.modify.cleanCopy"],"mappings":"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"}
+{"version":3,"file":"slides.js","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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 FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } 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 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 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 default {\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":["token","jssToCSS","typography","SlideAction","FirstSlide","iconChevronDown","cloneElementWithoutAttributes"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-import { token, typography } from "@universityofmaryland/web-styles-library";
-import { CHEVRON_SMALL } from "../../../../utilities/assets/icons.mjs";
-import { cleanCopy } from "../../../../utilities/markup/modify.mjs";
-import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { cloneElementWithoutAttributes } from "@universityofmaryland/web-utilities-library/dom";
+import { chevron_down } from "@universityofmaryland/web-icons-library/controls";
 import SlideFirst from "./slide-first.mjs";
 import SlideAction from "./action.mjs";
 const ELEMENT_NAV_SLIDE_CONTAINER = "nav-slide-container";
@@ -52,7 +53,7 @@ const BackButtonStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_NAV_SLIDE_HEADLINE}`]: typography.sans.large
   }
@@ -76,7 +77,7 @@ const createSlideBackButton = (props) => {
   if (!parentRef) return;
   const backButtonContainer = document.createElement("div");
   const slideBackButton = document.createElement("button");
-  slideBackButton.innerHTML = `${CHEVRON_SMALL} Back`;
+  slideBackButton.innerHTML = `${chevron_down} Back`;
   slideBackButton.setAttribute("type", "button");
   slideBackButton.setAttribute("aria-label", "Previous level of navigation");
   slideBackButton.addEventListener("click", () => {
@@ -89,7 +90,7 @@ const createSlideBackButton = (props) => {
 };
 const createSlideHeadline = ({ link }) => {
   const slideHeadline = document.createElement("p");
-  slideHeadline.appendChild(cleanCopy({ element: link }));
+  slideHeadline.appendChild(cloneElementWithoutAttributes({ element: link }));
   slideHeadline.classList.add(ELEMENT_NAV_SLIDE_HEADLINE);
   return slideHeadline;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"slides.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } 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 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  ${Utility.theme.convertJSSObjectToStyles({\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 = `${Utility.asset.icon.CHEVRON_SMALL} 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(Utility.markup.modify.cleanCopy({ 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 default {\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":["Utility.theme.convertJSSObjectToStyles","FirstSlide","Utility.asset.icon.CHEVRON_SMALL","Utility.markup.modify.cleanCopy"],"mappings":"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"}
+{"version":3,"file":"slides.mjs","sources":["../../../../../source/composite/navigation/elements/slider/slides.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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 FirstSlide, { TypeFirstSlideProps, TypeFirstSlide } from './slide-first';\nimport SlideAction, { TypeActionProps } 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 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 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 default {\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":["FirstSlide","iconChevronDown"],"mappings":"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"}

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

@@ -1,8 +1,5 @@
 "use strict";
-const index$1 = require("../../../../utilities/performance/index.js");
-require("../../../../node_modules/postcss/lib/postcss.js");
-require("../../../../node_modules/postcss-nesting/dist/index.js");
-require("../../../../node_modules/postcss-js/index.js");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
 const ELEMENT_NAV_STICKY_CONTAINER = "nav-sticky-container";
 const ELEMENT_NAV_STICKY_WRAPPER = "nav-sticky-wrapper";
 const ELEMENT_NAV_STIKCY_WRAPPER_FIXED = "nav-sticky-wrapper-fixed";
@@ -68,7 +65,7 @@ const index = ({
   window.addEventListener("scroll", eventScroll);
   window.addEventListener(
     "resize",
-    index$1.debounce(() => {
+    performance.debounce(() => {
       eventResize();
     }, 20)
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":["Utility.performance.debounce"],"mappings":";;;;;AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACAA,QAAAA,SAA6B,MAAM;AACjC,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;;"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":["debounce"],"mappings":";;AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACAA,YAAAA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;;"}

package/dist/composite/navigation/elements/sticky/index.mjs

@@ -1,7 +1,4 @@
-import { debounce } from "../../../../utilities/performance/index.mjs";
-import "../../../../node_modules/postcss/lib/postcss.mjs";
-import "../../../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../../../node_modules/postcss-js/index.mjs";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 const ELEMENT_NAV_STICKY_CONTAINER = "nav-sticky-container";
 const ELEMENT_NAV_STICKY_WRAPPER = "nav-sticky-wrapper";
 const ELEMENT_NAV_STIKCY_WRAPPER_FIXED = "nav-sticky-wrapper-fixed";

package/dist/composite/navigation/elements/sticky/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import * as Utility from 'utilities';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      Utility.performance.debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":["Utility.performance.debounce"],"mappings":";;;;AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACAA,SAA6B,MAAM;AACjC,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/navigation/elements/sticky/index.ts"],"sourcesContent":["import { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_NAV_STICKY_CONTAINER = 'nav-sticky-container';\nconst ELEMENT_NAV_STICKY_WRAPPER = 'nav-sticky-wrapper';\n\nconst ELEMENT_NAV_STIKCY_WRAPPER_FIXED = 'nav-sticky-wrapper-fixed';\n\n// prettier-ignore\nconst STYLES_NAV_STICKY_ELEMENT = `\n  .${ELEMENT_NAV_STICKY_CONTAINER} {\n    width: 100%;\n  }\n\n  .${ELEMENT_NAV_STICKY_WRAPPER} {\n    width: 100%;\n    background-color: white;\n  }\n\n  .${ELEMENT_NAV_STIKCY_WRAPPER_FIXED} {\n    position: fixed;\n    top: 0;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n`;\n\nexport default ({\n  content,\n  component,\n}: {\n  content: HTMLElement;\n  component: HTMLElement;\n}) =>\n  (() => {\n    const elementContainer = document.createElement('div');\n    const elementWrapper = document.createElement('div');\n    const headerElement = component.querySelector(\n      'umd-element-navigation-header',\n    );\n    const eventScroll = () => {\n      const componentBounds = component.getBoundingClientRect();\n\n      if (componentBounds.top < 0) {\n        if (headerElement) {\n          headerElement.setAttribute('sticky', 'true');\n          elementWrapper.classList.add(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n        }\n      } else {\n        if (headerElement) {\n          headerElement.removeAttribute('sticky');\n          elementWrapper.classList.remove(ELEMENT_NAV_STIKCY_WRAPPER_FIXED);\n\n          if (hasIncorrectHeight) {\n            setTimeout(() => {\n              eventResize();\n            }, 200);\n            setTimeout(() => {\n              eventResize();\n            }, 500);\n            hasIncorrectHeight = false;\n          }\n        }\n      }\n    };\n\n    const eventResize = () => {\n      const wrapperSize = elementWrapper.offsetHeight;\n\n      if (wrapperSize !== 0) {\n        elementContainer.style.height = `${wrapperSize}px`;\n      }\n    };\n    let hasIncorrectHeight = false;\n\n    elementWrapper.classList.add(ELEMENT_NAV_STICKY_WRAPPER);\n    elementWrapper.appendChild(content);\n\n    elementContainer.classList.add(ELEMENT_NAV_STICKY_CONTAINER);\n    elementContainer.appendChild(elementWrapper);\n\n    window.addEventListener('scroll', eventScroll);\n    window.addEventListener(\n      'resize',\n      debounce(() => {\n        eventResize();\n      }, 20),\n    );\n\n    window.addEventListener('load', () => {\n      setTimeout(() => {\n        eventResize();\n      }, 500);\n    });\n\n    if (window.scrollY > 0) {\n      hasIncorrectHeight = true;\n    }\n\n    return { element: elementContainer, styles: STYLES_NAV_STICKY_ELEMENT };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,+BAA+B;AACrC,MAAM,6BAA6B;AAEnC,MAAM,mCAAmC;AAGzC,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA;AAAA;AAAA;AAAA,KAI5B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA,KAK1B,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAA,QAAe,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AACnD,QAAM,gBAAgB,UAAU;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,cAAc,MAAM;AACxB,UAAM,kBAAkB,UAAU,sBAAA;AAElC,QAAI,gBAAgB,MAAM,GAAG;AAC3B,UAAI,eAAe;AACjB,sBAAc,aAAa,UAAU,MAAM;AAC3C,uBAAe,UAAU,IAAI,gCAAgC;AAAA,MAC/D;AAAA,IACF,OAAO;AACL,UAAI,eAAe;AACjB,sBAAc,gBAAgB,QAAQ;AACtC,uBAAe,UAAU,OAAO,gCAAgC;AAEhE,YAAI,oBAAoB;AACtB,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,qBAAW,MAAM;AACf,wBAAA;AAAA,UACF,GAAG,GAAG;AACN,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,cAAc,eAAe;AAEnC,QAAI,gBAAgB,GAAG;AACrB,uBAAiB,MAAM,SAAS,GAAG,WAAW;AAAA,IAChD;AAAA,EACF;AACA,MAAI,qBAAqB;AAEzB,iBAAe,UAAU,IAAI,0BAA0B;AACvD,iBAAe,YAAY,OAAO;AAElC,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,mBAAiB,YAAY,cAAc;AAE3C,SAAO,iBAAiB,UAAU,WAAW;AAC7C,SAAO;AAAA,IACL;AAAA,IACA,SAAS,MAAM;AACb,kBAAA;AAAA,IACF,GAAG,EAAE;AAAA,EAAA;AAGP,SAAO,iBAAiB,QAAQ,MAAM;AACpC,eAAW,MAAM;AACf,kBAAA;AAAA,IACF,GAAG,GAAG;AAAA,EACR,CAAC;AAED,MAAI,OAAO,UAAU,GAAG;AACtB,yBAAqB;AAAA,EACvB;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C,GAAA;"}

package/dist/composite/navigation/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../source/composite/navigation/header.ts"],"names":[],"mappings":"AAKA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,cAAc,GAC9B,WAAW,GAAG;IACZ,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEJ,KAAK,sBAAsB,GAAG,mBAAmB,GAAG,UAAU,CAAC;;2BA8SxB,sBAAsB;;;mCAOxB;gBAAE,QAAQ,EAAE,OAAO,CAAA;aAAE;;;;;AA8C1D,wBAGE"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../source/composite/navigation/header.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG,cAAc,GAC9B,WAAW,GAAG;IACZ,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEJ,KAAK,sBAAsB,GAAG,mBAAmB,GAAG,UAAU,CAAC;;2BA8SxB,sBAAsB;;;mCAOxB;gBAAE,QAAQ,EAAE,OAAO,CAAA;aAAE;;;;;AA8C1D,wBAGE"}

package/dist/composite/navigation/header.js

@@ -1,9 +1,28 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const icons = require("../../utilities/assets/icons.js");
-const index = require("../../utilities/theme/index.js");
-const index$2 = require("./elements/menu-button/index.js");
-const index$1 = require("./elements/item/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const search = require("@universityofmaryland/web-icons-library/search");
+const index$1 = require("./elements/menu-button/index.js");
+const index = require("./elements/item/index.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const ANIMATION_TIME = 500;
 const ATTRIBUTE_STICKY = "data-sticky";
 const ATTRIBUTE_CTA = "data-cta";
@@ -27,7 +46,7 @@ const OVERWRITE_CTA_WRAPPER_NAV_ROW = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADE
 const OVERWRITE_CTA_WRAPPER_CTA = `${OVERWRITE_CTA_WRAPPER} .${ELEMENT_HEADER_MENU_CTA}`;
 const OverwriteStickyStyles = `
   ${OVERWRITE_STICKY_CONTAINER} {
-    padding: ${Styles.token.spacing.xs} 0;
+    padding: ${token__namespace.spacing.xs} 0;
   }
 
   .${ELEMENT_HEADER_WRAPPER} {
@@ -40,22 +59,22 @@ const OverwriteStickyStyles = `
 `;
 const CtaStyles = `
   .${ELEMENT_HEADER_MENU_CTA} {
-    color: ${Styles.token.color.white};
-    font-weight: ${Styles.token.font.weight.bold};
-    font-size: ${Styles.token.font.size.sm};
-    padding: ${Styles.token.spacing.xs};
-    background-color: ${Styles.token.color.red};
+    color: ${token__namespace.color.white};
+    font-weight: ${token__namespace.font.weight.bold};
+    font-size: ${token__namespace.font.size.sm};
+    padding: ${token__namespace.spacing.xs};
+    background-color: ${token__namespace.color.red};
     transition: background .5s;
     white-space: nowrap;
   }
 
   .${ELEMENT_HEADER_MENU_CTA}:hover,
   .${ELEMENT_HEADER_MENU_CTA}:focus {
-    background-color: ${Styles.token.color.redDark};
+    background-color: ${token__namespace.color.redDark};
   }
 
   ${OVERWRITE_CTA_WRAPPER_CTA} {
-    margin-top: -${Styles.token.spacing.min};
+    margin-top: -${token__namespace.spacing.min};
   }
 `;
 const NavigationColumnStyles = `
@@ -71,7 +90,7 @@ const NavigationColumnStyles = `
   }
 
   ${OVERWRITE_CTA_WRAPPER_NAV_ROW} {
-    padding-top: ${Styles.token.spacing.sm};
+    padding-top: ${token__namespace.spacing.sm};
   }
 
   .${ELEMENT_HEADER_NAVIGATION_ROW} > * {
@@ -79,25 +98,25 @@ const NavigationColumnStyles = `
   }
 
   .${ELEMENT_HEADER_NAVIGATION_ROW} > *:not(:first-child) {
-    margin-left: ${Styles.token.spacing.md};
+    margin-left: ${token__namespace.spacing.md};
   }
 
   .${ELEMENT_HEADER_NAVIGATION_ROW} svg {
     width: 24px;
     height: 24px;
-    fill: ${Styles.token.color.black};
+    fill: ${token__namespace.color.black};
   }
 
   .${ELEMENT_HEADER_UTILITY_ROW} {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: ${Styles.token.spacing.sm};
+    margin-bottom: ${token__namespace.spacing.sm};
   }
 
   .${ELEMENT_HEADER_UTILITY_ROW} ::slotted(*) {
     display: flex;
     justify-content: flex-end;
-    gap: ${Styles.token.spacing.md};
+    gap: ${token__namespace.spacing.md};
   }
 `;
 const LogoColumnStyles = `
@@ -111,9 +130,9 @@ const LogoColumnStyles = `
   }
 
   .${ELEMENT_HEADER_MENU_BUTTON} {
-    border-right: 1px solid ${Styles.token.color.gray.light};
-    padding-right: ${Styles.token.spacing.min};
-    margin-right: ${Styles.token.spacing.sm};
+    border-right: 1px solid ${token__namespace.color.gray.light};
+    padding-right: ${token__namespace.spacing.min};
+    margin-right: ${token__namespace.spacing.sm};
   }
 
   .${ELEMENT_HEADER_LOGO} {
@@ -126,15 +145,15 @@ const LogoColumnStyles = `
     height: 240px;
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}`]: Styles.typography.sans.larger
+    [`.${ELEMENT_HEADER_LOGO}`]: typography__namespace.sans.larger
   }
 })}
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_HEADER_LOGO} *`]: Styles.typography.sans.larger
+    [`.${ELEMENT_HEADER_LOGO} *`]: typography__namespace.sans.larger
   }
 })}
 
@@ -144,15 +163,15 @@ const LogoColumnStyles = `
     width: 100%;
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}[size="large"]`]: Styles.typography.sans.extraLarge
+    [`.${ELEMENT_HEADER_LOGO}[size="large"]`]: typography__namespace.sans.extraLarge
   }
 })}
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_HEADER_LOGO}[size="large"] *`]: Styles.typography.sans.extraLarge
+    [`.${ELEMENT_HEADER_LOGO}[size="large"] *`]: typography__namespace.sans.extraLarge
   }
 })}
 
@@ -167,7 +186,7 @@ const LogoColumnStyles = `
     max-width: 190px;
   }
 
-  @media (min-width: ${Styles.token.media.breakpoints.tablet.min}) {
+  @media (min-width: ${token__namespace.media.breakpoints.tablet.min}) {
     .${ELEMENT_HEADER_LOGO} img {
       max-width: 240px;
     }
@@ -178,15 +197,15 @@ const WrapperStyles = `
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    gap: ${Styles.token.spacing.lg};
+    gap: ${token__namespace.spacing.lg};
     z-index: 999;
   }
 `;
 const STYLES_NAVIGATION_HEADER = `
   .${ELEMENT_HEADER_CONTAINTER} {
-    background-color: ${Styles.token.color.white};
+    background-color: ${token__namespace.color.white};
     display: block;
-    padding: ${Styles.token.spacing.md} 0;
+    padding: ${token__namespace.spacing.md} 0;
     position: relative;
     transition: padding ${ANIMATION_TIME}ms;
   }
@@ -196,15 +215,15 @@ const STYLES_NAVIGATION_HEADER = `
   ${NavigationColumnStyles}
   ${CtaStyles}
   ${OverwriteStickyStyles}
+  ${index.Styles}
   ${index$1.Styles}
-  ${index$2.Styles}
 `;
 const CreateSearchLink = ({ searchUrl }) => {
   if (!searchUrl) return null;
   const searchLink = document.createElement("a");
   searchLink.href = searchUrl;
   searchLink.ariaLabel = "Visit the search page";
-  searchLink.innerHTML = icons.MAGNIFY_GLASS;
+  searchLink.innerHTML = search.search;
   searchLink.classList.add(ELEMENT_HEADER_MENU_SEARCH);
   return searchLink;
 };
@@ -250,7 +269,7 @@ const CreateNavigationColumn = ({
 const CreateLogoColumn = ({ logo, eventOpen }) => {
   const container = document.createElement("div");
   if (eventOpen) {
-    const menuButton = index$2.CreateElement({ eventOpen });
+    const menuButton = index$1.CreateElement({ eventOpen });
     menuButton.classList.add(ELEMENT_HEADER_MENU_BUTTON);
     container.appendChild(menuButton);
   }