@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

package/dist/atomic/animations/brand/chevron-scroll.d.ts

@@ -1,5 +1,2 @@
-export declare const createAnimationChevronScroll: () => {
-    element: HTMLDivElement;
-    styles: string;
-};
+export declare const createAnimationChevronScroll: () => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 //# sourceMappingURL=chevron-scroll.d.ts.map

package/dist/atomic/animations/brand/chevron-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chevron-scroll.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"names":[],"mappings":"AAwJA,eAAO,MAAM,4BAA4B;;;CAyBnC,CAAC"}
+{"version":3,"file":"chevron-scroll.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,4BAA4B,qFA+GnC,CAAC"}

package/dist/atomic/animations/brand/chevron-scroll.js

@@ -1,167 +1,113 @@
 import * as token from "@universityofmaryland/web-token-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { withViewTimelineAnimation } from "@universityofmaryland/web-utilities-library/styles";
 const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
 const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
-const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";
-const ELEMENT_FIRST_CHEVRON = "brand-logo-first-chevron";
-const ELEMENT_SECOND_CHEVRON = "brand-logo-second-chevron";
-const ELEMENT_THIRD_CHEVRON = "brand-logo-third-chevron";
-const FirstChevronStyles = `
+const KEYFRAMES = `
   @keyframes chevron-one {
     from { transform: translateX(-80%); }
     to { transform: translateX(40%); }
   }
 
-  .${ELEMENT_FIRST_CHEVRON} {
-    top: 0;
-    transform: translateX(-80%);
-  }
-
-  .${ELEMENT_FIRST_CHEVRON} svg {
-    fill: ${token.color.gold};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_FIRST_CHEVRON} {
-        transform: translateX(40%);
-        animation: chevron-one forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-        animation-range-end: contain;
-      }
-    }
-  }
-`;
-const SecondChevronStyles = `
   @keyframes chevron-two {
     from { transform: translateX(-40%); }
     to { transform: translateX(24%); }
   }
 
-  .${ELEMENT_SECOND_CHEVRON} {
-    top: 10%;
-    z-index: 99;
-    transform: translateX(-40%);
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_SECOND_CHEVRON} {
-       top: 95px;
-    }
-  }
-
-  .${ELEMENT_SECOND_CHEVRON} svg {
-    fill: ${token.color.red};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_SECOND_CHEVRON} {
-        transform: translateX(24%);
-        animation: chevron-two forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-       animation-range-end: contain;
-      }
-    }
-  }
-`;
-const ThirdChevronStyles = `
   @keyframes chevron-three {
     from { transform: translateX(-30%); }
     to { transform: translateX(60%); }
   }
-
-  .${ELEMENT_THIRD_CHEVRON} {
-    top: 25%;
-    transform: translateX(-30%);
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_THIRD_CHEVRON} {
-       top: 195px;
+`;
+const createAnimationChevronScroll = () => (() => {
+  const firstChevron = new ElementBuilder().withClassName("brand-logo-first-chevron").withHTML(ICON_CHEVRON_SMALL).withStyles({
+    element: {
+      top: "0",
+      transform: "translateX(-80%)",
+      "& svg": {
+        fill: token.color.gold,
+        height: "7vw",
+        width: "5vw",
+        [`@media (${token.media.queries.highDef.min})`]: {
+          height: "202px",
+          width: "144px"
+        }
+      },
+      ...withViewTimelineAnimation({
+        transform: "translateX(40%)",
+        animation: "chevron-one forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "cover",
+        animationRangeEnd: "contain"
+      })
     }
-  }
-
-  .${ELEMENT_THIRD_CHEVRON} svg {
-    fill: ${token.color.black};
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_THIRD_CHEVRON} {
-        transform: translateX(60%);
-        animation: chevron-three forwards;
-        animation-timeline: view();
-        animation-range-start: 0;
-        animation-range-end: 100vh;
-      }
+  }).build();
+  const secondChevron = new ElementBuilder().withClassName("brand-logo-second-chevron").withHTML(ICON_CHEVRON_BIG).withStyles({
+    element: {
+      top: "10%",
+      zIndex: 99,
+      transform: "translateX(-40%)",
+      "& svg": {
+        fill: token.color.red,
+        height: "10vw",
+        width: "8.2vw",
+        [`@media (${token.media.queries.highDef.min})`]: {
+          height: "306px",
+          width: "252px"
+        }
+      },
+      [`@media (${token.media.queries.highDef.min})`]: {
+        top: "95px"
+      },
+      ...withViewTimelineAnimation({
+        transform: "translateX(24%)",
+        animation: "chevron-two forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "cover",
+        animationRangeEnd: "contain"
+      })
     }
-  }
-`;
-const STYLES_ANIMATION_BRAND_LOGO = `
-  .${ELEMENT_ANIMATION_BRAND_LOGO} {
-    position: relative;
-    height: 50vw;
-    width: 100vw;
-  }
-
-  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {
-    position: absolute;
-    height: 100%;
-    right: 0;
-    transform: none;
-  }
-
-  .${ELEMENT_SECOND_CHEVRON} svg,
-  .${ELEMENT_THIRD_CHEVRON} svg {
-    height: 10vw;
-    width: 8.2vw;
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${ELEMENT_SECOND_CHEVRON} svg,
-    .${ELEMENT_THIRD_CHEVRON} svg {
-      height: 306px;
-      width: 252px;
+  }).build();
+  const thirdChevron = new ElementBuilder().withClassName("brand-logo-third-chevron").withHTML(ICON_CHEVRON_BIG).withStyles({
+    element: {
+      top: "25%",
+      transform: "translateX(-30%)",
+      "& svg": {
+        fill: token.color.black,
+        height: "10vw",
+        width: "8.2vw",
+        [`@media (${token.media.queries.highDef.min})`]: {
+          height: "306px",
+          width: "252px"
+        }
+      },
+      [`@media (${token.media.queries.highDef.min})`]: {
+        top: "195px"
+      },
+      ...withViewTimelineAnimation({
+        transform: "translateX(60%)",
+        animation: "chevron-three forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "0",
+        animationRangeEnd: "100vh"
+      })
     }
-  }
-
-  .${FirstChevronStyles} svg {
-    height: 7vw;
-    width: 5vw;
-  }
-
-  @media (${token.media.queries.highDef.min}) {
-    .${FirstChevronStyles} svg {
-      height: 202px;
-      width: 144px;
+  }).build();
+  const container = new ElementBuilder().withClassName("brand-logo-container").withStyles({
+    element: {
+      position: "relative",
+      height: "50vw",
+      width: "100vw",
+      "& > *": {
+        position: "absolute",
+        height: "100%",
+        right: "0",
+        transform: "none"
+      }
     }
-  }
-
-  ${FirstChevronStyles} 
-  ${SecondChevronStyles} 
-  ${ThirdChevronStyles} 
-`;
-const createAnimationChevronScroll = () => (() => {
-  const container = document.createElement("div");
-  const first = document.createElement("div");
-  const second = document.createElement("div");
-  const third = document.createElement("div");
-  first.classList.add(ELEMENT_FIRST_CHEVRON);
-  first.innerHTML = ICON_CHEVRON_SMALL;
-  second.classList.add(ELEMENT_SECOND_CHEVRON);
-  second.innerHTML = ICON_CHEVRON_BIG;
-  third.classList.add(ELEMENT_THIRD_CHEVRON);
-  third.innerHTML = ICON_CHEVRON_BIG;
-  container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);
-  container.appendChild(first);
-  container.appendChild(second);
-  container.appendChild(third);
-  return {
-    element: container,
-    styles: STYLES_ANIMATION_BRAND_LOGO
-  };
+  }).withChildren(firstChevron, secondChevron, thirdChevron).build();
+  container.styles += KEYFRAMES;
+  return container;
 })();
 export {
   createAnimationChevronScroll

package/dist/atomic/animations/brand/chevron-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"chevron-scroll.js","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport const createAnimationChevronScroll = () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACd,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMf,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACf,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGf,MAAM,+BAA+B,OACzC,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}
+{"version":3,"file":"chevron-scroll.js","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { withViewTimelineAnimation } from '@universityofmaryland/web-utilities-library/styles';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst KEYFRAMES = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n`;\n\nexport const createAnimationChevronScroll = () =>\n  (() => {\n    const firstChevron = new ElementBuilder()\n      .withClassName('brand-logo-first-chevron')\n      .withHTML(ICON_CHEVRON_SMALL)\n      .withStyles({\n        element: {\n          top: '0',\n          transform: 'translateX(-80%)',\n          '& svg': {\n            fill: token.color.gold,\n            height: '7vw',\n            width: '5vw',\n            [`@media (${token.media.queries.highDef.min})`]: {\n              height: '202px',\n              width: '144px',\n            },\n          },\n          ...withViewTimelineAnimation({\n            transform: 'translateX(40%)',\n            animation: 'chevron-one forwards',\n            animationTimeline: 'view()',\n            animationRangeStart: 'cover',\n            animationRangeEnd: 'contain',\n          }),\n        },\n      })\n      .build();\n\n    const secondChevron = new ElementBuilder()\n      .withClassName('brand-logo-second-chevron')\n      .withHTML(ICON_CHEVRON_BIG)\n      .withStyles({\n        element: {\n          top: '10%',\n          zIndex: 99,\n          transform: 'translateX(-40%)',\n          '& svg': {\n            fill: token.color.red,\n            height: '10vw',\n            width: '8.2vw',\n            [`@media (${token.media.queries.highDef.min})`]: {\n              height: '306px',\n              width: '252px',\n            },\n          },\n          [`@media (${token.media.queries.highDef.min})`]: {\n            top: '95px',\n          },\n          ...withViewTimelineAnimation({\n            transform: 'translateX(24%)',\n            animation: 'chevron-two forwards',\n            animationTimeline: 'view()',\n            animationRangeStart: 'cover',\n            animationRangeEnd: 'contain',\n          }),\n        },\n      })\n      .build();\n\n    const thirdChevron = new ElementBuilder()\n      .withClassName('brand-logo-third-chevron')\n      .withHTML(ICON_CHEVRON_BIG)\n      .withStyles({\n        element: {\n          top: '25%',\n          transform: 'translateX(-30%)',\n          '& svg': {\n            fill: token.color.black,\n            height: '10vw',\n            width: '8.2vw',\n            [`@media (${token.media.queries.highDef.min})`]: {\n              height: '306px',\n              width: '252px',\n            },\n          },\n          [`@media (${token.media.queries.highDef.min})`]: {\n            top: '195px',\n          },\n          ...withViewTimelineAnimation({\n            transform: 'translateX(60%)',\n            animation: 'chevron-three forwards',\n            animationTimeline: 'view()',\n            animationRangeStart: '0',\n            animationRangeEnd: '100vh',\n          }),\n        },\n      })\n      .build();\n\n    const container = new ElementBuilder()\n      .withClassName('brand-logo-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          height: '50vw',\n          width: '100vw',\n          '& > *': {\n            position: 'absolute',\n            height: '100%',\n            right: '0',\n            transform: 'none',\n          },\n        },\n      })\n      .withChildren(firstChevron, secondChevron, thirdChevron)\n      .build();\n\n    container.styles += KEYFRAMES;\n\n    return container;\n  })();\n"],"names":[],"mappings":";;;AAIA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBX,MAAM,+BAA+B,OACzC,MAAM;AACL,QAAM,eAAe,IAAI,eAAA,EACtB,cAAc,0BAA0B,EACxC,SAAS,kBAAkB,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC/C,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,GAAG,0BAA0B;AAAA,QAC3B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,mBAAmB;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD,EACA,MAAA;AAEH,QAAM,gBAAgB,IAAI,eAAA,EACvB,cAAc,2BAA2B,EACzC,SAAS,gBAAgB,EACzB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC/C,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG,0BAA0B;AAAA,QAC3B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,mBAAmB;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD,EACA,MAAA;AAEH,QAAM,eAAe,IAAI,eAAA,EACtB,cAAc,0BAA0B,EACxC,SAAS,gBAAgB,EACzB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,QACP,MAAM,MAAM,MAAM;AAAA,QAClB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,UAC/C,QAAQ;AAAA,UACR,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,KAAK;AAAA,MAAA;AAAA,MAEP,GAAG,0BAA0B;AAAA,QAC3B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,mBAAmB;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,sBAAsB,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD,EACA,aAAa,cAAc,eAAe,YAAY,EACtD,MAAA;AAEH,YAAU,UAAU;AAEpB,SAAO;AACT,GAAA;"}

package/dist/atomic/assets/image/caption.d.ts

@@ -0,0 +1,9 @@
+import { ElementModel } from '../../../../builder/dist/index.d.ts';
+export declare const createCaption: {
+    create: (isToggleCaption: boolean, image: HTMLImageElement) => ElementModel | null;
+    bindToggle: (root: ParentNode) => void;
+    Elements: {
+        container: string;
+    };
+};
+//# sourceMappingURL=caption.d.ts.map

package/dist/atomic/assets/image/caption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/caption.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,2CAA2C,CAAC;AA8MnD,eAAO,MAAM,aAAa;8BAPP,OAAO,SACjB,gBAAgB,KACtB,YAAY,GAAG,IAAI;uBA1KI,UAAU,KAAG,IAAI;;;;CAqL1C,CAAC"}

package/dist/atomic/assets/image/caption.js

@@ -0,0 +1,166 @@
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+const ATTRIBUTE_CAPTION = "data-caption";
+const ATTRIBUTE_CREDIT = "data-credit";
+let captionInstanceCount = 0;
+const INDICATOR_CLASS = "image-caption-toggle-indicator";
+const TOGGLE_CLASS = "image-caption-toggle";
+const toggleCaption = (event) => {
+  event.stopPropagation();
+  const button = event.currentTarget;
+  const container = button.closest(`.${TOGGLE_CLASS}`);
+  if (!container) return;
+  const isExpanded = button.getAttribute("aria-expanded") === "true";
+  button.setAttribute("aria-expanded", String(!isExpanded));
+  if (isExpanded) {
+    container.removeAttribute("data-expanded");
+  } else {
+    container.setAttribute("data-expanded", "");
+  }
+};
+const bindToggle = (root) => {
+  root.querySelectorAll(`.${INDICATOR_CLASS}`).forEach((button) => button.addEventListener("click", toggleCaption));
+};
+const getCaptionText = (image) => {
+  if (image.hasAttribute(ATTRIBUTE_CAPTION)) {
+    console.log(
+      `Attribute "data-caption" is deprecated. Use "data-credit" instead. This attribute will be removed in version 2.0.`
+    );
+  }
+  return image.getAttribute(ATTRIBUTE_CREDIT) || image.getAttribute(ATTRIBUTE_CAPTION);
+};
+const makeBlockCaption = (image) => {
+  const text = getCaptionText(image);
+  if (!text) return null;
+  return new ElementBuilder("span").withClassName("image-caption-block").styled(typography.sans.min).withStyles({
+    element: {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      padding: token.spacing.min,
+      color: token.color.white,
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }
+  }).withText(text).build();
+};
+const makeToggleCaption = (image) => {
+  const text = getCaptionText(image);
+  if (!text) return null;
+  const captionId = `image-caption-text-${captionInstanceCount += 1}`;
+  const indicator = new ElementBuilder("button").withClassName(INDICATOR_CLASS).withAttributes({
+    type: "button",
+    "aria-expanded": "false",
+    "aria-controls": captionId,
+    "aria-label": "Toggle caption"
+  }).on("click", toggleCaption).withStyles({
+    element: {
+      appearance: "none",
+      WebkitAppearance: "none",
+      border: "none",
+      margin: 0,
+      padding: 0,
+      cursor: "pointer",
+      pointerEvents: "auto",
+      touchAction: "manipulation",
+      WebkitTapHighlightColor: "transparent",
+      width: token.spacing.lg,
+      height: token.spacing.lg,
+      position: "relative",
+      display: "block",
+      flexShrink: 0,
+      borderRadius: "50%",
+      backgroundColor: token.color.gray.darker,
+      color: token.color.white,
+      transition: "background-color 0.5s ease, color 0.5s ease",
+      "@media (hover: hover)": {
+        "&:hover": {
+          backgroundColor: token.color.white,
+          color: token.color.gray.darker
+        }
+      },
+      "&::before": {
+        content: "''",
+        position: "absolute",
+        width: "3px",
+        height: "3px",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        boxShadow: "-6px 0 0 currentColor, 6px 0 0 currentColor",
+        transition: "opacity 0.1s ease"
+      },
+      "&::after": {
+        content: "'✕'",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        fontSize: "14px",
+        lineHeight: 1,
+        opacity: 0,
+        transition: "opacity 0.1s ease"
+      }
+    }
+  }).build();
+  const captionText = new ElementBuilder("span").withClassName("image-caption-toggle-text").withAttribute("id", captionId).withText(text).styled(typography.sans.smaller).withStyles({
+    element: {
+      display: "none",
+      overflow: "auto",
+      boxSizing: "border-box",
+      maxHeight: "100%",
+      pointerEvents: "auto",
+      color: token.color.white,
+      backgroundColor: token.color.gray.darker,
+      border: `${token.spacing.sm} solid ${token.color.gray.darker}`,
+      borderRadius: "2px",
+      lineHeight: 1.1,
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": { display: "none" }
+    }
+  }).build();
+  const model = new ElementBuilder("div").withClassName(TOGGLE_CLASS).withStyles({
+    element: {
+      position: "absolute",
+      inset: `auto ${token.spacing.sm} ${token.spacing.sm} auto`,
+      display: "inline-flex",
+      flexDirection: "row-reverse",
+      alignItems: "center",
+      zIndex: 99,
+      userSelect: "none",
+      maxWidth: `calc(100% - (${token.spacing.sm} * 2))`,
+      maxHeight: `calc(100% - (${token.spacing.sm} * 2))`,
+      "&[data-expanded]": {
+        width: `calc(100% - (${token.spacing.sm} * 2))`,
+        height: `calc(100% - (${token.spacing.sm} * 2))`,
+        gap: token.spacing.sm,
+        alignItems: "flex-end",
+        pointerEvents: "none",
+        "& .image-caption-toggle-text": {
+          display: "block",
+          flex: 1
+        },
+        "& .image-caption-toggle-indicator::before": { opacity: 0 },
+        "& .image-caption-toggle-indicator::after": { opacity: 1 }
+      }
+    }
+  }).withChildren(indicator, captionText).build();
+  return model;
+};
+const create = (isToggleCaption, image) => {
+  if (isToggleCaption) return makeToggleCaption(image);
+  return makeBlockCaption(image);
+};
+const createCaption = {
+  create,
+  bindToggle,
+  Elements: {
+    container: "image-container"
+  }
+};
+export {
+  createCaption
+};
+//# sourceMappingURL=caption.js.map

package/dist/atomic/assets/image/caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption.js","sources":["../../../../source/atomic/assets/image/caption.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport {\n  ElementBuilder,\n  type ElementModel,\n} from '@universityofmaryland/web-builder-library';\n\nconst ATTRIBUTE_CAPTION = 'data-caption';\nconst ATTRIBUTE_CREDIT = 'data-credit';\n\nlet captionInstanceCount = 0;\n\nconst INDICATOR_CLASS = 'image-caption-toggle-indicator';\nconst TOGGLE_CLASS = 'image-caption-toggle';\n\nconst toggleCaption = (event: Event) => {\n  event.stopPropagation();\n\n  const button = event.currentTarget as HTMLElement;\n  const container = button.closest(`.${TOGGLE_CLASS}`);\n  if (!container) return;\n\n  const isExpanded = button.getAttribute('aria-expanded') === 'true';\n  button.setAttribute('aria-expanded', String(!isExpanded));\n\n  if (isExpanded) {\n    container.removeAttribute('data-expanded');\n  } else {\n    container.setAttribute('data-expanded', '');\n  }\n};\n\n// cloneNode(true) does not copy listeners added via addEventListener, so a\n// cloned subtree (e.g. carousel slides duplicated for infinite scroll) loses\n// its caption toggle behavior. Consumers that clone caption markup must call\n// this on the clone to restore interactivity.\nconst bindToggle = (root: ParentNode): void => {\n  root\n    .querySelectorAll(`.${INDICATOR_CLASS}`)\n    .forEach((button) => button.addEventListener('click', toggleCaption));\n};\n\nconst getCaptionText = (image: HTMLImageElement): string | null => {\n  if (image.hasAttribute(ATTRIBUTE_CAPTION)) {\n    console.log(\n      `Attribute \"data-caption\" is deprecated. Use \"data-credit\" instead. This attribute will be removed in version 2.0.`,\n    );\n  }\n  return (\n    image.getAttribute(ATTRIBUTE_CREDIT) ||\n    image.getAttribute(ATTRIBUTE_CAPTION)\n  );\n};\n\nconst makeBlockCaption = (image: HTMLImageElement): ElementModel | null => {\n  const text = getCaptionText(image);\n  if (!text) return null;\n\n  return new ElementBuilder('span')\n    .withClassName('image-caption-block')\n    .styled(typography.sans.min)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        bottom: 0,\n        right: 0,\n        padding: token.spacing.min,\n        color: token.color.white,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n      },\n    })\n    .withText(text)\n    .build();\n};\n\nconst makeToggleCaption = (image: HTMLImageElement): ElementModel | null => {\n  const text = getCaptionText(image);\n  if (!text) return null;\n\n  const captionId = `image-caption-text-${(captionInstanceCount += 1)}`;\n\n  const indicator = new ElementBuilder('button')\n    .withClassName(INDICATOR_CLASS)\n    .withAttributes({\n      type: 'button',\n      'aria-expanded': 'false',\n      'aria-controls': captionId,\n      'aria-label': 'Toggle caption',\n    })\n    .on('click', toggleCaption)\n    .withStyles({\n      element: {\n        appearance: 'none',\n        WebkitAppearance: 'none',\n        border: 'none',\n        margin: 0,\n        padding: 0,\n        cursor: 'pointer',\n        pointerEvents: 'auto',\n        touchAction: 'manipulation',\n        WebkitTapHighlightColor: 'transparent',\n        width: token.spacing.lg,\n        height: token.spacing.lg,\n        position: 'relative',\n        display: 'block',\n        flexShrink: 0,\n        borderRadius: '50%',\n        backgroundColor: token.color.gray.darker,\n        color: token.color.white,\n        transition: 'background-color 0.5s ease, color 0.5s ease',\n\n        '@media (hover: hover)': {\n          '&:hover': {\n            backgroundColor: token.color.white,\n            color: token.color.gray.darker,\n          },\n        },\n        '&::before': {\n          content: \"''\",\n          position: 'absolute',\n          width: '3px',\n          height: '3px',\n          borderRadius: '50%',\n          backgroundColor: 'currentColor',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          boxShadow: '-6px 0 0 currentColor, 6px 0 0 currentColor',\n          transition: 'opacity 0.1s ease',\n        },\n        '&::after': {\n          content: \"'✕'\",\n          position: 'absolute',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          fontSize: '14px',\n          lineHeight: 1,\n          opacity: 0,\n          transition: 'opacity 0.1s ease',\n        },\n      },\n    })\n    .build();\n\n  const captionText = new ElementBuilder('span')\n    .withClassName('image-caption-toggle-text')\n    .withAttribute('id', captionId)\n    .withText(text)\n    .styled(typography.sans.smaller)\n    .withStyles({\n      element: {\n        display: 'none',\n        overflow: 'auto',\n        boxSizing: 'border-box',\n        maxHeight: '100%',\n        pointerEvents: 'auto',\n        color: token.color.white,\n        backgroundColor: token.color.gray.darker,\n        border: `${token.spacing.sm} solid ${token.color.gray.darker}`,\n        borderRadius: '2px',\n        lineHeight: 1.1,\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      },\n    })\n    .build();\n\n  const model = new ElementBuilder('div')\n    .withClassName(TOGGLE_CLASS)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        inset: `auto ${token.spacing.sm} ${token.spacing.sm} auto`,\n        display: 'inline-flex',\n        flexDirection: 'row-reverse',\n        alignItems: 'center',\n        zIndex: 99,\n        userSelect: 'none',\n        maxWidth: `calc(100% - (${token.spacing.sm} * 2))`,\n        maxHeight: `calc(100% - (${token.spacing.sm} * 2))`,\n\n        '&[data-expanded]': {\n          width: `calc(100% - (${token.spacing.sm} * 2))`,\n          height: `calc(100% - (${token.spacing.sm} * 2))`,\n          gap: token.spacing.sm,\n          alignItems: 'flex-end',\n          pointerEvents: 'none',\n          '& .image-caption-toggle-text': {\n            display: 'block',\n            flex: 1,\n          },\n          '& .image-caption-toggle-indicator::before': { opacity: 0 },\n          '& .image-caption-toggle-indicator::after': { opacity: 1 },\n        },\n      },\n    })\n    .withChildren(indicator, captionText)\n    .build();\n\n  return model;\n};\n\nconst create = (\n  isToggleCaption: boolean,\n  image: HTMLImageElement,\n): ElementModel | null => {\n  if (isToggleCaption) return makeToggleCaption(image);\n  return makeBlockCaption(image);\n};\n\nexport const createCaption = {\n  create,\n  bindToggle,\n  Elements: {\n    container: 'image-container',\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/atomic/assets/image/gif.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"AA+NA,eAAO,MAAM,cAAc,GAAI,cAE5B;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C,yGA4BA,CAAC"}
+{"version":3,"file":"gif.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/gif.ts"],"names":[],"mappings":"AAsOA,eAAO,MAAM,cAAc,GAAI,cAE5B;IACD,OAAO,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;CAC/C,yGA4BA,CAAC"}

package/dist/atomic/assets/image/gif.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 { debounce } from "@universityofmaryland/web-utilities-library/performance";
 import { pause, play } from "@universityofmaryland/web-icons-library/controls";
 const extractImageElement = (element) => {
@@ -130,7 +131,11 @@ const applyGifToggle = (image, container, state) => {
   }
   setupLazyLoading(container, image, canvas, button, state, () => {
     sizeCanvas();
-    setButtonPlay();
+    if (isPreferredReducedMotion()) {
+      setButtonPause();
+    } else {
+      setButtonPlay();
+    }
   });
   window.addEventListener(
     "resize",

package/dist/atomic/assets/image/gif.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\n/**\n * GIF loading state interface\n */\ninterface GifState {\n  isLoaded: boolean;\n  isPlaying: boolean;\n  originalSrc: string;\n}\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\n/**\n * Renders the first frame of the GIF to the canvas\n */\nconst renderFirstFrame = (\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  container: HTMLElement,\n) => {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const containerWidth = container.clientWidth;\n  const containerHeight = container.clientHeight;\n\n  canvas.width = containerWidth;\n  canvas.height = containerHeight;\n\n  // Calculate dimensions to maintain aspect ratio while covering\n  const imgRatio = image.naturalWidth / image.naturalHeight;\n  const containerRatio = containerWidth / containerHeight;\n\n  let drawWidth: number;\n  let drawHeight: number;\n  let offsetX = 0;\n  let offsetY = 0;\n\n  if (imgRatio > containerRatio) {\n    drawHeight = containerHeight;\n    drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n    offsetX = (containerWidth - drawWidth) / 2;\n  } else {\n    drawWidth = containerWidth;\n    drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n    offsetY = (containerHeight - drawHeight) / 2;\n  }\n\n  ctx.clearRect(0, 0, containerWidth, containerHeight);\n  ctx.imageSmoothingEnabled = true;\n  ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n};\n\n/**\n * Sets up the IntersectionObserver for lazy loading the GIF\n */\nconst setupLazyLoading = (\n  container: HTMLElement,\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  button: HTMLButtonElement,\n  state: GifState,\n  onLoad: () => void,\n) => {\n  // Handle non-browser environments\n  if (typeof IntersectionObserver === 'undefined') {\n    // Load immediately if IntersectionObserver is not available\n    state.isLoaded = true;\n    button.style.display = 'flex';\n    onLoad();\n    return null;\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting && !state.isLoaded) {\n          state.isLoaded = true;\n\n          // Restore the original src to load the animated GIF\n          image.src = state.originalSrc;\n\n          // Show the button once loaded\n          image.addEventListener(\n            'load',\n            () => {\n              button.style.display = 'flex';\n              onLoad();\n            },\n            { once: true },\n          );\n\n          observer.disconnect();\n        }\n      });\n    },\n    {\n      threshold: 0.1,\n      rootMargin: '50px', // Start loading slightly before visible\n    },\n  );\n\n  observer.observe(container);\n\n  return observer;\n};\n\nconst applyGifToggle = (\n  image: HTMLImageElement,\n  container: HTMLElement,\n  state: GifState,\n) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n    state.isPlaying = true;\n  };\n\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n    state.isPlaying = false;\n  };\n\n  const sizeCanvas = () => {\n    if (!container) return;\n    const img = container.querySelector('img');\n    const canvasEl = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!canvasEl || !img) return;\n\n    // Set canvas display dimensions to match container\n    canvasEl.style.width = '100%';\n    canvasEl.style.height = `${img.clientHeight}px`;\n    canvasEl.style.position = 'absolute';\n    canvasEl.style.top = '0';\n    canvasEl.style.left = '0';\n\n    if (state.isLoaded && img.complete && img.naturalWidth > 0) {\n      renderFirstFrame(img, canvasEl, container);\n    }\n  };\n\n  // Initialize button but hide until GIF is loaded\n  button.setAttribute('type', 'button');\n  button.style.display = 'none';\n\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (state.isPlaying) {\n      setButtonPause();\n    } else {\n      setButtonPlay();\n    }\n  });\n\n  // Add canvas immediately for placeholder\n  container.appendChild(canvas);\n  container.appendChild(button);\n\n  // Initially hide the animated image (show canvas placeholder)\n  image.style.opacity = '0';\n  image.style.transition = 'opacity 0.2s ease-in-out';\n  canvas.style.opacity = '1';\n  canvas.style.transition = 'opacity 0.2s ease-in-out';\n\n  // Handle initial image load for first frame capture\n  const captureFirstFrame = () => {\n    sizeCanvas();\n    renderFirstFrame(image, canvas, container);\n  };\n\n  // If image is already loaded (from cache), capture first frame immediately\n  if (image.complete && image.naturalWidth > 0) {\n    captureFirstFrame();\n  } else {\n    image.addEventListener('load', captureFirstFrame, { once: true });\n  }\n\n  // Set up lazy loading observer\n  setupLazyLoading(container, image, canvas, button, state, () => {\n    // Once loaded, render the first frame properly and set to play\n    sizeCanvas();\n    setButtonPlay();\n  });\n\n  // Handle resize\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas();\n    }, 50),\n  );\n};\n\nexport const createImageGif = ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  // Store original src and create state\n  const state: GifState = {\n    isLoaded: false,\n    isPlaying: false,\n    originalSrc: image.src,\n  };\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el, state);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay"],"mappings":"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"}
+{"version":3,"file":"gif.js","sources":["../../../../source/atomic/assets/image/gif.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 { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport {\n  pause as iconPause,\n  play as iconPlay,\n} from '@universityofmaryland/web-icons-library/controls';\n\n/**\n * GIF loading state interface\n */\ninterface GifState {\n  isLoaded: boolean;\n  isPlaying: boolean;\n  originalSrc: string;\n}\n\nconst extractImageElement = (\n  element: HTMLImageElement | HTMLAnchorElement,\n): HTMLImageElement | null => {\n  if (element instanceof HTMLImageElement) {\n    return element;\n  }\n\n  if (element instanceof HTMLAnchorElement) {\n    return element.querySelector('img');\n  }\n\n  return null;\n};\n\n/**\n * Renders the first frame of the GIF to the canvas\n */\nconst renderFirstFrame = (\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  container: HTMLElement,\n) => {\n  const ctx = canvas.getContext('2d');\n  if (!ctx) return;\n\n  const containerWidth = container.clientWidth;\n  const containerHeight = container.clientHeight;\n\n  canvas.width = containerWidth;\n  canvas.height = containerHeight;\n\n  // Calculate dimensions to maintain aspect ratio while covering\n  const imgRatio = image.naturalWidth / image.naturalHeight;\n  const containerRatio = containerWidth / containerHeight;\n\n  let drawWidth: number;\n  let drawHeight: number;\n  let offsetX = 0;\n  let offsetY = 0;\n\n  if (imgRatio > containerRatio) {\n    drawHeight = containerHeight;\n    drawWidth = image.naturalWidth * (containerHeight / image.naturalHeight);\n    offsetX = (containerWidth - drawWidth) / 2;\n  } else {\n    drawWidth = containerWidth;\n    drawHeight = image.naturalHeight * (containerWidth / image.naturalWidth);\n    offsetY = (containerHeight - drawHeight) / 2;\n  }\n\n  ctx.clearRect(0, 0, containerWidth, containerHeight);\n  ctx.imageSmoothingEnabled = true;\n  ctx.drawImage(image, offsetX, offsetY, drawWidth, drawHeight);\n};\n\n/**\n * Sets up the IntersectionObserver for lazy loading the GIF\n */\nconst setupLazyLoading = (\n  container: HTMLElement,\n  image: HTMLImageElement,\n  canvas: HTMLCanvasElement,\n  button: HTMLButtonElement,\n  state: GifState,\n  onLoad: () => void,\n) => {\n  // Handle non-browser environments\n  if (typeof IntersectionObserver === 'undefined') {\n    // Load immediately if IntersectionObserver is not available\n    state.isLoaded = true;\n    button.style.display = 'flex';\n    onLoad();\n    return null;\n  }\n\n  const observer = new IntersectionObserver(\n    (entries) => {\n      entries.forEach((entry) => {\n        if (entry.isIntersecting && !state.isLoaded) {\n          state.isLoaded = true;\n\n          // Restore the original src to load the animated GIF\n          image.src = state.originalSrc;\n\n          // Show the button once loaded\n          image.addEventListener(\n            'load',\n            () => {\n              button.style.display = 'flex';\n              onLoad();\n            },\n            { once: true },\n          );\n\n          observer.disconnect();\n        }\n      });\n    },\n    {\n      threshold: 0.1,\n      rootMargin: '50px', // Start loading slightly before visible\n    },\n  );\n\n  observer.observe(container);\n\n  return observer;\n};\n\nconst applyGifToggle = (\n  image: HTMLImageElement,\n  container: HTMLElement,\n  state: GifState,\n) => {\n  const canvas = document.createElement('canvas');\n  const button = document.createElement('button');\n\n  const setButtonPlay = () => {\n    button.setAttribute('aria-label', 'Pause');\n    button.innerHTML = iconPause;\n    canvas.style.opacity = '0';\n    image.style.opacity = '1';\n    state.isPlaying = true;\n  };\n\n  const setButtonPause = () => {\n    button.setAttribute('aria-label', 'Play');\n    button.innerHTML = iconPlay;\n    canvas.style.opacity = '1';\n    image.style.opacity = '0';\n    state.isPlaying = false;\n  };\n\n  const sizeCanvas = () => {\n    if (!container) return;\n    const img = container.querySelector('img');\n    const canvasEl = container.querySelector('canvas') as HTMLCanvasElement;\n\n    if (!canvasEl || !img) return;\n\n    // Set canvas display dimensions to match container\n    canvasEl.style.width = '100%';\n    canvasEl.style.height = `${img.clientHeight}px`;\n    canvasEl.style.position = 'absolute';\n    canvasEl.style.top = '0';\n    canvasEl.style.left = '0';\n\n    if (state.isLoaded && img.complete && img.naturalWidth > 0) {\n      renderFirstFrame(img, canvasEl, container);\n    }\n  };\n\n  // Initialize button but hide until GIF is loaded\n  button.setAttribute('type', 'button');\n  button.style.display = 'none';\n\n  button.addEventListener('click', (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (state.isPlaying) {\n      setButtonPause();\n    } else {\n      setButtonPlay();\n    }\n  });\n\n  // Add canvas immediately for placeholder\n  container.appendChild(canvas);\n  container.appendChild(button);\n\n  // Initially hide the animated image (show canvas placeholder)\n  image.style.opacity = '0';\n  image.style.transition = 'opacity 0.2s ease-in-out';\n  canvas.style.opacity = '1';\n  canvas.style.transition = 'opacity 0.2s ease-in-out';\n\n  // Handle initial image load for first frame capture\n  const captureFirstFrame = () => {\n    sizeCanvas();\n    renderFirstFrame(image, canvas, container);\n  };\n\n  // If image is already loaded (from cache), capture first frame immediately\n  if (image.complete && image.naturalWidth > 0) {\n    captureFirstFrame();\n  } else {\n    image.addEventListener('load', captureFirstFrame, { once: true });\n  }\n\n  // Set up lazy loading observer\n  setupLazyLoading(container, image, canvas, button, state, () => {\n    // Once loaded, render the first frame properly. Respect the user's\n    // reduced-motion preference: start paused (first frame) rather than\n    // auto-animating, leaving the play button for manual playback.\n    sizeCanvas();\n    if (isPreferredReducedMotion()) {\n      setButtonPause();\n    } else {\n      setButtonPlay();\n    }\n  });\n\n  // Handle resize\n  window.addEventListener(\n    'resize',\n    debounce(() => {\n      sizeCanvas();\n    }, 50),\n  );\n};\n\nexport const createImageGif = ({\n  element,\n}: {\n  element: HTMLImageElement | HTMLAnchorElement;\n}) => {\n  const image = extractImageElement(element);\n\n  if (!image) {\n    throw new Error('No valid image element found');\n  }\n\n  // Store original src and create state\n  const state: GifState = {\n    isLoaded: false,\n    isPlaying: false,\n    originalSrc: image.src,\n  };\n\n  const isAnchor = element instanceof HTMLAnchorElement;\n  const container = isAnchor ? element : document.createElement('div');\n\n  const composite = new ElementBuilder(container)\n    .styled(Styles.element.asset.gif.toggle)\n    .withModifier((el) => {\n      if (!isAnchor) {\n        el.appendChild(element);\n      }\n      applyGifToggle(image, el, state);\n    })\n    .build();\n\n  return composite;\n};\n"],"names":["iconPause","iconPlay"],"mappings":"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"}

package/dist/atomic/assets/image/index.d.ts

@@ -1,4 +1,5 @@
 export { createImageBackground as background } from './background';
+export { createCaption as caption } from './caption';
 export { createImageGif as gif } from './gif';
 export { createLazyImage as lazy, type LazyImageOptions, type LazyImageResult } from './lazy';
 export { imagePlaceholder as placeholder } from './placeholder';

package/dist/atomic/assets/image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9F,OAAO,EAAE,gBAAgB,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9F,OAAO,EAAE,gBAAgB,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/atomic/assets/image/index.js

@@ -1,9 +1,11 @@
 import { createImageBackground } from "./background.js";
+import { createCaption } from "./caption.js";
 import { createImageGif } from "./gif.js";
 import { createLazyImage } from "./lazy.js";
 import { imagePlaceholder } from "./placeholder.js";
 export {
   createImageBackground as background,
+  createCaption as caption,
   createImageGif as gif,
   createLazyImage as lazy,
   imagePlaceholder as placeholder

package/dist/atomic/assets/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/atomic/assets/video/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAOA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,UAAU,kFA4E7C,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../source/atomic/assets/video/toggle.ts"],"names":[],"mappings":"AAQA,UAAU,UAAU;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,UAAU,kFAqF7C,CAAC"}