@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

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

@@ -1,26 +1,7 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const animation = require("@universityofmaryland/web-styles-library/animation");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const animation$1 = require("@universityofmaryland/web-utilities-library/animation");
-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 animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
+import * as token from "@universityofmaryland/web-token-library";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
 const Attributes = {
   names: {
     theme: "theme"
@@ -38,16 +19,16 @@ const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
 const OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;
 const OverwriteThemeStyles = `
   ${OVERWRITE_THEME_DARK_CONTAINER} * {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
   }
 
   ${OVERWRITE_THEME_DARK_PATH} + *::before {
-    background-color: ${token__namespace.color.gray.dark};
+    background-color: ${token.color.gray.dark};
   }
   
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]: animation__namespace.line.slideUnderGrayDarkRed
+    [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]: animation.line.slideUnderGrayDarkRed
   }
 })}
 `;
@@ -57,7 +38,7 @@ const PathStyles = `
   }
 
   .${ELEMENT_PATH}:last-child {
-    color: ${token__namespace.color.black};
+    color: ${token.color.black};
   }
 
   .${ELEMENT_PATH}:not(:last-child) {
@@ -68,7 +49,7 @@ const PathStyles = `
     content: '';
     display: inline-block;
     height: 14px;
-    background-color: ${token__namespace.color.gray.dark};
+    background-color: ${token.color.gray.dark};
     left: -8px;
     position: absolute;
     top: 50%;
@@ -85,23 +66,23 @@ const ContainerStyles = `
     overflow-x: auto;
     scrollbar-width: none;
     white-space: nowrap;
-    mask-image: linear-gradient(90deg, ${token__namespace.color.white} calc(100% - 24px), transparent);
+    mask-image: linear-gradient(90deg, ${token.color.white} calc(100% - 24px), transparent);
   }
 
   .${ELEMENT_CONTAINER} * {
-    color: ${token__namespace.color.gray.mediumAA};
+    color: ${token.color.gray.mediumAA};
     position: relative;
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_CONTAINER} a:not(:last-child)`]: animation__namespace.line.slideUnderGrayRed
+    [`.${ELEMENT_CONTAINER} a:not(:last-child)`]: animation.line.slideUnderGrayRed
   }
 })}
 `;
-const index = ({ isThemeDark, linkListSlot }) => {
+const CreateBreadcrumbElement = ({ isThemeDark, linkListSlot }) => {
   const links = linkListSlot.querySelectorAll("a");
-  let styles2 = `
+  let styles = `
     ${ContainerStyles}
     ${PathStyles}
     ${OverwriteThemeStyles}
@@ -114,11 +95,14 @@ const index = ({ isThemeDark, linkListSlot }) => {
   linkListSlot.classList.add(ELEMENT_CONTAINER);
   for (const linkElement of links) {
     linkElement.classList.add(ELEMENT_PATH);
-    animation$1.wrapLinkForAnimation({
+    wrapLinkForAnimation({
       element: linkElement
     });
   }
-  return { element: linkListSlot, styles: styles2 };
+  return { element: linkListSlot, styles };
+};
+const createCompositeNavigationBreadcrumb = CreateBreadcrumbElement;
+export {
+  createCompositeNavigationBreadcrumb
 };
-module.exports = index;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nexport default ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n"],"names":["token","jssToCSS","animation","styles","wrapLinkForAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrBA,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACLA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9CC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJF,iBAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIOA,iBAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShBA,iBAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACTA,iBAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlCC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzCC,qBAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAA,QAAe,CAAC,EAAE,aAAa,mBAAoC;AACjE,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAIC,UAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtCC,qCAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,QAAAD,QAAA;AAClC;;"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/navigation/elements/breadcrumb/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\nexport interface BreadcrumbProps {\n  isThemeDark?: boolean;\n  linkListSlot: HTMLElement;\n}\n\nconst Attributes = {\n  names: {\n    theme: 'theme',\n  },\n  values: {\n    theme: {\n      DARK: 'dark',\n    },\n  },\n};\n\nconst ELEMENT_NAME = 'umd-element-breadcrumb';\n\nconst IS_THEME_DARK = `[${Attributes.names.theme}=${Attributes.values.theme.DARK}]`;\n\nconst ELEMENT_CONTAINER = 'breadcrumb-container';\nconst ELEMENT_PATH = 'breadcrumb-path';\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_PATH = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_PATH}`;\n\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_CONTAINER} * {\n    color: ${token.color.white};\n  }\n\n  ${OVERWRITE_THEME_DARK_PATH} + *::before {\n    background-color: ${token.color.gray.dark};\n  }\n  \n  ${jssToCSS({\n    styleObj: {\n      [`${OVERWRITE_THEME_DARK_PATH}:not(:last-child)`]:\n        animation.line.slideUnderGrayDarkRed,\n    },\n  })}\n`;\n\nconst PathStyles = `\n  .${ELEMENT_PATH}::-webkit-scrollbar { \n    display: none;\n  }\n\n  .${ELEMENT_PATH}:last-child {\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_PATH}:not(:last-child) {\n    margin-right: 14px;\n  }\n\n  .${ELEMENT_PATH} + *::before {\n    content: '';\n    display: inline-block;\n    height: 14px;\n    background-color: ${token.color.gray.dark};\n    left: -8px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%) rotate(15deg);\n    width: 1px;\n  }\n`;\n\nconst ContainerStyles = `\n  .${ELEMENT_CONTAINER} {\n    display: flex;\n    padding-right: 24px;\n    font-size: 12px;\n    padding-bottom: 1px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    white-space: nowrap;\n    mask-image: linear-gradient(90deg, ${\n      token.color.white\n    } calc(100% - 24px), transparent);\n  }\n\n  .${ELEMENT_CONTAINER} * {\n    color: ${token.color.gray.mediumAA};\n    position: relative;\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_CONTAINER} a:not(:last-child)`]:\n        animation.line.slideUnderGrayRed,\n    },\n  })}\n`;\n\nconst CreateBreadcrumbElement = ({ isThemeDark, linkListSlot }: BreadcrumbProps) => {\n  const links = linkListSlot.querySelectorAll('a') as NodeListOf<HTMLElement>;\n  let styles = `\n    ${ContainerStyles}\n    ${PathStyles}\n    ${OverwriteThemeStyles}\n  `;\n\n  if (isThemeDark)\n    linkListSlot.setAttribute(\n      Attributes.names.theme,\n      Attributes.values.theme.DARK,\n    );\n  linkListSlot.classList.add(ELEMENT_CONTAINER);\n\n  for (const linkElement of links) {\n    linkElement.classList.add(ELEMENT_PATH);\n    wrapLinkForAnimation({\n      element: linkElement,\n    });\n  }\n\n  return { element: linkListSlot, styles };\n};\n\nexport const createCompositeNavigationBreadcrumb = CreateBreadcrumbElement;\n"],"names":[],"mappings":";;;;AAUA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,gBAAgB,IAAI,WAAW,MAAM,KAAK,IAAI,WAAW,OAAO,MAAM,IAAI;AAEhF,MAAM,oBAAoB;AAC1B,MAAM,eAAe;AAErB,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,YAAY;AAEpF,MAAM,uBAAuB;AAAA,IACzB,8BAA8B;AAAA,aACrB,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA,wBACL,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,GAAG,yBAAyB,mBAAmB,GAC9C,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,aAAa;AAAA,KACd,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA,aACJ,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIZ,YAAY;AAAA;AAAA;AAAA;AAAA,wBAIO,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,kBAAkB;AAAA,KACnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAShB,MAAM,MAAM,KACd;AAAA;AAAA;AAAA,KAGC,iBAAiB;AAAA,aACT,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIlC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,iBAAiB,qBAAqB,GACzC,UAAU,KAAK;AAAA,EAAA;AAErB,CAAC,CAAC;AAAA;AAGJ,MAAM,0BAA0B,CAAC,EAAE,aAAa,mBAAoC;AAClF,QAAM,QAAQ,aAAa,iBAAiB,GAAG;AAC/C,MAAI,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,oBAAoB;AAAA;AAGxB,MAAI;AACF,iBAAa;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,WAAW,OAAO,MAAM;AAAA,IAAA;AAE5B,eAAa,UAAU,IAAI,iBAAiB;AAE5C,aAAW,eAAe,OAAO;AAC/B,gBAAY,UAAU,IAAI,YAAY;AACtC,yBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO,EAAE,SAAS,cAAc,OAAA;AAClC;AAEO,MAAM,sCAAsC;"}

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

@@ -8,7 +8,7 @@ type TypeDrawerCloseButton = {
 };
 type CombinedNavDrawerProps = TypeNavDrawerRequirements & TypeDrawerCloseButton & TypeMenuDisplayButtonRequirements;
 export type TypeDrawerProps = CombinedNavDrawerProps;
-declare const _default: {
+export declare const createCompositeNavigationDrawer: {
     CreateElement: (props: TypeNavDrawerRequirements) => {
         element: HTMLDivElement;
         events: {
@@ -17,5 +17,5 @@ declare const _default: {
     } | null;
     Styles: string;
 };
-export default _default;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,25 +1,7 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const events = require("@universityofmaryland/web-utilities-library/events");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-const index$1 = require("../slider/index.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-library";
+import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
+import { close_large } from "@universityofmaryland/web-icons-library/controls";
+import { createCompositeNavigationSlider } from "../slider/index.js";
 const ANIMATION_TIME = 300;
 const ELEMENT_NAV_DRAWER_CONTAINER = "nav-drawer-container";
 const ELEMENT_NAV_DRAWER_OVERLAY = "nav-drawer-overlay";
@@ -27,12 +9,12 @@ const ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER = "nav-drawer-overlay-wrapper";
 const ELEMENT_NAV_DRAWER_CLOSE_BUTTON = "nav-drawer-close-button";
 const DrawerButtonClose = `
   .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} {
-    background-color: ${token__namespace.color.red};
+    background-color: ${token.color.red};
     display: flex;
     align-items: center;
     justify-content: center;
-    height: ${token__namespace.spacing["2xl"]};
-    width: ${token__namespace.spacing["2xl"]};
+    height: ${token.spacing["2xl"]};
+    width: ${token.spacing["2xl"]};
     padding: 12px;
     transition: background .5s ease-in-out;
     order: 2;
@@ -40,11 +22,11 @@ const DrawerButtonClose = `
 
   .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:hover,
   .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}:focus {
-    background-color: ${token__namespace.color.redDark};
+    background-color: ${token.color.redDark};
   }
 
   .${ELEMENT_NAV_DRAWER_CLOSE_BUTTON} svg {
-    fill: ${token__namespace.color.white};
+    fill: ${token.color.white};
   }
 `;
 const DrawerContainer = `
@@ -81,13 +63,13 @@ const DrawerContainer = `
   }
 `;
 const STYLES_NAV_DRAWER_ELEMENT = `
-  ${index$1.Styles}
+  ${createCompositeNavigationSlider.Styles}
   ${DrawerButtonClose}
   ${DrawerContainer}
 `;
 const CreateDrawerButton = (element) => {
   const drawerCloseButton = document.createElement("button");
-  drawerCloseButton.innerHTML = controls.close_large;
+  drawerCloseButton.innerHTML = close_large;
   drawerCloseButton.classList.add(ELEMENT_NAV_DRAWER_CLOSE_BUTTON);
   drawerCloseButton.setAttribute("aria-label", "Close navigation drawer");
   drawerCloseButton.addEventListener("click", element.eventClose.bind(element));
@@ -98,7 +80,7 @@ const CreateNavDrawerContainer = (props) => {
   const bodyOverlay = document.createElement("div");
   const bodyOverlayWrapper = document.createElement("div");
   const closeButton = CreateDrawerButton(props);
-  const slider = index$1.CreateElement({
+  const slider = createCompositeNavigationSlider.CreateElement({
     ...props,
     displayType: "drawer-nav"
   });
@@ -123,7 +105,7 @@ const CreateNavDrawerElement = (props) => (() => {
       `.${ELEMENT_NAV_DRAWER_OVERLAY_WRAPPER}`
     );
     const slider = bodyOverlay.querySelector(
-      `.${index$1.Elements.slider}`
+      `.${createCompositeNavigationSlider.Elements.slider}`
     );
     bodyOverlay.style.opacity = "0";
     bodyOverlayWrapper.style.transform = "translateX(-100%)";
@@ -148,10 +130,10 @@ const CreateNavDrawerElement = (props) => (() => {
       `.${ELEMENT_NAV_DRAWER_CLOSE_BUTTON}`
     );
     const slider = bodyOverlayWrapper.querySelector(
-      `.${index$1.Elements.slider}`
+      `.${createCompositeNavigationSlider.Elements.slider}`
     );
     const activeSlide = bodyOverlayWrapper.querySelector(
-      `.${index$1.Elements.slider} div[data-active]`
+      `.${createCompositeNavigationSlider.Elements.slider} div[data-active]`
     );
     elementContainer.style.display = "block";
     bodyOverlay.style.display = "block";
@@ -161,7 +143,7 @@ const CreateNavDrawerElement = (props) => (() => {
       bodyOverlayWrapper.style.transform = "translateX(0)";
       body.style.overflow = "hidden";
       closeButton.focus();
-      events.handleKeyboardNavigation({
+      handleKeyboardNavigation({
         element: elementContainer,
         action: () => eventClose(),
         shadowDomContext: context
@@ -188,9 +170,11 @@ const CreateNavDrawerElement = (props) => (() => {
     }
   };
 })();
-const index = {
+const createCompositeNavigationDrawer = {
   CreateElement: CreateNavDrawerElement,
   Styles: STYLES_NAV_DRAWER_ELEMENT
 };
-module.exports = index;
+export {
+  createCompositeNavigationDrawer
+};
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,7 +1,7 @@
-export { default as breadcrumb } from './breadcrumb';
-export { default as drawer } from './drawer';
-export { default as menuButton } from './menu-button';
-export { default as item } from './item';
-export { default as slider } from './slider';
-export { default as sticky } from './sticky';
+export { createCompositeNavigationBreadcrumb as breadcrumb } from './breadcrumb';
+export { createCompositeNavigationDrawer as drawer } from './drawer';
+export { createCompositeNavigationMenuButton as menuButton } from './menu-button';
+export { createCompositeNavigationItem as item } from './item';
+export { createCompositeNavigationSlider as slider } from './slider';
+export { createCompositeNavigationSticky as sticky } from './sticky';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/navigation/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/navigation/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mCAAmC,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,+BAA+B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,mCAAmC,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,6BAA6B,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EAAE,+BAA+B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,+BAA+B,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

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

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./breadcrumb/index.js");
-const index$1 = require("./drawer/index.js");
-const index$2 = require("./menu-button/index.js");
-const index$3 = require("./item/index.js");
-const index$4 = require("./slider/index.js");
-const index$5 = require("./sticky/index.js");
-exports.breadcrumb = index;
-exports.drawer = index$1;
-exports.menuButton = index$2;
-exports.item = index$3;
-exports.slider = index$4;
-exports.sticky = index$5;
+import { createCompositeNavigationBreadcrumb } from "./breadcrumb/index.js";
+import { createCompositeNavigationDrawer } from "./drawer/index.js";
+import { createCompositeNavigationMenuButton } from "./menu-button/index.js";
+import { createCompositeNavigationItem } from "./item/index.js";
+import { createCompositeNavigationSlider } from "./slider/index.js";
+import { createCompositeNavigationSticky } from "./sticky/index.js";
+export {
+  createCompositeNavigationBreadcrumb as breadcrumb,
+  createCompositeNavigationDrawer as drawer,
+  createCompositeNavigationItem as item,
+  createCompositeNavigationMenuButton as menuButton,
+  createCompositeNavigationSlider as slider,
+  createCompositeNavigationSticky as sticky
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/navigation/elements/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/composite/navigation/elements/item/index.d.ts

@@ -8,9 +8,9 @@ type TypeDropdownProps = {
 };
 export type TypeNavItemRequirements = TypeDropdownProps & TypePrimaryLinkRequirements;
 type TypeNavItem = TypeNavItemRequirements;
-declare const _default: {
+export declare const createCompositeNavigationItem: {
     CreateElement: (props: TypeNavItem) => HTMLDivElement;
     Styles: string;
 };
-export default _default;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"names":[],"mappings":"AAOA,KAAK,2BAA2B,GAAG;IACjC,oBAAoB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,sBAAsB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC/C,CAAC;AAaF,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,2BAA2B,CAAC;AAE9B,KAAK,WAAW,GAAG,uBAAuB,CAAC;;2BAkUN,WAAW;;;AA8HhD,wBAGE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/navigation/elements/item/index.ts"],"names":[],"mappings":"AAOA,KAAK,2BAA2B,GAAG;IACjC,oBAAoB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,sBAAsB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5C,oBAAoB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC/C,CAAC;AAaF,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GACrD,2BAA2B,CAAC;AAE9B,KAAK,WAAW,GAAG,uBAAuB,CAAC;AAgc3C,eAAO,MAAM,6BAA6B;2BA9HL,WAAW;;CAiI/C,CAAC"}

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

@@ -1,28 +1,9 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const animation = require("@universityofmaryland/web-styles-library/animation");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const animation$1 = require("@universityofmaryland/web-utilities-library/animation");
-const events = require("@universityofmaryland/web-utilities-library/events");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-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 animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
+import * as token from "@universityofmaryland/web-token-library";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
+import { handleKeyboardNavigation } from "@universityofmaryland/web-utilities-library/events";
+import { chevron_down } from "@universityofmaryland/web-icons-library/controls";
 const ATTRIBUTE_DROPDOWN = "data-dropdown";
 const ATTRIBUTE_SHOWING = "data-showing";
 const ATTRIBUTE_SELECTED = "data-selected";
@@ -68,8 +49,8 @@ const PrimaryStyles = `
   }
 
   .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a {
-    color: ${token__namespace.color.black};
-    font-size: ${token__namespace.font.size.base};
+    color: ${token.color.black};
+    font-size: ${token.font.size.base};
     transition: color 0.2s ease-in-out;
     line-height: 1.15em;
     font-weight: 700;
@@ -82,7 +63,7 @@ const PrimaryStyles = `
 
   .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:hover,
   .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a:focus {
-    color: ${token__namespace.color.red};
+    color: ${token.color.red};
    }
 
   .${ELEMENT_PRIMARLY_LINK_WRAPPER} > a[${ATTRIBUTE_SELECTED}] span {
@@ -91,7 +72,7 @@ const PrimaryStyles = `
     background-position: left calc(100% - 0px);
     background-repeat: no-repeat;
     background-size: 100% 2.5px;
-    background-image: linear-gradient(${token__namespace.color.gold}, ${token__namespace.color.gold});
+    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});
   }
 
   .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} {
@@ -102,7 +83,7 @@ const PrimaryStyles = `
   }
 
   .${ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON} svg {
-    fill: ${token__namespace.color.red};
+    fill: ${token.color.red};
     height: 14px;
     width: 14px;
     transform: rotate(0deg) translateY(0);
@@ -125,9 +106,9 @@ const DropdownMultipleColumnStyles = `
 `;
 const DropdownListStyles = `
   .${ELEMENT_DROPDOWN_LIST_CONTAINER} {
-    background-color: ${token__namespace.color.white};
-    border-top: 2px solid ${token__namespace.color.red};
-    padding: ${token__namespace.spacing.lg};
+    background-color: ${token.color.white};
+    border-top: 2px solid ${token.color.red};
+    padding: ${token.spacing.lg};
     box-shadow: -1px 9px 32px -10px rgba(0,0,0,0.19);
   }
 
@@ -140,19 +121,19 @@ const DropdownListStyles = `
     line-height: 1.5em;
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]: animation__namespace.line.slideUnderRed
+    [`.${ELEMENT_DROPDOWN_LIST_CONTAINER} a`]: animation.line.slideUnderRed
   }
 })}
 
   .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:hover,
   .${ELEMENT_DROPDOWN_LIST_CONTAINER} a:focus {
-    color: ${token__namespace.color.red};
+    color: ${token.color.red};
   }
 
   .${ELEMENT_DROPDOWN_LIST_CONTAINER} a + a {
-    margin-top: ${token__namespace.spacing.md};
+    margin-top: ${token.spacing.md};
     display: block;
   }
 
@@ -162,7 +143,7 @@ const DropdownListStyles = `
     background-position: left calc(100% - 0px);
     background-repeat: no-repeat;
     background-size: 100% 2.5px;
-    background-image: linear-gradient(${token__namespace.color.gold}, ${token__namespace.color.gold});
+    background-image: linear-gradient(${token.color.gold}, ${token.color.gold});
   }
 
   .${ELEMENT_DROPDOWN_LIST_CONTAINER} a${IS_SELECTED}:hover span,
@@ -178,7 +159,7 @@ const DropdownStyles = `
     transform: translateX(-50%);v 
     min-width: 200px;
     width: auto;
-    padding-top: ${token__namespace.spacing.sm};
+    padding-top: ${token.spacing.sm};
     display: none;
   }
 `;
@@ -193,10 +174,10 @@ const STYLES_NAV_ITEM_ELEMENT = `
   }
 
   .${ELEMENT_NAV_ITEM_CONTAINER} a {
-    font-family: ${token__namespace.font.family.sans};
-    font-size: ${token__namespace.font.size.sm};
+    font-family: ${token.font.family.sans};
+    font-size: ${token.font.size.sm};
     font-weight: 700;
-    color: ${token__namespace.color.black};
+    color: ${token.color.black};
     text-decoration: none;
   }
   
@@ -215,11 +196,11 @@ const CreateMultipleColumns = ({ links }) => {
   const column2 = document.createElement("div");
   const firstColumnLinks = links.splice(0, Math.ceil(links.length / 2));
   firstColumnLinks.forEach((link) => {
-    animation$1.wrapLinkForAnimation({ element: link });
+    wrapLinkForAnimation({ element: link });
     column1.appendChild(link);
   });
   links.forEach((link) => {
-    animation$1.wrapLinkForAnimation({ element: link });
+    wrapLinkForAnimation({ element: link });
     column2.appendChild(link);
   });
   return [column1, column2];
@@ -227,7 +208,7 @@ const CreateMultipleColumns = ({ links }) => {
 const CreateSingleColumn = ({ links }) => {
   const container = document.createElement("div");
   links.forEach((link) => {
-    animation$1.wrapLinkForAnimation({ element: link });
+    wrapLinkForAnimation({ element: link });
     container.appendChild(link);
   });
   return container;
@@ -271,7 +252,7 @@ const CreateButton = ({
 }) => {
   const button = document.createElement("button");
   button.classList.add(ELEMENT_PRIMARY_LINK_CONTAINER_BUTTON);
-  button.innerHTML = controls.chevron_down;
+  button.innerHTML = chevron_down;
   button.addEventListener("click", () => buttonClick());
   button.setAttribute("aria-expanded", "false");
   button.setAttribute("aria-controls", `nav-links-`);
@@ -319,7 +300,7 @@ const CreateNavItemElement = (props) => (() => {
     links.forEach((link) => {
       const hasSpan = link.querySelector("span");
       if (!hasSpan) {
-        animation$1.wrapLinkForAnimation({ element: link });
+        wrapLinkForAnimation({ element: link });
         link.appendChild(link);
       }
     });
@@ -355,7 +336,7 @@ const CreateNavItemElement = (props) => (() => {
   const EventButtonClick = () => {
     if (isShowing && dropdownLinksContainer) {
       ShowDropdown();
-      focusCallback = events.handleKeyboardNavigation({
+      focusCallback = handleKeyboardNavigation({
         element: elementContainer,
         action: () => HideDropdown(),
         shadowDomContext: context
@@ -395,9 +376,11 @@ const CreateNavItemElement = (props) => (() => {
   elementContainer.appendChild(linkContainer);
   return elementContainer;
 })();
-const NavigationItem = {
+const createCompositeNavigationItem = {
   CreateElement: CreateNavItemElement,
   Styles: STYLES_NAV_ITEM_ELEMENT
 };
-module.exports = NavigationItem;
+export {
+  createCompositeNavigationItem
+};
 //# sourceMappingURL=index.js.map