@abstraks-dev/ui-library 1.2.0 → 1.2.2

package/README.md

@@ -57,6 +57,12 @@ npm run build-css:watch
 npm run build-css:compressed
 ```
 
+## Production Storybook
+
+You can view the latest production build of the UI Library Storybook here:
+
+[UI-Library Site](https://main.ddpmt4w9k9d7q.amplifyapp.com/?path=/docs/abstraks-ui-library--docs)
+
 ## Deployment
 
 This library supports both manual and automated deployment to npm using GitHub Actions.

package/dist/__tests__/Footer.test.js

@@ -16,39 +16,32 @@ afterAll(() => {
 describe('Footer', () => {
   it('renders with default props', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
-      navigation: /*#__PURE__*/_react.default.createElement("li", null, "NavItem")
+      navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "NavItem")
     }));
     expect(_react2.screen.getByRole('contentinfo')).toBeInTheDocument();
     expect(_react2.screen.getByText('NavItem')).toBeInTheDocument();
   });
-  it('renders mobile navigation when width < 768', () => {
-    // Mock useWindowSize to return mobile width
-    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
-      width: 500
-    });
+  it('renders navigation sections', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
-      navigation: /*#__PURE__*/_react.default.createElement("li", null, "MobileNav")
+      navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Section1"),
+      navigationTwo: /*#__PURE__*/_react.default.createElement("li", null, "Section2"),
+      navigationThree: /*#__PURE__*/_react.default.createElement("li", null, "Section3")
     }));
-    expect(_react2.screen.getByLabelText('Mobile footer navigation')).toBeInTheDocument();
-    expect(_react2.screen.getByText('MobileNav')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Section1')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Section2')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Section3')).toBeInTheDocument();
   });
-  it('renders desktop navigation when width >= 768', () => {
-    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
-      width: 1024
-    });
+  it('renders copyright when not authenticated', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
-      navigation: /*#__PURE__*/_react.default.createElement("li", null, "DesktopNav")
+      hasAuth: false
     }));
-    expect(_react2.screen.getByLabelText('Desktop footer navigation')).toBeInTheDocument();
-    expect(_react2.screen.getByText('DesktopNav')).toBeInTheDocument();
+    expect(_react2.screen.getByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
   });
-  it('renders auth menu when hasAuth is true (mobile)', () => {
-    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
-      width: 500
-    });
+  it('renders auth menu when hasAuth is true', () => {
+    const authMenuContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Home")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Search")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Add")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Profile")));
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
       hasAuth: true,
-      navigation: null
+      authMenu: authMenuContent
     }));
     expect(_react2.screen.getByLabelText('User navigation')).toBeInTheDocument();
     expect(_react2.screen.getByText('Home')).toBeInTheDocument();
@@ -56,11 +49,53 @@ describe('Footer', () => {
     expect(_react2.screen.getByText('Add')).toBeInTheDocument();
     expect(_react2.screen.getByText('Profile')).toBeInTheDocument();
   });
+  it('applies box shadow based on auth state and screen size', () => {
+    // Test desktop without auth (should have box shadow)
+    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
+      width: 1024
+    });
+    const {
+      rerender
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      hasAuth: false
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toHaveStyle('box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1)');
+
+    // Test mobile with auth (should have box shadow)
+    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
+      width: 500
+    });
+    rerender(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      hasAuth: true
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toHaveStyle('box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1)');
+  });
   it('applies custom aria-label', () => {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
-      navigation: /*#__PURE__*/_react.default.createElement("li", null, "Nav"),
+      navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav"),
       "aria-label": "Custom Footer"
     }));
     expect(_react2.screen.getByRole('contentinfo')).toHaveAttribute('aria-label', 'Custom Footer');
   });
+  it('renders with custom id', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      id: "custom-footer",
+      navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav")
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toHaveAttribute('id', 'custom-footer');
+  });
+  it('renders without copyright when hasAuth is true', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      hasAuth: true,
+      authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu")
+    }));
+    expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).not.toBeInTheDocument();
+  });
+  it('renders with custom className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      className: "custom-footer",
+      navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav")
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toHaveClass('footer custom-footer');
+  });
 });

package/dist/components/Footer.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _useWindowSize = require("../utils/useWindowSize");
 var _ssrSafeId = require("../utils/ssrSafeId");
-var _Animation = require("./Animation");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
@@ -20,12 +19,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const Footer = exports.Footer = /*#__PURE__*/(0, _react.forwardRef)(({
   id,
   className = '',
-  navigation = null,
+  navigationOne = null,
+  navigationTwo = null,
+  navigationThree = null,
   signInLink = null,
   signUpLink = null,
   avatarSrc = null,
   ellipsesList = [],
   hasAuth = false,
+  authMenu = null,
   'aria-label': ariaLabel = 'Footer',
   componentName = 'footer',
   additionalClassName = '',
@@ -35,54 +37,40 @@ const Footer = exports.Footer = /*#__PURE__*/(0, _react.forwardRef)(({
   const generateId = (0, _ssrSafeId.useStableId)('footer');
   const finalId = id || generateId();
   const finalClassName = className || additionalClassName;
+  const shouldApplyBoxShadow = !hasAuth && size.width > 768 || hasAuth && size.width < 768;
   return /*#__PURE__*/_react.default.createElement("footer", _extends({
     ref: ref,
     id: finalId,
     className: `${componentName} ${finalClassName}`,
     "data-testid": componentName,
     role: "contentinfo",
-    "aria-label": ariaLabel
-  }, restProps), /*#__PURE__*/_react.default.createElement(_Animation.AnimatedDiv, {
-    fadingEntrances: "fadeIn",
-    duration: "faster"
-  }, size.width < 768 ?
-  /*#__PURE__*/
-  // mobile
-  _react.default.createElement("div", {
+    "aria-label": ariaLabel,
+    style: shouldApplyBoxShadow ? {
+      boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)'
+    } : undefined
+  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "navigation",
     role: "navigation",
-    "aria-label": "Mobile footer navigation"
-  }, !hasAuth ? /*#__PURE__*/_react.default.createElement("ul", {
+    "aria-label": "footer navigation"
+  }, !hasAuth ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
     className: "unordered-list",
     role: "list"
-  }, navigation) : /*#__PURE__*/_react.default.createElement("ul", {
-    className: "unordered-list auth-menu",
-    role: "list",
-    "aria-label": "User navigation"
   }, /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-item",
+    className: "list-item list-one",
     role: "listitem"
-  }, "Home"), /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-item",
+  }, navigationOne), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item list-two",
     role: "listitem"
-  }, "Search"), /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-item",
+  }, navigationTwo), /*#__PURE__*/_react.default.createElement("li", {
+    className: "list-item list-three",
     role: "listitem"
-  }, "Add"), /*#__PURE__*/_react.default.createElement("li", {
-    className: "list-item",
-    role: "listitem"
-  }, "Profile"))) :
-  /*#__PURE__*/
-  // desktop
-  _react.default.createElement("div", {
-    className: "navigation",
-    "data-testid": "navigation",
-    role: "navigation",
-    "aria-label": "Desktop footer navigation"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "unordered-list",
-    role: "list"
-  }, navigation))));
+  }, navigationThree)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "bottom"
+  }, "\xA9 ", new Date().getFullYear(), " Abstraks. All rights reserved.")) : /*#__PURE__*/_react.default.createElement("ul", {
+    className: "unordered-list auth-menu",
+    role: "list",
+    "aria-label": "User navigation"
+  }, authMenu)));
 });
 Footer.displayName = 'Footer';
 Footer.propTypes = {

package/dist/components/Header.js

@@ -208,7 +208,7 @@ const Header = exports.Header = /*#__PURE__*/(0, _react.forwardRef)(({
     onKeyDown: handleKeyDown
   }, restProps), /*#__PURE__*/_react.default.createElement("div", {
     className: isMobile ? 'container-mobile' : 'container-large'
-  }, logo, hasAuth && search, isMobile ? /*#__PURE__*/_react.default.createElement(_SideMenu.SideMenu, {
+  }, logo, hasAuth && !isMobile && search, isMobile ? /*#__PURE__*/_react.default.createElement(_SideMenu.SideMenu, {
     direction: "vertical",
     position: "top",
     isOpen: isMenuOpen,

package/dist/components/SideMenu.js

@@ -84,6 +84,34 @@ const SideMenu = exports.SideMenu = /*#__PURE__*/(0, _react.forwardRef)(({
   const generateId = (0, _ssrSafeId.useStableId)('side-menu');
   const finalId = id || testId || generateId();
   const finalClassName = className || additionalClassName;
+
+  // Handle body scroll locking when menu is open
+  (0, _react.useEffect)(() => {
+    if (typeof document !== 'undefined') {
+      if (isOpen) {
+        // Store current scroll position
+        const scrollY = window.scrollY;
+        document.body.style.top = `-${scrollY}px`;
+        document.body.classList.add('side-menu-open');
+      } else {
+        document.body.classList.remove('side-menu-open');
+        // Restore scroll position
+        const scrollY = document.body.style.top;
+        document.body.style.top = '';
+        if (scrollY) {
+          window.scrollTo(0, parseInt(scrollY || '0', 10));
+        }
+      }
+    }
+
+    // Cleanup function
+    return () => {
+      if (typeof document !== 'undefined') {
+        document.body.classList.remove('side-menu-open');
+        document.body.style.top = '';
+      }
+    };
+  }, [isOpen]);
   const handleToggle = (0, _react.useCallback)(() => {
     if (isOpen) {
       onClose();

package/dist/index.js

@@ -17,6 +17,7 @@ var _exportNames = {
   DragAndDrop: true,
   Error: true,
   FileInput: true,
+  Footer: true,
   Form: true,
   Header: true,
   Heading: true,
@@ -228,6 +229,12 @@ Object.defineProperty(exports, "Filter", {
     return _Filter.Filter;
   }
 });
+Object.defineProperty(exports, "Footer", {
+  enumerable: true,
+  get: function () {
+    return _Footer.Footer;
+  }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () {
@@ -427,6 +434,7 @@ var _Crud = _interopRequireDefault(require("./components/Crud"));
 var _DragAndDrop = _interopRequireDefault(require("./components/DragAndDrop"));
 var _Error = _interopRequireDefault(require("./components/Error"));
 var _FileInput = _interopRequireDefault(require("./components/FileInput"));
+var _Footer = require("./components/Footer");
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _Header = _interopRequireDefault(require("./components/Header"));
 var _Heading = _interopRequireDefault(require("./components/Heading"));

package/dist/styles/footer.css

@@ -115,51 +115,143 @@
   align-items: center;
   flex-direction: row;
   padding: 15px;
+  /* Absolute positioning - reliably pins footer to bottom */
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+  /* Ensure footer stays above other content */
+  z-index: 200;
 }
-@media (min-width: 768px) {
-  .footer .navigation {
-    display: inline-flex;
-    justify-content: flex-end;
-  }
+.footer .navigation {
+  display: flex;
+  flex-direction: column;
 }
 .footer .navigation .unordered-list {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .footer .navigation .unordered-list {
-    display: inline-flex;
+    display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0;
-    margin: 0;
+    justify-content: space-between;
+    width: 50%;
   }
 }
 .footer .navigation .unordered-list.auth-menu {
-  border-top: 1px solid #e9ecef;
   flex-direction: row;
   justify-content: space-between;
+  display: flex;
+}
+@media (min-width: 768px) {
+  .footer .navigation .unordered-list.auth-menu {
+    display: none;
+  }
 }
 .footer .navigation .unordered-list.auth-menu .list-item {
   display: inline-flex;
-  /* width: 25%; */
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .footer .navigation .unordered-list.auth-menu .list-item {
+    width: 33.3%;
+  }
+}
+.footer .navigation .bottom {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  font-size: 0.875rem;
+  color: #6c757d;
 }
-.footer .navigation .unordered-list .list-item {
+.footer .navigation .list-item {
   display: flex;
 }
 @media (min-width: 768px) {
-  .footer .navigation .unordered-list .list-item {
+  .footer .navigation .list-item {
     display: inline-flex;
-    padding: 0 15px;
+    padding: 10px 0;
   }
 }
-.footer .navigation .anchor {
+.footer .anchor {
   color: #6c757d;
   text-decoration: none;
 }
-.footer .navigation .anchor:hover {
+.footer .anchor:hover {
   color: #333;
 }
 
+/* Global styles to support absolute positioned footer */
+/* 
+ * Usage: Apply these classes to your layout:
+ * - Add 'sticky-footer-layout' class to your main container
+ * - Add 'main-content' class to your content wrapper
+ * - The footer will be absolutely positioned at the bottom
+ */
+html.sticky-footer-layout,
+body.sticky-footer-layout {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* Force proper height on mobile */
+}
+@media (max-width: 767px) {
+  html.sticky-footer-layout,
+  body.sticky-footer-layout {
+    height: 100%;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.sticky-footer-layout {
+  position: relative;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  /* Add bottom padding to prevent content hiding behind footer */
+  padding-bottom: 80px; /* Adjust based on footer height */
+  /* Ensure layout works on all screen sizes */
+  /* Footer positioning within the layout */
+}
+@media (max-width: 767px) {
+  .sticky-footer-layout {
+    position: relative;
+    min-height: 100vh;
+    padding-bottom: 100px; /* Slightly more padding on mobile */
+  }
+}
+.sticky-footer-layout .main-content {
+  width: 100%;
+  padding-bottom: 20px; /* Additional content padding */
+  /* Mobile-specific main content */
+}
+@media (max-width: 767px) {
+  .sticky-footer-layout .main-content {
+    width: 100%;
+    padding-bottom: 20px;
+  }
+}
+.sticky-footer-layout .footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /* Mobile-specific footer */
+}
+@media (max-width: 767px) {
+  .sticky-footer-layout .footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+}
+
 /*# sourceMappingURL=footer.css.map */

package/dist/styles/footer.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/footer.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA;EACA;;AAGC;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;AACA;;AAIF;EACC;;AAEA;EAHD;IAIE;IACA;;;AAKH;EACC,ODwCQ;ECvCR;;AAEA;EACC,OD1Bc","file":"footer.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/footer.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA,SDyDgB;;ACvDhB;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EALD;IAME;IACA;IACA;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EALD;IAME;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;;;AAMJ;EACC;EACA;EACA;EACA;EACA,OD6BQ;;AC1BT;EACC;;AAEA;EAHD;IAIE;IACA;;;AAKH;EACC,ODeS;ECdT;;AAEA;EACC,ODnDe;;;ACwDlB;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEC;EACA;EACA;AAEA;;AACA;EAPD;AAAA;IAQE;IACA;IACA;IACA;;;;AAIF;EACC;EACA;EACA;EACA;AAEA;EACA;AAEA;AAkBA;;AAjBA;EAVD;IAWE;IACA;IACA;;;AAGD;EACC;EACA;AAEA;;AACA;EALD;IAME;IACA;;;AAKF;EACC;EACA;EACA;EACA;AAEA;;AACA;EAPD;IAQE;IACA;IACA;IACA;IACA","file":"footer.css"}

package/dist/styles/footer.scss

@@ -6,53 +6,144 @@
 	flex-direction: row;
 	padding: 15px;
 
+	/* Absolute positioning - reliably pins footer to bottom */
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #fff;
+	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+
+	/* Ensure footer stays above other content */
+	z-index: $z-index-sticky;
+
 	.navigation {
-		@media (min-width: 768px) {
-			display: inline-flex;
-			justify-content: flex-end;
-		}
+		display: flex;
+		flex-direction: column;
 
 		.unordered-list {
 			display: flex;
 			flex-direction: column;
+			width: 100%;
 
 			@media (min-width: 768px) {
-				display: inline-flex;
+				display: flex;
 				flex-direction: row;
-				align-items: center;
-				justify-content: flex-end;
-				padding: 0;
-				margin: 0;
+				justify-content: space-between;
+				width: 50%;
 			}
 
 			&.auth-menu {
-				border-top: 1px solid $gray-200;
 				flex-direction: row;
 				justify-content: space-between;
-
-				.list-item {
-					display: inline-flex;
-					/* width: 25%; */
-				}
-			}
-
-			.list-item {
 				display: flex;
 
 				@media (min-width: 768px) {
+					display: none;
+				}
+
+				.list-item {
 					display: inline-flex;
-					padding: 0 15px;
+					align-items: center;
+
+					@media (min-width: 768px) {
+						width: 33.3%;
+					}
 				}
 			}
 		}
 
-		.anchor {
+		.bottom {
+			display: flex;
+			flex-direction: row;
+			margin-top: 10px;
+			font-size: 0.875rem;
 			color: $gray-600;
-			text-decoration: none;
+		}
+
+		.list-item {
+			display: flex;
 
-			&:hover {
-				color: $color-font-body;
+			@media (min-width: 768px) {
+				display: inline-flex;
+				padding: 10px 0;
 			}
 		}
 	}
+
+	.anchor {
+		color: $gray-600;
+		text-decoration: none;
+
+		&:hover {
+			color: $color-font-body;
+		}
+	}
+}
+
+/* Global styles to support absolute positioned footer */
+/* 
+ * Usage: Apply these classes to your layout:
+ * - Add 'sticky-footer-layout' class to your main container
+ * - Add 'main-content' class to your content wrapper
+ * - The footer will be absolutely positioned at the bottom
+ */
+html.sticky-footer-layout,
+body.sticky-footer-layout {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+
+	/* Force proper height on mobile */
+	@media (max-width: 767px) {
+		height: 100%;
+		min-height: 100vh;
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.sticky-footer-layout {
+	position: relative;
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+
+	/* Add bottom padding to prevent content hiding behind footer */
+	padding-bottom: 80px; /* Adjust based on footer height */
+
+	/* Ensure layout works on all screen sizes */
+	@media (max-width: 767px) {
+		position: relative;
+		min-height: 100vh;
+		padding-bottom: 100px; /* Slightly more padding on mobile */
+	}
+
+	.main-content {
+		width: 100%;
+		padding-bottom: 20px; /* Additional content padding */
+
+		/* Mobile-specific main content */
+		@media (max-width: 767px) {
+			width: 100%;
+			padding-bottom: 20px;
+		}
+	}
+
+	/* Footer positioning within the layout */
+	.footer {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		/* Mobile-specific footer */
+		@media (max-width: 767px) {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			width: 100%;
+		}
+	}
 }

package/dist/styles/header.css

@@ -139,8 +139,10 @@
   flex-direction: row;
   align-items: center;
 }
-.header .container-large .navigation {
-  margin-left: auto;
+@media (min-width: 768px) {
+  .header .container-large {
+    justify-content: space-between;
+  }
 }
 .header .container-mobile {
   width: 100%;
@@ -287,7 +289,6 @@
 @media (min-width: 768px) {
   .header .navigation .unordered-list .list-item {
     display: inline-flex;
-    padding: 0 15px;
   }
 }
 .header .navigation .unordered-list .list-item [role=menuitem] {

package/dist/styles/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/header.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACQ;EACA;EACA,SDqES;ECpET;EACA;EACA;EACA;EACA;EACA,kBDcM;ECbN;EACA;;AAGP;EACC;EACA;;AAID;EApBD;IAqBE;IACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,kBDxBU;;AC4BV;EACC;EACA;EACA;EACA,kBDhCS;;ACkCT;EACC;;AAIF;EACC,kBDxCS;;AC+Cb;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;AAKD;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;;AAEA;EAHD;IAIE;IACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA,SDtEY;ECuEZ;EACA;EACA;EACA;EACA;EACA;EACA;EAGA,kBDhIO;ECiIP;EACA;EACA;EACA;EACA;;AAIA;EArBD;IAsBE;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA,ODzJQ;EC0JR;EACA;;AAEA;EAEC;EACA,ODpLK;;ACuLN;EACC;EACA;;AAUR;EACC;;AAEA;EAHD;IAIE;IACA;;;AAID;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAMJ;EACC,ODzIQ;EC0IR;EACA;;AAEA;EACC,OD5Mc;;AC+Mf;EACC,ODpOY;ECqOZ;EACA;;AAID;EACC;IAEC,OD1NS;IC2NT;;;AAOJ;EA1PD;IA2PE;;EAEA;IACC;IACA;;;AAIF;EAnQD;IAoQE;;EAEA;IACC;;;AAKF;EACC;AAAA;AAAA;IAGC;IACA;IACA;;;;AAKH;EACQ;EACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/header.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA,SDqEgB;ECpEhB;EACA;EACA;EACA;EACA;EACA,kBDca;ECbb;EACA;;AAGA;EACC;EACA;;AAID;EApBD;IAqBE;IACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EAND;IAOE;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC,kBDxBU;;AC4BV;EACC;EACA;EACA;EACA,kBDhCS;;ACkCT;EACC;;AAIF;EACC,kBDxCS;;AC+Cb;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;EACA;;AAKD;EADD;IAEE;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;IACA;IACA;IACA;IACA;IACA;;;AAGD;EACC;;AAEA;EAHD;IAIE;IACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA,SDtEY;ECuEZ;EACA;EACA;EACA;EACA;EACA;EACA;EAGA,kBDhIO;ECiIP;EACA;EACA;EACA;EACA;;AAIA;EArBD;IAsBE;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA,ODzJQ;EC0JR;EACA;;AAEA;EAEC;EACA,ODpLK;;ACuLN;EACC;EACA;;AAUR;EACC;;AAEA;EAHD;IAIE;;;AAID;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAMJ;EACC,ODxIQ;ECyIR;EACA;;AAEA;EACC,OD3Mc;;AC8Mf;EACC,ODnOY;ECoOZ;EACA;;AAID;EACC;IAEC,ODzNS;IC0NT;;;AAOJ;EAzPD;IA0PE;;EAEA;IACC;IACA;;;AAIF;EAlQD;IAmQE;;EAEA;IACC;;;AAKF;EACC;AAAA;AAAA;IAGC;IACA;IACA;;;;AAKH;EACC;EACA","file":"header.css"}