@ably/ui 8.2.1-dev.ade9a3d → 8.2.1-dev.db8f789

package/core/MeganavControl/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>o});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>o});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const o=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),o=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),a=function(e){return"search"===e.dataset.control},i=function(e,n,a){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(o,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var i,c=["invisible","visible"];(i=n.classList).replace.apply(i,function(e){if(Array.isArray(e))return t(e)}(u=a?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",a),e.dataset.hover=a}var u};return r.map((function(t){var o,c,u=t.parentNode,s=document.querySelector("#".concat(t.getAttribute("aria-controls"))),l=function(t,o){return function(){r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==o&&e.classList.replace("visible","invisible")}));var i=t.getAttribute("aria-expanded"),c="true"===t.dataset.hover;if("true"!==i||c?(t.setAttribute("aria-expanded",!0),o.classList.replace("invisible","visible")):(t.setAttribute("aria-expanded",!1),o.classList.replace("visible","invisible")),c&&(t.dataset.hover=!1),a(t)){var u=(0,e.A)("meganav-search-input",o);if(!u)return;u.focus()}else t.focus()}}(t,s);return t.addEventListener("click",l),a(t)||(o=function(e,t){return function(){return i(e,t,!0)}}(t,s),c=function(e,t){return function(){return i(e,t,!1)}}(t,s),u.addEventListener("mouseenter",o),u.addEventListener("mouseleave",c)),[{teardown:function(){o&&c&&(u.removeEventListener("mouseenter",o),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",l)},clear:function(){t.setAttribute("aria-expanded",!1),s.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

package/core/MeganavControl.jsx

@@ -270,6 +270,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -279,7 +280,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -290,6 +291,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)

package/core/MeganavItemsDesktop.jsx

@@ -82,6 +82,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -91,7 +92,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -102,6 +103,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -334,18 +336,20 @@ var MeganavDesktopItems = function MeganavDesktopItems(_ref) {
     "data-id": "meganav-items-desktop"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_2__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-item",
       key: panel.id
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
       theme: theme,
-      ariaControls: panel.id
+      ariaControls: panel.id,
+      ariaLabel: panel.label
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "hidden lg:inline"
     }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "lg:hidden"
     }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      className: "ui-meganav-panel invisible ".concat(bgCSS),
       id: panel.id,
       "data-id": "meganav-panel"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {

package/core/MeganavItemsSignedIn.jsx

@@ -132,6 +132,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -141,7 +142,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -152,6 +153,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -644,6 +646,7 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
     className: "ui-meganav-item relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     ariaControls: "account-panel",
+    ariaLabel: "Account",
     theme: theme,
     additionalCSS: "mr-0"
   }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

package/core/sprites.svg

@@ -287,6 +287,15 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-close" viewBox="0 0 24 24"><title>sprite-icon-gui-close</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 12L22.7071 21.2929L21.2929 22.7071L12 13.4142L2.70711 22.7071L1.29289 21.2929L10.5858 12L1.29289 2.70712L2.70711 1.29291L12 10.5858L21.2929 1.29291L22.7071 2.70712L13.4142 12Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-copy" viewBox="0 0 16 16"><title>sprite-icon-gui-copy</title>
+<g clip-path="url(#clip0_222_232)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 0.835938C1.65382 0.835938 0.833008 1.65675 0.833008 2.66927V9.33594C0.833008 10.3485 1.65382 11.1693 2.66634 11.1693H3.33301C3.60915 11.1693 3.83301 10.9454 3.83301 10.6693C3.83301 10.3931 3.60915 10.1693 3.33301 10.1693H2.66634C2.2061 10.1693 1.83301 9.79618 1.83301 9.33594V2.66927C1.83301 2.20903 2.2061 1.83594 2.66634 1.83594H9.33301C9.79325 1.83594 10.1663 2.20903 10.1663 2.66927V3.33594C10.1663 3.61208 10.3902 3.83594 10.6663 3.83594C10.9425 3.83594 11.1663 3.61208 11.1663 3.33594V2.66927C11.1663 1.65675 10.3455 0.835938 9.33301 0.835938H2.66634ZM6.66634 4.83594C5.65382 4.83594 4.83301 5.65675 4.83301 6.66927V13.3359C4.83301 14.3485 5.65382 15.1693 6.66634 15.1693H13.333C14.3455 15.1693 15.1663 14.3485 15.1663 13.3359V6.66927C15.1663 5.65675 14.3455 4.83594 13.333 4.83594H6.66634ZM5.83301 6.66927C5.83301 6.20903 6.2061 5.83594 6.66634 5.83594H13.333C13.7932 5.83594 14.1663 6.20903 14.1663 6.66927V13.3359C14.1663 13.7962 13.7932 14.1693 13.333 14.1693H6.66634C6.2061 14.1693 5.83301 13.7962 5.83301 13.3359V6.66927Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_222_232">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
 </symbol><symbol fill="none" id="sprite-icon-gui-cross-circled-fill" viewBox="0 0 24 24"><title>sprite-icon-gui-cross-circled-fill</title>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 12L17.7071 16.2928L16.2929 17.7071L12 13.4142L7.70711 17.7071L6.29289 16.2928L10.5858 12L6.29289 7.70706L7.70711 6.29285L12 10.5857L16.2929 6.29285L17.7071 7.70706L13.4142 12Z" fill="white"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.2.1-dev.ade9a3d",
+  "version": "8.2.1-dev.db8f789",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/Footer/component.html.erb

@@ -141,7 +141,7 @@
           <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-          <a href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7" target="_blank" rel="noopener" class="ui-footer-menu-row-link">Press & Media</a>
+         <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>

package/src/core/Footer/component.jsx

@@ -219,12 +219,7 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a
-                href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
-                rel="noopener noreferrer"
-                target="_blank"
-                className="ui-footer-menu-row-link"
-              >
+              <a href={absUrl("/press-center")} className="ui-footer-menu-row-link">
                 Press & Media
               </a>
             </li>

package/src/core/Meganav/component.css

@@ -46,6 +46,10 @@
     @apply bg-white rounded-t-none;
   }
 
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
   .ui-meganav-link {
     @apply text-menu2 font-medium block;
     @apply mr-12 lg:mr-24 px-0 py-20;

package/src/core/MeganavBlogPostsList/component.html.erb

@@ -1,5 +1,5 @@
 <div class="hidden col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0" data-id="meganav-company-panel-blog-section">
   <h3 class="ui-meganav-overline" id="meganav-company-panel-recent-blog-posts">Blog</h3>
   <ul class="mb-8" aria-labelledby="meganav-company-panel-recent-blog-posts" data-id="meganav-company-panel-recent-blog-posts"></ul>
-  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"))) do %>More from our Blog<% end %>
+  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"), text_size: 'text-p3')) do %>More from our Blog<% end %>
 </div>

package/src/core/MeganavBlogPostsList/component.jsx

@@ -20,7 +20,9 @@ const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
         ))}
       </ul>
 
-      <FeaturedLink url={absUrl("/blog")}>More from our Blog</FeaturedLink>
+      <FeaturedLink url={absUrl("/blog")} textSize="text-p3">
+        More from our Blog
+      </FeaturedLink>
     </div>
   ) : null;
 

package/src/core/MeganavContentCompany/component.html.erb

@@ -1,6 +1,6 @@
-<div class="flex">
+<div class="flex max-w-screen-xl mx-auto">
   <div class="ui-meganav-content-spacer"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x">
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
     <div class="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
       <h3 class="ui-meganav-overline" id="meganav-company-panel-list-why-companies">Why companies choose Ably</h3>
       <ul aria-labelledby="meganav-company-panel-list-why-companies">
@@ -18,7 +18,7 @@
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-case-studies-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">Case studies</p>
-              <p class="ui-meganav-media-copy">Discover how customers are benefitting from Ably.</p>
+              <p class="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
             </div>
           <% end %>
         </li>
@@ -55,7 +55,7 @@
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/compare"), class: "ui-meganav-media-with-image group" do %>
+          <%= link_to abs_url("/about"), class: "ui-meganav-media-with-image group" do %>
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-about-ably-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">About Ably</p>
@@ -64,7 +64,7 @@
           <% end %>
         </li>
         <li>
-          <%= link_to abs_url("/aws"), class: "ui-meganav-media-with-image group" do %>
+          <%= link_to abs_url("/careers"), class: "ui-meganav-media-with-image group" do %>
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-careers-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">Careers</p>

package/src/core/MeganavContentCompany/component.jsx

@@ -12,9 +12,9 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
   const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, { recentBlogPosts: selectRecentBlogPosts });
 
   return (
-    <div className="flex">
+    <div className="flex max-w-screen-xl mx-auto">
       <div className="ui-meganav-content-spacer"></div>
-      <section className="grid grid-cols-12 ui-grid-gap-x">
+      <section className="grid grid-cols-12 ui-grid-gap-x w-full">
         <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
           <h3 className="ui-meganav-overline" id="meganav-company-panel-list-why-companies">
             Why companies choose Ably
@@ -34,7 +34,7 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
                 <Icon name="icon-display-case-studies-col" size="2.5rem" />
                 <div className="flex flex-col justify-center">
                   <p className="ui-meganav-media-heading">Case studies</p>
-                  <p className="ui-meganav-media-copy">Discover how customers are benefitting from Ably.</p>
+                  <p className="ui-meganav-media-copy">Discover how customers are benefiting from Ably.</p>
                 </div>
               </a>
             </li>

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -1,6 +1,6 @@
-<div class="flex">
+<div class="flex max-w-screen-xl mx-auto">
   <div class="ui-meganav-content-spacer"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x">
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
     <div class="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
       <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
         Explore
@@ -29,7 +29,7 @@
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-quickstart-guides-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">Quickstart guides</p>
-              <p class="ui-meganav-media-copy">Documentation to help you get up and running quickly.</p>
+              <p class="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
             </div>
           <% end %>
         </li>
@@ -93,9 +93,9 @@
           </a>
         </li>
         <li>
-          <a href={absUrl("/support")} class="group ui-meganav-media py-12">
+          <%= link_to abs_url("/support"), class: "group ui-meganav-media py-12" do %>
             <p class="ui-meganav-media-heading">Support & FAQs</p>
-          </a>
+          <% end %>
         </li>
       </ul>
     </div>

package/src/core/MeganavContentDevelopers/component.jsx

@@ -4,9 +4,9 @@ import T from "prop-types";
 import Icon from "../Icon/component.jsx";
 
 const MeganavContentDevelopers = ({ absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
       <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
         <h3 className="ui-meganav-overline uppercase" id="meganav-developers-panel-explore">
           Explore
@@ -35,7 +35,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Quickstart guides</p>
-                <p className="ui-meganav-media-copy">Documentation to help you get up and running quickly.</p>
+                <p className="ui-meganav-media-copy">Documentation to help you get started quickly.</p>
               </div>
             </a>
           </li>

package/src/core/MeganavContentPlatform/component.html.erb

@@ -1,23 +1,23 @@
-<div class="flex">
+<div class="flex max-w-screen-xl mx-auto">
   <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x">
-    <div class="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
       <div class="flex mb-20">
         <%= image_tag(ably_stack_path, alt: "Ably homepage") %>
         <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
       </div>
 
-      <p class="text-p2 font-medium text-cool-black mb-8">
+      <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
         Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
         realtime, and lets you focus on your code.
       </p>
 
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"), text_size: 'text-p2')) do %>Explore how it works<% end %>
     </div>
 
-    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
       <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Our Examples</h3>
-      <ul aria-labelledby="meganav-platform-panel-list-examples">
+      <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
         <li>
           <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">Avatar Stack</p>
@@ -56,12 +56,12 @@
         </li>
       </ul>
 
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"), text_size: 'text-p3')) do %>Explore all live examples<% end %>
     </div>
 
-    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
       <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">Our technology</h3>
-      <ul class="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
+      <ul class="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
         <li>
           <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %>
             <p class="ui-meganav-media-heading">Predictable performance</p>
@@ -94,7 +94,7 @@
         </li>
       </ul>
 
-      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore Four Pillars of Dependability<% end %>
+      <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"), text_size: 'text-p3')) do %>Explore Four Pillars of Dependability<% end %>
     </div>
   </section>
   <div class="ui-meganav-content-spacer"></div>

package/src/core/MeganavContentPlatform/component.jsx

@@ -4,27 +4,29 @@ import T from "prop-types";
 import FeaturedLink from "../FeaturedLink/component.jsx";
 
 const MeganavContentPlatform = ({ paths, absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
-      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <div className="flex mb-20">
           <img src={paths.ablyStack} alt="Ably homepage" />
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
-        <p className="text-p2 font-medium text-cool-black mb-8">
+        <p className="text-p2 font-medium text-cool-black mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
           realtime, and lets you focus on your code.
         </p>
 
-        <FeaturedLink url={absUrl("/platform")}>Explore how it works</FeaturedLink>
+        <FeaturedLink url={absUrl("/platform")} textSize="text-p2">
+          Explore how it works
+        </FeaturedLink>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
           Our Examples
         </h3>
-        <ul aria-labelledby="meganav-platform-panel-list-examples">
+        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-examples">
           <li>
             <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
               <p className="ui-meganav-media-heading">Avatar Stack</p>
@@ -62,14 +64,16 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
             </a>
           </li>
         </ul>
-        <FeaturedLink url={absUrl("/examples")}>Explore all live examples</FeaturedLink>
+        <FeaturedLink url={absUrl("/examples")} textSize="text-p3">
+          Explore all live examples
+        </FeaturedLink>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-technology">
           Our technology
         </h3>
-        <ul className="mb-8" aria-labelledby="meganav-platform-panel-list-our-technology">
+        <ul className="mb-16" aria-labelledby="meganav-platform-panel-list-our-technology">
           <li>
             <a href={absUrl("/four-pillars-of-dependability#performance")} className="ui-meganav-media group">
               <p className="ui-meganav-media-heading">Predictable performance</p>
@@ -102,7 +106,9 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
           </li>
         </ul>
 
-        <FeaturedLink url={absUrl("/four-pillars-of-dependability")}>Explore Four Pillars of Dependability</FeaturedLink>
+        <FeaturedLink url={absUrl("/four-pillars-of-dependability")} textSize="text-p3">
+          Explore Four Pillars of Dependability
+        </FeaturedLink>
       </div>
     </section>
     <div className="ui-meganav-content-spacer"></div>

package/src/core/MeganavContentUseCases/component.html.erb

@@ -1,7 +1,7 @@
-<div class="flex">
+<div class="flex max-w-screen-xl mx-auto">
   <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
-  <section class="grid grid-cols-12 ui-grid-gap-x">
-    <div class="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
+    <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
           Use cases
         </h3>
@@ -27,7 +27,7 @@
       </ul>
     </div>
 
-    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
         Industry
       </h3>
@@ -89,7 +89,7 @@
       </ul>
     </div>
 
-    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
       <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
         Solutions
       </h3>

package/src/core/MeganavContentUseCases/component.jsx

@@ -4,10 +4,10 @@ import T from "prop-types";
 import Icon from "../Icon/component.jsx";
 
 const MeganavContentUseCases = ({ absUrl }) => (
-  <div className="flex">
+  <div className="flex max-w-screen-xl mx-auto">
     <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x">
-      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
+      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
           Use cases
         </h3>
@@ -33,7 +33,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
         </ul>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
           Industry
         </h3>
@@ -95,7 +95,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
         </ul>
       </div>
 
-      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
         <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
           Solutions
         </h3>

package/src/core/MeganavControl/component.html.erb

@@ -1,6 +1,6 @@
 <%= button_tag(type: "button",
                class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
                data: { id: "meganav-control" },
-               aria: { expanded: false, controls: aria_controls, label: "Show #{content}" }) do -%>
+               aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
 <% end %>

package/src/core/MeganavControl/component.js

@@ -30,6 +30,7 @@ const MeganavControl = () => {
       const classes = ["invisible", "visible"];
       panel.classList.replace(...(open ? classes : classes.reverse()));
       control.setAttribute("aria-expanded", open);
+      control.dataset.hover = open;
     }
   };
 
@@ -50,7 +51,10 @@ const MeganavControl = () => {
 
     const ariaExpanded = control.getAttribute("aria-expanded");
 
-    if (ariaExpanded === "true") {
+    // Prevent closing of the panel if it was already opened by hovering
+    const openedByHover = control.dataset.hover === "true";
+
+    if (ariaExpanded === "true" && !openedByHover) {
       control.setAttribute("aria-expanded", false);
       panel.classList.replace("visible", "invisible");
     } else {
@@ -58,6 +62,10 @@ const MeganavControl = () => {
       panel.classList.replace("invisible", "visible");
     }
 
+    if (openedByHover) {
+      control.dataset.hover = false;
+    }
+
     if (isSearchControl(control)) {
       const searchInput = queryId("meganav-search-input", panel);
       if (!searchInput) return;

package/src/core/MeganavControl/component.jsx

@@ -3,14 +3,14 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const MeganavControl = ({ ariaControls, children, theme, additionalCSS }) => (
+const MeganavControl = ({ ariaControls, ariaLabel, children, theme, additionalCSS }) => (
   <button
     type="button"
     data-id="meganav-control"
     className={`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`}
     aria-expanded="false"
     aria-controls={ariaControls}
-    aria-label={`Show ${children}`}
+    aria-label={`Show ${ariaLabel} panel`}
   >
     {children}
     <Icon
@@ -24,6 +24,7 @@ const MeganavControl = ({ ariaControls, children, theme, additionalCSS }) => (
 
 MeganavControl.propTypes = {
   ariaControls: T.string,
+  ariaLabel: T.string,
   children: T.node,
   theme: T.object,
   additionalCSS: T.string,

package/src/core/MeganavControl/component.rb

@@ -2,10 +2,16 @@ module AblyUi
   module Core
     class MeganavControl < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
-      attr_reader :aria_controls, :additional_css
+      attr_reader :aria_controls, :aria_label, :additional_css
 
-      def initialize(aria_controls:, theme_name:, additional_css: '')
+      def initialize(
+        aria_controls:,
+        aria_label:,
+        theme_name:,
+        additional_css: ''
+      )
         @aria_controls = aria_controls
+        @aria_label = aria_label
         @additional_css = additional_css
         theme_setup(theme_name)
       end

package/src/core/MeganavItemsDesktop/component.html.erb

@@ -1,12 +1,12 @@
 <ul class="hidden md:flex" data-id="meganav-items-desktop">
   <% panels.each do |panel| %>
     <li class="ui-meganav-item">
-      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %>
+      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
         <span class="hidden lg:inline"><%= panel[:label] %></span>
         <span class="lg:hidden"><%= panel[:short_label] %></span>
       <% end %>
 
-      <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %>
+      <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
         <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
       <% end %>
     </li>