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

package/dist/layout/grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.mjs","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":[],"mappings":";;AAqCA,SAAwB,KAAK;AAAA,EAC3B,UAAU;AAAA,EACV;AAAA,EACA,yBAAyB;AAC3B,IAAqB,IAAkB;AACrC,MAAI,YAAY,OAAO,KAAK;AAC5B,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK;AAC3C,MAAI,YAAY,EAAG,aAAY,OAAO,KAAK;AAE3C,QAAM,uBAAuB,yBACzB;AAAA,IACE,eAAe;AAAA,EAAA,IAEjB,CAAA;AAEJ,QAAM,kBAAkB,YACpB;AAAA,IACE,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,MAC9C,WAAW,GAAG,SAAS;AAAA,IAAA;AAAA,EACzB,IAEF,CAAA;AAEJ,SAAO,IAAI,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/index.d.ts

@@ -1,2 +1,7 @@
 export { default as Image } from './image';
+export { default as stacked } from './stacked';
+export { default as grid } from './grid';
+export { default as gridGap } from './grid-gap';
+export { default as gridBorder } from './grid-border';
+export { default as gridOffset } from './grid-offset';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/layout/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/layout/stacked.d.ts

@@ -0,0 +1,10 @@
+import { ElementModel } from '../_types';
+export interface StackedLayoutProps {
+    isThemeDark?: boolean;
+    gap?: string;
+    spacing?: string;
+    showDividers?: boolean;
+    dividerColor?: string;
+}
+export default function stacked({ isThemeDark, gap, spacing, showDividers, dividerColor, }?: StackedLayoutProps): ElementModel;
+//# sourceMappingURL=stacked.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../source/layout/stacked.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2BD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,WAAmB,EACnB,GAAsB,EACtB,OAA0B,EAC1B,YAAmB,EACnB,YAAY,GACb,GAAE,kBAAuB,GAAG,YAAY,CA2BxC"}

package/dist/layout/stacked.js

@@ -0,0 +1,28 @@
+"use strict";
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+function stacked({
+  isThemeDark = false,
+  gap = Styles.token.spacing.md,
+  spacing = Styles.token.spacing.md,
+  showDividers = true,
+  dividerColor
+} = {}) {
+  const defaultDividerColor = isThemeDark ? Styles.token.color.gray.dark : Styles.token.color.gray.light;
+  const borderColor = dividerColor || defaultDividerColor;
+  const dividerStyles = showDividers ? {
+    [` > *:not(:last-child)`]: {
+      paddingBottom: spacing,
+      marginBottom: spacing,
+      borderBottom: `1px solid ${borderColor}`
+    }
+  } : {};
+  return new webBuilderLibrary.ElementBuilder().styled(Styles.layout.grid.stacked).withStyles({
+    element: {
+      gridGap: gap,
+      ...dividerStyles
+    }
+  }).build();
+}
+module.exports = stacked;
+//# sourceMappingURL=stacked.js.map

package/dist/layout/stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.js","sources":["../../source/layout/stacked.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 StackedLayoutProps {\n  isThemeDark?: boolean;\n  gap?: string;\n  spacing?: string;\n  showDividers?: boolean;\n  dividerColor?: string;\n}\n\n/**\n * Creates a stacked vertical layout with optional dividers\n *\n * Provides a vertical stack layout using CSS Grid with configurable\n * spacing and optional dividing borders between items.\n *\n * @param props - Configuration for stacked layout\n * @returns ElementModel with stacked layout container and styles\n *\n * @example\n * ```typescript\n * const stackedLayout = stacked({\n *   isThemeDark: false,\n *   showDividers: true\n * });\n *\n * // Add items to the container\n * stackedLayout.element.appendChild(item1);\n * stackedLayout.element.appendChild(item2);\n *\n * // Inject into DOM\n * document.body.appendChild(stackedLayout.element);\n * document.head.appendChild(createStyleElement(stackedLayout.styles));\n * ```\n */\nexport default function stacked({\n  isThemeDark = false,\n  gap = token.spacing.md,\n  spacing = token.spacing.md,\n  showDividers = true,\n  dividerColor,\n}: StackedLayoutProps = {}): ElementModel {\n  const defaultDividerColor = isThemeDark\n    ? token.color.gray.dark\n    : token.color.gray.light;\n\n  const borderColor = dividerColor || defaultDividerColor;\n\n  const dividerStyles = showDividers\n    ? {\n        [` > *:not(:last-child)`]: {\n          paddingBottom: spacing,\n          marginBottom: spacing,\n          borderBottom: `1px solid ${borderColor}`,\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(layout.grid.stacked)\n    .withStyles({\n      element: {\n        gridGap: gap,\n\n        ...dividerStyles,\n      },\n    })\n    .build();\n}\n"],"names":["token","ElementBuilder","layout"],"mappings":";;;AAsCA,SAAwB,QAAQ;AAAA,EAC9B,cAAc;AAAA,EACd,MAAMA,OAAAA,MAAM,QAAQ;AAAA,EACpB,UAAUA,OAAAA,MAAM,QAAQ;AAAA,EACxB,eAAe;AAAA,EACf;AACF,IAAwB,IAAkB;AACxC,QAAM,sBAAsB,cACxBA,OAAAA,MAAM,MAAM,KAAK,OACjBA,OAAAA,MAAM,MAAM,KAAK;AAErB,QAAM,cAAc,gBAAgB;AAEpC,QAAM,gBAAgB,eAClB;AAAA,IACE,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc,aAAa,WAAW;AAAA,IAAA;AAAA,EACxC,IAEF,CAAA;AAEJ,SAAO,IAAIC,kBAAAA,iBACR,OAAOC,OAAAA,OAAO,KAAK,OAAO,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,GAAG;AAAA,IAAA;AAAA,EACL,CACD,EACA,MAAA;AACL;;"}

package/dist/layout/stacked.mjs

@@ -0,0 +1,29 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { token, layout } from "@universityofmaryland/web-styles-library";
+function stacked({
+  isThemeDark = false,
+  gap = token.spacing.md,
+  spacing = token.spacing.md,
+  showDividers = true,
+  dividerColor
+} = {}) {
+  const defaultDividerColor = isThemeDark ? token.color.gray.dark : token.color.gray.light;
+  const borderColor = dividerColor || defaultDividerColor;
+  const dividerStyles = showDividers ? {
+    [` > *:not(:last-child)`]: {
+      paddingBottom: spacing,
+      marginBottom: spacing,
+      borderBottom: `1px solid ${borderColor}`
+    }
+  } : {};
+  return new ElementBuilder().styled(layout.grid.stacked).withStyles({
+    element: {
+      gridGap: gap,
+      ...dividerStyles
+    }
+  }).build();
+}
+export {
+  stacked as default
+};
+//# sourceMappingURL=stacked.mjs.map

package/dist/layout/stacked.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.mjs","sources":["../../source/layout/stacked.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 StackedLayoutProps {\n  isThemeDark?: boolean;\n  gap?: string;\n  spacing?: string;\n  showDividers?: boolean;\n  dividerColor?: string;\n}\n\n/**\n * Creates a stacked vertical layout with optional dividers\n *\n * Provides a vertical stack layout using CSS Grid with configurable\n * spacing and optional dividing borders between items.\n *\n * @param props - Configuration for stacked layout\n * @returns ElementModel with stacked layout container and styles\n *\n * @example\n * ```typescript\n * const stackedLayout = stacked({\n *   isThemeDark: false,\n *   showDividers: true\n * });\n *\n * // Add items to the container\n * stackedLayout.element.appendChild(item1);\n * stackedLayout.element.appendChild(item2);\n *\n * // Inject into DOM\n * document.body.appendChild(stackedLayout.element);\n * document.head.appendChild(createStyleElement(stackedLayout.styles));\n * ```\n */\nexport default function stacked({\n  isThemeDark = false,\n  gap = token.spacing.md,\n  spacing = token.spacing.md,\n  showDividers = true,\n  dividerColor,\n}: StackedLayoutProps = {}): ElementModel {\n  const defaultDividerColor = isThemeDark\n    ? token.color.gray.dark\n    : token.color.gray.light;\n\n  const borderColor = dividerColor || defaultDividerColor;\n\n  const dividerStyles = showDividers\n    ? {\n        [` > *:not(:last-child)`]: {\n          paddingBottom: spacing,\n          marginBottom: spacing,\n          borderBottom: `1px solid ${borderColor}`,\n        },\n      }\n    : {};\n\n  return new ElementBuilder()\n    .styled(layout.grid.stacked)\n    .withStyles({\n      element: {\n        gridGap: gap,\n\n        ...dividerStyles,\n      },\n    })\n    .build();\n}\n"],"names":[],"mappings":";;AAsCA,SAAwB,QAAQ;AAAA,EAC9B,cAAc;AAAA,EACd,MAAM,MAAM,QAAQ;AAAA,EACpB,UAAU,MAAM,QAAQ;AAAA,EACxB,eAAe;AAAA,EACf;AACF,IAAwB,IAAkB;AACxC,QAAM,sBAAsB,cACxB,MAAM,MAAM,KAAK,OACjB,MAAM,MAAM,KAAK;AAErB,QAAM,cAAc,gBAAgB;AAEpC,QAAM,gBAAgB,eAClB;AAAA,IACE,CAAC,uBAAuB,GAAG;AAAA,MACzB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc,aAAa,WAAW;AAAA,IAAA;AAAA,EACxC,IAEF,CAAA;AAEJ,SAAO,IAAI,iBACR,OAAO,OAAO,KAAK,OAAO,EAC1B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MAET,GAAG;AAAA,IAAA;AAAA,EACL,CACD,EACA,MAAA;AACL;"}

package/dist/layout.js

@@ -1,5 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const image = require("./layout/image.js");
+const stacked = require("./layout/stacked.js");
+const grid = require("./layout/grid.js");
+const gridGap = require("./layout/grid-gap.js");
+const gridBorder = require("./layout/grid-border.js");
+const gridOffset = require("./layout/grid-offset.js");
 exports.Image = image;
+exports.stacked = stacked;
+exports.grid = grid;
+exports.gridGap = gridGap;
+exports.gridBorder = gridBorder;
+exports.gridOffset = gridOffset;
 //# sourceMappingURL=layout.js.map

package/dist/layout.js.map

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

package/dist/layout.mjs

@@ -1,5 +1,15 @@
 import { default as default2 } from "./layout/image.mjs";
+import { default as default3 } from "./layout/stacked.mjs";
+import { default as default4 } from "./layout/grid.mjs";
+import { default as default5 } from "./layout/grid-gap.mjs";
+import { default as default6 } from "./layout/grid-border.mjs";
+import { default as default7 } from "./layout/grid-offset.mjs";
 export {
-  default2 as Image
+  default2 as Image,
+  default4 as grid,
+  default6 as gridBorder,
+  default5 as gridGap,
+  default7 as gridOffset,
+  default3 as stacked
 };
 //# sourceMappingURL=layout.mjs.map

package/dist/layout.mjs.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universityofmaryland/web-elements-library",
-  "version": "1.5.8",
+  "version": "1.6.0-beta.0",
   "description": "UMD Web Elements",
   "main": "dist/index.js",
   "module": "dist/index.mjs",