solid-ui 2.4.12-3bba27e0 → 2.4.12-47411c33

package/lib/webpack-bundle.js

@@ -8465,30 +8465,10 @@ function trace() {
 
 /***/ }),
 
-/***/ "./lib/header/empty-profile.js":
-/*!*************************************!*\
-  !*** ./lib/header/empty-profile.js ***!
-  \*************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.emptyProfile = void 0;
-var emptyProfile = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z\" fill=\"#D8D8D8\" stroke=\"#8B8B8B\"/>\n    <mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"26\" height=\"26\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z\" fill=\"white\" stroke=\"white\"/>\n    </mask>\n    <g mask=\"url(#mask0)\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0468 10.4586C17.0468 14.4979 15.4281 16.9214 12.9999 16.9214C10.5718 16.9214 8.95298 14.4979 8.95298 10.4586C8.95298 6.41931 12.9999 6.41931 12.9999 6.41931C12.9999 6.41931 17.0468 6.41931 17.0468 10.4586ZM4.09668 23.3842C6.52483 17.7293 12.9999 17.7293 12.9999 17.7293C12.9999 17.7293 19.475 17.7293 21.9031 23.3842C21.9031 23.3842 17.8481 25 12.9999 25C8.15169 25 4.09668 23.3842 4.09668 23.3842Z\" fill=\"#8B8B8B\"/>\n    </g>\n</svg>";
-exports.emptyProfile = emptyProfile;
-//# sourceMappingURL=empty-profile.js.map
-
-/***/ }),
-
-/***/ "./lib/header/headerHelpers.js":
-/*!*************************************!*\
-  !*** ./lib/header/headerHelpers.js ***!
-  \*************************************/
+/***/ "./lib/footer/index.js":
+/*!*****************************!*\
+  !*** ./lib/footer/index.js ***!
+  \*****************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -8500,95 +8480,192 @@ var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/inte
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addStyleClassToElement = addStyleClassToElement;
-exports.getPod = getPod;
-exports.throttle = throttle;
+exports.createControllerInfoBlock = createControllerInfoBlock;
+exports.initFooter = initFooter;
+exports.rebuildFooter = rebuildFooter;
 
-var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
 
-var _rdflib = __webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js");
+var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 
-var _styleMap = __webpack_require__(/*! ./styleMap */ "./lib/header/styleMap.js");
+var _authn = __webpack_require__(/*! ../authn/authn */ "./lib/authn/authn.js");
 
-var _jss = __webpack_require__(/*! ../jss */ "./lib/jss/index.js");
+var _headerFooterHelpers = __webpack_require__(/*! ../utils/headerFooterHelpers */ "./lib/utils/headerFooterHelpers.js");
 
 /*
-    Copied from mashlib/src/global/metadata.ts
+    This file was copied from mashlib/src/global/footer.ts file. It is modified to
+    work in solid-ui by adjusting where imported functions are found.
  */
+var DEFAULT_SOLID_PROJECT_URL = 'https://solidproject.org';
+var DEFAULT_SOLID_PROJECT_NAME = 'solidproject.org';
+/*
+  FooterOptions allow for customizing the link and name of the link part of the footer.
+  */
 
 /**
- * @internal
+ * Initialize footer component, the footer object returned depends on whether the user is authenticated.
+ * @param store the data store
+ * @returns the footer
  */
-function getStyle(styleClass) {
-  return _styleMap.styleMap[styleClass];
+function initFooter(_x, _x2) {
+  return _initFooter.apply(this, arguments);
 }
 /**
  * @ignore exporting this only for the unit test
  */
 
 
-function addStyleClassToElement(element, styleClasses) {
-  styleClasses.forEach(function (styleClass) {
-    var style = getStyle(styleClass);
+function _initFooter() {
+  _initFooter = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, options) {
+    var footer, pod, podOwner;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            footer = document.getElementById('PageFooter');
 
-    var _getClasses = (0, _jss.getClasses)(document.head, (0, _defineProperty2["default"])({}, styleClass, style)),
-        classes = _getClasses.classes;
+            if (footer) {
+              _context2.next = 3;
+              break;
+            }
 
-    element.classList.add(classes[styleClass]);
-  });
+            return _context2.abrupt("return");
+
+          case 3:
+            pod = (0, _headerFooterHelpers.getPod)();
+            _context2.next = 6;
+            return (0, _headerFooterHelpers.getPodOwner)(pod, store);
+
+          case 6:
+            podOwner = _context2.sent;
+            rebuildFooter(footer, store, pod, podOwner, options)();
+
+            _authn.authSession.onLogin(rebuildFooter(footer, store, pod, podOwner, options));
+
+            _authn.authSession.onLogout(rebuildFooter(footer, store, pod, podOwner, options));
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _initFooter.apply(this, arguments);
 }
-/**
- * @ignore exporting this only for the unit test
- */
 
+function rebuildFooter(footer, store, pod, podOwner, options) {
+  return /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var user;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            user = (0, _authn.currentUser)();
+            footer.innerHTML = '';
+            _context.t0 = footer;
+            _context.next = 5;
+            return createControllerInfoBlock(store, user, pod, podOwner, options);
+
+          case 5:
+            _context.t1 = _context.sent;
 
-function getPod() {
-  // @@ TODO: This is given that mashlib runs on NSS - might need to change when we want it to run on other Pod servers
-  return (0, _rdflib.sym)(document.location.origin).site();
+            _context.t0.appendChild.call(_context.t0, _context.t1);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
 }
 /**
  * @ignore exporting this only for the unit test
  */
 
 
-function throttle(func, wait) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var context, args, result;
-  var timeout = null;
-  var previous = 0;
+function createControllerInfoBlock(store, user, pod, podOwner, options) {
+  var profileLinkContainer = document.createElement('div');
+
+  if (!pod || !podOwner || user && user.equals(podOwner)) {
+    return profileLinkContainer;
+  }
+
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileLinkContainer, ['footer-pod-info', 'footer'], 'footer');
+  var podLinkPre = document.createElement('span');
+  podLinkPre.innerText = "You're visiting ";
+  var podLink = document.createElement('a');
+  podLink.href = pod.uri;
+  podLink.innerText = 'the Pod';
+  var profileLinkPre = document.createElement('span');
+  profileLinkPre.innerText = ' controlled by ';
+  var profileLink = document.createElement('a');
+  profileLink.href = podOwner.uri;
+  profileLink.innerText = (0, _headerFooterHelpers.getName)(store, podOwner);
+  var solidProjectLinkPre = document.createElement('span');
+  solidProjectLinkPre.innerText = '. For more info, check out ';
+  var solidProjectLink = document.createElement('a');
+  solidProjectLink.href = options && options.solidProjectUrl ? options.solidProjectUrl : DEFAULT_SOLID_PROJECT_URL;
+  solidProjectLink.innerText = options && options.solidProjectName ? options.solidProjectName : DEFAULT_SOLID_PROJECT_NAME;
+  var solidProjectLinkPost = document.createElement('span');
+  solidProjectLinkPost.innerText = '.';
+  profileLinkContainer.appendChild(podLinkPre);
+  profileLinkContainer.appendChild(podLink);
+  profileLinkContainer.appendChild(profileLinkPre);
+  profileLinkContainer.appendChild(profileLink);
+  profileLinkContainer.appendChild(solidProjectLinkPre);
+  profileLinkContainer.appendChild(solidProjectLink);
+  profileLinkContainer.appendChild(solidProjectLinkPost);
+  return profileLinkContainer;
+}
+//# sourceMappingURL=index.js.map
 
-  var later = function later() {
-    previous = !options.leading ? 0 : Date.now();
-    timeout = null;
-    result = func.apply(context, args);
-    if (!timeout) context = args = null;
-  };
+/***/ }),
 
-  return function () {
-    var now = Date.now();
-    if (!previous && !options.leading) previous = now;
-    var remaining = wait - (now - previous); // @ts-ignore
+/***/ "./lib/footer/styleMap.js":
+/*!********************************!*\
+  !*** ./lib/footer/styleMap.js ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
 
-    context = this;
-    args = arguments;
+"use strict";
 
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
 
-      previous = now;
-      result = func.apply(context, args);
-      if (!timeout) context = args = null;
-    } else if (!timeout && options.trailing !== false) {
-      timeout = setTimeout(later, remaining);
-    }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleMap = void 0;
+var styleMap = {
+  footer: {
+    borderTop: 'solid 1px $divider-color',
+    fontSize: '0.9em',
+    padding: '0.5em 1.5em'
+  }
+};
+exports.styleMap = styleMap;
+//# sourceMappingURL=styleMap.js.map
 
-    return result;
-  };
-}
-//# sourceMappingURL=headerHelpers.js.map
+/***/ }),
+
+/***/ "./lib/header/empty-profile.js":
+/*!*************************************!*\
+  !*** ./lib/header/empty-profile.js ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyProfile = void 0;
+var emptyProfile = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\">\n    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z\" fill=\"#D8D8D8\" stroke=\"#8B8B8B\"/>\n    <mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"26\" height=\"26\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z\" fill=\"white\" stroke=\"white\"/>\n    </mask>\n    <g mask=\"url(#mask0)\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.0468 10.4586C17.0468 14.4979 15.4281 16.9214 12.9999 16.9214C10.5718 16.9214 8.95298 14.4979 8.95298 10.4586C8.95298 6.41931 12.9999 6.41931 12.9999 6.41931C12.9999 6.41931 17.0468 6.41931 17.0468 10.4586ZM4.09668 23.3842C6.52483 17.7293 12.9999 17.7293 12.9999 17.7293C12.9999 17.7293 19.475 17.7293 21.9031 23.3842C21.9031 23.3842 17.8481 25 12.9999 25C8.15169 25 4.09668 23.3842 4.09668 23.3842Z\" fill=\"#8B8B8B\"/>\n    </g>\n</svg>";
+exports.emptyProfile = emptyProfile;
+//# sourceMappingURL=empty-profile.js.map
 
 /***/ }),
 
@@ -8624,7 +8701,7 @@ var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime
 
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
 
-var _ = __webpack_require__(/*! .. */ "./lib/index.js");
+var _iconBase = __webpack_require__(/*! ../iconBase */ "./lib/iconBase.js");
 
 var _authn = __webpack_require__(/*! ../authn/authn */ "./lib/authn/authn.js");
 
@@ -8632,7 +8709,7 @@ var widgets = _interopRequireWildcard(__webpack_require__(/*! ../widgets */ "./l
 
 var _emptyProfile = __webpack_require__(/*! ./empty-profile */ "./lib/header/empty-profile.js");
 
-var _headerHelpers = __webpack_require__(/*! ./headerHelpers */ "./lib/header/headerHelpers.js");
+var _headerFooterHelpers = __webpack_require__(/*! ../utils/headerFooterHelpers */ "./lib/utils/headerFooterHelpers.js");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -8645,13 +8722,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     work in solid-ui by adjusting where imported functions are found.
  */
 
+/**
+ * menu icons
+*/
+var DEFAULT_HELP_MENU_ICON = _iconBase.icons.iconBase + 'noun_help.svg';
+var DEFAUL_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
+
 /**
  * Initialize header component, the header object returned depends on whether the user is authenticated.
  * @param store the data store
- * @param options allow the header to be customized with a personalized logo and a menu list of links or buttons.
+ * @param userMenuList a list of menu items when the user is logged in
+ * @param options allow the header to be customized with a personalized logo, help icon and a help menu list of links or buttons.
  * @returns a header for an authenticated user with menu items given or a login screen
  */
-function initHeader(_x, _x2) {
+function initHeader(_x, _x2, _x3) {
   return _initHeader.apply(this, arguments);
 }
 /**
@@ -8660,7 +8744,7 @@ function initHeader(_x, _x2) {
 
 
 function _initHeader() {
-  _initHeader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, options) {
+  _initHeader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, userMenuList, options) {
     var header, pod;
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
@@ -8676,12 +8760,12 @@ function _initHeader() {
             return _context2.abrupt("return");
 
           case 3:
-            pod = (0, _headerHelpers.getPod)();
-            rebuildHeader(header, store, pod, options)();
+            pod = (0, _headerFooterHelpers.getPod)();
+            rebuildHeader(header, store, pod, userMenuList, options)();
 
-            _authn.authSession.onLogout(rebuildHeader(header, store, pod, options));
+            _authn.authSession.onLogout(rebuildHeader(header, store, pod, userMenuList, options));
 
-            _authn.authSession.onLogin(rebuildHeader(header, store, pod, options));
+            _authn.authSession.onLogin(rebuildHeader(header, store, pod, userMenuList, options));
 
           case 7:
           case "end":
@@ -8693,7 +8777,7 @@ function _initHeader() {
   return _initHeader.apply(this, arguments);
 }
 
-function rebuildHeader(header, store, pod, options) {
+function rebuildHeader(header, store, pod, userMenuList, options) {
   return /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var user;
     return _regenerator["default"].wrap(function _callee$(_context) {
@@ -8704,7 +8788,7 @@ function rebuildHeader(header, store, pod, options) {
             header.innerHTML = '';
             _context.t0 = header;
             _context.next = 5;
-            return createBanner(store, pod, user, options);
+            return createBanner(store, pod, user, userMenuList, options);
 
           case 5:
             _context.t1 = _context.sent;
@@ -8724,7 +8808,7 @@ function rebuildHeader(header, store, pod, options) {
  */
 
 
-function createBanner(_x3, _x4, _x5, _x6) {
+function createBanner(_x4, _x5, _x6, _x7, _x8) {
   return _createBanner.apply(this, arguments);
 }
 /**
@@ -8733,22 +8817,22 @@ function createBanner(_x3, _x4, _x5, _x6) {
 
 
 function _createBanner() {
-  _createBanner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(store, pod, user, options) {
-    var podLink, image, userMenu, helpMenu, banner, leftSideOfHeader;
+  _createBanner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(store, pod, user, userMenuList, options) {
+    var podLink, image, userMenu, banner, leftSideOfHeader, helpMenu;
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             podLink = document.createElement('a');
             podLink.href = pod.uri;
-            (0, _headerHelpers.addStyleClassToElement)(podLink, ['header-banner__link']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(podLink, ['header-banner__link']);
             image = document.createElement('img');
 
             if (options) {
-              image.src = options.logo ? options.logo : 'https://solidproject.org/assets/img/solid-emblem.svg';
+              image.src = options.logo ? options.logo : DEFAUL_SOLID_ICON_URL;
             }
 
-            (0, _headerHelpers.addStyleClassToElement)(image, ['header-banner__icon']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(image, ['header-banner__icon']);
             podLink.appendChild(image);
 
             if (!user) {
@@ -8757,7 +8841,7 @@ function _createBanner() {
             }
 
             _context3.next = 10;
-            return createUserMenu(store, user, options);
+            return createUserMenu(store, user, userMenuList);
 
           case 10:
             _context3.t0 = _context3.sent;
@@ -8769,18 +8853,22 @@ function _createBanner() {
 
           case 14:
             userMenu = _context3.t0;
-            helpMenu = createHelpMenu();
             banner = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(banner, ['header-banner']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(banner, ['header-banner']);
             banner.appendChild(podLink);
             leftSideOfHeader = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
             leftSideOfHeader.appendChild(userMenu);
-            leftSideOfHeader.appendChild(helpMenu);
+
+            if (options && options.helpMenuList) {
+              helpMenu = createHelpMenu(options, options.helpMenuList);
+              leftSideOfHeader.appendChild(helpMenu);
+            }
+
             banner.appendChild(leftSideOfHeader);
             return _context3.abrupt("return", banner);
 
-          case 25:
+          case 24:
           case "end":
             return _context3.stop();
         }
@@ -8790,29 +8878,36 @@ function _createBanner() {
   return _createBanner.apply(this, arguments);
 }
 
-function createHelpMenu() {
+function createHelpMenu(options, helpMenuItems) {
+  if (!helpMenuItems) return;
   var helpMenuList = document.createElement('ul');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
-  helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('User guide', 'https://github.com/solid/userguide', '_blank')));
-  helpMenuList.appendChild(createUserMenuItem(createUserMenuLink('Report a problem', 'https://github.com/solid/solidos/issues', '_blank')));
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
+  helpMenuItems.forEach(function (menuItem) {
+    var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+    if (menuItemType === 'url') {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+    } else {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+    }
+  });
   var helpMenu = document.createElement('nav');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
   helpMenu.setAttribute('aria-hidden', 'true');
   helpMenu.appendChild(helpMenuList);
-  var helpIcon = _.icons.iconBase + 'noun_144.svg';
   var helpMenuContainer = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
   helpMenuContainer.appendChild(helpMenu);
   var helpMenuTrigger = document.createElement('button');
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
   helpMenuTrigger.type = 'button';
   var helpMenuIcon = document.createElement('img');
-  helpMenuIcon.src = helpIcon;
-  (0, _headerHelpers.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
+  helpMenuIcon.src = options && options.helpIcon ? options.helpIcon : _iconBase.icons.iconBase + DEFAULT_HELP_MENU_ICON;
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
   helpMenuContainer.appendChild(helpMenuTrigger);
   helpMenuTrigger.appendChild(helpMenuIcon);
-  var throttledMenuToggle = (0, _headerHelpers.throttle)(function (event) {
+  var throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
     return toggleMenu(event, helpMenuTrigger, helpMenu);
   }, 50);
   helpMenuTrigger.addEventListener('click', throttledMenuToggle);
@@ -8837,7 +8932,7 @@ function createHelpMenu() {
 
 function createLoginSignUpButtons() {
   var profileLoginButtonPre = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
   profileLoginButtonPre.appendChild((0, _authn.loginStatusBox)(document, null, {}));
   return profileLoginButtonPre;
 }
@@ -8848,7 +8943,7 @@ function createLoginSignUpButtons() {
 
 function createUserMenuButton(label, onClick) {
   var button = document.createElement('button');
-  (0, _headerHelpers.addStyleClassToElement)(button, ['header-user-menu__button']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(button, ['header-user-menu__button']);
   button.addEventListener('click', onClick);
   button.innerText = label;
   return button;
@@ -8860,7 +8955,7 @@ function createUserMenuButton(label, onClick) {
 
 function createUserMenuLink(label, href, target) {
   var link = document.createElement('a');
-  (0, _headerHelpers.addStyleClassToElement)(link, ['header-user-menu__link']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(link, ['header-user-menu__link']);
   link.href = href;
   link.innerText = label;
   if (target) link.target = target;
@@ -8871,7 +8966,7 @@ function createUserMenuLink(label, href, target) {
  */
 
 
-function createUserMenu(_x7, _x8, _x9) {
+function createUserMenu(_x9, _x10, _x11) {
   return _createUserMenu.apply(this, arguments);
 }
 /**
@@ -8880,7 +8975,7 @@ function createUserMenu(_x7, _x8, _x9) {
 
 
 function _createUserMenu() {
-  _createUserMenu = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(store, user, options) {
+  _createUserMenu = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(store, user, userMenuList) {
     var fetcher, loggedInMenuList, loggedInMenu, loggedInMenuTrigger, profileImg, loggedInMenuContainer, throttledMenuToggle, timer;
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
@@ -8898,32 +8993,26 @@ function _createUserMenu() {
 
           case 4:
             loggedInMenuList = document.createElement('ul');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
-            loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink('Show your profile', user.uri)));
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
 
-            if (options) {
-              if (options.menuList) {
-                options.menuList.forEach(function (menuItem) {
-                  var menuItemType = menuItem.url ? 'url' : 'onclick';
-
-                  if (menuItemType === 'url') {
-                    loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem[menuItemType])));
-                  } else {
-                    loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem[menuItemType])));
-                  }
-                });
-              }
+            if (userMenuList) {
+              userMenuList.forEach(function (menuItem) {
+                var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+                if (menuItemType === 'url') {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+                } else {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+                }
+              });
             }
 
-            loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton('Log out', function () {
-              return _authn.authSession.logout();
-            })));
             loggedInMenu = document.createElement('nav');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
             loggedInMenu.setAttribute('aria-hidden', 'true');
             loggedInMenu.appendChild(loggedInMenuList);
             loggedInMenuTrigger = document.createElement('button');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
             loggedInMenuTrigger.type = 'button';
             profileImg = getProfileImg(store, user);
 
@@ -8934,11 +9023,11 @@ function _createUserMenu() {
             }
 
             loggedInMenuContainer = document.createElement('div');
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
-            (0, _headerHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
             loggedInMenuContainer.appendChild(loggedInMenuTrigger);
             loggedInMenuContainer.appendChild(loggedInMenu);
-            throttledMenuToggle = (0, _headerHelpers.throttle)(function (event) {
+            throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
               return toggleMenu(event, loggedInMenuTrigger, loggedInMenu);
             }, 50);
             loggedInMenuTrigger.addEventListener('click', throttledMenuToggle);
@@ -8956,7 +9045,7 @@ function _createUserMenu() {
             });
             return _context4.abrupt("return", loggedInMenuContainer);
 
-          case 29:
+          case 27:
           case "end":
             return _context4.stop();
         }
@@ -8968,7 +9057,7 @@ function _createUserMenu() {
 
 function createUserMenuItem(child) {
   var menuProfileItem = document.createElement('li');
-  (0, _headerHelpers.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
   menuProfileItem.appendChild(child);
   return menuProfileItem;
 }
@@ -8991,7 +9080,7 @@ function getProfileImg(store, user) {
   }
 
   var profileImage = document.createElement('div');
-  (0, _headerHelpers.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
   profileImage.style.backgroundImage = "url(\"".concat(profileUrl, "\")");
   return profileImage;
 }
@@ -9157,11 +9246,7 @@ var styleMap = {
 
   },
   'header-banner__help-icon': {
-    backgroundSize: '55px 50px',
-    height: '50px !important',
-    // this is the icon size
-    width: '55px !important' // may just be 65px round($icon-size * 352 / 430);
-
+    width: '28px !important'
   }
 };
 exports.styleMap = styleMap;
@@ -9320,6 +9405,12 @@ Object.defineProperty(exports, "infiniteMessageArea", {
     return _infinite.infiniteMessageArea;
   }
 });
+Object.defineProperty(exports, "initFooter", {
+  enumerable: true,
+  get: function get() {
+    return _footer.initFooter;
+  }
+});
 Object.defineProperty(exports, "initHeader", {
   enumerable: true,
   get: function get() {
@@ -9436,6 +9527,8 @@ var _versionInfo = _interopRequireDefault(__webpack_require__(/*! ./versionInfo
 
 var _header = __webpack_require__(/*! ./header */ "./lib/header/index.js");
 
+var _footer = __webpack_require__(/*! ./footer */ "./lib/footer/index.js");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -9488,7 +9581,8 @@ if (typeof window !== 'undefined') {
     utils: utils,
     widgets: widgets,
     versionInfo: _versionInfo["default"],
-    initHeader: _header.initHeader
+    initHeader: _header.initHeader,
+    initFooter: _footer.initFooter
   }; // Simpler access by non-node scripts
 }
 //# sourceMappingURL=index.js.map
@@ -12439,19 +12533,19 @@ var formFieldNameBoxWidth = '8em'; // The fixed amount to get form fields to lin
 var style = {
   // styleModule
   checkboxStyle: 'colour: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
   formSelectSTyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputStyleUneditable: // Color difference only
-  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em; ',
+  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.2em;',
   textInputSize: 20,
   // Default text input size in characters roughly
   buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;',
   // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
-  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em',
+  smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',
   classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 0.2em; border: 0.1em solid green; padding: 0.2em; background-color: #efe;',
   // combine with buttonStyle
   confirmPopupStyle: 'padding: 0.7em; border-radius: 0.2em; border: 0.1em solid orange; background-color: white; box-shadow: 0.5em 0.9em #888;',
@@ -14626,6 +14720,206 @@ function isLight(x) {
 
 /***/ }),
 
+/***/ "./lib/utils/headerFooterHelpers.js":
+/*!******************************************!*\
+  !*** ./lib/utils/headerFooterHelpers.js ***!
+  \******************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addStyleClassToElement = addStyleClassToElement;
+exports.getName = getName;
+exports.getPod = getPod;
+exports.getPodOwner = getPodOwner;
+exports.throttle = throttle;
+
+var _regenerator = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"));
+
+var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js"));
+
+var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+
+var _rdflib = __webpack_require__(/*! rdflib */ "./node_modules/rdflib/esm/index.js");
+
+var _ = __webpack_require__(/*! .. */ "./lib/index.js");
+
+var _styleMap = __webpack_require__(/*! ../header/styleMap */ "./lib/header/styleMap.js");
+
+var _styleMap2 = __webpack_require__(/*! ../footer/styleMap */ "./lib/footer/styleMap.js");
+
+var _jss = __webpack_require__(/*! ../jss */ "./lib/jss/index.js");
+
+/*
+    Copied from mashlib/src/global/metadata.ts
+ */
+
+/**
+ * @internal
+ */
+function getStyle(styleClass, type) {
+  if (type && type === 'footer') {
+    return _styleMap2.styleMap[styleClass];
+  } else {
+    return _styleMap.styleMap[styleClass];
+  }
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function addStyleClassToElement(element, styleClasses, type) {
+  styleClasses.forEach(function (styleClass) {
+    var style = getStyle(styleClass, type);
+
+    var _getClasses = (0, _jss.getClasses)(document.head, (0, _defineProperty2["default"])({}, styleClass, style)),
+        classes = _getClasses.classes;
+
+    element.classList.add(classes[styleClass]);
+  });
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function getPod() {
+  // @@ TODO: This is given that mashlib runs on NSS - might need to change when we want it to run on other Pod servers
+  return (0, _rdflib.sym)(document.location.origin).site();
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function getPodOwner(_x, _x2) {
+  return _getPodOwner.apply(this, arguments);
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function _getPodOwner() {
+  _getPodOwner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(pod, store) {
+    var podOwner, storageIsListedInPodOwnersProfile;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            // @@ TODO: This is given the structure that NSS provides - might need to change for other Pod servers
+            podOwner = (0, _rdflib.sym)("".concat(pod.uri, "profile/card#me"));
+            _context.prev = 1;
+
+            if (!store.fetcher) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 5;
+            return store.fetcher.load(podOwner.doc());
+
+          case 5:
+            _context.next = 8;
+            break;
+
+          case 7:
+            throw new Error('There was a problem loading the Fetcher');
+
+          case 8:
+            _context.next = 13;
+            break;
+
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](1);
+            throw new Error('Did NOT find pod owners profile at ' + podOwner);
+
+          case 13:
+            if (!podOwner) {
+              _context.next = 17;
+              break;
+            }
+
+            storageIsListedInPodOwnersProfile = store.holds(podOwner, _.ns.space('storage'), pod, podOwner.doc());
+
+            if (storageIsListedInPodOwnersProfile) {
+              _context.next = 17;
+              break;
+            }
+
+            throw new Error("** Pod owner ".concat(podOwner, " does NOT list pod ").concat(pod, " as storage"));
+
+          case 17:
+            return _context.abrupt("return", podOwner);
+
+          case 18:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 10]]);
+  }));
+  return _getPodOwner.apply(this, arguments);
+}
+
+function getName(store, user) {
+  return store.anyValue(user, _.ns.vcard('fn'), null, user.doc()) || store.anyValue(user, _.ns.foaf('name'), null, user.doc()) || user.uri;
+}
+/**
+ * @ignore exporting this only for the unit test
+ */
+
+
+function throttle(func, wait) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+
+  var later = function later() {
+    previous = !options.leading ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+
+  return function () {
+    var now = Date.now();
+    if (!previous && !options.leading) previous = now;
+    var remaining = wait - (now - previous); // @ts-ignore
+
+    context = this;
+    args = arguments;
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+
+    return result;
+  };
+}
+//# sourceMappingURL=headerFooterHelpers.js.map
+
+/***/ }),
+
 /***/ "./lib/utils/index.js":
 /*!****************************!*\
   !*** ./lib/utils/index.js ***!
@@ -15422,12 +15716,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _default = {
-  buildTime: '2021-11-30T18:04:52Z',
-  commit: '3bba27e028a58b06553d0ecf1cfda06b6c109ca6',
+  buildTime: '2021-12-21T15:33:58Z',
+  commit: '47411c331464e4bc3e9b0defe5191bff497cac86',
   npmInfo: {
     'solid-ui': '2.4.12',
     npm: '6.14.15',
-    ares: '1.17.2',
+    ares: '1.18.1',
     brotli: '1.0.9',
     cldr: '39.0',
     icu: '69.1',
@@ -15435,12 +15729,12 @@ var _default = {
     modules: '83',
     napi: '8',
     nghttp2: '1.42.0',
-    node: '14.18.1',
+    node: '14.18.2',
     openssl: '1.1.1l',
     tz: '2021a',
     unicode: '13.0',
     uv: '1.42.0',
-    v8: '8.4.371.23-node.84',
+    v8: '8.4.371.23-node.85',
     zlib: '1.2.11'
   }
 };
@@ -19075,10 +19369,8 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
   var rhs = (0, _basic.renderNameValuePair)(dom, kb, box, form);
   var editable = kb.updater.editable(dataDoc.uri);
   var input = dom.createElement('button');
-  var colorCarrier = input; // Which element changes color to flag changed/saving/saved?
-
-  input.style = style.checkboxInputStyle; // colorCarrier.style = style.checkboxStyle
-
+  var colorCarrier = input;
+  input.style = style.checkboxInputStyle;
   rhs.appendChild(input);
 
   function fix(x) {
@@ -19138,7 +19430,7 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
   if (!editable) return box;
 
   var boxHandler = function boxHandler(_e) {
-    colorCarrier.style.color = '#bbb;'; // grey -- not saved yet
+    colorCarrier.style.color = '#bbb'; // grey -- not saved yet
 
     var toDelete = input.state === true ? ins : input.state === false ? del : [];
     input.newState = input.state === null ? true : input.state === true ? false : tristate ? null : true;
@@ -19155,11 +19447,11 @@ function buildCheckboxForm(dom, kb, lab, del, ins, form, dataDoc, tristate) {
           }
         }
 
-        colorCarrier.style.color = 'color: #black;';
-        colorCarrier.style.backgroundColor = '#fee;';
+        colorCarrier.style.color = '#000';
+        colorCarrier.style.backgroundColor = '#fee';
         box.appendChild((0, _error.errorMessageBlock)(dom, "Checkbox: Error updating dataDoc from ".concat(input.state, " to ").concat(input.newState, ":\n\n").concat(errorBody)));
       } else {
-        colorCarrier.style = 'color: #black;';
+        colorCarrier.style.color = '#000';
         input.state = input.newState;
         input.textContent = {
           "true": checkMarkCharacter,
@@ -21632,33 +21924,22 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
     return box.appendChild((0, _error.errorMessageBlock)(dom, 'Error: No property given for text field: ' + form));
   }
 
-  var rhs = renderNameValuePair(dom, kb, box, form);
-  /*
-  box.style.display = 'flex'
-  box.style.flexDirection = 'row'
-  const lhs = box.appendChild(dom.createElement('div'))
-  lhs.style.width = formFieldNameBoxWidth
-  const rhs = box.appendChild(dom.createElement('div'))
-  lhs.appendChild(fieldLabel(dom, property as NamedNode, form))
-  lhs.setAttribute('class', 'formFieldName')
-  lhs.setAttribute('style', formFieldNameBoxStyle)
-  rhs.setAttribute('class', 'formFieldValue')
-  */
-  // It can be cleaner to just remove empty fields if you can't edit them anyway
+  var rhs = renderNameValuePair(dom, kb, box, form); // It can be cleaner to just remove empty fields if you can't edit them anyway
 
   var suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc);
   var uri = (0, _fieldFunction.mostSpecificClassURI)(form);
   var params = _fieldParams.fieldParams[uri];
-  if (params === undefined) params = {}; // non-bottom field types can do this
-
-  var style = params.style || _style.textInputStyle; // box.appendChild(dom.createTextNode(' uri='+uri+', pattern='+ params.pattern))
+  if (params === undefined) params = {
+    style: ''
+  }; // non-bottom field types can do this
 
+  var paramStyle = params.style || '';
+  var style = _style.textInputStyle + paramStyle;
   var field = dom.createElement('input');
-  field.style = _style.textInputStyle; // Do we have to override length etc?
-
+  field.style = style;
   rhs.appendChild(field);
   field.setAttribute('type', params.type ? params.type : 'text');
-  var size = kb.anyJS(form, ns.ui('size')) || style.textInputSize || 20;
+  var size = kb.anyJS(form, ns.ui('size')) || _style.textInputSize || 20;
   field.setAttribute('size', size);
   var maxLength = kb.any(form, ns.ui('maxLength'));
   field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096');
@@ -21687,7 +21968,7 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
   if (!kb.updater.editable(doc.uri)) {
     field.readOnly = true // was: disabled. readOnly is better
     ;
-    field.style = _style.textInputStyleUneditable; // backgroundColor = textInputBackgroundColorUneditable
+    field.style = _style.textInputStyleUneditable + paramStyle; // backgroundColor = textInputBackgroundColorUneditable
 
     if (suppressEmptyUneditable && field.value === '') {
       box.style.display = 'none'; // clutter
@@ -21918,6 +22199,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])(_fieldParams, ns.ui('ColorField').uri, {
   size: 9,
   type: 'color',
+  style: 'height: 3em;',
+  // around 1.5em is padding
   dt: 'color',
   pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DateField').uri, {
@@ -21938,17 +22221,17 @@ var fieldParams = (_fieldParams = {}, (0, _defineProperty2["default"])(_fieldPar
   pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('IntegerField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'integer',
   pattern: /^\s*-?[0-9]+\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('DecimalField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'decimal',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('FloatField').uri, {
   size: 12,
-  style: 'text-align: right',
+  style: 'text-align: right;',
   dt: 'float',
   pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
 }), (0, _defineProperty2["default"])(_fieldParams, ns.ui('SingleLineTextField').uri, {}), (0, _defineProperty2["default"])(_fieldParams, ns.ui('NamedNodeURIField').uri, {