@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/accordion/item.js

@@ -1,225 +1,133 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { debounce } from "@universityofmaryland/web-utilities-library/performance";
-const { token } = Styles;
 const SMALL = 480;
-const ELEMENT_NAME = "umd-element-accordion-item";
-const ELEMENT_DECLARATION = "accordion-declaration";
-const ELEMENT_CONTAINER = "accordion-container";
-const ELEMENT_HEADLINE = "accordion-headline";
-const ELEMENT_BODY_WRAPPER = "accordion-body-wrapper";
-const ELEMENT_BODY = "accordion-body";
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
 const ANIMATION_TIME = 500;
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;
-const OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;
-const OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;
-const OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_HEADLINE} {
-    background-color: ${token.color.gray.darker};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE} > * {
-    color: ${token.color.white}
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}:before,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:after {
-    background-color: ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],
-  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {
-    background-color: ${token.color.gray.darker};
-    border-top: 2px solid ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,
-  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {
-    color: ${token.color.gold};
-  }
-
-  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {
-    background-color: ${token.color.gray.darker};
-  }
-
-  ${OVERWRITE_THEME_DARK_BODY},
-  ${OVERWRITE_THEME_DARK_BODY} * {
-    color: ${token.color.white};
-  }
-`;
-const bodyStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium
-  }
-})}
-
-  .${ELEMENT_BODY_WRAPPER} {
-    background-color: ${token.color.gray.lightest};
-    height: 0;
-    overflow: hidden;
-    display: none;
-  }
-
-  .${ELEMENT_BODY} {
-    padding: ${token.spacing.md};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_BODY} {
-      padding: ${token.spacing.lg};
-    }
-  }
-
-  .${ELEMENT_BODY} > * {
-    margin-top: ${token.spacing.sm};
-  }
-
-  .${ELEMENT_BODY} > *:first-child {
-    margin-top: 0;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_BODY} > * {
-      margin-top: ${token.spacing.lg};
-    }
-  }
-`;
-const headlineStyles = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large
-  }
-})}
-
-  .${ELEMENT_HEADLINE} {
-    display: flex;
-    border-top: 2px solid transparent;
-    padding: ${token.spacing.md};
-    padding-right: ${token.spacing["4xl"]};
-    background-color: ${token.color.gray.lightest};
-    position: relative;
-    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;
-    width: 100%;
-    text-align: left;
-    color: ${token.color.black};
-  }
-
-  .${ELEMENT_HEADLINE} > * {
-    color: ${token.color.black};
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE} {
-      padding: ${token.spacing.lg};
-      padding-right: ${token.spacing["6xl"]}
-    }
-  }
-
-  .${ELEMENT_HEADLINE}:before,
-  .${ELEMENT_HEADLINE}:after {
-    content: '';
-    background-color: ${token.color.red};
-    position: absolute;
-    right: ${token.spacing.md};
-    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,
-    transform 0.5s, width 0.5s;
-  }
-
-  .${ELEMENT_HEADLINE}:before {
-    height: 4px;
-    top: calc(50% - 2px);
-    width: 16px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE}:before {
-      width: 20px;
-      right: 32px;
+const { token } = Styles;
+const CreateBody = ({ text, isStateOpen, isThemeDark }) => {
+  if (!text) return null;
+  const bodyContent = new ElementBuilder().withClassName("accordion-body").withStyles({
+    element: {
+      padding: token.spacing.md,
+      ...isThemeDark && {
+        color: token.color.white
+      },
+      [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {
+        padding: token.spacing.lg
+      },
+      "& > *": {
+        marginTop: token.spacing.sm,
+        [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {
+          marginTop: token.spacing.lg
+        },
+        "&:first-child": { marginTop: "0" }
+      },
+      "& *": {
+        ...isThemeDark && {
+          color: token.color.white
+        }
+      }
     }
-  }
-
-  .${ELEMENT_HEADLINE}:after {
-    height: 16px;
-    top: calc(50% - 8px);
-    right: calc(${token.spacing.md} + 6px);
-    width: 4px;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {
-    .${ELEMENT_HEADLINE}:after {
-      height: 20px;
-      top: calc(50% - 10px);
-      right: calc(${token.spacing.lg} + 8px);
+  }).withChild(text).build();
+  return new ElementBuilder().withClassName("accordion-body-wrapper").withAria({ hidden: isStateOpen ? "false" : "true" }).styled(Styles.typography.sans.medium).withStyles({
+    element: {
+      backgroundColor: token.color.gray.lightest,
+      height: "0",
+      overflow: "hidden",
+      display: "none",
+      ...isThemeDark && {
+        backgroundColor: token.color.gray.darker
+      }
     }
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true'],
-  .${ELEMENT_HEADLINE}:hover,
-  .${ELEMENT_HEADLINE}:focus {
-    background-color: ${token.color.gray.lightest};
-    border-top: 2px solid ${token.color.red};
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,
-  .${ELEMENT_HEADLINE}:hover > *,
-  .${ELEMENT_HEADLINE}:focus > * {
-    color: ${token.color.red};
-  }
-
-  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {
-    transform: rotate(90deg);
-  }
-`;
-const STYLES_ACCORDION_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  ${headlineStyles}
-  ${bodyStyles}
-  ${OverwriteThemeDark}
-`;
-const CreateBody = ({ text, isOpen }) => {
-  const contentWrapper = document.createElement("div");
-  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);
-  if (text) {
-    const wrapper = document.createElement("div");
-    wrapper.classList.add(ELEMENT_BODY);
-    contentWrapper.ariaHidden = isOpen ? "false" : "true";
-    wrapper.appendChild(text);
-    contentWrapper.appendChild(wrapper);
-    return contentWrapper;
-  }
-  return null;
+  }).withChild(bodyContent).build();
 };
 const CreateHeadline = ({
   headline,
-  isOpen,
+  isThemeDark,
+  isStateOpen,
   open,
   close
 }) => {
-  const headlineContainer = document.createElement("button");
-  headlineContainer.classList.add(ELEMENT_HEADLINE);
-  headlineContainer.ariaExpanded = isOpen ? "true" : "false";
-  if (headline) {
-    headlineContainer.appendChild(headline);
-    headlineContainer.addEventListener("click", () => {
-      const isExpanded = headlineContainer.ariaExpanded == "true";
-      if (isExpanded) {
-        close({ hasAnimation: true });
-      } else {
-        open({ hasAnimation: true });
+  if (!headline) return null;
+  return new ElementBuilder("button").withClassName("accordion-headline").withAria({ expanded: isStateOpen ? "true" : "false" }).withChild(headline).on("click", (event) => {
+    const button = event.currentTarget;
+    const isExpanded = button.ariaExpanded === "true";
+    if (isExpanded) {
+      close({ hasAnimation: true });
+    } else {
+      open({ hasAnimation: true });
+    }
+  }).styled(Styles.typography.sans.large).withStyles({
+    element: {
+      display: "flex",
+      borderTop: "2px solid transparent",
+      padding: token.spacing.md,
+      paddingRight: token.spacing["4xl"],
+      backgroundColor: token.color.gray.lightest,
+      position: "relative",
+      transition: "background 0.5s, border 0.5s, color 0.5s, padding 0.5s",
+      width: "100%",
+      textAlign: "left",
+      color: token.color.black,
+      ...isThemeDark && {
+        backgroundColor: token.color.gray.darker
+      },
+      [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {
+        padding: token.spacing.lg,
+        paddingRight: token.spacing["6xl"]
+      },
+      "& > *": {
+        ...isThemeDark && {
+          color: token.color.white
+        }
+      },
+      "&:before, &:after": {
+        content: "''",
+        backgroundColor: token.color.red,
+        position: "absolute",
+        right: token.spacing.md,
+        transition: "background 0.5s, height 0.5s, right 0.5s, top 0.5s, transform 0.5s, width 0.5s",
+        ...isThemeDark && {
+          backgroundColor: token.color.gold
+        }
+      },
+      "&:before": {
+        height: "4px",
+        top: "calc(50% - 2px)",
+        width: "16px",
+        [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {
+          width: "20px",
+          right: "32px"
+        }
+      },
+      "&:after": {
+        height: "16px",
+        top: "calc(50% - 8px)",
+        right: `calc(${token.spacing.md} + 6px)`,
+        width: "4px",
+        [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {
+          height: "20px",
+          top: "calc(50% - 10px)",
+          right: `calc(${token.spacing.lg} + 8px)`
+        }
+      },
+      "&[aria-expanded='true'], &:hover, &:focus": {
+        borderTop: `2px solid ${token.color.red}`,
+        ...isThemeDark && {
+          borderTop: `2px solid ${token.color.gold}`
+        }
+      },
+      "&[aria-expanded='true'] > *, &:hover > *, &:focus > *": {
+        color: token.color.red,
+        ...isThemeDark && {
+          color: token.color.gold
+        }
+      },
+      "&[aria-expanded='true']:after": {
+        transform: "rotate(90deg)"
       }
-    });
-    return headlineContainer;
-  }
-  return null;
+    }
+  }).build();
 };
 const ActionAnimation = ({
   container,
@@ -230,29 +138,31 @@ const ActionAnimation = ({
     "button"
   );
   const bodyWrapperElement = container.querySelector(
-    `.${ELEMENT_BODY_WRAPPER}`
-  );
-  const bodyElement = container.querySelector(
-    `.${ELEMENT_BODY}`
+    ".accordion-body-wrapper"
   );
+  const bodyElement = container.querySelector(".accordion-body");
   if (!headlineContainer || !bodyWrapperElement || !bodyElement) {
-    throw new Error("headlineContainer or bodyWrapperElement is not found");
+    console.warn("headlineContainer or bodyWrapperElement is not found");
+    return;
   }
-  if (hasAnimation)
-    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;
-  if (isOpening) {
+  const animateOpen = () => {
     bodyWrapperElement.style.display = "block";
     setTimeout(() => {
       headlineContainer.ariaExpanded = "true";
       bodyWrapperElement.ariaHidden = "false";
     }, 100);
-  } else {
+  };
+  const animateClose = () => {
     headlineContainer.ariaExpanded = "false";
     bodyWrapperElement.ariaHidden = "true";
     setTimeout(() => {
       bodyWrapperElement.style.display = "none";
     }, ANIMATION_TIME + 50);
-  }
+  };
+  if (hasAnimation)
+    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;
+  if (isOpening) animateOpen();
+  else animateClose();
   setTimeout(() => {
     const bodyHeight = bodyElement.offsetHeight;
     bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : "0";
@@ -262,52 +172,49 @@ const ActionAnimation = ({
   }, 100 + ANIMATION_TIME);
 };
 const createCompositeAccordionItem = (props) => (() => {
-  const { isThemeDark, isThemeLight, isStateOpen = false } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
+  const { isStateOpen = false, context } = props;
+  const containerBuilder = new ElementBuilder().withClassName(
+    "accordion-container"
+  );
+  const container = containerBuilder.getElement();
   let isOpen = isStateOpen;
   const open = (props2) => {
     ActionAnimation({ ...props2, container, isOpening: true });
     isOpen = true;
+    context?.dispatchEvent(
+      new CustomEvent("accordion:open", { bubbles: true, composed: true })
+    );
   };
   const close = (props2) => {
     ActionAnimation({ ...props2, container, isOpening: false });
     isOpen = false;
+    context?.dispatchEvent(
+      new CustomEvent("accordion:close", { bubbles: true, composed: true })
+    );
   };
   const EventSize = () => {
     if (!isOpen) return;
     const bodyElement = container.querySelector(
-      `.${ELEMENT_BODY}`
+      ".accordion-body"
     );
     const bodyWrapperElement = container.querySelector(
-      `.${ELEMENT_BODY_WRAPPER}`
+      ".accordion-body-wrapper"
     );
     bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;
   };
-  const resize = () => {
-    EventSize();
-  };
-  const headline = CreateHeadline({ ...props, isOpen, open, close });
-  const body = CreateBody({ ...props, isOpen });
-  if (headline) container.appendChild(headline);
-  if (body) container.appendChild(body);
-  container.classList.add(ELEMENT_CONTAINER);
-  if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, "light");
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, "dark");
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_DECLARATION);
+  const headline = CreateHeadline({ ...props, isStateOpen, open, close });
+  const body = CreateBody({ ...props, isStateOpen });
+  const containerModel = containerBuilder.withChildren(headline, body).build();
   if (isStateOpen) {
-    open({ hasAnimation: false });
+    ActionAnimation({ container, isOpening: true, hasAnimation: false });
+    isOpen = true;
   }
-  window.addEventListener("resize", debounce(resize, 20));
-  return {
-    element: declaration,
-    styles: STYLES_ACCORDION_ELEMENT,
-    events: {
-      open,
-      close
+  window.addEventListener("resize", debounce(EventSize, 20));
+  return new ElementBuilder().withClassName("accordion-declaration").withStyles({
+    element: {
+      container: "umd-element-accordion-item / inline-size"
     }
-  };
+  }).withChild(containerModel).withEvents({ open, close }).build();
 })();
 export {
   createCompositeAccordionItem

package/dist/composite/accordion/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport const createCompositeAccordionItem = (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["props"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeAccordionProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  isThemeLight?: boolean;\n  isThemeDark?: boolean;\n  isStateOpen: boolean;\n  context?: HTMLElement;\n};\n\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype StateFunctions = {\n  open: (props: StateProps) => void;\n  close: (props: StateProps) => void;\n};\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst SMALL = 480;\nconst ANIMATION_TIME = 500;\n\nconst { token } = Styles;\n\nconst CreateBody = ({ text, isStateOpen, isThemeDark }: TypeAccordionProps) => {\n  if (!text) return null;\n\n  const bodyContent = new ElementBuilder()\n    .withClassName('accordion-body')\n    .withStyles({\n      element: {\n        padding: token.spacing.md,\n        ...(isThemeDark && {\n          color: token.color.white,\n        }),\n        [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {\n          padding: token.spacing.lg,\n        },\n        '& > *': {\n          marginTop: token.spacing.sm,\n          [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {\n            marginTop: token.spacing.lg,\n          },\n          '&:first-child': { marginTop: '0' },\n        },\n        '& *': {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n      },\n    })\n    .withChild(text)\n    .build();\n\n  return new ElementBuilder()\n    .withClassName('accordion-body-wrapper')\n    .withAria({ hidden: isStateOpen ? 'false' : 'true' })\n    .styled(Styles.typography.sans.medium)\n    .withStyles({\n      element: {\n        backgroundColor: token.color.gray.lightest,\n        height: '0',\n        overflow: 'hidden',\n        display: 'none',\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n      },\n    })\n    .withChild(bodyContent)\n    .build();\n};\n\nconst CreateHeadline = ({\n  headline,\n  isThemeDark,\n  isStateOpen,\n  open,\n  close,\n}: TypeAccordionProps & StateFunctions) => {\n  if (!headline) return null;\n\n  return new ElementBuilder('button')\n    .withClassName('accordion-headline')\n    .withAria({ expanded: isStateOpen ? 'true' : 'false' })\n    .withChild(headline)\n    .on('click', (event) => {\n      const button = event.currentTarget as HTMLButtonElement;\n      const isExpanded = button.ariaExpanded === 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    })\n    .styled(Styles.typography.sans.large)\n    .withStyles({\n      element: {\n        display: 'flex',\n        borderTop: '2px solid transparent',\n        padding: token.spacing.md,\n        paddingRight: token.spacing['4xl'],\n        backgroundColor: token.color.gray.lightest,\n        position: 'relative',\n        transition: 'background 0.5s, border 0.5s, color 0.5s, padding 0.5s',\n        width: '100%',\n        textAlign: 'left',\n        color: token.color.black,\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n        [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {\n          padding: token.spacing.lg,\n          paddingRight: token.spacing['6xl'],\n        },\n        '& > *': {\n          ...(isThemeDark && {\n            color: token.color.white,\n          }),\n        },\n        '&:before, &:after': {\n          content: \"''\",\n          backgroundColor: token.color.red,\n          position: 'absolute',\n          right: token.spacing.md,\n          transition:\n            'background 0.5s, height 0.5s, right 0.5s, top 0.5s, transform 0.5s, width 0.5s',\n          ...(isThemeDark && {\n            backgroundColor: token.color.gold,\n          }),\n        },\n        '&:before': {\n          height: '4px',\n          top: 'calc(50% - 2px)',\n          width: '16px',\n          [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {\n            width: '20px',\n            right: '32px',\n          },\n        },\n        '&:after': {\n          height: '16px',\n          top: 'calc(50% - 8px)',\n          right: `calc(${token.spacing.md} + 6px)`,\n          width: '4px',\n          [`@container umd-element-accordion-item (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            top: 'calc(50% - 10px)',\n            right: `calc(${token.spacing.lg} + 8px)`,\n          },\n        },\n        \"&[aria-expanded='true'], &:hover, &:focus\": {\n          borderTop: `2px solid ${token.color.red}`,\n          ...(isThemeDark && {\n            borderTop: `2px solid ${token.color.gold}`,\n          }),\n        },\n        \"&[aria-expanded='true'] > *, &:hover > *, &:focus > *\": {\n          color: token.color.red,\n          ...(isThemeDark && {\n            color: token.color.gold,\n          }),\n        },\n        \"&[aria-expanded='true']:after\": {\n          transform: 'rotate(90deg)',\n        },\n      },\n    })\n    .build();\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    '.accordion-body-wrapper',\n  ) as HTMLElement;\n  const bodyElement = container.querySelector('.accordion-body') as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    console.warn('headlineContainer or bodyWrapperElement is not found');\n    return;\n  }\n\n  const animateOpen = () => {\n    bodyWrapperElement.style.display = 'block';\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  };\n\n  const animateClose = () => {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  };\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) animateOpen();\n  else animateClose();\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport const createCompositeAccordionItem = (props: TypeAccordionProps) =>\n  (() => {\n    const { isStateOpen = false, context } = props;\n    const containerBuilder = new ElementBuilder().withClassName(\n      'accordion-container',\n    );\n    const container = containerBuilder.getElement() as HTMLDivElement;\n\t\tlet isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n      context?.dispatchEvent(\n        new CustomEvent('accordion:open', { bubbles: true, composed: true }),\n      );\n    };\n\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n      context?.dispatchEvent(\n        new CustomEvent('accordion:close', { bubbles: true, composed: true }),\n      );\n    };\n\t\t\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        '.accordion-body',\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        '.accordion-body-wrapper',\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n\n    const headline = CreateHeadline({ ...props, isStateOpen, open, close });\n    const body = CreateBody({ ...props, isStateOpen });\n\n    const containerModel = containerBuilder\n      .withChildren(headline, body)\n      .build();\n\n    if (isStateOpen) {\n      // Initial render: animate open without dispatching an event — the\n      // accordion:open/close events represent toggles, not initial state.\n      ActionAnimation({ container, isOpening: true, hasAnimation: false });\n      isOpen = true;\n    }\n\n    window.addEventListener('resize', debounce(EventSize, 20));\n\n    return new ElementBuilder()\n      .withClassName('accordion-declaration')\n      .withStyles({\n        element: {\n          container: 'umd-element-accordion-item / inline-size',\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({ open, close })\n      .build();\n  })();\n"],"names":["props"],"mappings":"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"}

package/dist/composite/card/block.js

@@ -13,7 +13,6 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../atomic/animations/brand/chevron-scroll.js";
 import "../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
@@ -22,10 +21,10 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import { image, textContainer, container } from "../../atomic/layout/block/stacked.js";
-import "../../atomic/layout/overlay/modal.js";
 import "../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import "../../atomic/text-lockup/small.js";
 import { createTextLockupSmallScaling } from "../../atomic/text-lockup/small-scaling.js";
 const smallBreakpoint = token.media.breakpointValues.small.max;

package/dist/composite/card/block.js.map

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    imageLoading = 'lazy',\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n            imageLoading,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n      hasImage: !!image,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,MACH,UAAU,CAAC,CAACJ;AAAAA,IAAA,CACb;AAAA,EAAA;AAGH,QAAM,YAAYK,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, layout, textLockup } from 'atomic';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport const createCompositeCardBlock = (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    imageLoading = 'lazy',\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n            imageLoading,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              marginBottom: token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n      hasImage: !!image,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["image","layout.block.stacked.image","assets.image.background","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAEpD,MAAM,2BAA2B,CAAC,UAA0B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAAA,OACAA;AAAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,sBAAwB;AAAA,YACtB,SAASF;AAAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,cAChD,cAAc,MAAM,QAAQ;AAAA,cAC5B,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPG,cAAmC;AAAA,MACjC,UAAU,CAACC,6BAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,MACH,UAAU,CAAC,CAACJ;AAAAA,IAAA,CACb;AAAA,EAAA;AAGH,QAAM,YAAYK,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;"}

package/dist/composite/card/event-time.js

@@ -17,17 +17,16 @@ import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
 import "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-utilities-library/performance";
-import "../../atomic/animations/brand/chevron-scroll.js";
 import "../../atomic/animations/brand/card-stack.js";
 import { createImageBackground } from "../../atomic/assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.js";
-import "../../atomic/layout/overlay/modal.js";
 import "../../atomic/layout/person/columns.js";
 import "@universityofmaryland/web-icons-library/social";
-import "../../atomic/text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import { createTextLockupSmall } from "../../atomic/text-lockup/small.js";
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const smallBreakpoint = token.media.breakpointValues.small.max;