@ably/ui 8.2.1-dev.f35b482 → 8.4.0

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>

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>

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 w-full">
-    <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">
+    <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" style="max-width: 330px">
+      <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 w-full">
-      <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">
+      <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" style={{ maxWidth: "330px" }}>
+        <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 w-full">
-    <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">
+    <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 w-full">
-      <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">
+      <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>

package/src/core/MeganavItemsDesktop/component.jsx

@@ -8,15 +8,16 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
   <ul className="hidden md:flex" data-id="meganav-items-desktop">
     {MeganavData.panels.map((panel) => {
       const PanelComponent = panels[panel.component];
+      const bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
 
       return (
         <li className="ui-meganav-item" key={panel.id}>
-          <MeganavControl theme={theme} ariaControls={panel.id}>
+          <MeganavControl theme={theme} ariaControls={panel.id} ariaLabel={panel.label}>
             <span className="hidden lg:inline">{panel.label}</span>
             <span className="lg:hidden">{panel.shortLabel}</span>
           </MeganavControl>
 
-          <div className="ui-meganav-panel invisible" id={panel.id} data-id="meganav-panel">
+          <div className={`ui-meganav-panel invisible ${bgCSS}`} id={panel.id} data-id="meganav-panel">
             <PanelComponent paths={paths} absUrl={absUrl} />
           </div>
         </li>

package/src/core/MeganavItemsDesktop/component.rb

@@ -10,6 +10,14 @@ module AblyUi
         @theme_name = theme_name
         @url_base = url_base
       end
+
+      def bg_css(panel_id)
+        if %w[platform-panel use-cases-panel].include?(panel_id)
+          'ui-meganav-panel-split-bg'
+        else
+          ''
+        end
+      end
     end
   end
 end

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

@@ -1,6 +1,6 @@
 <ul class="hidden md:flex items-center">
   <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>
 

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -17,7 +17,7 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" theme={theme} additionalCSS="mr-0">
+        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
           {accountName}
         </MeganavControl>
 

package/src/core/icons/icon-gui-copy.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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>
+</svg>

package/core/MeganavContentWhyAbly/component.js

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;

package/core/MeganavContentWhyAbly.jsx

@@ -1,6 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	
-/******/ 	
-/******/ })()
-;