@universityofmaryland/web-elements-library 1.4.4 → 1.4.6

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

@@ -22,7 +22,7 @@ const FirstChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_FIRST_CHEVRON} {
         transform: translateX(40%);
         animation: chevron-one forwards;
@@ -56,7 +56,7 @@ const SecondChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_SECOND_CHEVRON} {
         transform: translateX(24%);
         animation: chevron-two forwards;
@@ -89,7 +89,7 @@ const ThirdChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_THIRD_CHEVRON} {
         transform: translateX(60%);
         animation: chevron-three forwards;

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 { token } from '@universityofmaryland/web-styles-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: view()) {\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: view()) {\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: view()) {\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 default () =>\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":["token"],"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,YACdA,OAAAA,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,YAMfA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACfA,OAAAA,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,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACdA,OAAAA,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,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,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 { token } from '@universityofmaryland/web-styles-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 default () =>\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":["token"],"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,YACdA,OAAAA,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,YAMfA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACfA,OAAAA,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,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACdA,OAAAA,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,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,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;;"}

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

@@ -21,7 +21,7 @@ const FirstChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_FIRST_CHEVRON} {
         transform: translateX(40%);
         animation: chevron-one forwards;
@@ -55,7 +55,7 @@ const SecondChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_SECOND_CHEVRON} {
         transform: translateX(24%);
         animation: chevron-two forwards;
@@ -88,7 +88,7 @@ const ThirdChevronStyles = `
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: view()) {
+    @supports (animation-timeline: scroll()) {
       .${ELEMENT_THIRD_CHEVRON} {
         transform: translateX(60%);
         animation: chevron-three forwards;

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

@@ -1 +1 @@
-{"version":3,"file":"chevron-scroll.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-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: view()) {\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: view()) {\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: view()) {\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 default () =>\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;AAGtB,MAAA,gBAAe,OACZ,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.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-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 default () =>\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;AAGtB,MAAA,gBAAe,OACZ,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;"}

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

@@ -8,6 +8,7 @@ const media = require("../../../utilities/theme/media.js");
 const index = require("../../../model/elements/index.js");
 require("../../animations/actions/indicator.js");
 require("../../animations/brand/chevron-scroll.js");
+require("../../animations/brand/card-stack.js");
 const background = require("../../assets/image/background.js");
 require("../block/stacked.js");
 require("../overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["Styles","image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["Styles","image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

package/dist/atomic/layout/person/columns.mjs

@@ -6,6 +6,7 @@ import { createContainerQuery } from "../../../utilities/theme/media.mjs";
 import { createDiv } from "../../../model/elements/index.mjs";
 import "../../animations/actions/indicator.mjs";
 import "../../animations/brand/chevron-scroll.mjs";
+import "../../animations/brand/card-stack.mjs";
 import imageContainer from "../../assets/image/background.mjs";
 import "../block/stacked.mjs";
 import "../overlay/modal.mjs";

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

@@ -1 +1 @@
-{"version":3,"file":"columns.mjs","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}
+{"version":3,"file":"columns.mjs","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

package/dist/composite/card/block.js

@@ -8,6 +8,7 @@ require("../../model/modifiers/index.js");
 require("../../model/elements/headline.js");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
+require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
 const stacked = require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, layout, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              marginBottom: Styles.token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["Styles","layout.block.stacked.image","assets.image.background","theme.media.createContainerQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,WAAwB;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,cAChE,cAAcH,kBAAO,MAAM,QAAQ;AAAA,cACnC,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPI,sBAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,QAAAA,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"block.js","sources":["../../../source/composite/card/block.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, layout, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { CardBlockProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default (props: CardBlockProps) => {\n  const {\n    dateSign,\n    hasBorder,\n    hasEyebrowRibbon,\n    image,\n    isAligned,\n    isThemeDark,\n    isTransparent,\n    newsId,\n  } = props;\n  const shouldImageBeFullWidth = hasEyebrowRibbon;\n  const children: UMDElement[] = [];\n  const sizingProps = {\n    isThemeDark,\n    isTransparent,\n    hasBorder,\n  };\n\n  if (image) {\n    children.push(\n      layout.block.stacked.image({\n        children: [\n          assets.image.background({\n            element: image,\n            isScaled: true,\n            isAspectStandard: isAligned,\n            dateSign,\n          }),\n        ],\n        customStyles: {\n          ...(shouldImageBeFullWidth && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              marginBottom: Styles.token.spacing.md,\n              width: '100%',\n            }),\n          }),\n        },\n        ...sizingProps,\n      }),\n    );\n  }\n\n  children.push(\n    layout.block.stacked.textContainer({\n      children: [textLockup.smallScaling(props)],\n      ...sizingProps,\n    }),\n  );\n\n  const composite = layout.block.stacked.container({\n    children,\n    ...sizingProps,\n  });\n\n  if (newsId) {\n    composite?.element.setAttribute('news-id', newsId);\n  }\n\n  return composite;\n};\n"],"names":["Styles","layout.block.stacked.image","assets.image.background","theme.media.createContainerQuery","layout.block.stacked.textContainer","textLockup.smallScaling","layout.block.stacked.container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,QAAe,CAAC,UAA0B;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,yBAAyB;AAC/B,QAAM,WAAyB,CAAA;AAC/B,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA2B;AAAA,QACzB,UAAU;AAAA,UACRC,WAAwB;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,kBAAkB;AAAA,YAClB;AAAA,UAAA,CACD;AAAA,QAAA;AAAA,QAEH,cAAc;AAAA,UACZ,GAAI,0BAA0B;AAAA,YAC5B,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,cAChE,cAAcH,kBAAO,MAAM,QAAQ;AAAA,cACnC,OAAO;AAAA,YAAA,CACR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPI,sBAAmC;AAAA,MACjC,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,MACzC,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA;AAGH,QAAM,YAAYC,QAAAA,UAA+B;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,MAAI,QAAQ;AACV,eAAW,QAAQ,aAAa,WAAW,MAAM;AAAA,EACnD;AAEA,SAAO;AACT;;"}

package/dist/composite/card/block.mjs

@@ -7,6 +7,7 @@ import "../../model/modifiers/index.mjs";
 import "../../model/elements/headline.mjs";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
 import { image, textContainer, container } from "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";

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

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

package/dist/composite/card/list.js

@@ -7,6 +7,7 @@ const media = require("../../utilities/theme/media.js");
 const index = require("../../model/elements/index.js");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
+require("../../atomic/animations/brand/card-stack.js");
 const background = require("../../atomic/assets/image/background.js");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"list.js","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/list.mjs

@@ -6,6 +6,7 @@ import { createContainerQuery } from "../../utilities/theme/media.mjs";
 import { createDiv } from "../../model/elements/index.mjs";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../atomic/assets/image/background.mjs";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";

package/dist/composite/card/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n          position: 'relative',\n          zIndex: 99,\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/overlay/color.js

@@ -7,6 +7,7 @@ const index = require("../../../model/elements/index.js");
 const icon = require("../../../atomic/actions/icon.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");

package/dist/composite/card/overlay/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAUC,kBAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAGA,kBAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE,IAAIA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAMA,kBAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"color.js","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAUC,kBAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAGA,kBAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE,IAAIA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAMA,kBAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/card/overlay/color.mjs

@@ -6,6 +6,7 @@ import { createDiv } from "../../../model/elements/index.mjs";
 import icon from "../../../atomic/actions/icon.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";

package/dist/composite/card/overlay/color.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color.mjs","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAU,OAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAG,OAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAM,OAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"color.mjs","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAU,OAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAG,OAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAM,OAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/card/overlay/icon.js

@@ -6,6 +6,7 @@ require("../../../node_modules/postcss-nesting/dist/index.js");
 require("../../../node_modules/postcss-js/index.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");
 require("../../../atomic/layout/person/columns.js");

package/dist/composite/card/overlay/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,MAAAA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"icon.js","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,MAAAA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/card/overlay/icon.mjs

@@ -5,6 +5,7 @@ import "../../../node_modules/postcss-nesting/dist/index.mjs";
 import "../../../node_modules/postcss-js/index.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";

package/dist/composite/card/overlay/icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/card/overlay/image.js

@@ -11,6 +11,7 @@ const media = require("../../../utilities/theme/media.js");
 const icon = require("../../../atomic/actions/icon.js");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/animations/brand/card-stack.js");
 const background = require("../../../atomic/assets/image/background.js");
 require("../../../atomic/layout/block/stacked.js");
 require("../../../atomic/layout/overlay/modal.js");

package/dist/composite/card/overlay/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","assets.image.background","ElementModel.layout.backgroundBoxWhite","Styles","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/card/overlay/image.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { actions, assets, textLockup } from 'atomic';\nimport { asset, markup, theme } from 'utilities';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport const classRef = 'card-overlay-image';\n\nexport const createCardOverlayImage = (props: CardOverlayProps) => {\n  const { isQuote, ctaIcon, dateSign, backgroundImage, text } = props;\n  const children: ElementVisual[] = [];\n  const wrapperChildren: ElementVisual[] = [];\n  const load = () => {\n    const sizeElements = () => {\n      const textCopy = text?.innerHTML;\n      if (text && textCopy) {\n        const modifiedText = markup.modify.truncateTextBasedOnSize({\n          text: textCopy,\n          size: composite.element.offsetWidth,\n        });\n\n        text.innerHTML = modifiedText;\n\n        if (modifiedText.length >= 220) {\n          const assetContainer = composite.element.querySelector(\n            `.${imageContainerClass}`,\n          );\n          if (assetContainer) {\n            assetContainer.setAttribute('data-size', 'large');\n          }\n        }\n      }\n    };\n\n    sizeElements();\n  };\n  let imageContainerClass: string | null = null;\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(actions.icon({ ...props, ctaIcon, isThemeLight: false }));\n  }\n\n  if (backgroundImage) {\n    const imageContainer = assets.image.background({\n      element: backgroundImage,\n      isScaled: true,\n      isGifAllowed: true,\n      customStyles: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n\n        [`&:before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 1,\n          opacity: 1,\n          transition: `opacity 0.5s ease-in-out`,\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`&[data-size=\"large\"]:before`]: {\n          background:\n            'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, 0.9) 100%)',\n        },\n\n        [`img`]: {\n          transform: 'scale(1.025)',\n        },\n      },\n    });\n    children.push(imageContainer);\n    imageContainerClass = imageContainer.element.className;\n  }\n\n  if (dateSign) {\n    wrapperChildren.push(\n      ElementModel.layout.backgroundBoxWhite({\n        element: document.createElement('div'),\n        elementStyles: {\n          element: {\n            alignSelf: `flex-start`,\n          },\n          siblingAfter: {\n            marginTop: `${Styles.token.spacing.min}`,\n          },\n        },\n        children: [dateSign],\n      }),\n    );\n  }\n\n  if (isQuote) {\n    const quoteWrapper = ElementModel.createDiv({\n      className: 'card-overlay-image-quote-wrapper',\n      elementStyles: {\n        element: {\n          width: '41px',\n          height: '30px',\n          marginBottom: `${Styles.token.spacing.xs}`,\n\n          '& svg': {\n            fill: `${Styles.token.color.red}`,\n          },\n        },\n      },\n    });\n\n    quoteWrapper.element.innerHTML = asset.icon.QUOTE;\n    wrapperChildren.push(quoteWrapper);\n  }\n\n  wrapperChildren.push(\n    textLockup.smallScaling({\n      ...props,\n      isThemeDark: true,\n    }),\n  );\n\n  const textWrapper = ElementModel.createDiv({\n    className: 'card-overlay-image-text-wrapper',\n    elementStyles: {\n      element: {\n        height: 'auto',\n        paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n      },\n    },\n    children: [\n      ElementModel.createDiv({\n        children: wrapperChildren,\n        className: 'card-overlay-image-text-content',\n        elementStyles: {\n          element: {\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n          },\n        },\n      }),\n    ],\n  });\n\n  const composite = ElementModel.createDiv({\n    className: classRef,\n    children: [\n      ElementModel.createDiv({\n        className: 'card-overlay-image-container',\n        children: [...children, textWrapper],\n        elementStyles: {\n          element: {\n            position: 'relative',\n            padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n            paddingTop: `${Styles.token.spacing['4xl']}`,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'flex-end',\n            minHeight: '360px',\n            height: '100%',\n            overflow: 'hidden',\n\n            ...theme.media.createContainerQuery(\n              'min-width',\n              Styles.token.media.breakpointValues.medium.min,\n              {\n                paddingTop: `${Styles.token.spacing['8xl']}`,\n                minHeight: `424px`,\n              },\n            ),\n          },\n        },\n      }),\n    ],\n    elementStyles: {\n      element: {\n        height: '100%',\n        containerType: 'inline-size',\n\n        [`&:hover .${imageContainerClass}:before, &:focus .${imageContainerClass}:before`]:\n          {\n            opacity: 0.7,\n          },\n\n        ['&:hover img, &:focus img']: {\n          transform: 'scale(1)',\n          transition: 'transform 0.5s ease-in-out',\n        },\n      },\n    },\n  });\n\n  return {\n    ...composite,\n    events: {\n      load,\n    },\n  };\n};\n"],"names":["markup.modify.truncateTextBasedOnSize","actions.icon","assets.image.background","ElementModel.layout.backgroundBoxWhite","Styles","ElementModel.createDiv","asset.icon.QUOTE","textLockup.smallScaling","theme.media.createContainerQuery"],"mappings":"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"}

package/dist/composite/card/overlay/image.mjs

@@ -9,6 +9,7 @@ import { createContainerQuery } from "../../../utilities/theme/media.mjs";
 import icon from "../../../atomic/actions/icon.mjs";
 import "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/animations/brand/card-stack.mjs";
 import imageContainer from "../../../atomic/assets/image/background.mjs";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";