@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/tabs/standard.d.ts

@@ -4,7 +4,7 @@ type TypeTabsProps = {
     shadowContent?: HTMLSlotElement;
     topPosition?: string | null;
 };
-declare const _default: (props: TypeTabsProps) => {
+export declare const createCompositeTabsStandard: (props: TypeTabsProps) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -12,5 +12,5 @@ declare const _default: (props: TypeTabsProps) => {
         load: () => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=standard.d.ts.map

package/dist/composite/tabs/standard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAMA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;yBA0Pc,OAAO,aAAa;;;;;;;;AAApC,wBA6HO"}
+{"version":3,"file":"standard.d.ts","sourceRoot":"","sources":["../../../source/composite/tabs/standard.ts"],"names":[],"mappings":"AAMA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAyXF,eAAO,MAAM,2BAA2B,UA/HE,aAAa;;;;;;;CA+Ha,CAAC"}

package/dist/composite/tabs/standard.js

@@ -1,27 +1,8 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const typography = require("@universityofmaryland/web-styles-library/typography");
-const animation = require("@universityofmaryland/web-utilities-library/animation");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-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);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+import * as token from "@universityofmaryland/web-token-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { smoothScrollToElement } from "@universityofmaryland/web-utilities-library/animation";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
 const ATTRIBUTE_LAYOUT_HORIZONTAL = "data-layout-horizontal";
 const ATTRIBUTE_ARIA_EXPANDED = "aria-expanded";
 const ATTRIBUTE_THEME = "theme";
@@ -40,7 +21,7 @@ const OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;
 const OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;
 const OverwriteThemeStyles = `
   ${OVERWRITE_THEME_DARK_LINE} {
-    background-color: ${token__namespace.color.gray.dark};
+    background-color: ${token.color.gray.dark};
   }
 `;
 const DisplayLineStyles = `
@@ -50,7 +31,7 @@ const DisplayLineStyles = `
     top: 0;
     left: -2px;
     width: 2px;
-    background-color: ${token__namespace.color.gray.light};
+    background-color: ${token.color.gray.light};
     z-index: 9;
   }
 
@@ -65,7 +46,7 @@ const DisplayLineStyles = `
     width: 0;
     height: 0;
     display: block;
-    background-color: ${token__namespace.color.red};
+    background-color: ${token.color.red};
     transform: translate(0);
     z-index: 99;
   }
@@ -123,15 +104,15 @@ const SetDisplay = ({
   const SetActiveButton = () => buttons.map((button, index) => {
     if (index === activeTab) {
       button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "true");
-      if (getIsThemeDark) button.style.color = `${token__namespace.color.white}`;
+      if (getIsThemeDark) button.style.color = `${token.color.white}`;
     } else {
       button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, "false");
-      if (getIsThemeDark) button.style.color = `${token__namespace.color.gray.light}`;
+      if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;
     }
   });
   const SetContentPosition = () => {
     const activeContent = contents[activeTab];
-    const space = isFlexLayout ? styles.parsePixelValue(token__namespace.spacing.xl) : styles.parsePixelValue(token__namespace.spacing.md);
+    const space = isFlexLayout ? parsePixelValue(token.spacing.xl) : parsePixelValue(token.spacing.md);
     if (activeContent) {
       if (transition) {
         strip.style.transition = "height 0.5s";
@@ -142,9 +123,9 @@ const SetDisplay = ({
       activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;
       activeContent.style.width = "100%";
       if (!isFlexLayout && transition) {
-        const convertedSpace = styles.parsePixelValue(token__namespace.spacing.md);
+        const convertedSpace = parsePixelValue(token.spacing.md);
         const spread = additionalSpread ? convertedSpace + additionalSpread : convertedSpace;
-        animation.smoothScrollToElement({
+        smoothScrollToElement({
           element: activeContent,
           spread
         });
@@ -209,7 +190,7 @@ const SetDisplay = ({
   SetLineStyles();
   SetContentPosition();
 };
-const standard = (props) => (() => {
+const CreateTabsStandardElement = (props) => (() => {
   const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;
   const declaration = document.createElement("div");
   const container = document.createElement("div");
@@ -262,15 +243,15 @@ const standard = (props) => (() => {
       button.style.position = "relative";
       button.style.textAlign = "left";
       button.style.display = "inline-block";
-      button.style.padding = `${token__namespace.spacing.sm} ${token__namespace.spacing.md}`;
+      button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;
       button.style.border = "none";
       button.style.background = "transparent";
-      Object.keys(typography__namespace.sans.large).forEach((key) => {
+      Object.keys(typography.sans.large).forEach((key) => {
         const keyRef = key;
-        button.style[keyRef] = typography__namespace.sans.large[keyRef];
+        button.style[keyRef] = typography.sans.large[keyRef];
       });
       if (isThemeDark) {
-        button.style.color = token__namespace.color.white;
+        button.style.color = token.color.white;
       }
     });
     contents.forEach((content) => {
@@ -310,7 +291,7 @@ const standard = (props) => (() => {
   if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
   declaration.classList.add(ELEMENT_DECLARATION);
   declaration.appendChild(container);
-  window.addEventListener("resize", performance.debounce(EventResize, 10));
+  window.addEventListener("resize", debounce(EventResize, 10));
   return {
     element: declaration,
     styles: STYLES_TABS_ELEMENT,
@@ -320,5 +301,8 @@ const standard = (props) => (() => {
     }
   };
 })();
-module.exports = standard;
+const createCompositeTabsStandard = CreateTabsStandardElement;
+export {
+  createCompositeTabsStandard
+};
 //# sourceMappingURL=standard.js.map

package/dist/composite/tabs/standard.js.map

@@ -1 +1 @@
-{"version":3,"file":"standard.js","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: 9;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n    z-index: 99;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nexport default (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":["token","parsePixelValue","smoothScrollToElement","typography","debounce"],"mappings":"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"}
+{"version":3,"file":"standard.js","sources":["../../../source/composite/tabs/standard.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { smoothScrollToElement } from '@universityofmaryland/web-utilities-library/animation';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\nimport { parsePixelValue } from '@universityofmaryland/web-utilities-library/styles';\n\ntype TypeTabsProps = {\n  tabsContainer: HTMLElement;\n  isThemeDark?: boolean;\n  shadowContent?: HTMLSlotElement;\n  topPosition?: string | null;\n};\n\ntype TypeGetElements = {\n  getContainer: () => HTMLElement;\n  getTabsContainer: () => HTMLElement;\n  getDisplayLineStrip: () => HTMLElement;\n  getDisplayLine: () => HTMLElement;\n  getContentStrip: () => HTMLElement;\n  getButtons: () => HTMLElement[];\n  getContents: () => HTMLElement[];\n};\n\ntype TypeGetState = {\n  getActiveTab: () => number;\n  getIsFlexLayout: () => boolean;\n  getButtonWidths: () => number;\n  getButtonHeights: () => number;\n  getIsThemeDark: boolean;\n};\n\nconst ATTRIBUTE_LAYOUT_HORIZONTAL = 'data-layout-horizontal';\nconst ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-element-tabs';\nconst ELEMENT_DECLARATION = 'tabs-declaration';\nconst ELEMENT_CONTAINER = 'tabs-container';\nconst ELEMENT_CONTENT_STRIP = 'tabs-content-strip';\nconst ELEMENT_ACTIVE_LINE_STRIP = 'tab-active-line-strip';\nconst ELEMENT_ACTIVE_LINE = 'tab-active-line';\n\nconst IS_LAYOUT_HORIZONTAL = `[${ATTRIBUTE_LAYOUT_HORIZONTAL}]`;\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst OVERWRITE_VERTICAL_LAYOUT_CONTAINER = `.${ELEMENT_CONTAINER}${IS_LAYOUT_HORIZONTAL}`;\nconst OVERWRITE_VERTICAL_LAYOUT_LINE = `${OVERWRITE_VERTICAL_LAYOUT_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_LINE = `${OVERWRITE_THEME_DARK_CONTAINER} .${ELEMENT_ACTIVE_LINE_STRIP}`;\n\n// prettier-ignore\nconst OverwriteThemeStyles = `\n  ${OVERWRITE_THEME_DARK_LINE} {\n    background-color: ${token.color.gray.dark};\n  }\n`;\n\n// prettier-ignore\nconst DisplayLineStyles = `\n  .${ELEMENT_ACTIVE_LINE_STRIP} {\n    position: absolute;\n    height: 100%;\n    top: 0;\n    left: -2px;\n    width: 2px;\n    background-color: ${token.color.gray.light};\n    z-index: 9;\n  }\n\n  ${OVERWRITE_VERTICAL_LAYOUT_LINE} {\n    height: 2px;\n    left: 0;\n    top: inherit;\n  }\n\n  .${ELEMENT_ACTIVE_LINE} {\n    position: absolute;\n    width: 0;\n    height: 0;\n    display: block;\n    background-color: ${token.color.red};\n    transform: translate(0);\n    z-index: 99;\n  }\n`;\n\n// prettier-ignore\nconst STYLES_TABS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n    position: relative;\n  }\n\n  ${DisplayLineStyles}\n  ${OverwriteThemeStyles}\n`;\n\nconst SetDisplay = ({\n  GetElements,\n  GetState,\n  transition = true,\n  additionalSpread,\n}: {\n  GetElements: TypeGetElements;\n  GetState: TypeGetState;\n  transition?: boolean;\n  additionalSpread?: number | null;\n}) => {\n  const {\n    getContainer,\n    getTabsContainer,\n    getDisplayLineStrip,\n    getDisplayLine,\n    getContentStrip,\n    getButtons,\n    getContents,\n  } = GetElements;\n  const {\n    getActiveTab,\n    getIsFlexLayout,\n    getButtonWidths,\n    getButtonHeights,\n    getIsThemeDark,\n  } = GetState;\n\n  const container = getContainer();\n  const tabsContainer = getTabsContainer();\n  const displayLineStrip = getDisplayLineStrip();\n  const displayLine = getDisplayLine();\n  const strip = getContentStrip();\n  const buttons = getButtons();\n  const contents = getContents();\n  const isFlexLayout = getIsFlexLayout();\n  const activeTab = getActiveTab();\n  const buttonWidths = getButtonWidths();\n  const buttonHeights = getButtonHeights();\n\n  const SetActiveContent = () =>\n    contents.map((content, index) => {\n      if (!content) return;\n\n      if (index === activeTab) {\n        content.style.display = 'block';\n      } else {\n        content.style.display = 'none';\n      }\n    });\n\n  const SetActiveButton = () =>\n    buttons.map((button, index) => {\n      if (index === activeTab) {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');\n        if (getIsThemeDark) button.style.color = `${token.color.white}`;\n      } else {\n        button.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');\n        if (getIsThemeDark) button.style.color = `${token.color.gray.light}`;\n      }\n    });\n\n  const SetContentPosition = () => {\n    const activeContent = contents[activeTab];\n    const space = isFlexLayout\n      ? parsePixelValue(token.spacing.xl)\n      : parsePixelValue(token.spacing.md);\n\n    if (activeContent) {\n      if (transition) {\n        strip.style.transition = 'height 0.5s';\n      } else {\n        strip.style.transition = 'none';\n      }\n\n      strip.style.height = `${activeContent.offsetHeight + space}px`;\n      activeContent.style.top = `${tabsContainer.offsetHeight + space}px`;\n      activeContent.style.width = '100%';\n\n      if (!isFlexLayout && transition) {\n        const convertedSpace = parsePixelValue(token.spacing.md);\n        const spread = additionalSpread\n          ? convertedSpace + additionalSpread\n          : convertedSpace;\n\n        smoothScrollToElement({\n          element: activeContent,\n          spread,\n        });\n      }\n    }\n  };\n\n  const SetContainerStyles = () => {\n    if (isFlexLayout) {\n      container.setAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL, '');\n    } else {\n      container.removeAttribute(ATTRIBUTE_LAYOUT_HORIZONTAL);\n    }\n  };\n\n  const StyleWrapperStyles = () => {\n    if (isFlexLayout) {\n      tabsContainer.style.display = 'flex';\n    } else {\n      tabsContainer.style.display = 'block';\n    }\n  };\n\n  const SetLineStyles = () => {\n    const activeButton = buttons[activeTab];\n\n    if (transition) {\n      displayLine.style.transition =\n        'width 0.5s ease-in-out, height 0.5s ease-in-out, transform 0.5s ease-in-out';\n    } else {\n      displayLine.style.transition = 'none';\n    }\n\n    if (isFlexLayout) {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetWidth;\n        }\n      }\n\n      displayLineStrip.style.width = `${buttonWidths}px`;\n      displayLineStrip.style.height = `2px`;\n      displayLine.style.top = `inherit`;\n      displayLine.style.left = `0`;\n      displayLine.style.width = `${activeButton.offsetWidth}px`;\n      displayLine.style.height = `2px`;\n      displayLine.style.transform = `translate(${offset}px, 0)`;\n    } else {\n      let offset = 0;\n\n      if (activeTab > 0) {\n        for (let i = 0; i < activeTab; i++) {\n          offset += buttons[i].offsetHeight;\n        }\n      }\n\n      displayLineStrip.style.width = `2px`;\n      displayLineStrip.style.height = `${buttonHeights}px`;\n      displayLine.style.top = `0`;\n      displayLine.style.left = `-2px`;\n      displayLine.style.width = `2px`;\n      displayLine.style.height = `${activeButton.offsetHeight}px`;\n      displayLine.style.transform = `translate(0, ${offset}px)`;\n    }\n  };\n\n  SetActiveContent();\n  SetActiveButton();\n  SetContainerStyles();\n  StyleWrapperStyles();\n  SetLineStyles();\n  SetContentPosition();\n};\n\nconst CreateTabsStandardElement = (props: TypeTabsProps) =>\n  (() => {\n    const { isThemeDark, tabsContainer, shadowContent, topPosition } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const contentStrip = document.createElement('div');\n    const displayLineStrip = document.createElement('div');\n    const displayLine = document.createElement('span');\n    const children = Array.from(tabsContainer.children);\n    const buttons = Array.from(tabsContainer.querySelectorAll('button'));\n    const additionalSpread = topPosition ? parseInt(topPosition) : null;\n    const contents = children.filter((child) =>\n      buttons.find(\n        (button) =>\n          button.getAttribute('aria-controls') === child.getAttribute('id'),\n      ),\n    ) as HTMLElement[];\n    const GetElements = {\n      getContainer: () => container,\n      getTabsContainer: () => tabsContainer,\n      getDisplayLineStrip: () => displayLineStrip,\n      getDisplayLine: () => displayLine,\n      getContentStrip: () => contentStrip,\n      getButtons: () => buttons,\n      getContents: () => contents,\n    };\n    const GetState = {\n      getActiveTab: () => activeTab,\n      getIsFlexLayout: () => isFlexLayout,\n      getButtonWidths: () => buttonWidths,\n      getButtonHeights: () => buttonHeights,\n      getIsThemeDark: isThemeDark || false,\n    };\n    const GetContext = { GetElements, GetState };\n    const SetActiveTab = (index: number) => {\n      activeTab = index;\n      SetDisplay({ ...GetContext, additionalSpread });\n    };\n    const SetDisplayLayout = () => {\n      buttonWidths = buttons.reduce(\n        (acc, button) => acc + button.offsetWidth,\n        0,\n      );\n\n      buttonHeights = buttons.reduce(\n        (acc, button) => acc + button.offsetHeight,\n        0,\n      );\n\n      isFlexLayout = buttonWidths < container.offsetWidth;\n    };\n    const SetLoadStyles = () => {\n      buttons.forEach((button, index) => {\n        button.addEventListener('click', () => SetActiveTab(index));\n        button.style.position = 'relative';\n        button.style.textAlign = 'left';\n        button.style.display = 'inline-block';\n        button.style.padding = `${token.spacing.sm} ${token.spacing.md}`;\n        button.style.border = 'none';\n        button.style.background = 'transparent';\n\n        Object.keys(typography.sans.large).forEach((key) => {\n          const keyRef = key as keyof typeof typography.sans.large;\n          (button.style as any)[keyRef] = typography.sans.large[keyRef];\n        });\n\n        if (isThemeDark) {\n          button.style.color = token.color.white;\n        }\n      });\n\n      contents.forEach((content) => {\n        if (!content) return;\n        content.style.display = 'none';\n        content.style.position = 'absolute';\n        content.style.top = '0';\n        content.style.left = '0';\n      });\n    };\n    let activeTab = 0;\n    let isFlexLayout = false;\n    let buttonWidths = 0;\n    let buttonHeights = 0;\n\n    const EventResize = () => {\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n    const EventLoad = () => {\n      SetLoadStyles();\n      SetDisplay({ ...GetContext, transition: false });\n      SetDisplayLayout();\n      SetDisplay({ ...GetContext, transition: false });\n    };\n\n    contentStrip.classList.add(ELEMENT_CONTENT_STRIP);\n\n    if (shadowContent) {\n      container.appendChild(shadowContent);\n    } else {\n      container.appendChild(tabsContainer);\n    }\n\n    displayLineStrip.classList.add(ELEMENT_ACTIVE_LINE_STRIP);\n    container.appendChild(displayLineStrip);\n    displayLine.classList.add(ELEMENT_ACTIVE_LINE);\n    container.appendChild(displayLine);\n\n    container.appendChild(contentStrip);\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    window.addEventListener('resize', debounce(EventResize, 10));\n\n    return {\n      element: declaration,\n      styles: STYLES_TABS_ELEMENT,\n      events: {\n        resize: EventResize,\n        load: EventLoad,\n      },\n    };\n  })();\n\nexport const createCompositeTabsStandard = CreateTabsStandardElement;\n"],"names":[],"mappings":";;;;;AA+BA,MAAM,8BAA8B;AACpC,MAAM,0BAA0B;AAChC,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,eAAe;AACrB,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B;AAClC,MAAM,sBAAsB;AAE5B,MAAM,uBAAuB,IAAI,2BAA2B;AAC5D,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,sCAAsC,IAAI,iBAAiB,GAAG,oBAAoB;AACxF,MAAM,iCAAiC,GAAG,mCAAmC,KAAK,yBAAyB;AAE3G,MAAM,iCAAiC,IAAI,iBAAiB,GAAG,aAAa;AAC5E,MAAM,4BAA4B,GAAG,8BAA8B,KAAK,yBAAyB;AAGjG,MAAM,uBAAuB;AAAA,IACzB,yBAAyB;AAAA,wBACL,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAK7C,MAAM,oBAAoB;AAAA,KACrB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMN,MAAM,MAAM,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,IAI1C,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM7B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKA,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,sBAAsB;AAAA,KACvB,mBAAmB;AAAA,iBACP,YAAY;AAAA;AAAA;AAAA;AAAA,IAIzB,iBAAiB;AAAA,IACjB,oBAAoB;AAAA;AAGxB,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,MAKM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,aAAA;AAClB,QAAM,gBAAgB,iBAAA;AACtB,QAAM,mBAAmB,oBAAA;AACzB,QAAM,cAAc,eAAA;AACpB,QAAM,QAAQ,gBAAA;AACd,QAAM,UAAU,WAAA;AAChB,QAAM,WAAW,YAAA;AACjB,QAAM,eAAe,gBAAA;AACrB,QAAM,YAAY,aAAA;AAClB,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,iBAAA;AAEtB,QAAM,mBAAmB,MACvB,SAAS,IAAI,CAAC,SAAS,UAAU;AAC/B,QAAI,CAAC,QAAS;AAEd,QAAI,UAAU,WAAW;AACvB,cAAQ,MAAM,UAAU;AAAA,IAC1B,OAAO;AACL,cAAQ,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF,CAAC;AAEH,QAAM,kBAAkB,MACtB,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC7B,QAAI,UAAU,WAAW;AACvB,aAAO,aAAa,yBAAyB,MAAM;AACnD,UAAI,eAAgB,QAAO,MAAM,QAAQ,GAAG,MAAM,MAAM,KAAK;AAAA,IAC/D,OAAO;AACL,aAAO,aAAa,yBAAyB,OAAO;AACpD,UAAI,uBAAuB,MAAM,QAAQ,GAAG,MAAM,MAAM,KAAK,KAAK;AAAA,IACpE;AAAA,EACF,CAAC;AAEH,QAAM,qBAAqB,MAAM;AAC/B,UAAM,gBAAgB,SAAS,SAAS;AACxC,UAAM,QAAQ,eACV,gBAAgB,MAAM,QAAQ,EAAE,IAChC,gBAAgB,MAAM,QAAQ,EAAE;AAEpC,QAAI,eAAe;AACjB,UAAI,YAAY;AACd,cAAM,MAAM,aAAa;AAAA,MAC3B,OAAO;AACL,cAAM,MAAM,aAAa;AAAA,MAC3B;AAEA,YAAM,MAAM,SAAS,GAAG,cAAc,eAAe,KAAK;AAC1D,oBAAc,MAAM,MAAM,GAAG,cAAc,eAAe,KAAK;AAC/D,oBAAc,MAAM,QAAQ;AAE5B,UAAI,CAAC,gBAAgB,YAAY;AAC/B,cAAM,iBAAiB,gBAAgB,MAAM,QAAQ,EAAE;AACvD,cAAM,SAAS,mBACX,iBAAiB,mBACjB;AAEJ,8BAAsB;AAAA,UACpB,SAAS;AAAA,UACT;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,cAAc;AAChB,gBAAU,aAAa,6BAA6B,EAAE;AAAA,IACxD,OAAO;AACL,gBAAU,gBAAgB,2BAA2B;AAAA,IACvD;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,cAAc;AAChB,oBAAc,MAAM,UAAU;AAAA,IAChC,OAAO;AACL,oBAAc,MAAM,UAAU;AAAA,IAChC;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,eAAe,QAAQ,SAAS;AAEtC,QAAI,YAAY;AACd,kBAAY,MAAM,aAChB;AAAA,IACJ,OAAO;AACL,kBAAY,MAAM,aAAa;AAAA,IACjC;AAEA,QAAI,cAAc;AAChB,UAAI,SAAS;AAEb,UAAI,YAAY,GAAG;AACjB,iBAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,oBAAU,QAAQ,CAAC,EAAE;AAAA,QACvB;AAAA,MACF;AAEA,uBAAiB,MAAM,QAAQ,GAAG,YAAY;AAC9C,uBAAiB,MAAM,SAAS;AAChC,kBAAY,MAAM,MAAM;AACxB,kBAAY,MAAM,OAAO;AACzB,kBAAY,MAAM,QAAQ,GAAG,aAAa,WAAW;AACrD,kBAAY,MAAM,SAAS;AAC3B,kBAAY,MAAM,YAAY,aAAa,MAAM;AAAA,IACnD,OAAO;AACL,UAAI,SAAS;AAEb,UAAI,YAAY,GAAG;AACjB,iBAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,oBAAU,QAAQ,CAAC,EAAE;AAAA,QACvB;AAAA,MACF;AAEA,uBAAiB,MAAM,QAAQ;AAC/B,uBAAiB,MAAM,SAAS,GAAG,aAAa;AAChD,kBAAY,MAAM,MAAM;AACxB,kBAAY,MAAM,OAAO;AACzB,kBAAY,MAAM,QAAQ;AAC1B,kBAAY,MAAM,SAAS,GAAG,aAAa,YAAY;AACvD,kBAAY,MAAM,YAAY,gBAAgB,MAAM;AAAA,IACtD;AAAA,EACF;AAEA,mBAAA;AACA,kBAAA;AACA,qBAAA;AACA,qBAAA;AACA,gBAAA;AACA,qBAAA;AACF;AAEA,MAAM,4BAA4B,CAAC,WAChC,MAAM;AACL,QAAM,EAAE,aAAa,eAAe,eAAe,gBAAgB;AACnE,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,eAAe,SAAS,cAAc,KAAK;AACjD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,WAAW,MAAM,KAAK,cAAc,QAAQ;AAClD,QAAM,UAAU,MAAM,KAAK,cAAc,iBAAiB,QAAQ,CAAC;AACnE,QAAM,mBAAmB,cAAc,SAAS,WAAW,IAAI;AAC/D,QAAM,WAAW,SAAS;AAAA,IAAO,CAAC,UAChC,QAAQ;AAAA,MACN,CAAC,WACC,OAAO,aAAa,eAAe,MAAM,MAAM,aAAa,IAAI;AAAA,IAAA;AAAA,EACpE;AAEF,QAAM,cAAc;AAAA,IAClB,cAAc,MAAM;AAAA,IACpB,kBAAkB,MAAM;AAAA,IACxB,qBAAqB,MAAM;AAAA,IAC3B,gBAAgB,MAAM;AAAA,IACtB,iBAAiB,MAAM;AAAA,IACvB,YAAY,MAAM;AAAA,IAClB,aAAa,MAAM;AAAA,EAAA;AAErB,QAAM,WAAW;AAAA,IACf,cAAc,MAAM;AAAA,IACpB,iBAAiB,MAAM;AAAA,IACvB,iBAAiB,MAAM;AAAA,IACvB,kBAAkB,MAAM;AAAA,IACxB,gBAAgB,eAAe;AAAA,EAAA;AAEjC,QAAM,aAAa,EAAE,aAAa,SAAA;AAClC,QAAM,eAAe,CAAC,UAAkB;AACtC,gBAAY;AACZ,eAAW,EAAE,GAAG,YAAY,kBAAkB;AAAA,EAChD;AACA,QAAM,mBAAmB,MAAM;AAC7B,mBAAe,QAAQ;AAAA,MACrB,CAAC,KAAK,WAAW,MAAM,OAAO;AAAA,MAC9B;AAAA,IAAA;AAGF,oBAAgB,QAAQ;AAAA,MACtB,CAAC,KAAK,WAAW,MAAM,OAAO;AAAA,MAC9B;AAAA,IAAA;AAGF,mBAAe,eAAe,UAAU;AAAA,EAC1C;AACA,QAAM,gBAAgB,MAAM;AAC1B,YAAQ,QAAQ,CAAC,QAAQ,UAAU;AACjC,aAAO,iBAAiB,SAAS,MAAM,aAAa,KAAK,CAAC;AAC1D,aAAO,MAAM,WAAW;AACxB,aAAO,MAAM,YAAY;AACzB,aAAO,MAAM,UAAU;AACvB,aAAO,MAAM,UAAU,GAAG,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAC9D,aAAO,MAAM,SAAS;AACtB,aAAO,MAAM,aAAa;AAE1B,aAAO,KAAK,WAAW,KAAK,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAClD,cAAM,SAAS;AACd,eAAO,MAAc,MAAM,IAAI,WAAW,KAAK,MAAM,MAAM;AAAA,MAC9D,CAAC;AAED,UAAI,aAAa;AACf,eAAO,MAAM,QAAQ,MAAM,MAAM;AAAA,MACnC;AAAA,IACF,CAAC;AAED,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,CAAC,QAAS;AACd,cAAQ,MAAM,UAAU;AACxB,cAAQ,MAAM,WAAW;AACzB,cAAQ,MAAM,MAAM;AACpB,cAAQ,MAAM,OAAO;AAAA,IACvB,CAAC;AAAA,EACH;AACA,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,eAAe;AACnB,MAAI,gBAAgB;AAEpB,QAAM,cAAc,MAAM;AACxB,qBAAA;AACA,eAAW,EAAE,GAAG,YAAY,YAAY,OAAO;AAAA,EACjD;AACA,QAAM,YAAY,MAAM;AACtB,kBAAA;AACA,eAAW,EAAE,GAAG,YAAY,YAAY,OAAO;AAC/C,qBAAA;AACA,eAAW,EAAE,GAAG,YAAY,YAAY,OAAO;AAAA,EACjD;AAEA,eAAa,UAAU,IAAI,qBAAqB;AAEhD,MAAI,eAAe;AACjB,cAAU,YAAY,aAAa;AAAA,EACrC,OAAO;AACL,cAAU,YAAY,aAAa;AAAA,EACrC;AAEA,mBAAiB,UAAU,IAAI,yBAAyB;AACxD,YAAU,YAAY,gBAAgB;AACtC,cAAY,UAAU,IAAI,mBAAmB;AAC7C,YAAU,YAAY,WAAW;AAEjC,YAAU,YAAY,YAAY;AAClC,YAAU,UAAU,IAAI,iBAAiB;AACzC,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,cAAY,UAAU,IAAI,mBAAmB;AAC7C,cAAY,YAAY,SAAS;AAEjC,SAAO,iBAAiB,UAAU,SAAS,aAAa,EAAE,CAAC;AAE3D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAAA;AAEK,MAAM,8BAA8B;"}

package/dist/composite.js

@@ -1,35 +1,35 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./composite/accordion/index.js");
-const index$1 = require("./composite/banner/index.js");
-const index$2 = require("./composite/alert/index.js");
-const index$3 = require("./composite/card/index.js");
-const index$4 = require("./composite/carousel/index.js");
-const index$5 = require("./composite/footer/index.js");
-const index$6 = require("./composite/hero/index.js");
-const index$7 = require("./composite/layout/index.js");
-const index$8 = require("./composite/media/index.js");
-const index$9 = require("./composite/navigation/index.js");
-const index$a = require("./composite/pathway/index.js");
-const index$b = require("./composite/person/index.js");
-const index$c = require("./composite/quote/index.js");
-const index$d = require("./composite/slider/index.js");
-const index$e = require("./composite/social/index.js");
-const index$f = require("./composite/tabs/index.js");
-exports.accordion = index;
-exports.banner = index$1;
-exports.alert = index$2;
-exports.card = index$3;
-exports.carousel = index$4;
-exports.footer = index$5;
-exports.hero = index$6;
-exports.layout = index$7;
-exports.media = index$8;
-exports.navigation = index$9;
-exports.pathway = index$a;
-exports.person = index$b;
-exports.quote = index$c;
-exports.slider = index$d;
-exports.social = index$e;
-exports.tabs = index$f;
+import * as index from "./composite/accordion/index.js";
+import * as index$1 from "./composite/banner/index.js";
+import * as index$2 from "./composite/alert/index.js";
+import * as index$3 from "./composite/card/index.js";
+import * as index$4 from "./composite/carousel/index.js";
+import * as index$5 from "./composite/footer/index.js";
+import * as index$6 from "./composite/hero/index.js";
+import * as index$7 from "./composite/layout/index.js";
+import * as index$8 from "./composite/media/index.js";
+import * as index$9 from "./composite/navigation/index.js";
+import * as index$a from "./composite/pathway/index.js";
+import * as index$b from "./composite/person/index.js";
+import * as index$c from "./composite/quote/index.js";
+import * as index$d from "./composite/slider/index.js";
+import * as index$e from "./composite/social/index.js";
+import * as index$f from "./composite/tabs/index.js";
+export {
+  index as accordion,
+  index$2 as alert,
+  index$1 as banner,
+  index$3 as card,
+  index$4 as carousel,
+  index$5 as footer,
+  index$6 as hero,
+  index$7 as layout,
+  index$8 as media,
+  index$9 as navigation,
+  index$a as pathway,
+  index$b as person,
+  index$c as quote,
+  index$d as slider,
+  index$e as social,
+  index$f as tabs
+};
 //# sourceMappingURL=composite.js.map

package/dist/composite.js.map

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

package/dist/index.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atomic = require("./atomic.js");
-const composite = require("./composite.js");
-const layout = require("./layout.js");
-exports.Atomic = atomic;
-exports.Composite = composite;
-exports.Layout = layout;
+import * as atomic from "./atomic.js";
+import * as composite from "./composite.js";
+import * as layout from "./layout.js";
+export {
+  atomic as Atomic,
+  composite as Composite,
+  layout as Layout
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/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 declare function createLayoutGridBorder({ 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,wBAAgB,sBAAsB,CAAC,EACrC,OAAW,EACX,WAAmB,EACnB,sBAA8B,EAC9B,UAAU,GACX,GAAE,qBAA0B,GAAG,YAAY,CA6C3C"}

package/dist/layout/grid-border.js

@@ -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 createLayoutGridBorder({
+  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 {
+  createLayoutGridBorder
+};
+//# 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 function createLayoutGridBorder({\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+CO,SAAS,uBAAuB;AAAA,EACrC,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 declare function createLayoutGridGap({ 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,wBAAgB,mBAAmB,CAAC,EAClC,OAAW,EACX,sBAA6B,EAC7B,UAAoB,GACrB,GAAE,kBAAuB,GAAG,YAAY,CA6BxC"}

package/dist/layout/grid-gap.js

@@ -0,0 +1,32 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout } from "@universityofmaryland/web-styles-library";
+function createLayoutGridGap({
+  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 {
+  createLayoutGridGap
+};
+//# 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 function createLayoutGridGap({\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":";;AAqCO,SAAS,oBAAoB;AAAA,EAClC,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 declare function createLayoutGridOffset({ 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,wBAAgB,sBAAsB,CAAC,EACrC,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,72 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout, token } from "@universityofmaryland/web-styles-library";
+function createLayoutGridOffset({
+  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 {
+  createLayoutGridOffset
+};
+//# 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 function createLayoutGridOffset({\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":";;AAkDO,SAAS,uBAAuB;AAAA,EACrC,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 declare function createLayoutGrid({ 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,wBAAgB,gBAAgB,CAAC,EAC/B,OAAW,EACX,SAAS,EACT,sBAA6B,GAC9B,GAAE,eAAoB,GAAG,YAAY,CA8BrC"}

package/dist/layout/grid.js

@@ -0,0 +1,31 @@
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { layout, token } from "@universityofmaryland/web-styles-library";
+function createLayoutGrid({
+  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 {
+  createLayoutGrid
+};
+//# sourceMappingURL=grid.js.map