@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/atomic/assets/video/toggle.js

@@ -1,5 +1,6 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
 import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
 import { play, pause } from "@universityofmaryland/web-icons-library/controls";
 const createVideoToggle = (props) => (() => {
   const {
@@ -34,8 +35,14 @@ const createVideoToggle = (props) => (() => {
       setPause();
     }
   });
-  if (video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true") {
-    setPlay();
+  const isAutoplay = video.getAttribute("autoplay") === "" || video.getAttribute("autoplay") === "true";
+  if (isAutoplay) {
+    if (isPreferredReducedMotion()) {
+      video.removeAttribute("autoplay");
+      setPause();
+    } else {
+      setPlay();
+    }
   }
   return new ElementBuilder().withClassName("umd-element-video").withStyles({
     element: {

package/dist/atomic/assets/video/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport const createVideoToggle = (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    if (\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true'\n    ) {\n      setPlay();\n    }\n\n    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      })\n      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["iconPlay","iconPause"],"mappings":";;;AAcO,MAAM,oBAAoB,CAAC,WAC/B,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASA,IAAQ,EACjB,MAAA;AAEH,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,MACE,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM,QACnC;AACA,YAAA;AAAA,EACF;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;"}
+{"version":3,"file":"toggle.js","sources":["../../../../source/atomic/assets/video/toggle.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { isPreferredReducedMotion } from '@universityofmaryland/web-utilities-library/accessibility';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\ninterface VideoProps {\n  video: HTMLVideoElement;\n  isScaled?: boolean;\n  additionalElementStyles?: Record<string, any>;\n  callback?: (isPlaying: boolean) => void;\n}\n\nexport const createVideoToggle = (props: VideoProps) =>\n  (() => {\n    const {\n      video,\n      additionalElementStyles,\n      isScaled = false,\n      callback,\n    } = props;\n\n    const button = new ElementBuilder('button')\n      .styled(Styles.element.action.button.videoState)\n      .withAttribute('type', 'button')\n      .withAttribute('aria-label', 'Play')\n      .withHTML(iconPlay)\n      .build();\n\n    const setPlay = () => {\n      button.element.setAttribute('aria-label', 'Pause');\n      button.element.innerHTML = iconPause;\n      video.muted = true;\n      video.play().catch((error) => {\n        if (error.name === 'NotAllowedError') {\n          setPause();\n        }\n        console.warn('Video play failed:', error);\n      });\n    };\n\n    const setPause = () => {\n      button.element.setAttribute('aria-label', 'Play');\n      button.element.innerHTML = iconPlay;\n      video.pause();\n    };\n\n    button.element.addEventListener('click', () => {\n      if (video.paused) {\n        if (callback) callback(false);\n        setPlay();\n      } else {\n        if (callback) callback(true);\n        setPause();\n      }\n    });\n\n    const isAutoplay =\n      video.getAttribute('autoplay') === '' ||\n      video.getAttribute('autoplay') === 'true';\n\n    if (isAutoplay) {\n      if (isPreferredReducedMotion()) {\n        // The native `autoplay` attribute makes the browser start playback on\n        // its own, regardless of our JS. Remove it and pause so the video\n        // stays on its first frame, leaving the play button for manual start.\n        video.removeAttribute('autoplay');\n        setPause();\n      } else {\n        setPlay();\n      }\n    }\n\n    return new ElementBuilder()\n      .withClassName('umd-element-video')\n      .withStyles({\n        element: {\n          position: 'relative',\n          ...additionalElementStyles,\n          ...(isScaled && {\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }),\n\n          ...(isScaled && {\n            [`& video`]: {\n              width: '100%',\n              height: '100%',\n              objectFit: 'cover',\n              display: 'block',\n            },\n          }),\n        },\n      })\n      .withChildren(video, button)\n      .withEvents({ setPlay, setPause })\n      .build();\n  })();\n"],"names":["iconPlay","iconPause"],"mappings":";;;;AAeO,MAAM,oBAAoB,CAAC,WAC/B,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EAAA,IACE;AAEJ,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,cAAc,QAAQ,QAAQ,EAC9B,cAAc,cAAc,MAAM,EAClC,SAASA,IAAQ,EACjB,MAAA;AAEH,QAAM,UAAU,MAAM;AACpB,WAAO,QAAQ,aAAa,cAAc,OAAO;AACjD,WAAO,QAAQ,YAAYC;AAC3B,UAAM,QAAQ;AACd,UAAM,KAAA,EAAO,MAAM,CAAC,UAAU;AAC5B,UAAI,MAAM,SAAS,mBAAmB;AACpC,iBAAA;AAAA,MACF;AACA,cAAQ,KAAK,sBAAsB,KAAK;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,MAAM;AACrB,WAAO,QAAQ,aAAa,cAAc,MAAM;AAChD,WAAO,QAAQ,YAAYD;AAC3B,UAAM,MAAA;AAAA,EACR;AAEA,SAAO,QAAQ,iBAAiB,SAAS,MAAM;AAC7C,QAAI,MAAM,QAAQ;AAChB,UAAI,mBAAmB,KAAK;AAC5B,cAAA;AAAA,IACF,OAAO;AACL,UAAI,mBAAmB,IAAI;AAC3B,eAAA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,aACJ,MAAM,aAAa,UAAU,MAAM,MACnC,MAAM,aAAa,UAAU,MAAM;AAErC,MAAI,YAAY;AACd,QAAI,4BAA4B;AAI9B,YAAM,gBAAgB,UAAU;AAChC,eAAA;AAAA,IACF,OAAO;AACL,cAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,IAAI,eAAA,EACR,cAAc,mBAAmB,EACjC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAI,YAAY;AAAA,QACd,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,MAGb,GAAI,YAAY;AAAA,QACd,CAAC,SAAS,GAAG;AAAA,UACX,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,OAAO,MAAM,EAC1B,WAAW,EAAE,SAAS,UAAU,EAChC,MAAA;AACL,GAAA;"}

package/dist/atomic/buttons/fullscreen.d.ts

@@ -3,5 +3,6 @@ export declare const fullscreen: {
         callback: (arg: number) => void;
         index: number;
     }) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
+    className: string;
 };
 //# sourceMappingURL=fullscreen.d.ts.map

package/dist/atomic/buttons/fullscreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;mCAdpB;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;CAaA,CAAC"}
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../../source/atomic/buttons/fullscreen.ts"],"names":[],"mappings":"AA0DA,eAAO,MAAM,UAAU;mCAhDpB;QACD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;KACf;;CAgDA,CAAC"}

package/dist/atomic/buttons/fullscreen.js

@@ -1,14 +1,46 @@
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
 import { ElementBuilder } from "@universityofmaryland/web-builder-library";
-import * as Styles from "@universityofmaryland/web-styles-library";
 import { fullscreen as fullscreen$1 } from "@universityofmaryland/web-icons-library/controls";
+const CLASS_NAME = "umd-action-button-full-screen";
 const create = ({
   callback,
   index
 }) => (() => {
-  return new ElementBuilder("button").withAttribute("data-index", index.toString()).withAttribute("aria-label", "View Full Screen").withHTML(`Full Screen <span></span>${fullscreen$1}`).on("click", () => callback(index)).styled(Styles.element.action.button.fullScreen).build();
+  return new ElementBuilder("button").withClassName(CLASS_NAME).withAttribute("data-index", index.toString()).withAttribute("aria-label", "View Full Screen").withHTML(`Full Screen <span></span>${fullscreen$1}`).on("click", () => callback(index)).styled(typography.sans.min).withStyles({
+    element: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+      color: token.color.white,
+      textTransform: "uppercase",
+      fontWeight: "700",
+      padding: token.spacing.min,
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      transition: "background-color 0.3s",
+      "&:focus": {
+        backgroundColor: "rgba(0, 0, 0, 1)"
+      },
+      "@media (hover: hover)": {
+        "&:hover": {
+          backgroundColor: "rgba(0, 0, 0, 1)"
+        }
+      },
+      "& > span": {
+        display: "block",
+        height: "12px",
+        width: "1px",
+        margin: `0 ${token.spacing.min}`,
+        backgroundColor: token.color.gray.mediumAA
+      }
+    }
+  }).build();
 })();
 const fullscreen = {
-  create
+  create,
+  className: CLASS_NAME
 };
 export {
   fullscreen

package/dist/atomic/buttons/fullscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    return new ElementBuilder('button')\n      .withAttribute('data-index', index.toString())\n      .withAttribute('aria-label', 'View Full Screen')\n      .withHTML(`Full Screen <span></span>${iconFullscreen}`)\n      .on('click', () => callback(index))\n      .styled(Styles.element.action.button.fullScreen)\n      .build();\n  })();\n\nexport const fullscreen = {\n  create,\n};\n"],"names":["iconFullscreen"],"mappings":";;;AAIA,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,SAAO,IAAI,eAAe,QAAQ,EAC/B,cAAc,cAAc,MAAM,SAAA,CAAU,EAC5C,cAAc,cAAc,kBAAkB,EAC9C,SAAS,4BAA4BA,YAAc,EAAE,EACrD,GAAG,SAAS,MAAM,SAAS,KAAK,CAAC,EACjC,OAAO,OAAO,QAAQ,OAAO,OAAO,UAAU,EAC9C,MAAA;AACL,GAAA;AAEK,MAAM,aAAa;AAAA,EACxB;AACF;"}
+{"version":3,"file":"fullscreen.js","sources":["../../../source/atomic/buttons/fullscreen.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { fullscreen as iconFullscreen } from '@universityofmaryland/web-icons-library/controls';\n\nconst CLASS_NAME = 'umd-action-button-full-screen';\n\nconst create = ({\n  callback,\n  index,\n}: {\n  callback: (arg: number) => void;\n  index: number;\n}) =>\n  (() => {\n    return new ElementBuilder('button')\n      .withClassName(CLASS_NAME)\n      .withAttribute('data-index', index.toString())\n      .withAttribute('aria-label', 'View Full Screen')\n      .withHTML(`Full Screen <span></span>${iconFullscreen}`)\n      .on('click', () => callback(index))\n      .styled(typography.sans.min)\n      .withStyles({\n        element: {\n          position: 'absolute',\n          top: '0',\n          right: '0',\n          color: token.color.white,\n          textTransform: 'uppercase',\n          fontWeight: '700',\n          padding: token.spacing.min,\n          display: 'flex',\n          alignItems: 'center',\n          backgroundColor: 'rgba(0, 0, 0, 0.5)',\n          transition: 'background-color 0.3s',\n\n          '&:focus': {\n            backgroundColor: 'rgba(0, 0, 0, 1)',\n          },\n\n          '@media (hover: hover)': {\n            '&:hover': {\n              backgroundColor: 'rgba(0, 0, 0, 1)',\n            },\n          },\n\n          '& > span': {\n            display: 'block',\n            height: '12px',\n            width: '1px',\n            margin: `0 ${token.spacing.min}`,\n            backgroundColor: token.color.gray.mediumAA,\n          },\n        },\n      })\n      .build();\n  })();\n\nexport const fullscreen = {\n  create,\n  className: CLASS_NAME,\n};\n"],"names":["iconFullscreen"],"mappings":";;;;AAKA,MAAM,aAAa;AAEnB,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AACF,OAIG,MAAM;AACL,SAAO,IAAI,eAAe,QAAQ,EAC/B,cAAc,UAAU,EACxB,cAAc,cAAc,MAAM,SAAA,CAAU,EAC5C,cAAc,cAAc,kBAAkB,EAC9C,SAAS,4BAA4BA,YAAc,EAAE,EACrD,GAAG,SAAS,MAAM,SAAS,KAAK,CAAC,EACjC,OAAO,WAAW,KAAK,GAAG,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAO,MAAM,MAAM;AAAA,MACnB,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,SAAS,MAAM,QAAQ;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,YAAY;AAAA,MAEZ,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,MAGnB,yBAAyB;AAAA,QACvB,WAAW;AAAA,UACT,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MAGF,YAAY;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ,KAAK,MAAM,QAAQ,GAAG;AAAA,QAC9B,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IACpC;AAAA,EACF,CACD,EACA,MAAA;AACL,GAAA;AAEK,MAAM,aAAa;AAAA,EACxB;AAAA,EACA,WAAW;AACb;"}

package/dist/atomic/layout/overlay/modal.d.ts

@@ -1,17 +1,8 @@
 type TypeFixedFullScreenProps = {
     content: HTMLElement | null;
     isHidden?: boolean;
-    callback?: () => void;
     context?: HTMLElement | null;
 };
-export declare const STYLES_MODAL: string;
-export declare const createModal: ({ content, callback, isHidden, context, }: TypeFixedFullScreenProps) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        show: () => void;
-        hide: () => void;
-    };
-};
+export declare const createModal: ({ content, isHidden, context, }: TypeFixedFullScreenProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=modal.d.ts.map

package/dist/atomic/layout/overlay/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,YAAY,QAuBxB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2CAKzB,wBAAwB;;;;;;;CAgE1B,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAIA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,iCAIzB,wBAAwB,kFAuF1B,CAAC"}

package/dist/atomic/layout/overlay/modal.js

@@ -1,43 +1,38 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { trapFocus } from "@universityofmaryland/web-utilities-library/accessibility";
-const ELEMENT_CONTAINER = "modal-screen-container";
-const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
-const STYLES_MODAL = `
-  .${ELEMENT_CONTAINER} {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999999;
-  }
-
-  .${ELEMENT_CONTAINER_BACKGROUND} {
-    background-color: rgba(0, 0, 0, 0.9);
-    padding: ${token.spacing.xl} ${token.spacing.md};
-    width: 100%;
-    height: 100%;
-  }
-
-  @media (${token.media.queries.tablet.min}) {
-    .${ELEMENT_CONTAINER_BACKGROUND} {
-      padding: 10vh 10vw;
-    }
-  }
-`;
 const createModal = ({
   content,
-  callback,
   isHidden,
   context
 }) => {
   const body = document.body;
   const html = document.documentElement;
-  const container = document.createElement("div");
-  const background = document.createElement("div");
   let eventReference = null;
   let accessibiltyEventReference = null;
+  const backgroundBuilder = new ElementBuilder().withClassName("modal-screen-container-background").withStyles({
+    element: {
+      backgroundColor: "rgba(0, 0, 0, 0.9)",
+      padding: `${token.spacing.xl} ${token.spacing.md}`,
+      width: "100%",
+      height: "100%",
+      [`@media (${token.media.queries.tablet.min})`]: {
+        padding: "10vh 10vw"
+      }
+    }
+  }).withChildIf(!!content, content);
+  const containerBuilder = new ElementBuilder().withClassName("modal-screen-container").withStyles({
+    element: {
+      display: "none",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 999999
+    }
+  }).withChild(backgroundBuilder);
+  const container = containerBuilder.getElement();
   const show = () => {
     container.style.display = "block";
     body.style.overflow = "hidden";
@@ -53,6 +48,7 @@ const createModal = ({
       action: hide,
       shadowDomContext: context || null
     });
+    if (context) context.dispatchEvent(new CustomEvent("modal:show", { bubbles: true, composed: true }));
     setTimeout(() => {
       if (content) content.focus();
     }, 100);
@@ -64,8 +60,8 @@ const createModal = ({
     html.style.height = "inherit";
     container.style.display = "none";
     if (accessibiltyEventReference) accessibiltyEventReference();
-    if (eventReference)
-      eventReference.removeEventListener("click", () => hide());
+    if (eventReference) eventReference.removeEventListener("click", () => hide());
+    if (context) context.dispatchEvent(new CustomEvent("modal:hide", { bubbles: true, composed: true }));
     setTimeout(() => {
       if (context) {
         const firstItem = context.querySelector("button, a");
@@ -73,22 +69,10 @@ const createModal = ({
       }
     }, 100);
   };
-  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);
-  if (content) background.appendChild(content);
-  container.classList.add(ELEMENT_CONTAINER);
-  container.appendChild(background);
   if (isHidden) container.style.display = "none";
-  return {
-    element: container,
-    styles: STYLES_MODAL,
-    events: {
-      show,
-      hide
-    }
-  };
+  return containerBuilder.withEvents({ show, hide }).build();
 };
 export {
-  STYLES_MODAL,
   createModal
 };
 //# sourceMappingURL=modal.js.map

package/dist/atomic/layout/overlay/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  callback?: () => void;\n  context?: HTMLElement | null;\n};\n\nconst ELEMENT_CONTAINER = 'modal-screen-container';\nconst ELEMENT_CONTAINER_BACKGROUND = 'modal-screen-container-background';\n\nexport const STYLES_MODAL = `\n  .${ELEMENT_CONTAINER} {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_CONTAINER_BACKGROUND} {\n    background-color: rgba(0, 0, 0, 0.9);\n    padding: ${token.spacing.xl} ${token.spacing.md};\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CONTAINER_BACKGROUND} {\n      padding: 10vh 10vw;\n    }\n  }\n`;\n\nexport const createModal = ({\n  content,\n  callback,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const container = document.createElement('div');\n  const background = document.createElement('div');\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference = trapFocus({\n      element: container,\n      action: hide,\n      shadowDomContext: context || null,\n    });\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n    if (eventReference)\n      eventReference.removeEventListener('click', () => hide());\n\n    setTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);\n  if (content) background.appendChild(content);\n\n  container.classList.add(ELEMENT_CONTAINER);\n  container.appendChild(background);\n  if (isHidden) container.style.display = 'none';\n\n  return {\n    element: container,\n    styles: STYLES_MODAL,\n    events: {\n      show,\n      hide,\n    },\n  };\n};\n"],"names":[],"mappings":";;AAUA,MAAM,oBAAoB;AAC1B,MAAM,+BAA+B;AAE9B,MAAM,eAAe;AAAA,KACvB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUjB,4BAA4B;AAAA;AAAA,eAElB,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAED,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AACA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAChC,QAAI;AACF,qBAAe,oBAAoB,SAAS,MAAM,KAAA,CAAM;AAE1D,eAAW,MAAM;AACf,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,UAAU,IAAI,4BAA4B;AACrD,MAAI,QAAS,YAAW,YAAY,OAAO;AAE3C,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,UAAU;AAChC,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  context?: HTMLElement | null;\n};\n\nexport const createModal = ({\n  content,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const backgroundBuilder = new ElementBuilder()\n    .withClassName('modal-screen-container-background')\n    .withStyles({\n      element: {\n        backgroundColor: 'rgba(0, 0, 0, 0.9)',\n        padding: `${token.spacing.xl} ${token.spacing.md}`,\n        width: '100%',\n        height: '100%',\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: '10vh 10vw',\n        },\n      },\n    })\n    .withChildIf(!!content, content as HTMLElement);\n\n  const containerBuilder = new ElementBuilder()\n    .withClassName('modal-screen-container')\n    .withStyles({\n      element: {\n        display: 'none',\n        position: 'fixed',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        zIndex: 999999,\n      },\n    })\n    .withChild(backgroundBuilder);\n\n  const container = containerBuilder.getElement();\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference = trapFocus({\n      element: container,\n      action: hide,\n      shadowDomContext: context || null,\n    });\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:show', {bubbles: true, composed: true}))\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n\t\t\n    if (eventReference) eventReference.removeEventListener('click', () => hide());\n\n\t\tif (context) context.dispatchEvent(new CustomEvent('modal:hide', {bubbles: true, composed: true}))\n    \n\t\tsetTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  if (isHidden) container.style.display = 'none';\n\n  return containerBuilder.withEvents({ show, hide }).build();\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,oBAAoB,IAAI,eAAA,EAC3B,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,SAAS,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA,MAChD,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,CACD,EACA,YAAY,CAAC,CAAC,SAAS,OAAsB;AAEhD,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACV,CACD,EACA,UAAU,iBAAiB;AAE9B,QAAM,YAAY,iBAAiB,WAAA;AAEnC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAE/F,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAEhC,QAAI,eAAgB,gBAAe,oBAAoB,SAAS,MAAM,MAAM;AAE9E,QAAI,QAAS,SAAQ,cAAc,IAAI,YAAY,cAAc,EAAC,SAAS,MAAM,UAAU,KAAA,CAAK,CAAC;AAEjG,eAAW,MAAM;AACb,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO,iBAAiB,WAAW,EAAE,MAAM,KAAA,CAAM,EAAE,MAAA;AACrD;"}

package/dist/atomic/layout/person/columns.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 "../../animations/brand/chevron-scroll.js";
 import "../../animations/brand/card-stack.js";
 import { createImageBackground } from "../../assets/image/background.js";
 import "@universityofmaryland/web-styles-library";
@@ -22,9 +21,9 @@ import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
 import "@universityofmaryland/web-utilities-library/theme";
 import "../block/stacked.js";
-import "../overlay/modal.js";
 import { createTextLockupContact } from "../../text-lockup/contact.js";
-import "../../text-lockup/date.js";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
 import { createTextLockupPerson } from "../../text-lockup/person.js";
 import "../../text-lockup/small.js";
 const smallBreakpoint = token.media.breakpointValues.small.max;

package/dist/atomic/layout/person/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement | HTMLAnchorElement;\n  isThemeDark?: boolean;\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: false,\n    imageLoading: 'lazy',\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-image')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          minWidth: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n            minWidth: '140px',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nconst personLockup = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    slotOne,\n    slotTwo,\n    slotThreeItalic,\n    slotFour,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = personLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-details')\n    .withStyles({\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = contactLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  slotTwo,\n  customStyles = {},\n  email,\n  isThemeDark,\n  slotOne,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonFullProps) => {\n  const person = personLockup({\n    slotTwo,\n    isThemeDark,\n    slotOne,\n    name,\n    slotThreeItalic,\n    slotFour,\n  });\n\n  const contact = contactLockup({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-information')\n    .withStyles({\n      element: {\n        ...customStyles,\n      },\n    })\n    .withChildren(person, contact)\n    .build();\n};\n"],"names":["image","assets.image.background","textLockup.person","textLockup.contact","contact"],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement | HTMLAnchorElement;\n  isThemeDark?: boolean;\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: false,\n    imageLoading: 'lazy',\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-image')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          minWidth: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n            minWidth: '140px',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nconst personLockup = ({\n  actions,\n  slotTwo,\n  isThemeDark,\n  slotOne,\n  name,\n  nameComposite,\n  slotThreeItalic,\n  slotFour,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    slotOne,\n    slotTwo,\n    slotThreeItalic,\n    slotFour,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = personLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-details')\n    .withStyles({\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkedin,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = contactLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  slotTwo,\n  customStyles = {},\n  email,\n  isThemeDark,\n  slotOne,\n  linkedin,\n  name,\n  phone,\n  slotThreeItalic,\n  slotFour,\n}: PersonFullProps) => {\n  const person = personLockup({\n    slotTwo,\n    isThemeDark,\n    slotOne,\n    name,\n    slotThreeItalic,\n    slotFour,\n  });\n\n  const contact = contactLockup({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkedin,\n    phone,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-information')\n    .withStyles({\n      element: {\n        ...customStyles,\n      },\n    })\n    .withChildren(person, contact)\n    .build();\n};\n"],"names":["image","assets.image.background","textLockup.person","textLockup.contact","contact"],"mappings":"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"}

package/dist/atomic/text-lockup/date.d.ts

@@ -6,9 +6,6 @@ type TypeEventLockupDate = {
     };
     isThemeDark?: boolean;
 };
-export declare const createTextLockupDate: (props: TypeEventLockupDate) => {
-    element: HTMLDivElement;
-    styles: string;
-};
+export declare const createTextLockupDate: (props: TypeEventLockupDate) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=date.d.ts.map

package/dist/atomic/text-lockup/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,mBAAmB;;;CA0B9D,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/date.ts"],"names":[],"mappings":"AAOA,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,mBAAmB,kFA6D9D,CAAC"}

package/dist/atomic/text-lockup/date.js

@@ -1,91 +1,58 @@
 import * as animation from "@universityofmaryland/web-styles-library/animation";
 import * as token from "@universityofmaryland/web-token-library";
 import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 import { truncateText } from "@universityofmaryland/web-utilities-library/string";
 import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
-const ATTRIBUTE_THEME = "theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const EVENT_DATE_CONTAINER = "event-lockup-container";
-const EVENT_HEADLINE = "event-lockup-headline";
-const HeadlineStyles = `
-  .${EVENT_HEADLINE} {
-    margin-left: ${token.spacing.sm};
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${EVENT_HEADLINE}`]: typography.sans.large
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${EVENT_HEADLINE} *`]: typography.sans.large
-  }
-})}
-
-  @media (max-width: 767px) {
-    .${EVENT_HEADLINE},
-    .${EVENT_HEADLINE} * {
-      font-size: ${token.font.size.sm};
-      font-weight: 600;
-    }
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite
-  }
-})}
-
-  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},
-  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { 
-    color: ${token.color.white};
-  }
-`;
-const ComponentStyles = `
-  .${EVENT_DATE_CONTAINER} {
-    display: flex;
-    align-items: center;
-    text-align: left;
-  }
-  
-  .${EVENT_DATE_CONTAINER} * {
-    color: currentColor;
-  }
-
-
-  ${HeadlineStyles}
-`;
 const createTextLockupDate = (props) => {
   const { headline, dateSign, isThemeDark } = props;
-  const container = document.createElement("div");
-  let styles = ComponentStyles;
-  container.classList.add(EVENT_DATE_CONTAINER);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  if (dateSign) {
-    container.appendChild(dateSign.element);
-    styles += dateSign.styles;
-  }
-  if (headline) {
+  const createHeadline = () => {
+    if (!headline) {
+      console.warn("Headline element is required");
+      return;
+    }
     const modifiedText = truncateText({
       text: headline.innerHTML,
       maxTextSize: 50
     });
     headline.innerHTML = modifiedText;
-    headline.classList.add(EVENT_HEADLINE);
     wrapLinkForAnimation({ element: headline });
-    container.appendChild(headline);
-  }
-  return { element: container, styles };
+    return new ElementBuilder(headline).withClassName("event-lockup-headline").withStyles({
+      element: {
+        marginLeft: token.spacing.sm,
+        ...typography.sans.large,
+        ...isThemeDark && { color: token.color.white },
+        [`@media (${token.media.queries.large.max})`]: {
+          fontSize: token.font.size.sm,
+          fontWeight: 600
+        },
+        "& *": {
+          ...typography.sans.large,
+          ...isThemeDark && { color: token.color.white },
+          [`@media (${token.media.queries.large.max})`]: {
+            fontSize: token.font.size.sm,
+            fontWeight: 600
+          }
+        },
+        "& a": {
+          ...animation.line.slideUnderBlack,
+          ...isThemeDark && animation.line.slideUnderWhite
+        }
+      }
+    });
+  };
+  const headlineElement = createHeadline();
+  const children = [dateSign, headlineElement].filter(
+    (child) => child != null
+  );
+  return new ElementBuilder().withClassName("event-lockup-container").withStyles({
+    element: {
+      display: "flex",
+      alignItems: "center",
+      textAlign: "left",
+      "& *": { color: "currentColor" }
+    }
+  }).withChildren(...children).build();
 };
 export {
   createTextLockupDate

package/dist/atomic/text-lockup/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst EVENT_DATE_CONTAINER = 'event-lockup-container';\nconst EVENT_HEADLINE = 'event-lockup-headline';\n\n// prettier-ignore\nconst HeadlineStyles = `\n  .${EVENT_HEADLINE} {\n    margin-left: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE}`]: typography.sans.large,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} *`]: typography.sans.large,\n    },\n  })}\n\n  @media (max-width: 767px) {\n    .${EVENT_HEADLINE},\n    .${EVENT_HEADLINE} * {\n      font-size: ${token.font.size.sm};\n      font-weight: 600;\n    }\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_HEADLINE} a`]: animation.line.slideUnderBlack,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} a`]: animation.line.slideUnderWhite,\n    },\n  })}\n\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE},\n  .${EVENT_DATE_CONTAINER}${IS_THEME_DARK} .${EVENT_HEADLINE} * { \n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst ComponentStyles = `\n  .${EVENT_DATE_CONTAINER} {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  \n  .${EVENT_DATE_CONTAINER} * {\n    color: currentColor;\n  }\n\n\n  ${HeadlineStyles}\n`;\n\nexport const createTextLockupDate = (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n  const container = document.createElement('div');\n  let styles = ComponentStyles;\n\n  container.classList.add(EVENT_DATE_CONTAINER);\n  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n  if (dateSign) {\n    container.appendChild(dateSign.element);\n    styles += dateSign.styles;\n  }\n\n  if (headline) {\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    headline.classList.add(EVENT_HEADLINE);\n    wrapLinkForAnimation({ element: headline });\n    container.appendChild(headline);\n  }\n\n  return { element: container, styles };\n};\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAAA,KAClB,cAAc;AAAA,mBACA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG/B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAE5C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAE9C,CAAC,CAAC;AAAA;AAAA;AAAA,OAGG,cAAc;AAAA,OACd,cAAc;AAAA,mBACF,MAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAE7C,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,oBAAoB,GAAG,aAAa,KAAK,cAAc,IAAI,GAAG,UAAU,KAAK;AAAA,EAAA;AAEtF,CAAC,CAAC;AAAA;AAAA,KAEC,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,KACvD,oBAAoB,GAAG,aAAa,KAAK,cAAc;AAAA,aAC/C,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,kBAAkB;AAAA,KACnB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMpB,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrB,cAAc;AAAA;AAGX,MAAM,uBAAuB,CAAC,UAA+B;AAClE,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAC5C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,MAAI,SAAS;AAEb,YAAU,UAAU,IAAI,oBAAoB;AAC5C,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,MAAI,UAAU;AACZ,cAAU,YAAY,SAAS,OAAO;AACtC,cAAU,SAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,UAAM,eAAe,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,aAAS,UAAU,IAAI,cAAc;AACrC,yBAAqB,EAAE,SAAS,UAAU;AAC1C,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO,EAAE,SAAS,WAAW,OAAA;AAC/B;"}
+{"version":3,"file":"date.js","sources":["../../../source/atomic/text-lockup/date.ts"],"sourcesContent":["import * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { truncateText } from '@universityofmaryland/web-utilities-library/string';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\n\ntype TypeEventLockupDate = {\n  headline: HTMLElement | null;\n  dateSign?: { element: HTMLElement; styles: string };\n  isThemeDark?: boolean;\n};\n\nexport const createTextLockupDate = (props: TypeEventLockupDate) => {\n  const { headline, dateSign, isThemeDark } = props;\n\n  const createHeadline = () => {\n    if (!headline) {\n      console.warn('Headline element is required');\n      return;\n    }\n\n    const modifiedText = truncateText({\n      text: headline.innerHTML,\n      maxTextSize: 50,\n    });\n\n    headline.innerHTML = modifiedText;\n    wrapLinkForAnimation({ element: headline });\n\n    return new ElementBuilder(headline)\n      .withClassName('event-lockup-headline')\n      .withStyles({\n        element: {\n          marginLeft: token.spacing.sm,\n          ...typography.sans.large,\n          ...(isThemeDark && { color: token.color.white }),\n          [`@media (${token.media.queries.large.max})`]: {\n            fontSize: token.font.size.sm,\n            fontWeight: 600,\n          },\n          '& *': {\n            ...typography.sans.large,\n            ...(isThemeDark && { color: token.color.white }),\n            [`@media (${token.media.queries.large.max})`]: {\n              fontSize: token.font.size.sm,\n              fontWeight: 600,\n            },\n          },\n          '& a': {\n            ...animation.line.slideUnderBlack,\n            ...(isThemeDark && animation.line.slideUnderWhite),\n          },\n        },\n      });\n  };\n\n  const headlineElement = createHeadline();\n  const children = [dateSign, headlineElement].filter(\n    (child) => child != null,\n  );\n\n  return new ElementBuilder()\n    .withClassName('event-lockup-container')\n    .withStyles({\n      element: {\n        display: 'flex',\n        alignItems: 'center',\n        textAlign: 'left',\n        '& *': { color: 'currentColor' },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,uBAAuB,CAAC,UAA+B;AAClE,QAAM,EAAE,UAAU,UAAU,YAAA,IAAgB;AAE5C,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,UAAU;AACb,cAAQ,KAAK,8BAA8B;AAC3C;AAAA,IACF;AAEA,UAAM,eAAe,aAAa;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,aAAa;AAAA,IAAA,CACd;AAED,aAAS,YAAY;AACrB,yBAAqB,EAAE,SAAS,UAAU;AAE1C,WAAO,IAAI,eAAe,QAAQ,EAC/B,cAAc,uBAAuB,EACrC,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,MAAM,QAAQ;AAAA,QAC1B,GAAG,WAAW,KAAK;AAAA,QACnB,GAAI,eAAe,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,QACxC,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,UAAU,MAAM,KAAK,KAAK;AAAA,UAC1B,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,GAAG,WAAW,KAAK;AAAA,UACnB,GAAI,eAAe,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,UACxC,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,YAC7C,UAAU,MAAM,KAAK,KAAK;AAAA,YAC1B,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEF,OAAO;AAAA,UACL,GAAG,UAAU,KAAK;AAAA,UAClB,GAAI,eAAe,UAAU,KAAK;AAAA,QAAA;AAAA,MACpC;AAAA,IACF,CACD;AAAA,EACL;AAEA,QAAM,kBAAkB,eAAA;AACxB,QAAM,WAAW,CAAC,UAAU,eAAe,EAAE;AAAA,IAC3C,CAAC,UAAU,SAAS;AAAA,EAAA;AAGtB,SAAO,IAAI,eAAA,EACR,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO,EAAE,OAAO,eAAA;AAAA,IAAe;AAAA,EACjC,CACD,EACA,aAAa,GAAG,QAAQ,EACxB,MAAA;AACL;"}

package/dist/composite/accordion/item.d.ts

@@ -1,24 +1,11 @@
-type TypeHeadlineText = {
+type TypeAccordionProps = {
     headline?: HTMLElement | null;
-};
-type TypeBodyText = {
     text?: HTMLElement | null;
-};
-type StateProps = {
-    hasAnimation?: boolean;
-};
-type TypeAccordionProps = TypeHeadlineText & TypeBodyText & {
     isThemeLight?: boolean;
     isThemeDark?: boolean;
     isStateOpen: boolean;
+    context?: HTMLElement;
 };
-export declare const createCompositeAccordionItem: (props: TypeAccordionProps) => {
-    element: HTMLDivElement;
-    styles: string;
-    events: {
-        open: (props: StateProps) => void;
-        close: (props: StateProps) => void;
-    };
-};
+export declare const createCompositeAccordionItem: (props: TypeAccordionProps) => import('../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=item.d.ts.map

package/dist/composite/accordion/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1D,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,KAAK,UAAU,GAAG;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,kBAAkB,GAAG,gBAAgB,GACxC,YAAY,GAAG;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAoTJ,eAAO,MAAM,4BAA4B,GAAI,OAAO,kBAAkB;;;;sBAO7C,UAAU;uBAIT,UAAU;;CA8C9B,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AA4NF,eAAO,MAAM,4BAA4B,GAAI,OAAO,kBAAkB,kFA+DhE,CAAC"}