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

package/dist/composite/footer/elements/utility-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../globals';\n\nconst { LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst UTILITY_CONTAINER = 'umd-footer-utility-container';\nconst UTILITY_CONTAINER_LOCK = 'umd-footer-utility-container-lock';\nconst UTILITY_CONTAINER_LINK = 'umd-footer-utility-container-link';\n\n// prettier-ignore\nconst LinkStyles = `\n  .${UTILITY_CONTAINER} a {\n    display: block;\n  }\n\n  .${UTILITY_CONTAINER} a span {\n    color: ${token.color.gray.light};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER} a`]:\n      animation.line.slideUnderWhite,\n    },\n  })}\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a {\n    color: ${token.color.black};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a`]:\n      animation.line.slideUnderBlack,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} p {\n    color: ${token.color.gray.light};\n    display: flex;\n    align-items: center;\n  }\n\n  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} a {\n    color: ${token.color.gray.light};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} p {\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nexport const UtilityContainerStyles = `\n  .${UTILITY_CONTAINER} {\n    padding: ${token.spacing.sm} 0;\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${UTILITY_CONTAINER_LOCK} {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER} *`]: typography.sans.smaller\n    },\n  })}\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {\n      margin-top: ${token.spacing.sm};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {\n      margin-left: ${token.spacing.sm};\n      padding-left: ${token.spacing.sm};\n      background-position: ${token.spacing.sm} 100%;\n      border-left: 1px solid ${token.color.gray.dark};\n    }\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} {\n    background-color: ${token.color.gray.light};\n  }\n\n  ${LinkStyles}\n  ${TextStyles}\n`;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const wrapper = document.createElement('div');\n  const link = document.createElement('a');\n  link.setAttribute('href', url);\n  link.setAttribute('target', '_blank');\n  link.setAttribute('rel', 'noopener noreferrer');\n  link.innerText = title;\n  link.classList.add(UTILITY_CONTAINER_LINK);\n\n  wrapper.appendChild(link);\n  return wrapper;\n};\n\nexport interface UtilityProps {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nexport const createUtilitySection = ({ slotUtilityLinks }: UtilityProps) => {\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const copyRight = document.createElement('p');\n\n  container.classList.add(UTILITY_CONTAINER);\n  wrapper.classList.add(UTILITY_CONTAINER_LOCK);\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll(`a`),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      Utils.markup.modify.animationLinkSpan({ element: link });\n      link.classList.add(UTILITY_CONTAINER_LINK);\n\n      wrapper.appendChild(link);\n    });\n  }\n\n  requiredSubLinks.forEach((link) =>\n    wrapper.appendChild(Utils.markup.create.linkWithSpan(link)),\n  );\n  copyRight.classList.add(UTILITY_CONTAINER_LINK);\n  copyRight.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n  wrapper.appendChild(copyRight);\n  container.appendChild(wrapper);\n\n  return container;\n};\n"],"names":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","token","Utils.theme.convertJSSObjectToStyles","animation","layout","typography","Utils.markup.modify.animationLinkSpan","Utils.markup.create.linkWithSpan"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { FooterProps } from '../../options';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface UtilityProps {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return ElementModel.create({\n    element: link,\n    className: 'umd-footer-utility-container-link',\n  });\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = ElementModel.createSpan({\n    className: 'umd-footer-utility-container-sublink-text',\n  });\n\n  const link = ElementModel.create({\n    element: document.createElement('a'),\n    className: 'umd-footer-utility-container-sublink',\n    children: [span],\n    attributes: [\n      {\n        href: url,\n      },\n      {\n        target: '_blank',\n      },\n      { rel: 'noopener noreferrer' },\n    ],\n  });\n\n  span.element.innerText = title;\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-utility-container-link-wrapper',\n    children: [createUtilityContainerLink(link.element)],\n  });\n};\n\nexport default (props: FooterProps): ElementVisual => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: ElementVisual[] = [];\n  const copyRightElement = ElementModel.createParagraph({\n    className: 'umd-footer-utility-container-copyright',\n  });\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  copyRightElement.element.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  linkElements.push(copyRight);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'umd-footer-utility-container-lock',\n    children: linkElements,\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'umd-footer-utility-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    },\n  });\n\n  return container;\n};\n"],"names":["BREAKPOINTS","ElementModel.create","ElementModel.createSpan","ElementModel.createDiv","ElementModel.createParagraph","wrapLinkForAnimation","layout","token","typography","animation"],"mappings":"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"}

package/dist/composite/footer/elements/utility-section/index.mjs

@@ -1,102 +1,8 @@
-import { token, animation, layout, typography } from "@universityofmaryland/web-styles-library";
-import { linkWithSpan } from "../../../../utilities/markup/create.mjs";
-import { animationLinkSpan } from "../../../../utilities/markup/modify.mjs";
-import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
-import { ELEMENTS, REFERENCES, VARIABLES, BREAKPOINTS } from "../../globals.mjs";
+import { token, layout, animation, typography } from "@universityofmaryland/web-styles-library";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
+import { createParagraph, createDiv, create, createSpan } from "../../../../model/elements/index.mjs";
+import { BREAKPOINTS } from "../../globals.mjs";
 const { LARGE } = BREAKPOINTS;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { IS_THEME_LIGHT } = REFERENCES;
-const UTILITY_CONTAINER = "umd-footer-utility-container";
-const UTILITY_CONTAINER_LOCK = "umd-footer-utility-container-lock";
-const UTILITY_CONTAINER_LINK = "umd-footer-utility-container-link";
-const LinkStyles = `
-  .${UTILITY_CONTAINER} a {
-    display: block;
-  }
-
-  .${UTILITY_CONTAINER} a span {
-    color: ${token.color.gray.light};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER} a`]: animation.line.slideUnderWhite
-  }
-})}
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a {
-    color: ${token.color.black};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a`]: animation.line.slideUnderBlack
-  }
-})}
-`;
-const TextStyles = `
-  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} p {
-    color: ${token.color.gray.light};
-    display: flex;
-    align-items: center;
-  }
-
-  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} a {
-    color: ${token.color.gray.light};
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} p {
-    color: ${token.color.black};
-  }
-`;
-const UtilityContainerStyles = `
-  .${UTILITY_CONTAINER} {
-    padding: ${token.spacing.sm} 0;
-    background-color: ${token.color.gray.darker};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER_LOCK}`]: layout.space.horizontal.larger
-  }
-})}
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${UTILITY_CONTAINER_LOCK} {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER} *`]: typography.sans.smaller
-  }
-})}
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {
-      margin-top: ${token.spacing.sm};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {
-      margin-left: ${token.spacing.sm};
-      padding-left: ${token.spacing.sm};
-      background-position: ${token.spacing.sm} 100%;
-      border-left: 1px solid ${token.color.gray.dark};
-    }
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} {
-    background-color: ${token.color.gray.light};
-  }
-
-  ${LinkStyles}
-  ${TextStyles}
-`;
 const requiredSubLinks = [
   {
     title: "Privacy Policy",
@@ -107,33 +13,119 @@ const requiredSubLinks = [
     url: "https://www.umd.edu/web-accessibility"
   }
 ];
-const createUtilitySection = ({ slotUtilityLinks }) => {
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const copyRight = document.createElement("p");
-  container.classList.add(UTILITY_CONTAINER);
-  wrapper.classList.add(UTILITY_CONTAINER_LOCK);
+const createUtilityContainerLink = (link) => {
+  return create({
+    element: link,
+    className: "umd-footer-utility-container-link"
+  });
+};
+const createSubLink = ({ title, url }) => {
+  const span = createSpan({
+    className: "umd-footer-utility-container-sublink-text"
+  });
+  const link = create({
+    element: document.createElement("a"),
+    className: "umd-footer-utility-container-sublink",
+    children: [span],
+    attributes: [
+      {
+        href: url
+      },
+      {
+        target: "_blank"
+      },
+      { rel: "noopener noreferrer" }
+    ]
+  });
+  span.element.innerText = title;
+  return createDiv({
+    className: "umd-footer-utility-container-link-wrapper",
+    children: [createUtilityContainerLink(link.element)]
+  });
+};
+const createUtility = (props) => {
+  const { isThemeLight, slotUtilityLinks } = props;
+  const linkElements = [];
+  const copyRightElement = createParagraph({
+    className: "umd-footer-utility-container-copyright"
+  });
   if (slotUtilityLinks) {
     const slottedLinks = Array.from(
-      slotUtilityLinks.querySelectorAll(`a`)
+      slotUtilityLinks.querySelectorAll("a")
     );
     slottedLinks.forEach((link) => {
-      animationLinkSpan({ element: link });
-      link.classList.add(UTILITY_CONTAINER_LINK);
-      wrapper.appendChild(link);
+      wrapLinkForAnimation({ element: link });
+      linkElements.push(createUtilityContainerLink(link));
     });
   }
-  requiredSubLinks.forEach(
-    (link) => wrapper.appendChild(linkWithSpan(link))
-  );
-  copyRight.classList.add(UTILITY_CONTAINER_LINK);
-  copyRight.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
-  wrapper.appendChild(copyRight);
-  container.appendChild(wrapper);
+  const copyRight = createUtilityContainerLink(copyRightElement.element);
+  requiredSubLinks.forEach((link) => {
+    linkElements.push(createSubLink(link));
+  });
+  copyRightElement.element.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
+  linkElements.push(copyRight);
+  const wrapper = createDiv({
+    className: "umd-footer-utility-container-lock",
+    children: linkElements,
+    elementStyles: {
+      element: {
+        ...layout.space.horizontal.larger,
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          "& > *:not(:first-child)": {
+            marginTop: token.spacing.sm
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          display: "flex",
+          alignItems: "center",
+          [`& > *:not(:first-child)`]: {
+            marginLeft: token.spacing.sm,
+            paddingLeft: token.spacing.sm,
+            backgroundPosition: `${token.spacing.sm} 100%`,
+            borderLeft: `1px solid ${token.color.gray.dark}`
+          }
+        },
+        ["& a, & p"]: {
+          color: token.color.gray.light
+        },
+        ["& a"]: {
+          ...isThemeLight && { color: token.color.gray.dark }
+        },
+        ["& p"]: {
+          display: "flex",
+          alignItems: "center",
+          ...isThemeLight && { color: token.color.black }
+        }
+      }
+    }
+  });
+  const container = createDiv({
+    className: "umd-footer-utility-container",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        padding: `${token.spacing.sm} 0`,
+        backgroundColor: token.color.gray.darker,
+        ...isThemeLight && {
+          backgroundColor: token.color.gray.light
+        },
+        ["& *"]: {
+          ...typography.sans.smaller
+        },
+        ["& a"]: {
+          display: "block",
+          ...animation.line.slideUnderWhite,
+          ...isThemeLight && {
+            color: token.color.black,
+            ...animation.line.slideUnderBlack
+          }
+        }
+      }
+    }
+  });
   return container;
 };
 export {
-  UtilityContainerStyles,
-  createUtilitySection
+  createUtility as default
 };
 //# sourceMappingURL=index.mjs.map

package/dist/composite/footer/elements/utility-section/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  layout,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../globals';\n\nconst { LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst UTILITY_CONTAINER = 'umd-footer-utility-container';\nconst UTILITY_CONTAINER_LOCK = 'umd-footer-utility-container-lock';\nconst UTILITY_CONTAINER_LINK = 'umd-footer-utility-container-link';\n\n// prettier-ignore\nconst LinkStyles = `\n  .${UTILITY_CONTAINER} a {\n    display: block;\n  }\n\n  .${UTILITY_CONTAINER} a span {\n    color: ${token.color.gray.light};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER} a`]:\n      animation.line.slideUnderWhite,\n    },\n  })}\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a {\n    color: ${token.color.black};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a`]:\n      animation.line.slideUnderBlack,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} p {\n    color: ${token.color.gray.light};\n    display: flex;\n    align-items: center;\n  }\n\n  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} a {\n    color: ${token.color.gray.light};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} p {\n    color: ${token.color.black};\n  }\n`;\n\n// prettier-ignore\nexport const UtilityContainerStyles = `\n  .${UTILITY_CONTAINER} {\n    padding: ${token.spacing.sm} 0;\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER_LOCK}`]: layout.space.horizontal.larger,\n    },\n  })}\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${UTILITY_CONTAINER_LOCK} {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${UTILITY_CONTAINER} *`]: typography.sans.smaller\n    },\n  })}\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {\n      margin-top: ${token.spacing.sm};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {\n      margin-left: ${token.spacing.sm};\n      padding-left: ${token.spacing.sm};\n      background-position: ${token.spacing.sm} 100%;\n      border-left: 1px solid ${token.color.gray.dark};\n    }\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} {\n    background-color: ${token.color.gray.light};\n  }\n\n  ${LinkStyles}\n  ${TextStyles}\n`;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const wrapper = document.createElement('div');\n  const link = document.createElement('a');\n  link.setAttribute('href', url);\n  link.setAttribute('target', '_blank');\n  link.setAttribute('rel', 'noopener noreferrer');\n  link.innerText = title;\n  link.classList.add(UTILITY_CONTAINER_LINK);\n\n  wrapper.appendChild(link);\n  return wrapper;\n};\n\nexport interface UtilityProps {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nexport const createUtilitySection = ({ slotUtilityLinks }: UtilityProps) => {\n  const container = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const copyRight = document.createElement('p');\n\n  container.classList.add(UTILITY_CONTAINER);\n  wrapper.classList.add(UTILITY_CONTAINER_LOCK);\n\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll(`a`),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      Utils.markup.modify.animationLinkSpan({ element: link });\n      link.classList.add(UTILITY_CONTAINER_LINK);\n\n      wrapper.appendChild(link);\n    });\n  }\n\n  requiredSubLinks.forEach((link) =>\n    wrapper.appendChild(Utils.markup.create.linkWithSpan(link)),\n  );\n  copyRight.classList.add(UTILITY_CONTAINER_LINK);\n  copyRight.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n  wrapper.appendChild(copyRight);\n  container.appendChild(wrapper);\n\n  return container;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.markup.modify.animationLinkSpan","Utils.markup.create.linkWithSpan"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"sourcesContent":["import {\n  token,\n  layout,\n  animation,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../globals';\nimport { FooterProps } from '../../options';\nimport { type ElementVisual } from '../../../../_types';\n\nexport interface UtilityProps {\n  slotUtilityLinks?: HTMLElement | null;\n}\n\nconst { LARGE } = BREAKPOINTS;\n\nconst requiredSubLinks = [\n  {\n    title: 'Privacy Policy',\n    url: 'https://www.umd.edu/privacy-notice',\n  },\n  {\n    title: 'Web Accessibility',\n    url: 'https://www.umd.edu/web-accessibility',\n  },\n];\n\nconst createUtilityContainerLink = (link: HTMLElement) => {\n  return ElementModel.create({\n    element: link,\n    className: 'umd-footer-utility-container-link',\n  });\n};\n\nconst createSubLink = ({ title, url }: { title: string; url: string }) => {\n  const span = ElementModel.createSpan({\n    className: 'umd-footer-utility-container-sublink-text',\n  });\n\n  const link = ElementModel.create({\n    element: document.createElement('a'),\n    className: 'umd-footer-utility-container-sublink',\n    children: [span],\n    attributes: [\n      {\n        href: url,\n      },\n      {\n        target: '_blank',\n      },\n      { rel: 'noopener noreferrer' },\n    ],\n  });\n\n  span.element.innerText = title;\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-utility-container-link-wrapper',\n    children: [createUtilityContainerLink(link.element)],\n  });\n};\n\nexport default (props: FooterProps): ElementVisual => {\n  const { isThemeLight, slotUtilityLinks } = props;\n  const linkElements: ElementVisual[] = [];\n  const copyRightElement = ElementModel.createParagraph({\n    className: 'umd-footer-utility-container-copyright',\n  });\n  if (slotUtilityLinks) {\n    const slottedLinks = Array.from(\n      slotUtilityLinks.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n\n    slottedLinks.forEach((link) => {\n      wrapLinkForAnimation({ element: link });\n      linkElements.push(createUtilityContainerLink(link));\n    });\n  }\n  const copyRight = createUtilityContainerLink(copyRightElement.element);\n\n  requiredSubLinks.forEach((link) => {\n    linkElements.push(createSubLink(link));\n  });\n\n  copyRightElement.element.innerHTML = `©${new Date().getFullYear()} UNIVERSITY OF MARYLAND`;\n\n  linkElements.push(copyRight);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'umd-footer-utility-container-lock',\n    children: linkElements,\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          '& > *:not(:first-child)': {\n            marginTop: token.spacing.sm,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          display: 'flex',\n          alignItems: 'center',\n\n          [`& > *:not(:first-child)`]: {\n            marginLeft: token.spacing.sm,\n            paddingLeft: token.spacing.sm,\n            backgroundPosition: `${token.spacing.sm} 100%`,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n\n        ['& a, & p']: {\n          color: token.color.gray.light,\n        },\n\n        ['& a']: {\n          ...(isThemeLight && { color: token.color.gray.dark }),\n        },\n\n        ['& p']: {\n          display: 'flex',\n          alignItems: 'center',\n\n          ...(isThemeLight && { color: token.color.black }),\n        },\n      },\n    },\n  });\n\n  const container = ElementModel.createDiv({\n    className: 'umd-footer-utility-container',\n    children: [wrapper],\n    elementStyles: {\n      element: {\n        padding: `${token.spacing.sm} 0`,\n        backgroundColor: token.color.gray.darker,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.light,\n        }),\n\n        ['& *']: {\n          ...typography.sans.smaller,\n        },\n\n        ['& a']: {\n          display: 'block',\n          ...animation.line.slideUnderWhite,\n\n          ...(isThemeLight && {\n            color: token.color.black,\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n      },\n    },\n  });\n\n  return container;\n};\n"],"names":["ElementModel.create","ElementModel.createSpan","ElementModel.createDiv","ElementModel.createParagraph"],"mappings":"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"}

package/dist/composite/footer/globals.d.ts

@@ -3,36 +3,4 @@ export declare const BREAKPOINTS: {
     MEDIUM: number;
     LARGE: number;
 };
-export declare const ELEMENTS: {
-    ELEMENT_WRAPPER: string;
-};
-export declare const SLOTS: {
-    CONTACT_HEADLINE: string;
-    CONTACT_LINKS: string;
-    CONTACT_ADDRESS: string;
-    CTA: string;
-    SOCIAL: string;
-    UTILITY: string;
-    LINK_COLUMN_ONE: string;
-    LINK_COLUMN_TWO: string;
-    LINK_COLUMN_THREE: string;
-};
-export declare const VARIABLES: {
-    ELEMENT_NAME: string;
-    ATTRIBUTE_THEME: string;
-    ATTRIBUTE_TYPE: string;
-    VERSION_TYPE_MEGA: string;
-    VERSION_TYPE_VISUAL: string;
-    VERSION_TYPE_SIMPLE: string;
-    VERSION_TYPES: string[];
-    THEME_OPTION_DARK: string;
-    THEME_OPTION_LIGHT: string;
-};
-export declare const REFERENCES: {
-    IS_THEME_LIGHT: string;
-    IS_THEME_DARK: string;
-    IS_VERSION_MEGA: string;
-    IS_VERSION_VISUAL: string;
-    IS_VERSION_SIMPLE: string;
-};
 //# sourceMappingURL=globals.d.ts.map

package/dist/composite/footer/globals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/globals.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AACF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AACF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AACF,eAAO,MAAM,SAAS;;;;;;;;;;CAUrB,CAAC;AACF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC"}
+{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/globals.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;CAIvB,CAAC"}

package/dist/composite/footer/globals.js

@@ -4,24 +4,5 @@ const BREAKPOINTS = {
   MEDIUM: 650,
   LARGE: 1e3
 };
-const ELEMENTS = {
-  ELEMENT_WRAPPER: "umd-footer-element-wrapper"
-};
-const VARIABLES = {
-  ELEMENT_NAME: "umd-element-footer",
-  ATTRIBUTE_THEME: "theme",
-  ATTRIBUTE_TYPE: "type",
-  VERSION_TYPE_VISUAL: "visual",
-  VERSION_TYPE_SIMPLE: "simple",
-  THEME_OPTION_LIGHT: "light"
-};
-const REFERENCES = {
-  IS_THEME_LIGHT: `[${VARIABLES.ATTRIBUTE_THEME}="${VARIABLES.THEME_OPTION_LIGHT}"]`,
-  IS_VERSION_VISUAL: `[${VARIABLES.ATTRIBUTE_TYPE}="${VARIABLES.VERSION_TYPE_VISUAL}"]`,
-  IS_VERSION_SIMPLE: `[${VARIABLES.ATTRIBUTE_TYPE}="${VARIABLES.VERSION_TYPE_SIMPLE}"]`
-};
 exports.BREAKPOINTS = BREAKPOINTS;
-exports.ELEMENTS = ELEMENTS;
-exports.REFERENCES = REFERENCES;
-exports.VARIABLES = VARIABLES;
 //# sourceMappingURL=globals.js.map

package/dist/composite/footer/globals.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.js","sources":["../../../source/composite/footer/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 280,\n  MEDIUM: 650,\n  LARGE: 1000,\n};\nexport const ELEMENTS = {\n  ELEMENT_WRAPPER: 'umd-footer-element-wrapper',\n};\nexport const SLOTS = {\n  CONTACT_HEADLINE: 'contact-headline',\n  CONTACT_LINKS: 'contact-links',\n  CONTACT_ADDRESS: 'contact-address',\n  CTA: 'call-to-action',\n  SOCIAL: 'social-links',\n  UTILITY: 'utility-links',\n  LINK_COLUMN_ONE: 'link-column-one',\n  LINK_COLUMN_TWO: 'link-column-two',\n  LINK_COLUMN_THREE: 'link-column-three',\n};\nexport const VARIABLES = {\n  ELEMENT_NAME: 'umd-element-footer',\n  ATTRIBUTE_THEME: 'theme',\n  ATTRIBUTE_TYPE: 'type',\n  VERSION_TYPE_MEGA: 'mega',\n  VERSION_TYPE_VISUAL: 'visual',\n  VERSION_TYPE_SIMPLE: 'simple',\n  VERSION_TYPES: ['mega', 'visual', 'simple'],\n  THEME_OPTION_DARK: 'dark',\n  THEME_OPTION_LIGHT: 'light',\n};\nexport const REFERENCES = {\n  IS_THEME_LIGHT: `[${VARIABLES.ATTRIBUTE_THEME}=\"${VARIABLES.THEME_OPTION_LIGHT}\"]`,\n  IS_THEME_DARK: `[${VARIABLES.ATTRIBUTE_THEME}=\"${VARIABLES.THEME_OPTION_DARK}\"]`,\n  IS_VERSION_MEGA: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_MEGA}\"]`,\n  IS_VERSION_VISUAL: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_VISUAL}\"]`,\n  IS_VERSION_SIMPLE: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_SIMPLE}\"]`,\n};\n"],"names":[],"mappings":";;AAAO,MAAM,cAAc;AAAA,EAEzB,QAAQ;AAAA,EACR,OAAO;AACT;AACO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AACnB;AAYO,MAAM,YAAY;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAEhB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EAGrB,oBAAoB;AACtB;AACO,MAAM,aAAa;AAAA,EACxB,gBAAgB,IAAI,UAAU,eAAe,KAAK,UAAU,kBAAkB;AAAA,EAG9E,mBAAmB,IAAI,UAAU,cAAc,KAAK,UAAU,mBAAmB;AAAA,EACjF,mBAAmB,IAAI,UAAU,cAAc,KAAK,UAAU,mBAAmB;AACnF;;;;;"}
+{"version":3,"file":"globals.js","sources":["../../../source/composite/footer/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 280,\n  MEDIUM: 650,\n  LARGE: 1000,\n};\n"],"names":[],"mappings":";;AAAO,MAAM,cAAc;AAAA,EAEzB,QAAQ;AAAA,EACR,OAAO;AACT;;"}

package/dist/composite/footer/globals.mjs

@@ -2,26 +2,7 @@ const BREAKPOINTS = {
   MEDIUM: 650,
   LARGE: 1e3
 };
-const ELEMENTS = {
-  ELEMENT_WRAPPER: "umd-footer-element-wrapper"
-};
-const VARIABLES = {
-  ELEMENT_NAME: "umd-element-footer",
-  ATTRIBUTE_THEME: "theme",
-  ATTRIBUTE_TYPE: "type",
-  VERSION_TYPE_VISUAL: "visual",
-  VERSION_TYPE_SIMPLE: "simple",
-  THEME_OPTION_LIGHT: "light"
-};
-const REFERENCES = {
-  IS_THEME_LIGHT: `[${VARIABLES.ATTRIBUTE_THEME}="${VARIABLES.THEME_OPTION_LIGHT}"]`,
-  IS_VERSION_VISUAL: `[${VARIABLES.ATTRIBUTE_TYPE}="${VARIABLES.VERSION_TYPE_VISUAL}"]`,
-  IS_VERSION_SIMPLE: `[${VARIABLES.ATTRIBUTE_TYPE}="${VARIABLES.VERSION_TYPE_SIMPLE}"]`
-};
 export {
-  BREAKPOINTS,
-  ELEMENTS,
-  REFERENCES,
-  VARIABLES
+  BREAKPOINTS
 };
 //# sourceMappingURL=globals.mjs.map

package/dist/composite/footer/globals.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"globals.mjs","sources":["../../../source/composite/footer/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 280,\n  MEDIUM: 650,\n  LARGE: 1000,\n};\nexport const ELEMENTS = {\n  ELEMENT_WRAPPER: 'umd-footer-element-wrapper',\n};\nexport const SLOTS = {\n  CONTACT_HEADLINE: 'contact-headline',\n  CONTACT_LINKS: 'contact-links',\n  CONTACT_ADDRESS: 'contact-address',\n  CTA: 'call-to-action',\n  SOCIAL: 'social-links',\n  UTILITY: 'utility-links',\n  LINK_COLUMN_ONE: 'link-column-one',\n  LINK_COLUMN_TWO: 'link-column-two',\n  LINK_COLUMN_THREE: 'link-column-three',\n};\nexport const VARIABLES = {\n  ELEMENT_NAME: 'umd-element-footer',\n  ATTRIBUTE_THEME: 'theme',\n  ATTRIBUTE_TYPE: 'type',\n  VERSION_TYPE_MEGA: 'mega',\n  VERSION_TYPE_VISUAL: 'visual',\n  VERSION_TYPE_SIMPLE: 'simple',\n  VERSION_TYPES: ['mega', 'visual', 'simple'],\n  THEME_OPTION_DARK: 'dark',\n  THEME_OPTION_LIGHT: 'light',\n};\nexport const REFERENCES = {\n  IS_THEME_LIGHT: `[${VARIABLES.ATTRIBUTE_THEME}=\"${VARIABLES.THEME_OPTION_LIGHT}\"]`,\n  IS_THEME_DARK: `[${VARIABLES.ATTRIBUTE_THEME}=\"${VARIABLES.THEME_OPTION_DARK}\"]`,\n  IS_VERSION_MEGA: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_MEGA}\"]`,\n  IS_VERSION_VISUAL: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_VISUAL}\"]`,\n  IS_VERSION_SIMPLE: `[${VARIABLES.ATTRIBUTE_TYPE}=\"${VARIABLES.VERSION_TYPE_SIMPLE}\"]`,\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EAEzB,QAAQ;AAAA,EACR,OAAO;AACT;AACO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AACnB;AAYO,MAAM,YAAY;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAEhB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EAGrB,oBAAoB;AACtB;AACO,MAAM,aAAa;AAAA,EACxB,gBAAgB,IAAI,UAAU,eAAe,KAAK,UAAU,kBAAkB;AAAA,EAG9E,mBAAmB,IAAI,UAAU,cAAc,KAAK,UAAU,mBAAmB;AAAA,EACjF,mBAAmB,IAAI,UAAU,cAAc,KAAK,UAAU,mBAAmB;AACnF;"}
+{"version":3,"file":"globals.mjs","sources":["../../../source/composite/footer/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  SMALL: 280,\n  MEDIUM: 650,\n  LARGE: 1000,\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EAEzB,QAAQ;AAAA,EACR,OAAO;AACT;"}

package/dist/composite/footer/options.d.ts

@@ -4,7 +4,7 @@ import { BaseProps } from './_types';
 export interface FooterProps extends BaseProps, UtilityProps, MainSectionProps {
 }
 declare const _default: (props: FooterProps) => {
-    element: HTMLDivElement;
+    element: HTMLElement;
     styles: string;
 };
 export default _default;

package/dist/composite/footer/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/options.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,YAAY,EACZ,gBAAgB;CAAG;yBAeP,OAAO,WAAW;;;;AAAlC,wBAwBE"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../source/composite/footer/options.ts"],"names":[],"mappings":"AAGA,OAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAsB,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,YAAY,EACZ,gBAAgB;CAAG;yBAEP,OAAO,WAAW;;;;AAAlC,wBAyCE"}

package/dist/composite/footer/options.js

@@ -1,38 +1,60 @@
 "use strict";
+const token = require("@universityofmaryland/web-styles-library/token");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const index$2 = require("../../model/elements/index.js");
 const index = require("./elements/main-section/index.js");
 const index$1 = require("./elements/utility-section/index.js");
-const globals = require("./globals.js");
-const { ELEMENT_WRAPPER } = globals.ELEMENTS;
-const { ELEMENT_NAME, ATTRIBUTE_THEME, ATTRIBUTE_TYPE } = globals.VARIABLES;
-let styles = `
-  .${ELEMENT_WRAPPER} {
-    container: ${ELEMENT_NAME} / inline-size;
-    overflow: hidden;
+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]
+        });
+      }
+    }
   }
-    
-  ${index.MainContainerStyles}
-  ${index$1.UtilityContainerStyles}
-`;
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const options = (props) => {
-  const {
-    isThemeLight,
-    isTypeSimple,
-    isTypeVisual,
-    isTypeMega,
-    slotUtilityLinks
-  } = props;
-  const wrapper = document.createElement("div");
-  const main = index.createMainSection(props);
-  const utility = index$1.createUtilitySection({ slotUtilityLinks });
-  const theme = isThemeLight ? "light" : "dark";
-  wrapper.setAttribute(ATTRIBUTE_THEME, theme);
-  if (isTypeSimple) wrapper.setAttribute(ATTRIBUTE_TYPE, "simple");
-  if (isTypeVisual) wrapper.setAttribute(ATTRIBUTE_TYPE, "visual");
-  if (isTypeMega) wrapper.setAttribute(ATTRIBUTE_TYPE, "mega");
-  wrapper.classList.add(ELEMENT_WRAPPER);
-  wrapper.appendChild(main);
-  wrapper.appendChild(utility);
-  return { element: wrapper, styles };
+  const { isThemeLight } = props;
+  const main = index(props);
+  const utility = index$1(props);
+  const wrapper = index$2.createDiv({
+    className: "umd-footer-element-wrapper",
+    children: [main, utility],
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        overflow: "hidden",
+        ...isThemeLight && {
+          backgroundColor: token__namespace.color.gray.lightest,
+          ["& a"]: {
+            ...animation__namespace.line.slideUnderBlack,
+            ["&:not(:first-child)::before"]: {
+              backgroundColor: token__namespace.color.black
+            }
+          }
+        },
+        ["& p, & a, & span"]: {
+          color: token__namespace.color.white,
+          ...isThemeLight && {
+            color: token__namespace.color.gray.dark
+          }
+        }
+      }
+    }
+  });
+  return {
+    element: wrapper.element,
+    styles: wrapper.styles
+  };
 };
 module.exports = options;
 //# sourceMappingURL=options.js.map

package/dist/composite/footer/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","sources":["../../../source/composite/footer/options.ts"],"sourcesContent":["import {\n  createMainSection as createMain,\n  MainContainerStyles,\n  type MainSectionProps,\n} from './elements/main-section';\nimport {\n  createUtilitySection as createUtility,\n  UtilityContainerStyles,\n  type UtilityProps,\n} from './elements/utility-section';\nimport { ELEMENTS, VARIABLES } from './globals';\nimport { BaseProps } from './_types';\n\nexport interface FooterProps\n  extends BaseProps,\n    UtilityProps,\n    MainSectionProps {}\n\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME, ATTRIBUTE_THEME, ATTRIBUTE_TYPE } = VARIABLES;\n\nlet styles = `\n  .${ELEMENT_WRAPPER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    overflow: hidden;\n  }\n    \n  ${MainContainerStyles}\n  ${UtilityContainerStyles}\n`;\n\nexport default (props: FooterProps) => {\n  const {\n    isThemeLight,\n    isTypeSimple,\n    isTypeVisual,\n    isTypeMega,\n    slotUtilityLinks,\n  } = props;\n  const wrapper = document.createElement('div');\n  const main = createMain(props);\n  const utility = createUtility({ slotUtilityLinks });\n  const theme = isThemeLight ? 'light' : 'dark';\n\n  wrapper.setAttribute(ATTRIBUTE_THEME, theme);\n  if (isTypeSimple) wrapper.setAttribute(ATTRIBUTE_TYPE, 'simple');\n  if (isTypeVisual) wrapper.setAttribute(ATTRIBUTE_TYPE, 'visual');\n  if (isTypeMega) wrapper.setAttribute(ATTRIBUTE_TYPE, 'mega');\n\n  wrapper.classList.add(ELEMENT_WRAPPER);\n\n  wrapper.appendChild(main);\n  wrapper.appendChild(utility);\n\n  return { element: wrapper, styles };\n};\n"],"names":["ELEMENTS","VARIABLES","MainContainerStyles","UtilityContainerStyles","createMain","createUtility"],"mappings":";;;;AAkBA,MAAM,EAAE,oBAAoBA,QAAAA;AAC5B,MAAM,EAAE,cAAc,iBAAiB,eAAA,IAAmBC,QAAAA;AAE1D,IAAI,SAAS;AAAA,KACR,eAAe;AAAA,iBACH,YAAY;AAAA;AAAA;AAAA;AAAA,IAIzBC,MAAAA,mBAAmB;AAAA,IACnBC,QAAAA,sBAAsB;AAAA;AAG1B,MAAA,UAAe,CAAC,UAAuB;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,OAAOC,MAAAA,kBAAW,KAAK;AAC7B,QAAM,UAAUC,QAAAA,qBAAc,EAAE,kBAAkB;AAClD,QAAM,QAAQ,eAAe,UAAU;AAEvC,UAAQ,aAAa,iBAAiB,KAAK;AAC3C,MAAI,aAAc,SAAQ,aAAa,gBAAgB,QAAQ;AAC/D,MAAI,aAAc,SAAQ,aAAa,gBAAgB,QAAQ;AAC/D,MAAI,WAAY,SAAQ,aAAa,gBAAgB,MAAM;AAE3D,UAAQ,UAAU,IAAI,eAAe;AAErC,UAAQ,YAAY,IAAI;AACxB,UAAQ,YAAY,OAAO;AAE3B,SAAO,EAAE,SAAS,SAAS,OAAA;AAC7B;;"}
+{"version":3,"file":"options.js","sources":["../../../source/composite/footer/options.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport { ElementModel } from 'model';\nimport createMain, { type MainSectionProps } from './elements/main-section';\nimport createUtility, { type UtilityProps } from './elements/utility-section';\nimport { BaseProps } from './_types';\n\nexport interface FooterProps\n  extends BaseProps,\n    UtilityProps,\n    MainSectionProps {}\n\nexport default (props: FooterProps) => {\n  const { isThemeLight } = props;\n\n  const main = createMain(props);\n  const utility = createUtility(props);\n\n  const wrapper = ElementModel.createDiv({\n    className: 'umd-footer-element-wrapper',\n    children: [main, utility],\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        overflow: 'hidden',\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.lightest,\n\n          ['& a']: {\n            ...animation.line.slideUnderBlack,\n\n            ['&:not(:first-child)::before']: {\n              backgroundColor: token.color.black,\n            },\n          },\n        }),\n\n        ['& p, & a, & span']: {\n          color: token.color.white,\n\n          ...(isThemeLight && {\n            color: token.color.gray.dark,\n          }),\n        },\n      },\n    },\n  });\n\n  return {\n    element: wrapper.element,\n    styles: wrapper.styles,\n  };\n};\n"],"names":["createMain","createUtility","ElementModel.createDiv","token","animation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,UAAe,CAAC,UAAuB;AACrC,QAAM,EAAE,iBAAiB;AAEzB,QAAM,OAAOA,MAAW,KAAK;AAC7B,QAAM,UAAUC,QAAc,KAAK;AAEnC,QAAM,UAAUC,QAAAA,UAAuB;AAAA,IACrC,WAAW;AAAA,IACX,UAAU,CAAC,MAAM,OAAO;AAAA,IACxB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,UAAU;AAAA,QAEV,GAAI,gBAAgB;AAAA,UAClB,iBAAiBC,iBAAM,MAAM,KAAK;AAAA,UAElC,CAAC,KAAK,GAAG;AAAA,YACP,GAAGC,qBAAU,KAAK;AAAA,YAElB,CAAC,6BAA6B,GAAG;AAAA,cAC/B,iBAAiBD,iBAAM,MAAM;AAAA,YAAA;AAAA,UAC/B;AAAA,QACF;AAAA,QAGF,CAAC,kBAAkB,GAAG;AAAA,UACpB,OAAOA,iBAAM,MAAM;AAAA,UAEnB,GAAI,gBAAgB;AAAA,YAClB,OAAOA,iBAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AAAA,IACL,SAAS,QAAQ;AAAA,IACjB,QAAQ,QAAQ;AAAA,EAAA;AAEpB;;"}