@universityofmaryland/web-elements-library 1.5.3 → 1.5.6

package/dist/composite/slider/events.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"events.mjs","sources":["../../../source/composite/slider/events.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 { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  arrow_left as iconArrowLeft,\n  arrow_right as iconArrowRight,\n} from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps & {\n    isThemeDark?: boolean;\n  };\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\n\nconst ANIMATION_DURATION = 500;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-slider-events';\nconst ELEMENT_SLIDER_EVENT_DECLRATION = 'slider-events-declaration';\nconst ELEMENT_SLIDER_EVENT_CONTAINER = 'slider-events-container';\nconst ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER = 'slider-event-container-wrapper';\nconst ELEMENT_SLIDER_EVENT_COVER = 'slider-event-cover';\n\nconst ELEMENT_SLIDER_EVENT_INTRO = 'slider-event-intro-container';\nconst ELEMENT_SLIDER_EVENT_INTRO_HEADLINE = 'slider-event-intro-headline';\nconst ELEMENT_SLIDER_EVENT_INTRO_ACTIONS = 'slider-event-intro-actions';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER = 'slider-event-slide-container';\nconst ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER = 'slider-event-slide-wrapper';\nconst ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER = 'slider-event-slide-scroller';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON = 'slider-event-slide-button';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD = 'slider-event-button-forward';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK = 'slider-event-button-back';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CONTAINER_WRAPPER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_INTRO_COVER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_COVER}`;\nconst OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;\n\n// prettier-ignore\nconst VariationThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: #fff !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_COVER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} svg {\n    fill: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover {\n    background-color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover svg {\n    fill: ${token.color.black}\n  }\n`\n\nconst ButtonStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n    border: none;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${token.color.gray.light};\n    transition: background-color ${ANIMATION_DURATION}ms;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 99;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n      width: 48px;\n      height: 48px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n    transition: fill .5s;\n    fill: ${token.color.black};\n    width: 16px;\n    height: 6px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n      width: 24px;\n      height: 8px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n    left: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n      left: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n    right: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n      right: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n`;\n\nconst DatesStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n    display: flex;\n    position: relative;\n    padding: 0 36px;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n      padding: 0 60px;\n      width: calc(100% - 96px);\n    }\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    min-height: 44px;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} ::slotted(*) {\n    margin-bottom: 0 !important;\n  }\n`;\n\nconst IntroStyles = `\n  .${ELEMENT_SLIDER_EVENT_INTRO} {\n    padding: 0 ${token.spacing.lg};\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      text-align: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      padding: 0;\n      padding-right: 24px;\n      padding-left: 0;\n      width: 200px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      width: 320px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {\n    color: ${token.color.black};\n    font-weight: 700;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {\n    margin-top: ${token.spacing.min};\n    display: block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger,\n    },\n  })}\n\n  * + .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    margin-top: ${token.spacing.min};\n  }\n  \n\n`;\n\nconst ScrollerStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nconst CoverStyles = `\n  .${ELEMENT_SLIDER_EVENT_COVER} {\n    display: block;\n    position: absolute;\n    width: 200vw;\n    height: 100%;\n    top: 0;\n    left: -100vw;\n    background-color: ${token.color.gray.lighter};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_COVER} {\n      width: 40vw;\n      left: calc(100% - 1px);\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_EVENTS_ELEMENT = `\n  .${ELEMENT_SLIDER_EVENT_DECLRATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n    padding: 24px 0;\n    background-color: ${token.color.gray.lighter};\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (max-width: 260px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      display: none\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      padding: 40px;\n    }\n  }\n  \n  ${CoverStyles}\n  ${ScrollerStyles}\n  ${IntroStyles}\n  ${DatesStyles}\n  ${ButtonStyles}\n  ${VariationThemeDark}\n`;\n\nconst CreateBackButton = ({\n  SetCountBackward,\n  SetButtonVisibility,\n  SetSlideDatesBackwards,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowLeft;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);\n  button.style.display = 'none';\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see previous date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateForwardButton = ({\n  SetCountForward,\n  SetButtonVisibility,\n  SetSlideDatesForward,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowRight;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see next date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider } = props;\n  const container = document.createElement('div');\n  const datesWrapper = document.createElement('div');\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  datesWrapper.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER);\n  dataSlider.style.display = 'block';\n  datesWrapper.appendChild(dataSlider);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER);\n  container.appendChild(backButton);\n  container.appendChild(datesWrapper);\n  container.appendChild(forwardButton);\n\n  return container;\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions } = props;\n  const introductionWrapper = document.createElement('div');\n  if (headline) {\n    headline.classList.add(ELEMENT_SLIDER_EVENT_INTRO_HEADLINE);\n    introductionWrapper.appendChild(headline);\n  }\n  if (actions) {\n    introductionWrapper.appendChild(actions);\n  }\n\n  introductionWrapper.classList.add(ELEMENT_SLIDER_EVENT_INTRO);\n\n  return introductionWrapper;\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const container = document.createElement('div');\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER);\n\n  container.appendChild(introductionWrapper);\n  container.appendChild(datesContainer);\n\n  return container;\n};\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  if (!dateElements) return;\n\n  const firstElement = dateElements[0];\n  const currentPositonAboveZero = currentPosition > 0;\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPositonAboveZero) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const buttons = Array.from(\n    container.querySelectorAll(`.${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  buttons.forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    buttons[0].style.display = 'none';\n  } else {\n    buttons[0].style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    buttons[1].style.display = 'none';\n  } else {\n    buttons[1].style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  isThemeDark,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  isThemeDark?: boolean;\n  SetButtonVisibility: () => void;\n}) => {\n  const sliderWrapper = container.querySelector(\n    `.${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER}`,\n  ) as HTMLDivElement;\n\n  const sizing = ({ sliderWrapper }: { sliderWrapper: HTMLDivElement }) => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      dataSlider.style.visibility = show ? 'visible' : 'hidden';\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        parsePixelValue(maxHeightElement.style.marginTop);\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const elementWidth = container.offsetWidth;\n      const isMobile = elementWidth < TABLET;\n\n      if (elementWidth === 0) {\n        setTimeout(() => {\n          sizing({ sliderWrapper });\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n\n        if (isMobile) {\n          const lineColor = isThemeDark\n            ? token.color.gray.mediumAA\n            : token.color.gray.light;\n\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `center`;\n          dateElement.style.paddingRight = `0`;\n          dateElement.style.marginTop = `${token.spacing.xs}`;\n          dateElement.style.paddingTop = `${token.spacing.xs}`;\n          dateElement.style.borderTop = `1px solid ${lineColor}`;\n        } else {\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `inherit`;\n          dateElement.style.paddingRight = `${token.spacing.lg}`;\n\n          dateElement.style.marginTop = `0`;\n          dateElement.style.paddingTop = `0`;\n          dateElement.style.borderTop = `none`;\n        }\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing({ sliderWrapper });\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst OnLoadStyles = ({ dataSlider }: { dataSlider: HTMLElement }) => {\n  dataSlider.style.display = 'flex';\n  dataSlider.style.position = 'absolute';\n  dataSlider.style.top = '0';\n  dataSlider.style.left = '0';\n};\n\nexport default (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const coverElement = document.createElement('div');\n    const CommonDomElements = {\n      container,\n      dataSlider,\n    };\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ ...CommonDomElements, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        ...CommonDomElements,\n        isThemeDark,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ ...CommonDomElements, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ ...CommonDomElements, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ ...CommonDomElements, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        ...CommonDomElements,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const containerWrapper = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n    const load = () => {\n      OnLoadStyles({ dataSlider });\n      EventResize();\n      SetEventSwipe();\n    };\n\n    let currentPosition = 0;\n    let styles = STYLES_SLIDER_EVENTS_ELEMENT;\n\n    dataSlider.style.visibility = 'hidden';\n\n    coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);\n\n    wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);\n\n    wrapper.appendChild(containerWrapper);\n    wrapper.appendChild(coverElement);\n\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 20));\n\n    return {\n      element: declaration,\n      styles,\n      events: {\n        load,\n        size,\n      },\n    };\n  })();\n"],"names":["iconArrowLeft","iconArrowRight","sliderWrapper"],"mappings":"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"}
+{"version":3,"file":"events.mjs","sources":["../../../source/composite/slider/events.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 { setupSwipeDetection } from '@universityofmaryland/web-utilities-library/events';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\nimport {\n  arrow_left as iconArrowLeft,\n  arrow_right as iconArrowRight,\n} from '@universityofmaryland/web-icons-library/arrows';\n\ntype TypeSliderEventButtonProps = {\n  SetCountForward: () => void;\n  SetCountBackward: () => void;\n  SetButtonVisibility: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n};\n\ntype TypeSliderEventIntroProps = {\n  headline?: HTMLElement | null;\n  actions?: HTMLElement | null;\n};\n\ntype TypeSliderEventSlideContentProps = {\n  dataSlider: HTMLDivElement;\n};\n\ntype TypeSliderEventSlideProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventButtonProps;\n\ntype TypeSliderEventScrollerProps = TypeSliderEventSlideProps &\n  TypeSliderEventIntroProps;\n\ntype TypeSliderEventProps = TypeSliderEventSlideContentProps &\n  TypeSliderEventIntroProps & {\n    isThemeDark?: boolean;\n  };\n\nconst TABLET = 750;\nconst DESKTOP = 1000;\nconst LARGE = 1300;\n\nconst ANIMATION_DURATION = 500;\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-slider-events';\nconst ELEMENT_SLIDER_EVENT_DECLRATION = 'slider-events-declaration';\nconst ELEMENT_SLIDER_EVENT_CONTAINER = 'slider-events-container';\nconst ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER = 'slider-event-container-wrapper';\nconst ELEMENT_SLIDER_EVENT_COVER = 'slider-event-cover';\n\nconst ELEMENT_SLIDER_EVENT_INTRO = 'slider-event-intro-container';\nconst ELEMENT_SLIDER_EVENT_INTRO_HEADLINE = 'slider-event-intro-headline';\nconst ELEMENT_SLIDER_EVENT_INTRO_ACTIONS = 'slider-event-intro-actions';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER = 'slider-event-slide-container';\nconst ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER = 'slider-event-slide-wrapper';\nconst ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER = 'slider-event-slide-scroller';\n\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON = 'slider-event-slide-button';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD = 'slider-event-button-forward';\nconst ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK = 'slider-event-button-back';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_CONTAINER_WRAPPER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_INTRO_COVER = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_COVER}`;\nconst OVERWRITE_THEME_DARK_INTRO_HEADLINE = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_ARROW = `.${ELEMENT_SLIDER_EVENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`;\n\n// prettier-ignore\nconst VariationThemeDark = `\n  ${OVERWRITE_THEME_DARK_CONTAINER_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: #fff !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_COVER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_INTRO_HEADLINE} {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} {\n    background-color: ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW} svg {\n    fill: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover {\n    background-color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_ARROW}:hover svg {\n    fill: ${token.color.black}\n  }\n`\n\nconst ButtonStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n    border: none;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${token.color.gray.light};\n    transition: background-color ${ANIMATION_DURATION}ms;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 99;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} {\n      width: 48px;\n      height: 48px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover {\n    background-color: ${token.color.black};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}:hover svg {\n    fill: ${token.color.white};\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n    transition: fill .5s;\n    fill: ${token.color.black};\n    width: 16px;\n    height: 6px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON} svg {\n      width: 24px;\n      height: 8px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n    left: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK} {\n      left: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n    right: 0;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD} {\n      right: -24px;\n      top: ${token.spacing.xs};\n    }\n  }\n`;\n\nconst DatesStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n    display: flex;\n    position: relative;\n    padding: 0 36px;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER} {\n      padding: 0 60px;\n      width: calc(100% - 96px);\n    }\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    min-height: 44px;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER} ::slotted(*) {\n    margin-bottom: 0 !important;\n  }\n`;\n\nconst IntroStyles = `\n  .${ELEMENT_SLIDER_EVENT_INTRO} {\n    padding: 0 ${token.spacing.lg};\n    position: relative;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${TABLET - 1}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      text-align: center;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      padding: 0;\n      padding-right: 24px;\n      padding-left: 0;\n      width: 200px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ELEMENT_SLIDER_EVENT_INTRO} {\n      width: 320px;\n    }\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} {\n    color: ${token.color.black};\n    font-weight: 700;\n  }\n\n  .${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE} + * {\n    margin-top: ${token.spacing.min};\n    display: block;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_SLIDER_EVENT_INTRO_HEADLINE}`]: typography.sans.larger,\n    },\n  })}\n\n  * + .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    text-decoration: none;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_INTRO_ACTIONS} {\n    margin-top: ${token.spacing.min};\n  }\n  \n\n`;\n\nconst ScrollerStyles = `\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n  .${ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER} {\n      display: flex;\n      align-items: center;\n    }\n  }\n`;\n\nconst CoverStyles = `\n  .${ELEMENT_SLIDER_EVENT_COVER} {\n    display: block;\n    position: absolute;\n    width: 200vw;\n    height: 100%;\n    top: 0;\n    left: -100vw;\n    background-color: ${token.color.gray.lighter};\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_COVER} {\n      width: 40vw;\n      left: calc(100% - 1px);\n    }\n  }\n`;\n\n// prettier-ignore\nconst STYLES_SLIDER_EVENTS_ELEMENT = `\n  .${ELEMENT_SLIDER_EVENT_DECLRATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n  \n  .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n    padding: 24px 0;\n    background-color: ${token.color.gray.lighter};\n    position: relative;\n    z-index: 99;\n  }\n  \n  @container ${ELEMENT_NAME} (max-width: 260px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      display: none\n    }\n  }\n  \n  @container ${ELEMENT_NAME} (min-width: ${TABLET}px) {\n    .${ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER} {\n      padding: 40px;\n    }\n  }\n  \n  ${CoverStyles}\n  ${ScrollerStyles}\n  ${IntroStyles}\n  ${DatesStyles}\n  ${ButtonStyles}\n  ${VariationThemeDark}\n`;\n\nconst CreateBackButton = ({\n  SetCountBackward,\n  SetButtonVisibility,\n  SetSlideDatesBackwards,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowLeft;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_BACK);\n  button.style.display = 'none';\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see previous date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountBackward();\n    SetButtonVisibility();\n    SetSlideDatesBackwards();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateForwardButton = ({\n  SetCountForward,\n  SetButtonVisibility,\n  SetSlideDatesForward,\n}: TypeSliderEventButtonProps) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconArrowRight;\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON);\n  button.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_BUTTON_FORWARD);\n  button.setAttribute('type', 'button');\n  button.setAttribute('aria-label', 'see next date');\n\n  const clickEvent = () => {\n    if (button.hasAttribute('disabled')) return;\n    SetCountForward();\n    SetButtonVisibility();\n    SetSlideDatesForward();\n  };\n\n  button.addEventListener('click', clickEvent);\n  button.addEventListener('touchstart', clickEvent);\n\n  return button;\n};\n\nconst CreateDatesContainer = (props: TypeSliderEventSlideProps) => {\n  const { dataSlider } = props;\n  const container = document.createElement('div');\n  const datesWrapper = document.createElement('div');\n  const backButton = CreateBackButton(props);\n  const forwardButton = CreateForwardButton(props);\n\n  datesWrapper.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER);\n  dataSlider.style.display = 'block';\n  datesWrapper.appendChild(dataSlider);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_CONTAINTER);\n  container.appendChild(backButton);\n  container.appendChild(datesWrapper);\n  container.appendChild(forwardButton);\n\n  return container;\n};\n\nconst CreateIntroWrapper = (props: TypeSliderEventIntroProps) => {\n  const { headline, actions } = props;\n  const introductionWrapper = document.createElement('div');\n  if (headline) {\n    headline.classList.add(ELEMENT_SLIDER_EVENT_INTRO_HEADLINE);\n    introductionWrapper.appendChild(headline);\n  }\n  if (actions) {\n    introductionWrapper.appendChild(actions);\n  }\n\n  introductionWrapper.classList.add(ELEMENT_SLIDER_EVENT_INTRO);\n\n  return introductionWrapper;\n};\n\nconst CreateScrollerWrapper = (props: TypeSliderEventScrollerProps) => {\n  const container = document.createElement('div');\n  const introductionWrapper = CreateIntroWrapper(props);\n  const datesContainer = CreateDatesContainer(props);\n\n  container.classList.add(ELEMENT_SLIDER_EVENT_SLIDE_SCROLLER);\n\n  container.appendChild(introductionWrapper);\n  container.appendChild(datesContainer);\n\n  return container;\n};\n\nconst ShowNumberOfDates = ({ container }: { container: HTMLElement }) => {\n  let count = 1;\n\n  if (container.offsetWidth > TABLET) count = 2;\n  if (container.offsetWidth > DESKTOP) count = 3;\n  if (container.offsetWidth > LARGE) count = 4;\n\n  return count;\n};\n\nconst JumpToDate = ({\n  dataSlider,\n  currentPosition,\n}: {\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n\n  if (!dateElements) return;\n\n  const firstElement = dateElements[0];\n  const currentPositonAboveZero = currentPosition > 0;\n  const currentElement = dateElements[currentPosition];\n  let endPosition = 0;\n\n  if (currentPositonAboveZero) {\n    endPosition = currentElement.offsetLeft - firstElement.offsetLeft;\n  }\n\n  dataSlider.style.transform = `translateX(${-endPosition}px)`;\n};\n\nconst ButtonVisibilityLogic = ({\n  container,\n  dataSlider,\n  currentPosition,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const buttons = Array.from(\n    container.querySelectorAll(`.${ELEMENT_SLIDER_EVENT_SLIDE_BUTTON}`),\n  ) as HTMLButtonElement[];\n  const count = ShowNumberOfDates({ container });\n  const length = dateElements.length;\n\n  buttons.forEach((button) => {\n    button.setAttribute('disabled', '');\n\n    setTimeout(() => {\n      button.removeAttribute('disabled');\n    }, ANIMATION_DURATION + 100);\n  });\n\n  if (currentPosition === 0) {\n    buttons[0].style.display = 'none';\n  } else {\n    buttons[0].style.display = 'flex';\n  }\n\n  if (currentPosition >= length - count) {\n    buttons[1].style.display = 'none';\n  } else {\n    buttons[1].style.display = 'flex';\n  }\n};\n\nconst SizeDatesElements = ({\n  container,\n  dataSlider,\n  isThemeDark,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  isThemeDark?: boolean;\n  SetButtonVisibility: () => void;\n}) => {\n  const sliderWrapper = container.querySelector(\n    `.${ELEMENT_SLIDER_EVENT_SLIDE_WRAPPER}`,\n  ) as HTMLDivElement;\n\n  const sizing = ({ sliderWrapper }: { sliderWrapper: HTMLDivElement }) => {\n    const dateElements = Array.from(\n      dataSlider.querySelectorAll(':scope > *'),\n    ) as HTMLDivElement[];\n\n    const sliderVisibility = ({ show = true }: { show?: boolean }) => {\n      dataSlider.style.visibility = show ? 'visible' : 'hidden';\n    };\n\n    const setHeight = () => {\n      const maxHeightElement = dateElements.sort((a, b) => {\n        return a.offsetHeight - b.offsetHeight;\n      })[0];\n      const height =\n        maxHeightElement.offsetHeight +\n        parsePixelValue(maxHeightElement.style.marginTop);\n\n      sliderWrapper.style.height = `${height}px`;\n    };\n\n    const setWidthPerDate = () => {\n      const count = ShowNumberOfDates({ container });\n      const dateElementSize = sliderWrapper.offsetWidth / count;\n      const elementWidth = container.offsetWidth;\n      const isMobile = elementWidth < TABLET;\n\n      if (elementWidth === 0) {\n        setTimeout(() => {\n          sizing({ sliderWrapper });\n        }, 200);\n        return;\n      }\n\n      dataSlider.style.width = `${dateElements.length * dateElementSize}px`;\n\n      dateElements.forEach((dateElement) => {\n        dateElement.style.width = `${dateElementSize}px`;\n\n        if (isMobile) {\n          const lineColor = isThemeDark\n            ? token.color.gray.mediumAA\n            : token.color.gray.light;\n\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `center`;\n          dateElement.style.paddingRight = `0`;\n          dateElement.style.marginTop = `${token.spacing.xs}`;\n          dateElement.style.paddingTop = `${token.spacing.xs}`;\n          dateElement.style.borderTop = `1px solid ${lineColor}`;\n        } else {\n          dateElement.style.display = `flex`;\n          dateElement.style.justifyContent = `inherit`;\n          dateElement.style.paddingRight = `${token.spacing.lg}`;\n\n          dateElement.style.marginTop = `0`;\n          dateElement.style.paddingTop = `0`;\n          dateElement.style.borderTop = `none`;\n        }\n      });\n    };\n\n    sliderVisibility({ show: false });\n    setWidthPerDate();\n    setHeight();\n    sliderVisibility({ show: true });\n    SetButtonVisibility();\n  };\n\n  sizing({ sliderWrapper });\n};\n\nconst EventSlideDates = ({\n  forward,\n  dataSlider,\n}: {\n  forward: boolean;\n  dataSlider: HTMLElement;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const width = dateElements[0].offsetWidth;\n  const loop = 30;\n  const sliderStyle = dataSlider.style.transform;\n  const sliderPosition = sliderStyle\n    ? parseInt(sliderStyle.replace(/[^\\d.]/g, ''))\n    : 0;\n  const endPosition = forward\n    ? Math.floor(sliderPosition + width)\n    : Math.floor(sliderPosition - width);\n  const increment = width / loop;\n  let index = 1;\n\n  const slideFunction = () => {\n    const incrementIncrease = increment * index;\n    const postion = forward\n      ? sliderPosition + incrementIncrease\n      : sliderPosition - incrementIncrease;\n\n    if (loop > index) {\n      index++;\n      window.requestAnimationFrame(slideFunction);\n      dataSlider.style.transform = `translateX(${-postion}px)`;\n    } else {\n      dataSlider.style.transform = `translateX(${-endPosition}px)`;\n    }\n  };\n\n  window.requestAnimationFrame(slideFunction);\n};\n\nconst EventSwipe = ({\n  container,\n  dataSlider,\n  currentPosition,\n  SetCountBackward,\n  SetCountForward,\n  SetSlideDatesBackwards,\n  SetSlideDatesForward,\n  SetButtonVisibility,\n}: {\n  container: HTMLElement;\n  dataSlider: HTMLElement;\n  currentPosition: number;\n  SetCountBackward: () => void;\n  SetCountForward: () => void;\n  SetSlideDatesBackwards: () => void;\n  SetSlideDatesForward: () => void;\n  SetButtonVisibility: () => void;\n}) => {\n  const dateElements = Array.from(\n    dataSlider.querySelectorAll(':scope > *'),\n  ) as HTMLDivElement[];\n  const count = ShowNumberOfDates({ container });\n  const swipes = (isrightswipe: Boolean) => {\n    if (isrightswipe) {\n      if (currentPosition > 0) {\n        SetCountBackward();\n        SetSlideDatesBackwards();\n      }\n    } else {\n      if (currentPosition <= dateElements.length - count) {\n        SetCountForward();\n        SetSlideDatesForward();\n      }\n    }\n\n    SetButtonVisibility();\n  };\n\n  setupSwipeDetection({ container, callback: swipes });\n};\n\nconst OnLoadStyles = ({ dataSlider }: { dataSlider: HTMLElement }) => {\n  dataSlider.style.display = 'flex';\n  dataSlider.style.position = 'absolute';\n  dataSlider.style.top = '0';\n  dataSlider.style.left = '0';\n};\n\nexport default (props: TypeSliderEventProps) =>\n  (() => {\n    const { isThemeDark, dataSlider } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const coverElement = document.createElement('div');\n    const CommonDomElements = {\n      container,\n      dataSlider,\n    };\n\n    const SetCountForward = () => (currentPosition = currentPosition + 1);\n    const SetCountBackward = () => (currentPosition = currentPosition - 1);\n    const SetButtonVisibility = () =>\n      ButtonVisibilityLogic({ ...CommonDomElements, currentPosition });\n    const size = () =>\n      SizeDatesElements({\n        ...CommonDomElements,\n        isThemeDark,\n        SetButtonVisibility,\n      });\n    const SetJumpToDate = () =>\n      JumpToDate({ ...CommonDomElements, currentPosition });\n    const SetSlideDatesForward = () =>\n      EventSlideDates({ ...CommonDomElements, forward: true });\n    const SetSlideDatesBackwards = () =>\n      EventSlideDates({ ...CommonDomElements, forward: false });\n    const SetEventSwipe = () =>\n      EventSwipe({\n        ...CommonDomElements,\n        currentPosition,\n        SetCountBackward,\n        SetCountForward,\n        SetSlideDatesBackwards,\n        SetSlideDatesForward,\n        SetButtonVisibility,\n      });\n    const EventResize = () => {\n      size();\n      SetJumpToDate();\n      SetButtonVisibility();\n    };\n    const containerWrapper = CreateScrollerWrapper({\n      ...props,\n      SetCountForward,\n      SetCountBackward,\n      SetButtonVisibility,\n      SetSlideDatesBackwards,\n      SetSlideDatesForward,\n    });\n    const load = () => {\n      OnLoadStyles({ dataSlider });\n      EventResize();\n      SetEventSwipe();\n    };\n\n    let currentPosition = 0;\n    let styles = STYLES_SLIDER_EVENTS_ELEMENT;\n\n    dataSlider.style.visibility = 'hidden';\n\n    coverElement.classList.add(ELEMENT_SLIDER_EVENT_COVER);\n\n    wrapper.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER_WRAPPER);\n\n    wrapper.appendChild(containerWrapper);\n    wrapper.appendChild(coverElement);\n\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n    container.classList.add(ELEMENT_SLIDER_EVENT_CONTAINER);\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_SLIDER_EVENT_DECLRATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 20));\n\n    return {\n      element: declaration,\n      styles,\n      events: {\n        load,\n        size,\n      },\n    };\n  })();\n"],"names":["iconArrowLeft","iconArrowRight","sliderWrapper"],"mappings":"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"}

package/dist/composite/social/sharing.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
 const social = require("@universityofmaryland/web-icons-library/social");
 const communication = require("@universityofmaryland/web-icons-library/communication");

package/dist/composite/social/sharing.js.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["token","iconFacebook","iconX","iconEmail","iconPrint","debounce"],"mappings":"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"}
+{"version":3,"file":"sharing.js","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["token","iconFacebook","iconX","iconEmail","iconPrint","debounce"],"mappings":"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"}

package/dist/composite/social/sharing.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { facebook, x } from "@universityofmaryland/web-icons-library/social";
 import { email } from "@universityofmaryland/web-icons-library/communication";

package/dist/composite/social/sharing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sharing.mjs","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}
+{"version":3,"file":"sharing.mjs","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { facebook as iconFacebook, x as iconX } from '@universityofmaryland/web-icons-library/social';\nimport { email as iconEmail } from '@universityofmaryland/web-icons-library/communication';\nimport { print as iconPrint } from '@universityofmaryland/web-icons-library/controls';\n\ntype TypeSocialSharingProps = {\n  isFixed?: boolean;\n  includeFacebook?: boolean;\n  includeTwitter?: boolean;\n  includeEmail?: boolean;\n  includePrint?: boolean;\n  title?: string | null;\n  url?: string | null;\n};\n\nconst ATTRIBUTE_FIXED = 'fixed';\n\nconst IS_FIXED = `[${ATTRIBUTE_FIXED}]`;\n\nconst ELEMENT_NAME = 'umd-element-social-sharing';\nconst ELEMENT_SOCIAL_SHARING_DECLARATION = 'social-sharing-declarion';\nconst ELEMENT_SOCIAL_SHARING_CONTAINER = 'social-sharing-container';\n\nconst OVERWRITE_FIXED_CONTAINER = `.${ELEMENT_SOCIAL_SHARING_CONTAINER}${IS_FIXED}`;\n\n// prettier-ignore\nconst OverwriteFixed = `\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} {\n      flex-direction: column;\n    }\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    ${OVERWRITE_FIXED_CONTAINER} > *:not(:last-child) {\n      border-right: 1px solid ${token.color.gray.light};\n      border-bottom: none;\n    }\n  }\n`\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} {\n    display: flex;\n    transition: transform 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > * {\n    height: ${token.spacing['2xl']};\n    width: ${token.spacing['2xl']};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid ${token.color.gray.light};\n    background-color: ${token.color.white};\n    transition: background-color 250ms ease-in-out;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > button:focus,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:hover,\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > a:focus {\n    background-color: ${token.color.gray.dark};\n\n    & svg path {\n      fill: ${token.color.white};\n    }\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} > *:not(:last-child) {\n    border-right: none;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg {\n    display: block;\n    transition: fill 250ms ease-in-out;\n  }\n  \n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg path {\n    fill: ${token.color.black};\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_facebook {\n    width: 34px;\n    height: 30px;\n  }\n\n  .${ELEMENT_SOCIAL_SHARING_CONTAINER} svg#icon_email {\n    width: 21px;\n    height: 20px;\n  }\n`\n\n// prettier-ignore\nconst STYLES_SOCIAL_SHARING_ELEMENT = `\n  .${ELEMENT_SOCIAL_SHARING_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${ContainerStyles}\n  ${OverwriteFixed}\n`;\n\nconst CreateFacebook = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconFacebook;\n  button.setAttribute('aria-label', 'share this page on facebook');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(\n      window.location.toString(),\n    )}`;\n\n    window.open(\n      shareURL,\n      'Facebook',\n      'toolbar=0,status=0,width=626,height=436',\n    );\n  });\n\n  return button;\n};\n\nconst CreateTwitter = ({ url, title }: { url: string; title: string }) => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconX;\n  button.setAttribute('aria-label', 'share this page on twitter');\n\n  button.addEventListener('click', () => {\n    const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;\n\n    window.open(shareURL, 'sharer', 'toolbar=0,status=0,width=626,height=436');\n  });\n\n  return button;\n};\n\nconst CreateEmail = ({ url, title }: { url: string; title: string }) => {\n  const link = document.createElement('a');\n\n  link.href = `mailto:?subject=${title}&body=${url}`;\n  link.setAttribute('aria-label', 'email this page');\n  link.setAttribute('target', '_blank');\n\n  link.innerHTML = iconEmail;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = iconPrint;\n  button.setAttribute('aria-label', 'print this page');\n  button.addEventListener('click', () => window.print());\n\n  return button;\n};\n\nconst CreateSocialSharingElement = (props: TypeSocialSharingProps) =>\n  (() => {\n    const {\n      includeFacebook = true,\n      includeTwitter = true,\n      includeEmail = false,\n      includePrint = false,\n      title: defaultTitle,\n      url: defaultUrl,\n      isFixed = false,\n    } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const defaultStartingPosition = `translateX(-100vh)`;\n    const title = defaultTitle || document.title;\n    const url = defaultUrl || window.location.toString();\n\n    const getSpacing = () => (window.innerWidth > 768 ? 40 : 8);\n    let startingPosition: null | number = null;\n    let isShowing = false;\n\n    const eventResize = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n    };\n\n    const eventScroll = () => {\n      const windowHeight = window.innerHeight;\n      const pagePosition = window.scrollY;\n      const isNearBottom =\n        pagePosition + windowHeight >=\n        document.body.scrollHeight - windowHeight / 2;\n      const showWindow = !isNearBottom;\n\n      if (showWindow) {\n        setVisiblePosition();\n      } else {\n        setHiddenPosition();\n      }\n    };\n\n    const setVisiblePosition = () => {\n      if (!isShowing) {\n        container.style.transform = 'translateX(0)';\n        isShowing = true;\n      }\n    };\n\n    const setHiddenPosition = () => {\n      if (isShowing) {\n        isShowing = false;\n\n        if (startingPosition) {\n          const spacing = getSpacing();\n          const translateAmount = window.innerWidth - startingPosition;\n          const position = translateAmount + spacing + container.offsetWidth;\n\n          container.style.transform = `translateX(-${position}px)`;\n        } else {\n          container.style.transform = defaultStartingPosition;\n        }\n      }\n    };\n\n    const load = () => {\n      startingPosition = declaration.getBoundingClientRect().left;\n      container.style.transition = 'none';\n      setHiddenPosition();\n\n      setTimeout(() => {\n        container.style.transition = 'transform 250ms ease-in-out';\n      }, 100);\n    };\n\n    container.classList.add(ELEMENT_SOCIAL_SHARING_CONTAINER);\n\n    if (includeFacebook) {\n      container.appendChild(CreateFacebook());\n    }\n\n    if (includeTwitter) {\n      container.appendChild(\n        CreateTwitter({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includeEmail) {\n      container.appendChild(\n        CreateEmail({\n          title,\n          url,\n        }),\n      );\n    }\n\n    if (includePrint) {\n      container.appendChild(CreatePrint());\n    }\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_SOCIAL_SHARING_DECLARATION);\n\n    if (isFixed) {\n      container.setAttribute(ATTRIBUTE_FIXED, '');\n      window.addEventListener(\n        'scroll',\n        debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        debounce(() => eventResize(), 20),\n      );\n    }\n\n    return {\n      element: declaration,\n      events: {\n        load,\n      },\n      styles: STYLES_SOCIAL_SHARING_ELEMENT,\n    };\n  })();\n\nexport default CreateSocialSharingElement;\n"],"names":["iconFacebook","iconX","iconEmail","iconPrint"],"mappings":"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"}

package/dist/composite/tabs/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAMA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;yBAyPc,OAAO,aAAa;;;;;;;;AAApC,wBA6HO"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAMA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;yBA0Pc,OAAO,aAAa;;;;;;;;AAApC,wBA6HO"}

package/dist/composite/tabs/standard.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const animation = require("@universityofmaryland/web-utilities-library/animation");
 const performance = require("@universityofmaryland/web-utilities-library/performance");
@@ -51,7 +51,7 @@ const DisplayLineStyles = `
     left: -2px;
     width: 2px;
     background-color: ${token__namespace.color.gray.light};
-    z-index: -1;
+    z-index: 9;
   }
 
   ${OVERWRITE_VERTICAL_LAYOUT_LINE} {
@@ -67,6 +67,7 @@ const DisplayLineStyles = `
     display: block;
     background-color: ${token__namespace.color.red};
     transform: translate(0);
+    z-index: 99;
   }
 `;
 const STYLES_TABS_ELEMENT = `

package/dist/composite/tabs/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: -1;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":["token","parsePixelValue","smoothScrollToElement","typography","debounce"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: 9;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n    z-index: 99;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":["token","parsePixelValue","smoothScrollToElement","typography","debounce"],"mappings":"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"}

package/dist/composite/tabs/standard.mjs

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { smoothScrollToElement } from "@universityofmaryland/web-utilities-library/animation";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
@@ -32,7 +32,7 @@ const DisplayLineStyles = `
     left: -2px;
     width: 2px;
     background-color: ${token.color.gray.light};
-    z-index: -1;
+    z-index: 9;
   }
 
   ${OVERWRITE_VERTICAL_LAYOUT_LINE} {
@@ -48,6 +48,7 @@ const DisplayLineStyles = `
     display: block;
     background-color: ${token.color.red};
     transform: translate(0);
+    z-index: 99;
   }
 `;
 const STYLES_TABS_ELEMENT = `

package/dist/composite/tabs/standard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"standard.mjs","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: -1;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"standard.mjs","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: 9;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n    z-index: 99;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * as Atomic from './atomic';
 export * as Composite from './composite';
 export * as Layout from './layout';
-export * as Model from './model';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../source/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../source/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atomic = require("./atomic.js");
 const composite = require("./composite.js");
 const layout = require("./layout.js");
-const model = require("./model.js");
 exports.Atomic = atomic;
 exports.Composite = composite;
 exports.Layout = layout;
-exports.Model = model;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/index.mjs

@@ -1,11 +1,9 @@
 import * as atomic from "./atomic.mjs";
 import * as composite from "./composite.mjs";
 import * as layout from "./layout.mjs";
-import * as model from "./model.mjs";
 export {
   atomic as Atomic,
   composite as Composite,
-  layout as Layout,
-  model as Model
+  layout as Layout
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/layout/image.js

@@ -1,5 +1,5 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
 function _interopNamespaceDefault(e) {