@ably/ui 7.10.0-dev.e980a00 → 8.0.0-dev.27cfcb9

package/core/MeganavSearchPanel.jsx

@@ -161,29 +161,29 @@ var MeganavSearchSuggestions = function MeganavSearchSuggestions(_ref) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-text-overline2 text-cool-black py-12"
   }, "Popular pages"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex justify-between items-center overflow-x-scroll md:overflow-auto"
+    className: "flex justify-between items-center overflow-hidden"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "flex"
+    className: "flex transition-transform"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 pr-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/how-ably-works"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "How does Ably work?")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 px-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/quick-start-guide"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Quickstart guide")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 px-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/core-features/pubsub"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Publish/Subscribe Messaging")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 pl-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/platform"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Platform"))), displaySupportLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     url: absUrl("/support"),
     textSize: "text-p2"
@@ -430,10 +430,11 @@ var MeganavSearchPanel = function MeganavSearchPanel(_ref) {
     name: "q",
     className: "ui-input pl-48 h-48",
     placeholder: "Search",
+    autoComplete: "off",
     "data-id": "meganav-search-input"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchAutocomplete_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "submit",
-    className: "ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32"
+    className: "ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"
   }, "Search")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "col-span-12"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchSuggestions_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {

package/core/MeganavSearchSuggestions/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavSearchSuggestions=o())}(this,(function(){return{}.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.MeganavSearchSuggestions=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,n)=>{n.d(t,{A:()=>r});var r=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{n.d(r,{default:()=>s});var e=n(9581),t=function(e){return new DOMMatrix(window.getComputedStyle(e).transform).e},o=function(e,t){return e.style.transform="translateX(".concat(t,"px)")},i=function(e,t){return e>=t},u=function(e,t,n,r){return Math.abs(e-n+r)>t},a=function(e,t){var n;return(null===(n=e.changedTouches[0])||void 0===n?void 0:n.clientX)-t},c=function(e){return Math.abs(e)<5};const s=function(){var n,r=(0,e.A)("meganav-mobile-search-input"),s=(0,e.A)("meganav-mobile-search-suggestions"),d=s.querySelector("ul"),l=d.querySelectorAll("li"),v=Array.from(l).map((function(e){return e.getBoundingClientRect().width})).reduce((function(e,t){return e+t}),0),f=function(e){var t;n=null===(t=e.touches[0])||void 0===t?void 0:t.clientX},h=function(e){var r=a(e,n);c(r)||(r>0?function(e,n){var r=t(d),u=Math.round(r+e);i(u,24)||o(d,u)}(r):function(e,n){var r=d.getBoundingClientRect().width,i=t(d),a=Math.round(i+e);u(a,v,r,96)||o(d,a)}(r))},m=function(e){var r=a(e,n);c(r)||(r>0?function(e,n){var r=t(d),u=Math.round(r+e);i(u,24)&&(u=0),o(d,u)}(r):function(e,n){var r=d.getBoundingClientRect().width,i=t(d),a=Math.round(i+e);u(a,v,r,48)&&(a=-(v-r+48)),o(d,a)}(r))},p=function(){s.classList.add("max-h-96")},y=function(e){e.relatedTarget!==s.querySelectorAll("a")[0]&&s.classList.remove("max-h-96")};return r.addEventListener("focus",p),r.addEventListener("blur",y),s.addEventListener("touchstart",f),s.addEventListener("touchmove",h),s.addEventListener("touchend",m),{teardown:function(){r.removeEventListener("focus",p),r.removeEventListener("blur",y),s.removeEventListener("touchstart",f),s.removeEventListener("touchmove",h),s.removeEventListener("touchend",m)},clear:function(){s.classList.remove("max-h-96"),d.style.transform="translateX(0px)"}}}})(),r.default})()}));

package/core/MeganavSearchSuggestions.jsx

@@ -324,29 +324,29 @@ var MeganavSearchSuggestions = function MeganavSearchSuggestions(_ref) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-text-overline2 text-cool-black py-12"
   }, "Popular pages"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex justify-between items-center overflow-x-scroll md:overflow-auto"
+    className: "flex justify-between items-center overflow-hidden"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "flex"
+    className: "flex transition-transform"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 pr-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/how-ably-works"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "How does Ably work?")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 px-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/quick-start-guide"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Quickstart guide")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 px-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/docs/core-features/pubsub"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Publish/Subscribe Messaging")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "py-12 pl-8 flex-shrink-0"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/platform"),
-    className: "ui-text-p2"
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
   }, "Platform"))), displaySupportLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     url: absUrl("/support"),
     textSize: "text-p2"

package/core/fonts/source-code-pro.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
+}

package/core/styles.css

@@ -15,9 +15,10 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #80b9f2;
+    --color-gui-focus: #0073e6;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-viewed: #4887c2;
+    --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -157,7 +158,7 @@
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
@@ -345,17 +346,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -461,24 +462,18 @@
     @apply list-square;
   }
 
-  /* visited needs to come before :hover et all else it overrides them */
-  .ui-link:visited {
-    @apply text-gui-viewed;
+  .ui-link {
+    @apply visited:text-gui-visited;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus;
+    @apply underline;
   }
 
-  .ui-link {
-    @apply hover:text-active-orange active:text-red-orange;
-    -webkit-text-decoration-color: var(--color-active-orange);
-            text-decoration-color: var(--color-active-orange);
-    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
-    -webkit-text-decoration-line: underline;
-            text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
-  }
-
-  .ui-link:focus {
-    @apply focus:text-white focus:bg-active-orange focus:outline-none;
-    text-decoration: none;
+  .ui-link-neutral {
+    @apply visited:text-dark-grey;
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply underline;
   }
 }
 @layer components {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "7.10.0-dev.e980a00",
+  "version": "8.0.0-dev.27cfcb9",
   "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",
@@ -65,7 +65,7 @@
     "release": "./scripts/release.sh"
   },
   "dependencies": {
-    "addsearch-js-client": "^0.6.7",
+    "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
     "deepmerge": "^4.2.2",
     "dompurify": "^2.2.9",

package/src/core/Code/component.css

@@ -1,6 +1,4 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
-}
+@import "../fonts/source-code-pro.css";
 
 @layer components {
   .hljs {

package/src/core/Meganav/component.js

@@ -18,6 +18,7 @@ import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/compon
 import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
 import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
 import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {
@@ -112,11 +113,14 @@ const documentScroll = (themeName) => {
   };
 };
 
-export default function Meganav({ themeName } = { themeName: null }) {
+export default function Meganav(
+  { themeName, addSearchApiKey } = { themeName: null }
+) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();
   const panelCloseControls = MobilePanelCloseClick();
-  const search = MeganavSearchAutocomplete();
+  const search = MeganavSearchAutocomplete(addSearchApiKey);
+  const searchSuggestions = MeganavSearchSuggestions();
 
   const mobileDropdownControl = MeganavControlMobileDropdown({
     clearPanels: () =>
@@ -126,6 +130,7 @@ export default function Meganav({ themeName } = { themeName: null }) {
   const closeAll = () =>
     [
       mobileDropdownControl,
+      searchSuggestions,
       ...panelOpenControls,
       ...panelCloseControls,
       ...controls,
@@ -137,6 +142,7 @@ export default function Meganav({ themeName } = { themeName: null }) {
     documentClick(closeAll),
     windowOnBlur(closeAll),
     mobileDropdownControl,
+    searchSuggestions,
     ...controls,
     ...panelOpenControls,
     ...panelCloseControls,

package/src/core/Meganav/component.jsx

@@ -64,7 +64,7 @@ const panels = {
   MeganavContentDevelopers: MeganavContentDevelopers,
 };
 
-export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase }) {
+export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
   const [sessionState, setSessionState] = useState(null);
 
   useEffect(() => {
@@ -74,7 +74,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
   }, []);
 
   useEffect(() => {
-    const teardown = MeganavScripts({ themeName });
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
     return () => teardown();
   }, [sessionState]);
 
@@ -119,4 +119,5 @@ Meganav.propTypes = {
   }),
   loginLink: T.string,
   urlBase: T.string,
+  addSearchApiKey: T.string,
 };

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

@@ -14,41 +14,47 @@
   </div>
 
   <div>
-    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-features">Our features</h3>
-    <ul aria-labelledby="meganav-platform-panel-list-our-features">
+    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
+    <ul aria-labelledby="meganav-platform-panel-list-examples">
       <li>
-        <%= link_to abs_url("/pub-sub-messaging"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Publish/subscribe messaging</p>
-          <p class="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
+        <%= link_to abs_url("/topic/avatar-stack"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Avatar Stack</p>
+          <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Push notifications</p>
-          <p class="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
+        <%= link_to abs_url("/topic/emoji-reactions"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Emoji Reactions</p>
+          <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Third-party integrations</p>
-          <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
+        <%= link_to abs_url("/topic/activity-feed"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Activity Feed</p>
+          <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
-          <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
+        <%= link_to abs_url("/topic/live-charts"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Live Charts</p>
+          <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Streaming data sources</p>
-          <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
+        <%= link_to abs_url("/topic/live-cursors"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Live Cursors</p>
+          <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to abs_url("/topic/typing-indicator"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Typing Indicator</p>
+          <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
         <% end %>
       </li>
     </ul>
 
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore all platform features<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/topics/live-examples"))) do %>Explore all live examples<% end %>
   </div>
 
   <div>

package/src/core/MeganavContentPlatform/component.jsx

@@ -19,43 +19,48 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
     </div>
 
     <div>
-      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
-        Our features
+      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
+        Examples
       </h3>
-      <ul aria-labelledby="meganav-platform-panel-list-our-features">
+      <ul aria-labelledby="meganav-platform-panel-list-examples">
         <li>
-          <a href={absUrl("/pub-sub-messaging")} className="group ui-meganav-media">
-            <p className="ui-meganav-media-heading">Publish/subscribe messaging</p>
-            <p className="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
+          <a href={absUrl("/topic/avatar-stack")} className="group ui-meganav-media">
+            <p className="ui-meganav-media-heading">Avatar Stack</p>
+            <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/push-notifications")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Push notifications</p>
-            <p className="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
+          <a href={absUrl("/topic/emoji-reactions")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Emoji Reactions</p>
+            <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/integrations")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Third-party integrations</p>
-            <p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
+          <a href={absUrl("/topic/activity-feed")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Activity Feed</p>
+            <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/protocols")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Multi-protocol messaging</p>
-            <p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
+          <a href={absUrl("/topic/live-charts")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Live Charts</p>
+            <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/hub")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Streaming data sources</p>
-            <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
+          <a href={absUrl("/topic/live-cursors")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Live Cursors</p>
+            <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
+          </a>
+        </li>
+        <li>
+          <a href={absUrl("/topic/typing-indicator")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Typing Indicator</p>
+            <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
           </a>
         </li>
       </ul>
-
-      <FeaturedLink url={absUrl("/platform")}>Explore all platform features</FeaturedLink>
+      <FeaturedLink url={absUrl("/topics/live-examples")}>Explore all live examples</FeaturedLink>
     </div>
 
     <div>

package/src/core/MeganavControlMobileDropdown/component.js

@@ -7,8 +7,6 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
   const dropdown = queryId("meganav-mobile-dropdown");
   const menuIcon = queryId("meganav-control-mobile-dropdown-menu");
   const closeIcon = queryId("meganav-control-mobile-dropdown-close");
-  const meganavSearchSuggestionsToggle = queryId("meganav-mobile-search-input");
-  const meganavSearchSuggestions = queryId("meganav-mobile-search-suggestions");
 
   const clickHandler = () => {
     const ariaExpanded = control.getAttribute("aria-expanded");
@@ -28,40 +26,12 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
     closeIcon.classList.toggle("hidden");
   };
 
-  const focusSuggestionsHandler = () => {
-    meganavSearchSuggestions.classList.add("max-h-96");
-  };
-  const blurSuggestionsHandler = (event) => {
-    if (
-      event.relatedTarget === meganavSearchSuggestions.querySelectorAll("a")[0]
-    ) {
-      return;
-    }
-    meganavSearchSuggestions.classList.remove("max-h-96");
-  };
-
   control.addEventListener("click", clickHandler);
-  meganavSearchSuggestionsToggle.addEventListener(
-    "focus",
-    focusSuggestionsHandler
-  );
-  meganavSearchSuggestionsToggle.addEventListener(
-    "blur",
-    blurSuggestionsHandler
-  );
 
   return {
     teardown: () => {
       control.removeEventListener("click", clickHandler);
       scrollLock.enablePageScroll();
-      meganavSearchSuggestionsToggle.removeEventListener(
-        "focus",
-        focusSuggestionsHandler
-      );
-      meganavSearchSuggestionsToggle.removeEventListener(
-        "blur",
-        blurSuggestionsHandler
-      );
     },
     clear: () => {
       dropdown.classList.replace("visible", "invisible");
@@ -69,7 +39,6 @@ const MeganavControlMobileDropdown = ({ clearPanels }) => {
       menuIcon.classList.remove("hidden");
       closeIcon.classList.add("hidden");
       scrollLock.enablePageScroll();
-      meganavSearchSuggestions.classList.remove("max-h-96");
     },
   };
 };

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

@@ -28,6 +28,7 @@
               class="ui-input px-48 h-48"
               style={{ maxWidth: "none" }}
               placeholder="Search"
+              autocomplete="off"
               data-id="meganav-mobile-search-input"
             />
 

package/src/core/MeganavItemsMobile/component.jsx

@@ -53,6 +53,7 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
                   className="ui-input px-48 h-48"
                   style={{ maxWidth: "none" }}
                   placeholder="Search"
+                  autoComplete="off"
                   data-id="meganav-mobile-search-input"
                 />
 

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

@@ -43,10 +43,10 @@
 
   <li>
     <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
-  <li>
+  </li>
 
   <% if account? %>
-    <li class="ml-16">
+    <li>
       <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>
     </li>
   <% end %>

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

@@ -2,12 +2,12 @@
   type="button"
   data-id="meganav-control"
   data-control="search"
-  class="h-64 w-24 px-24 pr-48 py-20"
+  class="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
   aria-expanded="false"
   aria-controls="panel-search"
   aria-label="Show Search Panel"
 >
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "hover:text-gui-hover")) %>
+  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "group-hover:text-gui-hover group-focus:text-gui-focus")) %>
 </button>
 
 <div class="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">

package/src/core/MeganavSearch/component.jsx

@@ -11,12 +11,12 @@ const MeganavSearch = ({ absUrl }) => {
         type="button"
         data-id="meganav-control"
         data-control="search"
-        className="h-64 w-24 px-24 pr-48 py-20"
+        className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
         aria-expanded="false"
         aria-controls="panel-search"
         aria-label={`Show Search Panel`}
       >
-        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="hover:text-gui-hover" />
+        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus" />
       </button>
 
       <div className="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">

package/src/core/MeganavSearchAutocomplete/component.js

@@ -18,8 +18,8 @@ const init = ({ input, container, listContainer, clear, client }) => {
     }
   };
 
-  const markQueryInSuggestion = (suggestion, query) => {
-    return suggestion.value.replace(
+  const markQueryInSuggestion = (suggestionValue, query) => {
+    return suggestionValue.replace(
       query.toLowerCase(),
       `<span class="font-light">${query}</span>`
     );
@@ -47,9 +47,16 @@ const init = ({ input, container, listContainer, clear, client }) => {
 
   const renderResults =
     (query) =>
-    (results = { suggestions: [] }) => {
+    (results = {}) => {
       toggleClearBtn(query);
 
+      // Prevent invalid access error when key is invalid
+      if (!Array.isArray(results.suggestions)) {
+        clearResults();
+        return;
+      }
+
+      // Prevent key error from invalid key
       if (results.suggestions.length === 0) {
         clearResults();
         return;
@@ -58,6 +65,7 @@ const init = ({ input, container, listContainer, clear, client }) => {
       const items = results.suggestions.map((suggestion, index) => {
         const li = document.createElement("li");
         const button = document.createElement("button");
+        button.type = "button";
 
         button.classList.add(
           "ui-text-menu2",
@@ -71,25 +79,25 @@ const init = ({ input, container, listContainer, clear, client }) => {
           "hover:bg-light-grey"
         );
 
-        button.innerHTML = markQueryInSuggestion(suggestion, query);
+        button.innerHTML = markQueryInSuggestion(suggestion.value, query);
 
         button.dataset.suggestionIndex = index;
 
         button.addEventListener("click", () => {
-          navigateToUrl(suggestion);
+          navigateToUrl(suggestion.value);
         });
 
         button.addEventListener("keydown", (e) => {
           const key = e.key;
 
           if (key === "ArrowDown") {
-            focusNext();
+            focusNext(index);
           } else if (key === "ArrowUp" && index - 1 < 0) {
             input.focus();
           } else if (key === "ArrowUp" && index - 1 >= 0) {
-            focusPrevious();
+            focusPrevious(index);
           } else if (key === "Enter" || key === "Space") {
-            navigateToUrl(suggestion);
+            navigateToUrl(suggestion.value);
           }
         });
 
@@ -142,12 +150,12 @@ const init = ({ input, container, listContainer, clear, client }) => {
   };
 };
 
-export default () => {
-  const apiKey = document.body.dataset.addSearchApiKey;
+export default (apiKey) => {
   if (!apiKey) {
     console.log(`No AddSearch API key provided, skipping search suggestions.`);
     return [];
   }
+
   const client = new AddSearchClient(apiKey);
 
   return [