@universityofmaryland/web-elements-library 1.5.8 → 1.6.0-beta.0

package/dist/composite/person/tabular.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","typography","theme","animationStyles","wrapTextNodeInSpan","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAGC,sBAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGC,qBAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAIJ,iCAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAGD,iBAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAWA,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAOO,IAAAA,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}
+{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkedin || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkedin,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["token","ElementBuilder","createMediaQuery","layout.person.columns.image","typography","theme","animationStyles","wrapTextNodeInSpan","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAIC,kBAAAA,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAI,OAAO;AACT,YAAQ;AAAA,MACNC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAGC,sBAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGC,qBAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAIJ,iCAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAGD,iBAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAWA,iBAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAOO,IAAAA,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,YAAY,OAAO;AAC9D,YAAQ;AAAA,MACNC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}

package/dist/composite/person/tabular.mjs

@@ -37,7 +37,7 @@ const tabular = ({
   image: image$1,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
@@ -93,7 +93,7 @@ const tabular = ({
       })
     );
   }
-  if (additionalContact || address || email || linkendIn || phone) {
+  if (additionalContact || address || email || linkedin || phone) {
     builder.withChild(
       contact({
         additionalContact,
@@ -101,7 +101,7 @@ const tabular = ({
         customStyles: {},
         email,
         isThemeDark,
-        linkendIn,
+        linkedin,
         phone
       })
     );

package/dist/composite/person/tabular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}
+{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { type UMDElement } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkedin,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard): UMDElement => {\n  const builder = new ElementBuilder()\n    .withClassName('person-tabular-container')\n    .withStyles({\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    });\n\n  if (image) {\n    builder.withChild(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameStyles = {\n      ...typography.sans.compose('large', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const nameComposite = new ElementBuilder(name)\n      .withClassName('person-tabular-name')\n      .styled(nameStyles)\n      .withStyles({\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      })\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    builder.withChild(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkedin || phone) {\n    builder.withChild(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkedin,\n        phone,\n      }),\n    );\n  }\n\n  return builder.build();\n};\n"],"names":["image","layout.person.columns.image","animationStyles","layout.person.columns.details","layout.person.columns.contact"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,UAAU,IAAI,eAAA,EACjB,cAAc,0BAA0B,EACxC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,MAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,QAChD,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EACH,CACD;AAEH,MAAIA,SAAO;AACT,YAAQ;AAAA,MACNC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,aAAa;AAAA,MACjB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,QAClC,OAAO,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGE,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,gBAAgB,IAAI,eAAe,IAAI,EAC1C,cAAc,qBAAqB,EACnC,OAAO,UAAU,EACjB,WAAW;AAAA,MACV,SAAS;AAAA,QACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,QAErC,CAAC,OAAO,GAAG;AAAA,UACT,WAAW,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC3B;AAAA,MAEF,YAAY;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IACT,CACD,EACA,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,YAAY,OAAO;AAC9D,YAAQ;AAAA,MACNC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAO,QAAQ,MAAA;AACjB;"}

package/dist/composite/quote/elements/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;yBAEe,uDAKb,gBAAgB;AALnB,wBAwBa"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;yBAEe,uDAKb,gBAAgB;AALnB,wBAyBa"}

package/dist/composite/quote/elements/action.js

@@ -28,6 +28,7 @@ const elementAction = ({
 }) => new webBuilderLibrary.ElementBuilder(action).withClassName("quote-container-actions").withStyles({
   element: {
     marginTop: token__namespace.spacing.sm,
+    display: "block",
     ...!isTypeFeatured && {
       ...layout__namespace.grid.inline.tabletRows
     },

package/dist/composite/quote/elements/action.js.map

@@ -1 +1 @@
-{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":["ElementBuilder","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAIA,kBAAAA,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAWC,iBAAM,QAAQ;AAAA,IAEzB,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAGC,kBAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;;"}
+{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n        display: 'block',\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":["ElementBuilder","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAIA,kBAAAA,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAWC,iBAAM,QAAQ;AAAA,IACzB,SAAS;AAAA,IAET,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAGC,kBAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;;"}

package/dist/composite/quote/elements/action.mjs

@@ -9,6 +9,7 @@ const elementAction = ({
 }) => new ElementBuilder(action).withClassName("quote-container-actions").withStyles({
   element: {
     marginTop: token.spacing.sm,
+    display: "block",
     ...!isTypeFeatured && {
       ...layout.grid.inline.tabletRows
     },

package/dist/composite/quote/elements/action.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"action.mjs","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":[],"mappings":";;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAI,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,IAEzB,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAG,OAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;"}
+{"version":3,"file":"action.mjs","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  new ElementBuilder(action)\n    .withClassName('quote-container-actions')\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n        display: 'block',\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    })\n    .build();\n"],"names":[],"mappings":";;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACE,IAAI,eAAe,MAAM,EACtB,cAAc,yBAAyB,EACvC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS;AAAA,IAET,GAAI,CAAC,kBAAkB;AAAA,MACrB,GAAG,OAAO,KAAK,OAAO;AAAA,IAAA;AAAA,IAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,MACjD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEN,CAAC,EACA,MAAA;"}

package/dist/layout/grid-border.d.ts

@@ -0,0 +1,9 @@
+import { ElementModel } from '../_types';
+export interface GridBorderLayoutProps {
+    columns?: 2 | 3 | 4;
+    isThemeDark?: boolean;
+    enableContainerQueries?: boolean;
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+}
+export default function gridBorder({ columns, isThemeDark, enableContainerQueries, alignItems, }?: GridBorderLayoutProps): ElementModel;
+//# sourceMappingURL=grid-border.d.ts.map

package/dist/layout/grid-border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-border.d.ts","sourceRoot":"","sources":["../../source/layout/grid-border.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CACrD;AAoCD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,OAAW,EACX,WAAmB,EACnB,sBAA8B,EAC9B,UAAU,GACX,GAAE,qBAA0B,GAAG,YAAY,CA6C3C"}

package/dist/layout/grid-border.js

@@ -0,0 +1,55 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-token-library");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+function gridBorder({
+  columns = 2,
+  isThemeDark = false,
+  enableContainerQueries = false,
+  alignItems
+} = {}) {
+  let gridStyle = isThemeDark ? Styles.layout.grid.border.columnsTwoDark : Styles.layout.grid.border.columnsTwo;
+  if (columns === 3) {
+    gridStyle = isThemeDark ? Styles.layout.grid.border.columnsThreeDark : Styles.layout.grid.border.columnsThree;
+  } else if (columns === 4) {
+    gridStyle = isThemeDark ? Styles.layout.grid.border.columnsFourDark : Styles.layout.grid.border.columnsFour;
+  }
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  const alignmentStyles = alignItems ? { alignSelf: alignmentMap[alignItems] } : {};
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        ...alignmentStyles,
+        padding: token__namespace.spacing.xl,
+        ...containerQueryStyles
+      }
+    }
+  }).build();
+}
+module.exports = gridBorder;
+//# sourceMappingURL=grid-border.js.map

package/dist/layout/grid-border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-border.js","sources":["../../source/layout/grid-border.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { layout } from '@universityofmaryland/web-styles-library';\nimport * as token from '@universityofmaryland/web-token-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridBorderLayoutProps {\n  columns?: 2 | 3 | 4;\n  isThemeDark?: boolean;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Creates a grid layout with borders between items\n *\n * Grid layout with visual borders separating grid items.\n * Supports light and dark theme variants with responsive behavior.\n *\n * @param props - Configuration for grid border layout\n * @returns ElementModel with grid border layout container and styles\n *\n * @example\n * ```typescript\n * // Three-column light border grid\n * const borderGridLayout = gridBorder({\n *   columns: 3,\n *   isThemeDark: false\n * });\n *\n * // Four-column dark border grid\n * const darkBorderGrid = gridBorder({\n *   columns: 4,\n *   isThemeDark: true,\n *   alignItems: 'start'\n * });\n *\n * // Add items to the grid\n * borderGridLayout.element.appendChild(item1);\n * borderGridLayout.element.appendChild(item2);\n * borderGridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(borderGridLayout.element);\n * document.head.appendChild(createStyleElement(borderGridLayout.styles));\n * ```\n */\nexport default function gridBorder({\n  columns = 2,\n  isThemeDark = false,\n  enableContainerQueries = false,\n  alignItems,\n}: GridBorderLayoutProps = {}): ElementModel {\n  // Select grid style based on columns and theme\n  let gridStyle = isThemeDark\n    ? layout.grid.border.columnsTwoDark\n    : layout.grid.border.columnsTwo;\n\n  if (columns === 3) {\n    gridStyle = isThemeDark\n      ? layout.grid.border.columnsThreeDark\n      : layout.grid.border.columnsThree;\n  } else if (columns === 4) {\n    gridStyle = isThemeDark\n      ? layout.grid.border.columnsFourDark\n      : layout.grid.border.columnsFour;\n  }\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  const alignmentStyles = alignItems\n    ? { alignSelf: alignmentMap[alignItems] }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          ...alignmentStyles,\n          padding: token.spacing.xl,\n          ...containerQueryStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":["layout","ElementBuilder","token"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+CA,SAAwB,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,cAAc;AAAA,EACd,yBAAyB;AAAA,EACzB;AACF,IAA2B,IAAkB;AAE3C,MAAI,YAAY,cACZA,OAAAA,OAAO,KAAK,OAAO,iBACnBA,OAAAA,OAAO,KAAK,OAAO;AAEvB,MAAI,YAAY,GAAG;AACjB,gBAAY,cACRA,OAAAA,OAAO,KAAK,OAAO,mBACnBA,OAAAA,OAAO,KAAK,OAAO;AAAA,EACzB,WAAW,YAAY,GAAG;AACxB,gBAAY,cACRA,OAAAA,OAAO,KAAK,OAAO,kBACnBA,OAAAA,OAAO,KAAK,OAAO;AAAA,EACzB;AAEA,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,QAAM,kBAAkB,aACpB,EAAE,WAAW,aAAa,UAAU,EAAA,IACpC,CAAA;AAEJ,SAAO,IAAIC,kBAAAA,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,GAAG;AAAA,QACH,SAASC,iBAAM,QAAQ;AAAA,QACvB,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;;"}

package/dist/layout/grid-border.mjs

@@ -0,0 +1,39 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout } from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-token-library";
+function gridBorder({
+  columns = 2,
+  isThemeDark = false,
+  enableContainerQueries = false,
+  alignItems
+} = {}) {
+  let gridStyle = isThemeDark ? layout.grid.border.columnsTwoDark : layout.grid.border.columnsTwo;
+  if (columns === 3) {
+    gridStyle = isThemeDark ? layout.grid.border.columnsThreeDark : layout.grid.border.columnsThree;
+  } else if (columns === 4) {
+    gridStyle = isThemeDark ? layout.grid.border.columnsFourDark : layout.grid.border.columnsFour;
+  }
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  const alignmentStyles = alignItems ? { alignSelf: alignmentMap[alignItems] } : {};
+  return new ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        ...alignmentStyles,
+        padding: token.spacing.xl,
+        ...containerQueryStyles
+      }
+    }
+  }).build();
+}
+export {
+  gridBorder as default
+};
+//# sourceMappingURL=grid-border.mjs.map

package/dist/layout/grid-border.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-border.mjs","sources":["../../source/layout/grid-border.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { layout } from '@universityofmaryland/web-styles-library';\nimport * as token from '@universityofmaryland/web-token-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridBorderLayoutProps {\n  columns?: 2 | 3 | 4;\n  isThemeDark?: boolean;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Creates a grid layout with borders between items\n *\n * Grid layout with visual borders separating grid items.\n * Supports light and dark theme variants with responsive behavior.\n *\n * @param props - Configuration for grid border layout\n * @returns ElementModel with grid border layout container and styles\n *\n * @example\n * ```typescript\n * // Three-column light border grid\n * const borderGridLayout = gridBorder({\n *   columns: 3,\n *   isThemeDark: false\n * });\n *\n * // Four-column dark border grid\n * const darkBorderGrid = gridBorder({\n *   columns: 4,\n *   isThemeDark: true,\n *   alignItems: 'start'\n * });\n *\n * // Add items to the grid\n * borderGridLayout.element.appendChild(item1);\n * borderGridLayout.element.appendChild(item2);\n * borderGridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(borderGridLayout.element);\n * document.head.appendChild(createStyleElement(borderGridLayout.styles));\n * ```\n */\nexport default function gridBorder({\n  columns = 2,\n  isThemeDark = false,\n  enableContainerQueries = false,\n  alignItems,\n}: GridBorderLayoutProps = {}): ElementModel {\n  // Select grid style based on columns and theme\n  let gridStyle = isThemeDark\n    ? layout.grid.border.columnsTwoDark\n    : layout.grid.border.columnsTwo;\n\n  if (columns === 3) {\n    gridStyle = isThemeDark\n      ? layout.grid.border.columnsThreeDark\n      : layout.grid.border.columnsThree;\n  } else if (columns === 4) {\n    gridStyle = isThemeDark\n      ? layout.grid.border.columnsFourDark\n      : layout.grid.border.columnsFour;\n  }\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  const alignmentStyles = alignItems\n    ? { alignSelf: alignmentMap[alignItems] }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          ...alignmentStyles,\n          padding: token.spacing.xl,\n          ...containerQueryStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;;AA+CA,SAAwB,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,cAAc;AAAA,EACd,yBAAyB;AAAA,EACzB;AACF,IAA2B,IAAkB;AAE3C,MAAI,YAAY,cACZ,OAAO,KAAK,OAAO,iBACnB,OAAO,KAAK,OAAO;AAEvB,MAAI,YAAY,GAAG;AACjB,gBAAY,cACR,OAAO,KAAK,OAAO,mBACnB,OAAO,KAAK,OAAO;AAAA,EACzB,WAAW,YAAY,GAAG;AACxB,gBAAY,cACR,OAAO,KAAK,OAAO,kBACnB,OAAO,KAAK,OAAO;AAAA,EACzB;AAEA,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,QAAM,kBAAkB,aACpB,EAAE,WAAW,aAAa,UAAU,EAAA,IACpC,CAAA;AAEJ,SAAO,IAAI,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,GAAG;AAAA,QACH,SAAS,MAAM,QAAQ;AAAA,QACvB,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;"}

package/dist/layout/grid-gap.d.ts

@@ -0,0 +1,8 @@
+import { ElementModel } from '../_types';
+export interface GridGapLayoutProps {
+    columns?: 2 | 3 | 4;
+    enableContainerQueries?: boolean;
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+}
+export default function gridGap({ columns, enableContainerQueries, alignItems, }?: GridGapLayoutProps): ElementModel;
+//# sourceMappingURL=grid-gap.d.ts.map

package/dist/layout/grid-gap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-gap.d.ts","sourceRoot":"","sources":["../../source/layout/grid-gap.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CACrD;AA4BD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,OAAW,EACX,sBAA6B,EAC7B,UAAoB,GACrB,GAAE,kBAAuB,GAAG,YAAY,CA6BxC"}

package/dist/layout/grid-gap.js

@@ -0,0 +1,31 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+function gridGap({
+  columns = 2,
+  enableContainerQueries = true,
+  alignItems = "start"
+} = {}) {
+  let gridStyle = Styles.layout.grid.gap.two;
+  if (columns === 3) gridStyle = Styles.layout.grid.gap.three;
+  if (columns === 4) gridStyle = Styles.layout.grid.gap.four;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        alignSelf: alignmentMap[alignItems],
+        ...containerQueryStyles
+      }
+    }
+  }).build();
+}
+module.exports = gridGap;
+//# sourceMappingURL=grid-gap.js.map

package/dist/layout/grid-gap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-gap.js","sources":["../../source/layout/grid-gap.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridGapLayoutProps {\n  columns?: 2 | 3 | 4;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Creates a grid layout with visual gaps between items\n *\n * Similar to the standard grid but with more pronounced spacing\n * between grid items. Items align to flex-start by default.\n *\n * @param props - Configuration for grid gap layout\n * @returns ElementModel with grid gap layout container and styles\n *\n * @example\n * ```typescript\n * const gapGridLayout = gridGap({\n *   columns: 3,\n *   alignItems: 'start'\n * });\n *\n * // Add items to the grid\n * gapGridLayout.element.appendChild(item1);\n * gapGridLayout.element.appendChild(item2);\n * gapGridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(gapGridLayout.element);\n * document.head.appendChild(createStyleElement(gapGridLayout.styles));\n * ```\n */\nexport default function gridGap({\n  columns = 2,\n  enableContainerQueries = true,\n  alignItems = 'start',\n}: GridGapLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.gap.two;\n  if (columns === 3) gridStyle = layout.grid.gap.three;\n  if (columns === 4) gridStyle = layout.grid.gap.four;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: alignmentMap[alignItems],\n          ...containerQueryStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":["layout","ElementBuilder"],"mappings":";;;AAqCA,SAAwB,QAAQ;AAAA,EAC9B,UAAU;AAAA,EACV,yBAAyB;AAAA,EACzB,aAAa;AACf,IAAwB,IAAkB;AACxC,MAAI,YAAYA,OAAAA,OAAO,KAAK,IAAI;AAChC,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK,IAAI;AAC/C,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK,IAAI;AAE/C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,SAAO,IAAIC,kBAAAA,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,WAAW,aAAa,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;;"}

package/dist/layout/grid-gap.mjs

@@ -0,0 +1,32 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout } from "@universityofmaryland/web-styles-library";
+function gridGap({
+  columns = 2,
+  enableContainerQueries = true,
+  alignItems = "start"
+} = {}) {
+  let gridStyle = layout.grid.gap.two;
+  if (columns === 3) gridStyle = layout.grid.gap.three;
+  if (columns === 4) gridStyle = layout.grid.gap.four;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  return new ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        alignSelf: alignmentMap[alignItems],
+        ...containerQueryStyles
+      }
+    }
+  }).build();
+}
+export {
+  gridGap as default
+};
+//# sourceMappingURL=grid-gap.mjs.map

package/dist/layout/grid-gap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-gap.mjs","sources":["../../source/layout/grid-gap.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridGapLayoutProps {\n  columns?: 2 | 3 | 4;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Creates a grid layout with visual gaps between items\n *\n * Similar to the standard grid but with more pronounced spacing\n * between grid items. Items align to flex-start by default.\n *\n * @param props - Configuration for grid gap layout\n * @returns ElementModel with grid gap layout container and styles\n *\n * @example\n * ```typescript\n * const gapGridLayout = gridGap({\n *   columns: 3,\n *   alignItems: 'start'\n * });\n *\n * // Add items to the grid\n * gapGridLayout.element.appendChild(item1);\n * gapGridLayout.element.appendChild(item2);\n * gapGridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(gapGridLayout.element);\n * document.head.appendChild(createStyleElement(gapGridLayout.styles));\n * ```\n */\nexport default function gridGap({\n  columns = 2,\n  enableContainerQueries = true,\n  alignItems = 'start',\n}: GridGapLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.gap.two;\n  if (columns === 3) gridStyle = layout.grid.gap.three;\n  if (columns === 4) gridStyle = layout.grid.gap.four;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: alignmentMap[alignItems],\n          ...containerQueryStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;AAqCA,SAAwB,QAAQ;AAAA,EAC9B,UAAU;AAAA,EACV,yBAAyB;AAAA,EACzB,aAAa;AACf,IAAwB,IAAkB;AACxC,MAAI,YAAY,OAAO,KAAK,IAAI;AAChC,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK,IAAI;AAC/C,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK,IAAI;AAE/C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,SAAO,IAAI,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,WAAW,aAAa,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;"}

package/dist/layout/grid-offset.d.ts

@@ -0,0 +1,13 @@
+import { ElementModel } from '../_types';
+export interface GridOffsetLayoutProps {
+    columns?: 2 | 3 | 4;
+    isLayoutReversed?: boolean;
+    stickyTopPosition?: number;
+    stickyMinHeight?: string;
+    enableContainerQueries?: boolean;
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    overlayCardClass?: string;
+    overlayTextColor?: string;
+}
+export default function gridOffset({ columns, isLayoutReversed, stickyTopPosition, stickyMinHeight, enableContainerQueries, alignItems, overlayCardClass, overlayTextColor, }?: GridOffsetLayoutProps): ElementModel;
+//# sourceMappingURL=grid-offset.d.ts.map

package/dist/layout/grid-offset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-offset.d.ts","sourceRoot":"","sources":["../../source/layout/grid-offset.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAoCD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,OAAW,EACX,gBAAwB,EACxB,iBAAqB,EACrB,eAAyB,EACzB,sBAA8B,EAC9B,UAAoB,EACpB,gBAAgB,EAChB,gBAAoC,GACrC,GAAE,qBAA0B,GAAG,YAAY,CA4E3C"}

package/dist/layout/grid-offset.js

@@ -0,0 +1,71 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+function gridOffset({
+  columns = 2,
+  isLayoutReversed = false,
+  stickyTopPosition = 0,
+  stickyMinHeight = "560px",
+  enableContainerQueries = false,
+  alignItems = "start",
+  overlayCardClass,
+  overlayTextColor = Styles.token.color.white
+} = {}) {
+  let gridStyle = Styles.layout.grid.gap.two;
+  if (columns === 3) gridStyle = Styles.layout.grid.gap.three;
+  if (columns === 4) gridStyle = Styles.layout.grid.gap.four;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  const stickyMediaQuery = {
+    [`@media (${Styles.token.media.queries.large.min})`]: {
+      position: "sticky",
+      top: `${stickyTopPosition}px`,
+      minHeight: stickyMinHeight
+    }
+  };
+  const childStyles = isLayoutReversed ? {
+    [`&.umd-layout-grid-offset > *:first-child`]: {
+      order: 2
+    },
+    [`&.umd-layout-grid-offset > *:nth-child(2)`]: stickyMediaQuery
+  } : {
+    [`&.umd-layout-grid-offset > *:first-child`]: {
+      order: -1,
+      ...stickyMediaQuery
+    }
+  };
+  const overlayCardStyles = overlayCardClass ? {
+    [`& .${overlayCardClass}`]: {
+      [`@media (${Styles.token.media.queries.large.min})`]: {
+        height: "inherit"
+      },
+      [`*`]: {
+        color: overlayTextColor
+      },
+      [`& > div`]: {
+        [`@media (${Styles.token.media.queries.large.min})`]: {
+          minHeight: `${stickyMinHeight} !important`
+        }
+      }
+    }
+  } : {};
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withClassName("umd-layout-grid-offset").withStyles({
+    element: {
+      [` > *`]: {
+        alignSelf: alignmentMap[alignItems],
+        ...containerQueryStyles
+      },
+      ...childStyles,
+      ...overlayCardStyles
+    }
+  }).build();
+}
+module.exports = gridOffset;
+//# sourceMappingURL=grid-offset.js.map

package/dist/layout/grid-offset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-offset.js","sources":["../../source/layout/grid-offset.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridOffsetLayoutProps {\n  columns?: 2 | 3 | 4;\n  isLayoutReversed?: boolean;\n  stickyTopPosition?: number;\n  stickyMinHeight?: string;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n  overlayCardClass?: string;\n  overlayTextColor?: string;\n}\n\n/**\n * Creates a grid layout with offset sticky positioning\n *\n * Creates a grid where the first visual column is sticky-positioned.\n * The sticky column changes based on layout direction:\n * - isLayoutReversed: false → first child (left column) is sticky\n * - isLayoutReversed: true → second child (right column DOM, left column visually) is sticky\n *\n * Useful for featured layouts with a prominent item that stays visible while scrolling.\n *\n * @param props - Configuration for grid offset layout\n * @returns ElementModel with grid offset layout container and styles\n *\n * @example\n * ```typescript\n * // Standard layout: first child sticky on left\n * const offsetGridLayout = gridOffset({\n *   columns: 2,\n *   isLayoutReversed: false,\n *   stickyTopPosition: 100,\n * });\n * offsetGridLayout.element.appendChild(featuredItem); // Sticky, left column\n * offsetGridLayout.element.appendChild(gridOfItems);  // Right column\n *\n * // Reversed layout: second child sticky on left (visually)\n * const reversedLayout = gridOffset({\n *   columns: 2,\n *   isLayoutReversed: true,\n *   stickyTopPosition: 100,\n * });\n * reversedLayout.element.appendChild(featuredItem);  // Right column\n * reversedLayout.element.appendChild(gridOfItems);   // Sticky, left column\n * ```\n */\nexport default function gridOffset({\n  columns = 2,\n  isLayoutReversed = false,\n  stickyTopPosition = 0,\n  stickyMinHeight = '560px',\n  enableContainerQueries = false,\n  alignItems = 'start',\n  overlayCardClass,\n  overlayTextColor = token.color.white,\n}: GridOffsetLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.gap.two;\n  if (columns === 3) gridStyle = layout.grid.gap.three;\n  if (columns === 4) gridStyle = layout.grid.gap.four;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  // Build child-specific styles based on layout direction\n  // Scoped to .umd-layout-grid-offset to prevent affecting nested grids\n  // When not reversed: first child gets order -1 AND sticky positioning\n  // When reversed: first child gets order 2, second child gets sticky positioning\n  const stickyMediaQuery = {\n    [`@media (${token.media.queries.large.min})`]: {\n      position: 'sticky',\n      top: `${stickyTopPosition}px`,\n      minHeight: stickyMinHeight,\n    },\n  };\n\n  const childStyles = isLayoutReversed\n    ? {\n        [`&.umd-layout-grid-offset > *:first-child`]: {\n          order: 2,\n        },\n        [`&.umd-layout-grid-offset > *:nth-child(2)`]: stickyMediaQuery,\n      }\n    : {\n        [`&.umd-layout-grid-offset > *:first-child`]: {\n          order: -1,\n          ...stickyMediaQuery,\n        },\n      };\n\n  const overlayCardStyles = overlayCardClass\n    ? {\n        [`& .${overlayCardClass}`]: {\n          [`@media (${token.media.queries.large.min})`]: {\n            height: 'inherit',\n          },\n          [`*`]: {\n            color: overlayTextColor,\n          },\n          [`& > div`]: {\n            [`@media (${token.media.queries.large.min})`]: {\n              minHeight: `${stickyMinHeight} !important`,\n            },\n          },\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withClassName('umd-layout-grid-offset')\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: alignmentMap[alignItems],\n          ...containerQueryStyles,\n        },\n        ...childStyles,\n        ...overlayCardStyles,\n      },\n    })\n    .build();\n}\n"],"names":["token","layout","ElementBuilder"],"mappings":";;;AAkDA,SAAwB,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb;AAAA,EACA,mBAAmBA,OAAAA,MAAM,MAAM;AACjC,IAA2B,IAAkB;AAC3C,MAAI,YAAYC,OAAAA,OAAO,KAAK,IAAI;AAChC,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK,IAAI;AAC/C,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK,IAAI;AAE/C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAOX,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAWD,OAAAA,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,MAC7C,UAAU;AAAA,MACV,KAAK,GAAG,iBAAiB;AAAA,MACzB,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,cAAc,mBAChB;AAAA,IACE,CAAC,0CAA0C,GAAG;AAAA,MAC5C,OAAO;AAAA,IAAA;AAAA,IAET,CAAC,2CAA2C,GAAG;AAAA,EAAA,IAEjD;AAAA,IACE,CAAC,0CAA0C,GAAG;AAAA,MAC5C,OAAO;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EACL;AAGN,QAAM,oBAAoB,mBACtB;AAAA,IACE,CAAC,MAAM,gBAAgB,EAAE,GAAG;AAAA,MAC1B,CAAC,WAAWA,OAAAA,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QAC7C,QAAQ;AAAA,MAAA;AAAA,MAEV,CAAC,GAAG,GAAG;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,CAAC,SAAS,GAAG;AAAA,QACX,CAAC,WAAWA,OAAAA,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,WAAW,GAAG,eAAe;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,IAEF,CAAA;AAEJ,SAAO,IAAIE,kBAAAA,iBACR,OAAO,SAAS,EAChB,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,WAAW,aAAa,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,MAEL,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL,CACD,EACA,MAAA;AACL;;"}

package/dist/layout/grid-offset.mjs

@@ -0,0 +1,72 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout, token } from "@universityofmaryland/web-styles-library";
+function gridOffset({
+  columns = 2,
+  isLayoutReversed = false,
+  stickyTopPosition = 0,
+  stickyMinHeight = "560px",
+  enableContainerQueries = false,
+  alignItems = "start",
+  overlayCardClass,
+  overlayTextColor = token.color.white
+} = {}) {
+  let gridStyle = layout.grid.gap.two;
+  if (columns === 3) gridStyle = layout.grid.gap.three;
+  if (columns === 4) gridStyle = layout.grid.gap.four;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const alignmentMap = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch"
+  };
+  const stickyMediaQuery = {
+    [`@media (${token.media.queries.large.min})`]: {
+      position: "sticky",
+      top: `${stickyTopPosition}px`,
+      minHeight: stickyMinHeight
+    }
+  };
+  const childStyles = isLayoutReversed ? {
+    [`&.umd-layout-grid-offset > *:first-child`]: {
+      order: 2
+    },
+    [`&.umd-layout-grid-offset > *:nth-child(2)`]: stickyMediaQuery
+  } : {
+    [`&.umd-layout-grid-offset > *:first-child`]: {
+      order: -1,
+      ...stickyMediaQuery
+    }
+  };
+  const overlayCardStyles = overlayCardClass ? {
+    [`& .${overlayCardClass}`]: {
+      [`@media (${token.media.queries.large.min})`]: {
+        height: "inherit"
+      },
+      [`*`]: {
+        color: overlayTextColor
+      },
+      [`& > div`]: {
+        [`@media (${token.media.queries.large.min})`]: {
+          minHeight: `${stickyMinHeight} !important`
+        }
+      }
+    }
+  } : {};
+  return new ElementBuilder().styled(gridStyle).withClassName("umd-layout-grid-offset").withStyles({
+    element: {
+      [` > *`]: {
+        alignSelf: alignmentMap[alignItems],
+        ...containerQueryStyles
+      },
+      ...childStyles,
+      ...overlayCardStyles
+    }
+  }).build();
+}
+export {
+  gridOffset as default
+};
+//# sourceMappingURL=grid-offset.mjs.map

package/dist/layout/grid-offset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-offset.mjs","sources":["../../source/layout/grid-offset.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridOffsetLayoutProps {\n  columns?: 2 | 3 | 4;\n  isLayoutReversed?: boolean;\n  stickyTopPosition?: number;\n  stickyMinHeight?: string;\n  enableContainerQueries?: boolean;\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n  overlayCardClass?: string;\n  overlayTextColor?: string;\n}\n\n/**\n * Creates a grid layout with offset sticky positioning\n *\n * Creates a grid where the first visual column is sticky-positioned.\n * The sticky column changes based on layout direction:\n * - isLayoutReversed: false → first child (left column) is sticky\n * - isLayoutReversed: true → second child (right column DOM, left column visually) is sticky\n *\n * Useful for featured layouts with a prominent item that stays visible while scrolling.\n *\n * @param props - Configuration for grid offset layout\n * @returns ElementModel with grid offset layout container and styles\n *\n * @example\n * ```typescript\n * // Standard layout: first child sticky on left\n * const offsetGridLayout = gridOffset({\n *   columns: 2,\n *   isLayoutReversed: false,\n *   stickyTopPosition: 100,\n * });\n * offsetGridLayout.element.appendChild(featuredItem); // Sticky, left column\n * offsetGridLayout.element.appendChild(gridOfItems);  // Right column\n *\n * // Reversed layout: second child sticky on left (visually)\n * const reversedLayout = gridOffset({\n *   columns: 2,\n *   isLayoutReversed: true,\n *   stickyTopPosition: 100,\n * });\n * reversedLayout.element.appendChild(featuredItem);  // Right column\n * reversedLayout.element.appendChild(gridOfItems);   // Sticky, left column\n * ```\n */\nexport default function gridOffset({\n  columns = 2,\n  isLayoutReversed = false,\n  stickyTopPosition = 0,\n  stickyMinHeight = '560px',\n  enableContainerQueries = false,\n  alignItems = 'start',\n  overlayCardClass,\n  overlayTextColor = token.color.white,\n}: GridOffsetLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.gap.two;\n  if (columns === 3) gridStyle = layout.grid.gap.three;\n  if (columns === 4) gridStyle = layout.grid.gap.four;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const alignmentMap = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n    stretch: 'stretch',\n  };\n\n  // Build child-specific styles based on layout direction\n  // Scoped to .umd-layout-grid-offset to prevent affecting nested grids\n  // When not reversed: first child gets order -1 AND sticky positioning\n  // When reversed: first child gets order 2, second child gets sticky positioning\n  const stickyMediaQuery = {\n    [`@media (${token.media.queries.large.min})`]: {\n      position: 'sticky',\n      top: `${stickyTopPosition}px`,\n      minHeight: stickyMinHeight,\n    },\n  };\n\n  const childStyles = isLayoutReversed\n    ? {\n        [`&.umd-layout-grid-offset > *:first-child`]: {\n          order: 2,\n        },\n        [`&.umd-layout-grid-offset > *:nth-child(2)`]: stickyMediaQuery,\n      }\n    : {\n        [`&.umd-layout-grid-offset > *:first-child`]: {\n          order: -1,\n          ...stickyMediaQuery,\n        },\n      };\n\n  const overlayCardStyles = overlayCardClass\n    ? {\n        [`& .${overlayCardClass}`]: {\n          [`@media (${token.media.queries.large.min})`]: {\n            height: 'inherit',\n          },\n          [`*`]: {\n            color: overlayTextColor,\n          },\n          [`& > div`]: {\n            [`@media (${token.media.queries.large.min})`]: {\n              minHeight: `${stickyMinHeight} !important`,\n            },\n          },\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withClassName('umd-layout-grid-offset')\n    .withStyles({\n      element: {\n        [` > *`]: {\n          alignSelf: alignmentMap[alignItems],\n          ...containerQueryStyles,\n        },\n        ...childStyles,\n        ...overlayCardStyles,\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;AAkDA,SAAwB,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb;AAAA,EACA,mBAAmB,MAAM,MAAM;AACjC,IAA2B,IAAkB;AAC3C,MAAI,YAAY,OAAO,KAAK,IAAI;AAChC,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK,IAAI;AAC/C,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK,IAAI;AAE/C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAOX,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,MAC7C,UAAU;AAAA,MACV,KAAK,GAAG,iBAAiB;AAAA,MACzB,WAAW;AAAA,IAAA;AAAA,EACb;AAGF,QAAM,cAAc,mBAChB;AAAA,IACE,CAAC,0CAA0C,GAAG;AAAA,MAC5C,OAAO;AAAA,IAAA;AAAA,IAET,CAAC,2CAA2C,GAAG;AAAA,EAAA,IAEjD;AAAA,IACE,CAAC,0CAA0C,GAAG;AAAA,MAC5C,OAAO;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EACL;AAGN,QAAM,oBAAoB,mBACtB;AAAA,IACE,CAAC,MAAM,gBAAgB,EAAE,GAAG;AAAA,MAC1B,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QAC7C,QAAQ;AAAA,MAAA;AAAA,MAEV,CAAC,GAAG,GAAG;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,MAET,CAAC,SAAS,GAAG;AAAA,QACX,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,UAC7C,WAAW,GAAG,eAAe;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,IAEF,CAAA;AAEJ,SAAO,IAAI,iBACR,OAAO,SAAS,EAChB,cAAc,wBAAwB,EACtC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,WAAW,aAAa,UAAU;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,MAEL,GAAG;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACL,CACD,EACA,MAAA;AACL;"}

package/dist/layout/grid.d.ts

@@ -0,0 +1,8 @@
+import { ElementModel } from '../_types';
+export interface GridLayoutProps {
+    columns?: 2 | 3 | 4;
+    minHeight?: string;
+    enableContainerQueries?: boolean;
+}
+export default function grid({ columns, minHeight, enableContainerQueries, }?: GridLayoutProps): ElementModel;
+//# sourceMappingURL=grid.d.ts.map

package/dist/layout/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../source/layout/grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AA4BD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,OAAW,EACX,SAAS,EACT,sBAA6B,GAC9B,GAAE,eAAoB,GAAG,YAAY,CA8BrC"}

package/dist/layout/grid.js

@@ -0,0 +1,30 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+function grid({
+  columns = 2,
+  minHeight,
+  enableContainerQueries = true
+} = {}) {
+  let gridStyle = Styles.layout.grid.columnsTwo;
+  if (columns === 3) gridStyle = Styles.layout.grid.columnsThree;
+  if (columns === 4) gridStyle = Styles.layout.grid.columnsFour;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const minHeightStyles = minHeight ? {
+    [`@media (${Styles.token.media.queries.tablet.min})`]: {
+      minHeight: `${minHeight} !important`
+    }
+  } : {};
+  return new webBuilderLibrary.ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        ...containerQueryStyles,
+        ...minHeightStyles
+      }
+    }
+  }).build();
+}
+module.exports = grid;
+//# sourceMappingURL=grid.js.map

package/dist/layout/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../source/layout/grid.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport { token, layout } from '@universityofmaryland/web-styles-library';\n\nimport { type ElementModel } from '../_types';\n\nexport interface GridLayoutProps {\n  columns?: 2 | 3 | 4;\n  minHeight?: string;\n  enableContainerQueries?: boolean;\n}\n\n/**\n * Creates a responsive column grid layout\n *\n * Provides a multi-column grid layout that adapts to screen size.\n * Columns are responsive and collapse to single column on mobile.\n *\n * @param props - Configuration for grid layout\n * @returns ElementModel with grid layout container and styles\n *\n * @example\n * ```typescript\n * const gridLayout = grid({\n *   columns: 3,\n *   minHeight: '400px'\n * });\n *\n * // Add items to the grid\n * gridLayout.element.appendChild(item1);\n * gridLayout.element.appendChild(item2);\n * gridLayout.element.appendChild(item3);\n *\n * // Inject into DOM\n * document.body.appendChild(gridLayout.element);\n * document.head.appendChild(createStyleElement(gridLayout.styles));\n * ```\n */\nexport default function grid({\n  columns = 2,\n  minHeight,\n  enableContainerQueries = true,\n}: GridLayoutProps = {}): ElementModel {\n  let gridStyle = layout.grid.columnsTwo;\n  if (columns === 3) gridStyle = layout.grid.columnsThree;\n  if (columns === 4) gridStyle = layout.grid.columnsFour;\n\n  const containerQueryStyles = enableContainerQueries\n    ? {\n        containerType: 'inline-size',\n      }\n    : {};\n\n  const minHeightStyles = minHeight\n    ? {\n        [`@media (${token.media.queries.tablet.min})`]: {\n          minHeight: `${minHeight} !important`,\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(gridStyle)\n    .withStyles({\n      element: {\n        [` > *`]: {\n          ...containerQueryStyles,\n          ...minHeightStyles,\n        },\n      },\n    })\n    .build();\n}\n"],"names":["layout","token","ElementBuilder"],"mappings":";;;AAqCA,SAAwB,KAAK;AAAA,EAC3B,UAAU;AAAA,EACV;AAAA,EACA,yBAAyB;AAC3B,IAAqB,IAAkB;AACrC,MAAI,YAAYA,cAAO,KAAK;AAC5B,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK;AAC3C,MAAI,YAAY,EAAG,aAAYA,OAAAA,OAAO,KAAK;AAE3C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,kBAAkB,YACpB;AAAA,IACE,CAAC,WAAWC,OAAAA,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,MAC9C,WAAW,GAAG,SAAS;AAAA,IAAA;AAAA,EACzB,IAEF,CAAA;AAEJ,SAAO,IAAIC,kBAAAA,eAAA,EACR,OAAO,SAAS,EAChB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,MAAM,GAAG;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD,EACA,MAAA;AACL;;"}

package/dist/layout/grid.mjs

@@ -0,0 +1,31 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout, token } from "@universityofmaryland/web-styles-library";
+function grid({
+  columns = 2,
+  minHeight,
+  enableContainerQueries = true
+} = {}) {
+  let gridStyle = layout.grid.columnsTwo;
+  if (columns === 3) gridStyle = layout.grid.columnsThree;
+  if (columns === 4) gridStyle = layout.grid.columnsFour;
+  const containerQueryStyles = enableContainerQueries ? {
+    containerType: "inline-size"
+  } : {};
+  const minHeightStyles = minHeight ? {
+    [`@media (${token.media.queries.tablet.min})`]: {
+      minHeight: `${minHeight} !important`
+    }
+  } : {};
+  return new ElementBuilder().styled(gridStyle).withStyles({
+    element: {
+      [` > *`]: {
+        ...containerQueryStyles,
+        ...minHeightStyles
+      }
+    }
+  }).build();
+}
+export {
+  grid as default
+};
+//# sourceMappingURL=grid.mjs.map