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

package/dist/composite/social/sharing.mjs

@@ -1,10 +1,8 @@
-import { token } from "@universityofmaryland/web-styles-library";
-import { EMAIL, PRINTER } from "../../utilities/assets/icons.mjs";
-import { FACEBOOK, X } from "../../utilities/assets/social.mjs";
-import { debounce } from "../../utilities/performance/index.mjs";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+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";
+import { print } from "@universityofmaryland/web-icons-library/controls";
 const ATTRIBUTE_FIXED = "fixed";
 const IS_FIXED = `[${ATTRIBUTE_FIXED}]`;
 const ELEMENT_NAME = "umd-element-social-sharing";
@@ -86,7 +84,7 @@ const STYLES_SOCIAL_SHARING_ELEMENT = `
 `;
 const CreateFacebook = () => {
   const button = document.createElement("button");
-  button.innerHTML = FACEBOOK;
+  button.innerHTML = facebook;
   button.setAttribute("aria-label", "share this page on facebook");
   button.addEventListener("click", () => {
     const shareURL = `http://www.facebook.com/share.php?u=${encodeURIComponent(
@@ -102,7 +100,7 @@ const CreateFacebook = () => {
 };
 const CreateTwitter = ({ url, title }) => {
   const button = document.createElement("button");
-  button.innerHTML = X;
+  button.innerHTML = x;
   button.setAttribute("aria-label", "share this page on twitter");
   button.addEventListener("click", () => {
     const shareURL = `http://twitter.com/share?url=${url}&text=${title}`;
@@ -115,12 +113,12 @@ const CreateEmail = ({ url, title }) => {
   link.href = `mailto:?subject=${title}&body=${url}`;
   link.setAttribute("aria-label", "email this page");
   link.setAttribute("target", "_blank");
-  link.innerHTML = EMAIL;
+  link.innerHTML = email;
   return link;
 };
 const CreatePrint = () => {
   const button = document.createElement("button");
-  button.innerHTML = PRINTER;
+  button.innerHTML = print;
   button.setAttribute("aria-label", "print this page");
   button.addEventListener("click", () => window.print());
   return button;

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

@@ -1 +1 @@
-{"version":3,"file":"sharing.mjs","sources":["../../../source/composite/social/sharing.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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 = Utility.asset.social.FACEBOOK;\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 = Utility.asset.social.X;\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 = Utility.asset.icon.EMAIL;\n\n  return link;\n};\n\nconst CreatePrint = () => {\n  const button = document.createElement('button');\n\n  button.innerHTML = Utility.asset.icon.PRINTER;\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        Utility.performance.debounce(() => eventScroll(), 20),\n      );\n\n      window.addEventListener(\n        'resize',\n        Utility.performance.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":["Utility.asset.social.FACEBOOK","Utility.asset.social.X","Utility.asset.icon.EMAIL","Utility.asset.icon.PRINTER","Utility.performance.debounce"],"mappings":"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"}
+{"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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"}

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":"AAGA,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;yBA2Pc,OAAO,aAAa;;;;;;;;AAApC,wBAgIO"}
+{"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"}

package/dist/composite/tabs/standard.js

@@ -1,8 +1,27 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../utilities/performance/index.js");
-const index$1 = require("../../utilities/theme/index.js");
-const animations = require("../../utilities/theme/animations.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const animation = require("@universityofmaryland/web-utilities-library/animation");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const ATTRIBUTE_LAYOUT_HORIZONTAL = "data-layout-horizontal";
 const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
 const ATTRIBUTE_THEME = "theme";
@@ -21,7 +40,7 @@ const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
 const OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;
 const OverwriteThemeStyles = `
   ${OVERWRITE_THEME_DARK_LINE} {
-    background-color: ${Styles.token.color.gray.dark};
+    background-color: ${token__namespace.color.gray.dark};
   }
 `;
 const DisplayLineStyles = `
@@ -31,7 +50,7 @@ const DisplayLineStyles = `
     top: 0;
     left: -2px;
     width: 2px;
-    background-color: ${Styles.token.color.gray.light};
+    background-color: ${token__namespace.color.gray.light};
     z-index: -1;
   }
 
@@ -46,7 +65,7 @@ const DisplayLineStyles = `
     width: 0;
     height: 0;
     display: block;
-    background-color: ${Styles.token.color.red};
+    background-color: ${token__namespace.color.red};
     transform: translate(0);
   }
 `;
@@ -92,26 +111,26 @@ const SetDisplay = ({
   const activeTab = getActiveTab();
   const buttonWidths = getButtonWidths();
   const buttonHeights = getButtonHeights();
-  const SetActiveContent = () => contents.map((content, index2) => {
+  const SetActiveContent = () => contents.map((content, index) => {
     if (!content) return;
-    if (index2 === activeTab) {
+    if (index === activeTab) {
       content.style.display = "block";
     } else {
       content.style.display = "none";
     }
   });
-  const SetActiveButton = () => buttons.map((button, index2) => {
-    if (index2 === activeTab) {
+  const SetActiveButton = () => buttons.map((button, index) => {
+    if (index === activeTab) {
       button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "true");
-      if (getIsThemeDark) button.style.color = `${Styles.token.color.white}`;
+      if (getIsThemeDark) button.style.color = `${token__namespace.color.white}`;
     } else {
       button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "false");
-      if (getIsThemeDark) button.style.color = `${Styles.token.color.gray.light}`;
+      if (getIsThemeDark) button.style.color = `${token__namespace.color.gray.light}`;
     }
   });
   const SetContentPosition = () => {
     const activeContent = contents[activeTab];
-    const space = isFlexLayout ? index$1.convertPixelStringToNumber(Styles.token.spacing.xl) : index$1.convertPixelStringToNumber(Styles.token.spacing.md);
+    const space = isFlexLayout ? styles.parsePixelValue(token__namespace.spacing.xl) : styles.parsePixelValue(token__namespace.spacing.md);
     if (activeContent) {
       if (transition) {
         strip.style.transition = "height 0.5s";
@@ -122,11 +141,9 @@ const SetDisplay = ({
       activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;
       activeContent.style.width = "100%";
       if (!isFlexLayout && transition) {
-        const convertedSpace = index$1.convertPixelStringToNumber(
-          Styles.token.spacing.md
-        );
+        const convertedSpace = styles.parsePixelValue(token__namespace.spacing.md);
         const spread = additionalSpread ? convertedSpace + additionalSpread : convertedSpace;
-        animations.scrollTo({
+        animation.smoothScrollToElement({
           element: activeContent,
           spread
         });
@@ -223,8 +240,8 @@ const standard = (props) => (() => {
     getIsThemeDark: isThemeDark || false
   };
   const GetContext = { GetElements, GetState };
-  const SetActiveTab = (index2) => {
-    activeTab = index2;
+  const SetActiveTab = (index) => {
+    activeTab = index;
     SetDisplay({ ...GetContext, additionalSpread });
   };
   const SetDisplayLayout = () => {
@@ -239,20 +256,20 @@ const standard = (props) => (() => {
     isFlexLayout = buttonWidths < container.offsetWidth;
   };
   const SetLoadStyles = () => {
-    buttons.forEach((button, index2) => {
-      button.addEventListener("click", () => SetActiveTab(index2));
+    buttons.forEach((button, index) => {
+      button.addEventListener("click", () => SetActiveTab(index));
       button.style.position = "relative";
       button.style.textAlign = "left";
       button.style.display = "inline-block";
-      button.style.padding = `${Styles.token.spacing.sm} ${Styles.token.spacing.md}`;
+      button.style.padding = `${token__namespace.spacing.sm} ${token__namespace.spacing.md}`;
       button.style.border = "none";
       button.style.background = "transparent";
-      Object.keys(Styles.typography.sans.large).forEach((key) => {
+      Object.keys(typography__namespace.sans.large).forEach((key) => {
         const keyRef = key;
-        button.style[keyRef] = Styles.typography.sans.large[keyRef];
+        button.style[keyRef] = typography__namespace.sans.large[keyRef];
       });
       if (isThemeDark) {
-        button.style.color = Styles.token.color.white;
+        button.style.color = token__namespace.color.white;
       }
     });
     contents.forEach((content) => {
@@ -292,10 +309,7 @@ const standard = (props) => (() => {
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
   declaration.classList.add(ELEMENT_DECLARATION);
   declaration.appendChild(container);
-  window.addEventListener(
-    "resize",
-    index.debounce(EventResize, 10)
-  );
+  window.addEventListener("resize", performance.debounce(EventResize, 10));
   return {
     element: declaration,
     styles: 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 { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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      ? Utility.theme.convertPixelStringToNumber(token.spacing.xl)\n      : Utility.theme.convertPixelStringToNumber(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 = Utility.theme.convertPixelStringToNumber(\n          token.spacing.md,\n        );\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        Utility.theme.animations.scrollTo({\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(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\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","index","Utility.theme.convertPixelStringToNumber","Utility.theme.animations.scrollTo","typography","Utility.performance.debounce"],"mappings":"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"}
+{"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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"}

package/dist/composite/tabs/standard.mjs

@@ -1,7 +1,8 @@
-import { token, typography } from "@universityofmaryland/web-styles-library";
-import { debounce } from "../../utilities/performance/index.mjs";
-import { convertPixelStringToNumber } from "../../utilities/theme/index.mjs";
-import { scrollTo } from "../../utilities/theme/animations.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+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";
+import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
 const ATTRIBUTE_LAYOUT_HORIZONTAL = "data-layout-horizontal";
 const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
 const ATTRIBUTE_THEME = "theme";
@@ -110,7 +111,7 @@ const SetDisplay = ({
   });
   const SetContentPosition = () => {
     const activeContent = contents[activeTab];
-    const space = isFlexLayout ? convertPixelStringToNumber(token.spacing.xl) : convertPixelStringToNumber(token.spacing.md);
+    const space = isFlexLayout ? parsePixelValue(token.spacing.xl) : parsePixelValue(token.spacing.md);
     if (activeContent) {
       if (transition) {
         strip.style.transition = "height 0.5s";
@@ -121,11 +122,9 @@ const SetDisplay = ({
       activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;
       activeContent.style.width = "100%";
       if (!isFlexLayout && transition) {
-        const convertedSpace = convertPixelStringToNumber(
-          token.spacing.md
-        );
+        const convertedSpace = parsePixelValue(token.spacing.md);
         const spread = additionalSpread ? convertedSpace + additionalSpread : convertedSpace;
-        scrollTo({
+        smoothScrollToElement({
           element: activeContent,
           spread
         });
@@ -291,10 +290,7 @@ const standard = (props) => (() => {
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
   declaration.classList.add(ELEMENT_DECLARATION);
   declaration.appendChild(container);
-  window.addEventListener(
-    "resize",
-    debounce(EventResize, 10)
-  );
+  window.addEventListener("resize", debounce(EventResize, 10));
   return {
     element: declaration,
     styles: 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 { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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      ? Utility.theme.convertPixelStringToNumber(token.spacing.xl)\n      : Utility.theme.convertPixelStringToNumber(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 = Utility.theme.convertPixelStringToNumber(\n          token.spacing.md,\n        );\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        Utility.theme.animations.scrollTo({\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(\n      'resize',\n      Utility.performance.debounce(EventResize, 10),\n    );\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":["Utility.theme.convertPixelStringToNumber","Utility.theme.animations.scrollTo","Utility.performance.debounce"],"mappings":"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"}
+{"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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"}

package/dist/index.d.ts

@@ -2,5 +2,4 @@ export * as Atomic from './atomic';
 export * as Composite from './composite';
 export * as Layout from './layout';
 export * as Model from './model';
-export * as Utilities from './utilities';
 //# 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;AACjC,OAAO,KAAK,SAAS,MAAM,aAAa,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;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -4,10 +4,8 @@ const atomic = require("./atomic.js");
 const composite = require("./composite.js");
 const layout = require("./layout.js");
 const model = require("./model.js");
-const utilities = require("./utilities.js");
 exports.Atomic = atomic;
 exports.Composite = composite;
 exports.Layout = layout;
 exports.Model = model;
-exports.Utilities = utilities;
 //# 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

@@ -2,12 +2,10 @@ import * as atomic from "./atomic.mjs";
 import * as composite from "./composite.mjs";
 import * as layout from "./layout.mjs";
 import * as model from "./model.mjs";
-import * as utilities from "./utilities.mjs";
 export {
   atomic as Atomic,
   composite as Composite,
   layout as Layout,
-  model as Model,
-  utilities as Utilities
+  model as Model
 };
 //# 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":";6CA4DG;QACD,KAAK,EAAE,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;QAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;;;;;;AAsCD,wBAME"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../source/layout/image.ts"],"names":[],"mappings":";6CA6DG;QACD,KAAK,EAAE,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;QAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;;;;;;AAsCD,wBAME"}

package/dist/layout/image.js

@@ -1,6 +1,25 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
 const ATTRIBUTE_CAPTION = "data-caption";
 const ATTRIBUTE_CREDIT = "data-credit";
 const ELEMENT_IMAGE_CONTAINER = "image-container";
@@ -10,9 +29,9 @@ const STYLES_IMAGE_CONTAINER = `
     display: inline-block;
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: Styles.typography.sans.min
+    [`.${ELEMENT_IMAGE_CONTAINER} > span`]: typography__namespace.sans.min
   }
 })}
 
@@ -22,9 +41,9 @@ const STYLES_IMAGE_CONTAINER = `
     right: 0;
     height: auto !important;
     width: auto !important;
-    padding: ${Styles.token.spacing.min};
+    padding: ${token__namespace.spacing.min};
     background-color: rgba(0, 0, 0, 0.5);
-    color: ${Styles.token.color.white};
+    color: ${token__namespace.color.white};
     z-index: 99;
   }