ably-ui 5.3.0 → 6.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 718a0800d440f3a8f8fb49abd18828b709d94ae9dfaaf975678d8c706359a846
-  data.tar.gz: 48db3d72f0507292251f566adb6cf14db1b3c16af3817ce9bc81627b9055ed02
+  metadata.gz: b6f484f182f3a8dc81de63dd443993b54596a53aecf6fa12222183ef4bbfaf66
+  data.tar.gz: 492ba25b285b7636a0cd749352751843a55c6e03ed11387b3880c9ab292651bd
 SHA512:
-  metadata.gz: a47fbb818a34f5a8c48cec78620e4a9ee352ff6951ca47421b243a39597751566890a26e269516c9e53b25e63f791b6e2f3ce026506d3c416c7f7576d7f260d9
-  data.tar.gz: 29d54acb4bc605c97f3e7a140e88b76d2f92f721c6c367b8d85a1114be0b6304788f0abaf94e1ebe1d08fa460ace5d37d84558d60fd5e39b36f41a4b746baca8
+  metadata.gz: 62bb73319cfb84b17afc6ec409135101700d2377cf467361c03cdff7cc591092ce92230b591bc92491ec08438f84b0c38e96ad58b8a3ace8bac8417efce6f477
+  data.tar.gz: 87c77813e5826c3245ac1c3fa8613740441a8badf5f15a7868b1fb3d7c03b8ec44bd3309c90db7133b1d1077f951aab1fca3811fc80e69d67fc2d54bf8292fa2

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (5.2.0.dev.a4067b7)
+    ably-ui (5.3.0.dev.3c981a4)
       view_component (~> 2.33.0)
 
 GEM

data/lib/ably_ui/core/code/code.html.erb

@@ -1,3 +1,3 @@
-<div class="hljs p-32 overflow-auto" data-id="code">
-  <pre lang="<%= @language %>"><code class="font-mono language-<%= @language %>"><%= @snippet %></code></pre>
-</div>
+<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
+  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
+<% end %>

data/lib/ably_ui/core/code/code.rb

@@ -2,9 +2,10 @@ module AblyUi
   module Core
     class Code < ViewComponent::Base
       include AblyUi::Core::Util
-      def initialize(language:, snippet:)
+      def initialize(language:, snippet:, text_size: 'ui-text-code1')
         @language = language
         @snippet = snippet.try(:strip)
+        @text_size = text_size
       end
     end
   end

data/lib/ably_ui/core/featured_link/component.css

@@ -1,7 +1,6 @@
 @layer components {
   .ui-featured-link {
-    max-width: calc(100% - 1.25rem);
-    @apply font-medium block;
+    @apply font-sans font-medium block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

data/lib/ably_ui/core/featured_link/featured_link.html.erb

@@ -1,4 +1,4 @@
-<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
+<%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
                                                    size: "calc(var(--featured-link-icon-size) * 1.25)",
                                                    color: @icon_color,

data/lib/ably_ui/core/featured_link/featured_link.rb

@@ -5,12 +5,14 @@ module AblyUi
         url:,
         text_size: 'text-menu3',
         icon_color: 'text-cool-black',
-        flush: false
+        flush: false,
+        additional_css: ''
       )
         @url = url
         @text_size = text_size
         @icon_color = icon_color
         @flush = flush
+        @additional_css = additional_css
       end
     end
   end

data/lib/ably_ui/core/sprites.svg

@@ -4,6 +4,8 @@
 <path d="M14.122 20.5734H0.5C0.5 22.4677 2.0222 24 3.90634 24H14.122C16.0027 24 17.5249 22.4643 17.5249 20.5734V6.49471C17.5249 6.42706 17.4708 6.36617 17.4032 6.36617H14.2438C14.1761 6.36617 14.122 6.42368 14.122 6.49133V20.57V20.5734ZM14.122 0C16.0027 0 17.5249 1.53573 17.5249 3.43002H3.90634V17.5087C3.90634 17.5763 3.84884 17.6338 3.78118 17.6338H0.625159C0.557505 17.6338 0.5 17.5763 0.5 17.5087V3.43002C0.5 1.53573 2.0222 0 3.90634 0H14.122Z"/>
 </symbol><symbol fill="none" id="sprite-icon-display-48hrs" viewBox="0 0 48 48"><title>sprite-icon-display-48hrs</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 24C4.75 13.3685 13.3685 4.75 24 4.75C24.4142 4.75 24.75 4.41421 24.75 4C24.75 3.58579 24.4142 3.25 24 3.25C12.5401 3.25 3.25 12.5401 3.25 24C3.25 35.4599 12.5401 44.75 24 44.75C35.4599 44.75 44.75 35.4599 44.75 24C44.75 23.5858 44.4142 23.25 44 23.25C43.5858 23.25 43.25 23.5858 43.25 24C43.25 34.6315 34.6315 43.25 24 43.25C13.3685 43.25 4.75 34.6315 4.75 24ZM33.0947 26.36C33.0947 28.682 31.1507 30.212 28.9727 30.212C26.7947 30.212 24.8507 28.682 24.8507 26.36C24.8507 24.884 25.6247 23.75 26.8487 23.138C25.8947 22.58 25.3007 21.626 25.3007 20.402C25.3007 18.35 27.0287 17 28.9727 17C30.9167 17 32.6447 18.35 32.6447 20.402C32.6447 21.626 32.0507 22.58 31.0787 23.138C32.3027 23.75 33.0947 24.884 33.0947 26.36ZM26.3087 26.36C26.3087 27.836 27.4787 28.862 28.9727 28.862C30.4667 28.862 31.6367 27.836 31.6367 26.36C31.6367 24.884 30.4667 23.84 28.9727 23.84C27.4787 23.84 26.3087 24.884 26.3087 26.36ZM26.7587 20.402C26.7587 21.626 27.7307 22.49 28.9727 22.49C30.2147 22.49 31.1867 21.626 31.1867 20.402C31.1867 19.196 30.2147 18.35 28.9727 18.35C27.7307 18.35 26.7587 19.196 26.7587 20.402ZM20.9773 27.008V29.996H19.5193V27.008H14.3533V25.838L19.3753 17.216H21.0493L15.9733 25.64H19.5193V22.778H20.9773V25.64H23.6773V27.008H20.9773Z" fill="#03020D"/>
+</symbol><symbol fill="none" id="sprite-icon-display-api-keys" viewBox="0 0 48 48"><title>sprite-icon-display-api-keys</title>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9975 1.25001L24 1.25C30.2947 1.25 34.8666 5.48148 36.9677 11.5435C39.9369 11.7908 42.5707 12.9175 44.499 14.8032C46.5441 16.8032 47.75 19.6133 47.75 23C47.75 26.4402 46.5053 29.2339 44.403 31.1816C42.3094 33.1213 39.4195 34.1729 36.2009 34.2498L36.183 34.25H36C34.2051 34.25 32.75 35.7051 32.75 37.5V41.5C32.75 41.538 32.7472 41.5754 32.7417 41.6119C33.7603 41.9279 34.5 42.8775 34.5 44C34.5 45.3807 33.3807 46.5 32 46.5C30.6193 46.5 29.5 45.3807 29.5 44C29.5 42.8775 30.2397 41.9279 31.2583 41.6119C31.2528 41.5754 31.25 41.538 31.25 41.5V37.5C31.25 34.8766 33.3766 32.75 36 32.75H36.1739C39.0895 32.6786 41.6049 31.7291 43.3835 30.0813C45.1552 28.44 46.25 26.0569 46.25 23C46.25 19.9872 45.1862 17.5733 43.4502 15.8757C41.7085 14.1724 39.2446 13.1467 36.3792 13.0077C36.0667 12.9926 35.7964 12.7851 35.7011 12.4871C33.8169 6.59587 29.6288 2.75057 24.0012 2.75C16.999 2.77388 13.4625 5.84333 11.6103 9.01639C9.90907 11.9307 9.59656 14.9789 9.47898 16.1258C9.46599 16.2525 9.45537 16.356 9.44553 16.4335C9.40186 16.7776 9.1279 17.0469 8.78309 17.0846C4.68819 17.5327 1.75 20.5577 1.75 25C1.75 27.3994 2.61404 29.3228 4.00756 30.6484C5.40559 31.9784 7.38279 32.75 9.678 32.75H12C14.6234 32.75 16.75 34.8766 16.75 37.5V41.5C16.75 41.538 16.7472 41.5754 16.7417 41.6119C17.7603 41.9279 18.5 42.8775 18.5 44C18.5 45.3807 17.3807 46.5 16 46.5C14.6193 46.5 13.5 45.3807 13.5 44C13.5 42.8775 14.2397 41.9279 15.2583 41.6119C15.2528 41.5754 15.25 41.538 15.25 41.5V37.5C15.25 35.7051 13.7949 34.25 12 34.25H9.678C7.04421 34.25 4.68241 33.3607 2.97369 31.7352C1.26046 30.1054 0.25 27.7788 0.25 25C0.25 19.9901 3.49532 16.4323 8.01664 15.6768C8.15873 14.3389 8.57927 11.2334 10.3148 8.2602C12.4266 4.6425 16.4461 1.27535 23.9975 1.25001ZM24 32.75C24.4142 32.75 24.75 33.0858 24.75 33.5V41.6145C25.7643 41.933 26.5 42.8806 26.5 44C26.5 45.3807 25.3807 46.5 24 46.5C22.6193 46.5 21.5 45.3807 21.5 44C21.5 42.8806 22.2357 41.933 23.25 41.6145V33.5C23.25 33.0858 23.5858 32.75 24 32.75ZM14.5 44C14.5 43.1716 15.1716 42.5 16 42.5C16.8284 42.5 17.5 43.1716 17.5 44C17.5 44.8284 16.8284 45.5 16 45.5C15.1716 45.5 14.5 44.8284 14.5 44ZM32 42.5C31.1716 42.5 30.5 43.1716 30.5 44C30.5 44.8284 31.1716 45.5 32 45.5C32.8284 45.5 33.5 44.8284 33.5 44C33.5 43.1716 32.8284 42.5 32 42.5ZM22.5 44C22.5 43.1716 23.1716 42.5 24 42.5C24.8284 42.5 25.5 43.1716 25.5 44C25.5 44.8284 24.8284 45.5 24 45.5C23.1716 45.5 22.5 44.8284 22.5 44ZM17 17.75C14.1005 17.75 11.75 20.1005 11.75 23C11.75 25.8995 14.1005 28.25 17 28.25C18.9423 28.25 20.6392 27.1956 21.5481 25.6245L21.6444 25.458L24.1049 23.968C24.9592 23.4507 26.0267 23.4372 26.8938 23.9326L28.3798 24.7818C28.7641 25.0014 29.2359 25.0014 29.6202 24.7818L31.1356 23.9158C31.9811 23.4327 33.0189 23.4327 33.8644 23.9158L34.9166 24.5171C35.4428 24.8178 36.109 24.6977 36.497 24.232L37.3904 23.16C37.4676 23.0673 37.4676 22.9327 37.3903 22.84L35.7237 20.84C35.6762 20.783 35.6058 20.75 35.5316 20.75H21.7647L21.5481 20.3755C20.6392 18.8044 18.9423 17.75 17 17.75ZM10.25 23C10.25 19.2721 13.2721 16.25 17 16.25C19.3413 16.25 21.4033 17.4424 22.6132 19.25H35.5316C36.051 19.25 36.5435 19.4807 36.876 19.8797L38.5427 21.8797C39.0835 22.5287 39.0835 23.4713 38.5427 24.1203L37.6494 25.1923C36.7957 26.2167 35.3301 26.481 34.1724 25.8195L33.1202 25.2182C32.7359 24.9986 32.2641 24.9986 31.8798 25.2182L30.3644 26.0842C29.5189 26.5673 28.4811 26.5673 27.6356 26.0842L26.1496 25.235C25.7555 25.0098 25.2702 25.0159 24.8819 25.2511L22.7451 26.5451C21.5568 28.467 19.4287 29.75 17 29.75C13.2721 29.75 10.25 26.7279 10.25 23ZM14.5 23C14.5 22.4477 14.9477 22 15.5 22C16.0523 22 16.5 22.4477 16.5 23C16.5 23.5523 16.0523 24 15.5 24C14.9477 24 14.5 23.5523 14.5 23ZM15.5 21C14.3954 21 13.5 21.8954 13.5 23C13.5 24.1046 14.3954 25 15.5 25C16.6046 25 17.5 24.1046 17.5 23C17.5 21.8954 16.6046 21 15.5 21Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-browser" viewBox="0 0 48 48"><title>sprite-icon-display-browser</title>
 	<g clip-path="url(#clip0)">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M7 8.75C6.30964 8.75 5.75 9.30964 5.75 10V34H17.0949C17.5138 34 17.9221 34.1315 18.2622 34.376L19.303 35.124C19.6431 35.3685 20.0514 35.5 20.4703 35.5H27.5297C27.9486 35.5 28.3569 35.3685 28.697 35.124L29.7378 34.376C30.0779 34.1315 30.4862 34 30.9051 34H42.25V10C42.25 9.30964 41.6904 8.75 41 8.75H7ZM4.25 10V34H1C0.447715 34 0 34.4477 0 35V38C0 38.5523 0.447714 39 0.999999 39H47C47.5523 39 48 38.5523 48 38V35C48 34.4477 47.5523 34 47 34H43.75V10C43.75 8.48122 42.5188 7.25 41 7.25H7C5.48122 7.25 4.25 8.48122 4.25 10ZM46.5 35.5H30.9051C30.8003 35.5 30.6983 35.5329 30.6132 35.594L29.5725 36.3421C28.9772 36.7699 28.2627 37 27.5297 37H20.4703C19.7373 37 19.0228 36.7699 18.4275 36.3421L17.3868 35.594C17.3017 35.5329 17.1997 35.5 17.0949 35.5H1.5V37.5H46.5V35.5ZM25 11C25 11.5523 24.5523 12 24 12C23.4477 12 23 11.5523 23 11C23 10.4477 23.4477 10 24 10C24.5523 10 25 10.4477 25 11Z" fill="#03020D"/>
@@ -17,6 +19,8 @@
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M16.75 4C17.1642 4 17.5 4.33579 17.5 4.75V6.25H31V4.75C31 4.33579 31.3358 4 31.75 4C32.1642 4 32.5 4.33579 32.5 4.75V6.25H40C42.6234 6.25 44.75 8.37665 44.75 11V37C44.75 39.6234 42.6234 41.75 40 41.75H8C5.37665 41.75 3.25 39.6234 3.25 37V11C3.25 8.37665 5.37665 6.25 8 6.25H16V4.75C16 4.33579 16.3358 4 16.75 4ZM31 7.75V9.25C31 9.66421 31.3358 10 31.75 10C32.1642 10 32.5 9.66421 32.5 9.25V7.75H40C41.7949 7.75 43.25 9.20507 43.25 11V17.25H4.75V11C4.75 9.20507 6.20507 7.75 8 7.75H16V9.25C16 9.66421 16.3358 10 16.75 10C17.1642 10 17.5 9.66421 17.5 9.25V7.75H31ZM4.75 18.75V37C4.75 38.7949 6.20508 40.25 8 40.25H40C41.7949 40.25 43.25 38.7949 43.25 37V18.75H4.75Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-call-mobile" viewBox="0 0 48 48"><title>sprite-icon-display-call-mobile</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.5H24C25.3807 3.5 26.5 4.61929 26.5 6V42C26.5 43.3807 25.3807 44.5 24 44.5H8C6.61929 44.5 5.5 43.3807 5.5 42V6C5.5 4.61929 6.61929 3.5 8 3.5ZM4 6C4 3.79086 5.79086 2 8 2H24C26.2091 2 28 3.79086 28 6V42C28 44.2091 26.2091 46 24 46H8C5.79086 46 4 44.2091 4 42V6ZM31 21.75C32.2426 21.75 33.25 22.7574 33.25 24C33.25 25.2426 32.2426 26.25 31 26.25V27.75C33.0711 27.75 34.75 26.0711 34.75 24C34.75 21.9289 33.0711 20.25 31 20.25V21.75ZM38.25 24C38.25 19.9959 35.0041 16.75 31 16.75V15.25C35.8325 15.25 39.75 19.1675 39.75 24C39.75 28.8325 35.8325 32.75 31 32.75V31.25C35.0041 31.25 38.25 28.0041 38.25 24ZM31 11.75C37.7655 11.75 43.25 17.2345 43.25 24C43.25 30.7655 37.7655 36.25 31 36.25V37.75C38.5939 37.75 44.75 31.5939 44.75 24C44.75 16.4061 38.5939 10.25 31 10.25V11.75ZM11 41C11 40.5858 11.3358 40.25 11.75 40.25H20.25C20.6642 40.25 21 40.5858 21 41C21 41.4142 20.6642 41.75 20.25 41.75H11.75C11.3358 41.75 11 41.4142 11 41ZM16 7C16.5523 7 17 6.55228 17 6C17 5.44772 16.5523 5 16 5C15.4477 5 15 5.44772 15 6C15 6.55228 15.4477 7 16 7Z" fill="#03020D"/>
+</symbol><symbol fill="none" id="sprite-icon-display-cloud-servers" viewBox="0 0 48 48"><title>sprite-icon-display-cloud-servers</title>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9305 1.25L22.928 1.25001C19.1663 1.26263 16.3209 2.16727 14.179 3.58598C12.0396 5.00308 10.6518 6.89994 9.74914 8.81907C8.26167 11.9815 8.06171 15.3211 7.9923 16.6843C3.42863 17.5061 0 21.7056 0 26.6695C0 32.2864 4.35972 36.25 9.678 36.25C10.0922 36.25 10.428 35.9142 10.428 35.5C10.428 35.0858 10.0922 34.75 9.678 34.75C5.13828 34.75 1.5 31.409 1.5 26.6695C1.5 22.1862 4.72837 18.5284 8.78309 18.0846C9.1279 18.0469 9.40186 17.7776 9.44553 17.4335C9.46441 17.2847 9.47723 17.0562 9.49373 16.7619C9.57379 15.3345 9.7405 12.3616 11.1065 9.45752C11.9185 7.73117 13.1435 6.0711 15.0074 4.83653C16.8686 3.60372 19.4169 2.762 22.9317 2.75C28.6269 2.75058 33.8404 6.66921 35.7011 12.4871C35.7964 12.7851 36.0667 12.9926 36.3792 13.0077C41.9981 13.2802 46.5 18.103 46.5 24.1293C46.5 30.207 41.9083 34.6131 36.1651 34.7502C35.751 34.7601 35.4233 35.1038 35.4332 35.5179C35.4431 35.932 35.7868 36.2597 36.2009 36.2498C42.7337 36.0938 48 31.0459 48 24.1293C48 17.5374 43.19 12.1193 36.9665 11.5457C34.791 5.41533 29.1621 1.25 22.9305 1.25ZM33 26.5H13C12.1716 26.5 11.5 27.1716 11.5 28V32C11.5 32.8284 12.1716 33.5 13 33.5H33C33.8284 33.5 34.5 32.8284 34.5 32V28C34.5 27.1716 33.8284 26.5 33 26.5ZM13 25C11.3431 25 10 26.3431 10 28V32C10 33.6569 11.3431 35 13 35H33C34.6569 35 36 33.6569 36 32V28C36 26.3431 34.6569 25 33 25H13ZM14 27.75C14.4142 27.75 14.75 28.0858 14.75 28.5V31.5C14.75 31.9142 14.4142 32.25 14 32.25C13.5858 32.25 13.25 31.9142 13.25 31.5V28.5C13.25 28.0858 13.5858 27.75 14 27.75ZM17.25 28.5C17.25 28.0858 16.9142 27.75 16.5 27.75C16.0858 27.75 15.75 28.0858 15.75 28.5V31.5C15.75 31.9142 16.0858 32.25 16.5 32.25C16.9142 32.25 17.25 31.9142 17.25 31.5V28.5ZM33 30C33 30.5523 32.5523 31 32 31C31.4477 31 31 30.5523 31 30C31 29.4477 31.4477 29 32 29C32.5523 29 33 29.4477 33 30ZM29 31C29.5523 31 30 30.5523 30 30C30 29.4477 29.5523 29 29 29C28.4477 29 28 29.4477 28 30C28 30.5523 28.4477 31 29 31ZM33 37.5H13C12.1716 37.5 11.5 38.1716 11.5 39V43C11.5 43.8284 12.1716 44.5 13 44.5H33C33.8284 44.5 34.5 43.8284 34.5 43V39C34.5 38.1716 33.8284 37.5 33 37.5ZM13 36C11.3431 36 10 37.3431 10 39V43C10 44.6569 11.3431 46 13 46H33C34.6569 46 36 44.6569 36 43V39C36 37.3431 34.6569 36 33 36H13ZM14.75 39.5C14.75 39.0858 14.4142 38.75 14 38.75C13.5858 38.75 13.25 39.0858 13.25 39.5V42.5C13.25 42.9142 13.5858 43.25 14 43.25C14.4142 43.25 14.75 42.9142 14.75 42.5V39.5ZM16.5 38.75C16.9142 38.75 17.25 39.0858 17.25 39.5V42.5C17.25 42.9142 16.9142 43.25 16.5 43.25C16.0858 43.25 15.75 42.9142 15.75 42.5V39.5C15.75 39.0858 16.0858 38.75 16.5 38.75ZM32 42C32.5523 42 33 41.5523 33 41C33 40.4477 32.5523 40 32 40C31.4477 40 31 40.4477 31 41C31 41.5523 31.4477 42 32 42ZM30 41C30 41.5523 29.5523 42 29 42C28.4477 42 28 41.5523 28 41C28 40.4477 28.4477 40 29 40C29.5523 40 30 40.4477 30 41Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-documentation" viewBox="0 0 48 48"><title>sprite-icon-display-documentation</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M38 42.5H10C9.72386 42.5 9.5 42.2761 9.5 42V6C9.5 5.72386 9.72386 5.5 10 5.5H30.3431C31.0062 5.5 31.6421 5.76339 32.1109 6.23223L37.7678 11.8891C38.2366 12.3579 38.5 12.9938 38.5 13.6569V42C38.5 42.2761 38.2761 42.5 38 42.5ZM10 44H38C39.1046 44 40 43.1046 40 42V13.6569C40 12.596 39.5786 11.5786 38.8284 10.8284L33.1716 5.17157C32.4214 4.42143 31.404 4 30.3431 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44ZM20.1167 17.6L14.25 22L20.1167 26.4L19.2167 27.6L12.55 22.6C12.3611 22.4584 12.25 22.2361 12.25 22C12.25 21.764 12.3611 21.5417 12.55 21.4L19.2167 16.4L20.1167 17.6ZM27.7212 14.206L21.7212 35.206L20.2789 34.7939L26.2789 13.7939L27.7212 14.206ZM27.4834 23.6L33.3501 28L27.4834 32.4L28.3834 33.6L35.0501 28.6C35.239 28.4584 35.3501 28.2361 35.3501 28C35.3501 27.764 35.239 27.5417 35.0501 27.4L28.3834 22.4L27.4834 23.6Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-general-comms" viewBox="0 0 48 48"><title>sprite-icon-display-general-comms</title>
@@ -37,7 +41,7 @@
 </symbol><symbol fill="none" id="sprite-icon-display-live-chat" viewBox="0 0 48 48"><title>sprite-icon-display-live-chat</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M26 5.25C28.6234 5.25 30.75 7.37664 30.75 10V17.25H40C42.6234 17.25 44.75 19.3766 44.75 22V39.6756C44.75 41.2119 42.912 42.0026 41.7966 40.9462L37.8512 37.2095H22C19.3766 37.2095 17.25 35.0828 17.25 32.4595V25.2095H10.1488L6.20337 28.9462C5.08797 30.0026 3.25 29.2119 3.25 27.6756V10C3.25 7.37665 5.37665 5.25 8 5.25H26ZM18.75 25.2095V32.4595C18.75 34.2544 20.2051 35.7095 22 35.7095H38.4488L42.8281 39.8571C42.9874 40.008 43.25 39.8951 43.25 39.6756V22C43.25 20.2051 41.7949 18.75 40 18.75H30.75V20.4595C30.75 23.0828 28.6234 25.2095 26 25.2095H18.75ZM29.25 18.75V20.4595C29.25 22.2544 27.7949 23.7095 26 23.7095H18.75V22C18.75 20.2051 20.2051 18.75 22 18.75H29.25ZM29.25 17.25H22C19.3766 17.25 17.25 19.3766 17.25 22V23.7095H9.55121L5.17191 27.8571C5.01257 28.008 4.75 27.895 4.75 27.6756V10C4.75 8.20507 6.20507 6.75 8 6.75H26C27.7949 6.75 29.25 8.20507 29.25 10V17.25Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-map-pin" viewBox="0 0 48 48"><title>sprite-icon-display-map-pin</title>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 18.08C10.75 10.7342 16.7342 4.75 24.08 4.75C31.4644 4.75 37.41 10.7328 37.41 18.08C37.41 20.5268 36.5797 23.334 35.2826 26.2091C33.9901 29.0739 32.26 31.9501 30.5191 34.5193C28.7797 37.0864 27.0387 39.3334 25.732 40.9391C25.079 41.7416 24.5353 42.3828 24.1556 42.8227L24.1191 42.865L24.0802 42.8201C23.6982 42.3792 23.1514 41.7365 22.4946 40.9324C21.1804 39.3235 19.4294 37.0726 17.68 34.5029C15.929 31.9311 14.189 29.0536 12.8892 26.1906C11.5845 23.317 10.75 20.5155 10.75 18.08ZM23.5643 44.5037C23.5645 44.5039 23.5646 44.504 24.12 44L24.6762 44.5031C24.5341 44.6602 24.3323 44.7498 24.1206 44.75C23.9088 44.7502 23.7066 44.6605 23.5643 44.5037ZM23.5643 44.5037L24.12 44C24.6762 44.5031 24.677 44.5023 24.6772 44.5021L24.6794 44.4996L24.6877 44.4904L24.7191 44.4553L24.7733 44.3946L24.8393 44.3202C24.9441 44.2018 25.0969 44.0277 25.291 43.8029C25.6791 43.3534 26.2322 42.7009 26.8955 41.8859C28.2213 40.2566 29.9903 37.9736 31.7609 35.3607C33.53 32.75 35.3099 29.7961 36.6499 26.8259C37.9853 23.866 38.91 20.8332 38.91 18.08C38.91 9.90718 32.2956 3.25 24.08 3.25C15.9058 3.25 9.25 9.90579 9.25 18.08C9.25 20.8245 10.1805 23.853 11.5233 26.8107C12.871 29.7789 14.661 32.7339 16.44 35.3471C18.2206 37.9624 19.9996 40.249 21.3329 41.8813C21.9999 42.6979 22.5562 43.3517 22.9464 43.8022C23.1415 44.0275 23.2952 44.202 23.4006 44.3206C23.4532 44.38 23.4938 44.4253 23.5214 44.4561L23.553 44.4912L23.5643 44.5037ZM16.79 17.2401C16.79 13.2139 20.0539 9.95007 24.08 9.95007C28.1062 9.95007 31.37 13.2139 31.37 17.2401C31.37 21.2662 28.1062 24.5301 24.08 24.5301C20.0539 24.5301 16.79 21.2662 16.79 17.2401ZM24.08 8.45007C19.2255 8.45007 15.29 12.3855 15.29 17.2401C15.29 22.0947 19.2255 26.0301 24.08 26.0301C28.9346 26.0301 32.87 22.0947 32.87 17.2401C32.87 12.3855 28.9346 8.45007 24.08 8.45007Z" fill="#03020D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 18.08C10.75 10.7342 16.7342 4.75 24.08 4.75C31.4644 4.75 37.41 10.7328 37.41 18.08C37.41 20.5268 36.5797 23.334 35.2826 26.2091C33.9901 29.0739 32.26 31.9501 30.5191 34.5193C28.7797 37.0864 27.0387 39.3334 25.732 40.9391C25.079 41.7416 24.5353 42.3828 24.1556 42.8227L24.1191 42.865L24.0802 42.8201C23.6982 42.3792 23.1514 41.7365 22.4946 40.9324C21.1804 39.3235 19.4294 37.0726 17.68 34.5029C15.929 31.9311 14.189 29.0536 12.8892 26.1906C11.5845 23.317 10.75 20.5155 10.75 18.08ZM23.5643 44.5037C23.5645 44.5039 23.5646 44.504 24.12 44L24.6762 44.5031C24.5341 44.6602 24.3323 44.7498 24.1206 44.75C23.9088 44.7502 23.7066 44.6605 23.5643 44.5037ZM23.5643 44.5037L24.12 44C24.6762 44.5031 24.677 44.5023 24.6772 44.5021L24.6794 44.4996L24.6877 44.4904L24.7191 44.4553L24.7733 44.3946L24.8393 44.3202C24.9441 44.2018 25.0969 44.0277 25.291 43.8029C25.6791 43.3534 26.2322 42.7009 26.8955 41.8859C28.2213 40.2566 29.9903 37.9736 31.7609 35.3607C33.53 32.75 35.3099 29.7961 36.6499 26.8259C37.9853 23.866 38.91 20.8332 38.91 18.08C38.91 9.90718 32.2956 3.25 24.08 3.25C15.9058 3.25 9.25 9.90579 9.25 18.08C9.25 20.8245 10.1805 23.853 11.5233 26.8107C12.871 29.7789 14.661 32.7339 16.44 35.3471C18.2206 37.9624 19.9996 40.249 21.3329 41.8813C21.9999 42.6979 22.5562 43.3517 22.9464 43.8022C23.1415 44.0275 23.2952 44.202 23.4006 44.3206C23.4532 44.38 23.4938 44.4253 23.5214 44.4561L23.553 44.4912L23.5643 44.5037ZM16.79 17.2401C16.79 13.2139 20.0539 9.95007 24.08 9.95007C28.1062 9.95007 31.37 13.2139 31.37 17.2401C31.37 21.2662 28.1062 24.5301 24.08 24.5301C20.0539 24.5301 16.79 21.2662 16.79 17.2401ZM24.08 8.45007C19.2255 8.45007 15.29 12.3855 15.29 17.2401C15.29 22.0947 19.2255 26.0301 24.08 26.0301C28.9346 26.0301 32.87 22.0947 32.87 17.2401C32.87 12.3855 28.9346 8.45007 24.08 8.45007Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-message" viewBox="0 0 48 48"><title>sprite-icon-display-message</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M5 7.25C2.37665 7.25 0.25 9.37665 0.25 12V36C0.25 38.6234 2.37665 40.75 5 40.75H43C45.6234 40.75 47.75 38.6234 47.75 36V12C47.75 9.37665 45.6234 7.25 43 7.25H5ZM3.36577 9.19015C3.84588 8.91031 4.40422 8.75 5 8.75H43C43.6017 8.75 44.1653 8.91353 44.6486 9.19858L24.6531 24.0753L3.36577 9.19015ZM2.26183 10.2486C1.93785 10.754 1.75 11.3551 1.75 12V36C1.75 37.7949 3.20507 39.25 5 39.25H43C44.7949 39.25 46.25 37.7949 46.25 36V12C46.25 11.3577 46.0637 10.7588 45.7421 10.2547L25.1144 25.6017C24.8552 25.7945 24.5016 25.7997 24.2369 25.6146L2.26183 10.2486Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-padlock-closed" viewBox="0 0 48 48"><title>sprite-icon-display-padlock-closed</title>
@@ -63,6 +67,8 @@
 			<rect width="48" height="48" fill="white"/>
 		</clipPath>
 	</defs>
+</symbol><symbol fill="none" id="sprite-icon-display-servers" viewBox="0 0 48 48"><title>sprite-icon-display-servers</title>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.5H44C45.3807 8.5 46.5 9.61929 46.5 11V19C46.5 20.3807 45.3807 21.5 44 21.5H4C2.61929 21.5 1.5 20.3807 1.5 19V11C1.5 9.61929 2.61929 8.5 4 8.5ZM0 11C0 8.79086 1.79086 7 4 7H44C46.2091 7 48 8.79086 48 11V19C48 21.2091 46.2091 23 44 23H4C1.79086 23 0 21.2091 0 19V11ZM4 26.5H44C45.3807 26.5 46.5 27.6193 46.5 29V37C46.5 38.3807 45.3807 39.5 44 39.5H4C2.61929 39.5 1.5 38.3807 1.5 37V29C1.5 27.6193 2.61929 26.5 4 26.5ZM0 29C0 26.7909 1.79086 25 4 25H44C46.2091 25 48 26.7909 48 29V37C48 39.2091 46.2091 41 44 41H4C1.79086 41 0 39.2091 0 37V29ZM6.75 30C6.75 29.5858 6.41421 29.25 6 29.25C5.58579 29.25 5.25 29.5858 5.25 30V36C5.25 36.4142 5.58579 36.75 6 36.75C6.41421 36.75 6.75 36.4142 6.75 36V30ZM9 29.25C9.41421 29.25 9.75 29.5858 9.75 30V36C9.75 36.4142 9.41421 36.75 9 36.75C8.58579 36.75 8.25 36.4142 8.25 36V30C8.25 29.5858 8.58579 29.25 9 29.25ZM41 34C41.5523 34 42 33.5523 42 33C42 32.4477 41.5523 32 41 32C40.4477 32 40 32.4477 40 33C40 33.5523 40.4477 34 41 34ZM36 33C36 33.5523 35.5523 34 35 34C34.4477 34 34 33.5523 34 33C34 32.4477 34.4477 32 35 32C35.5523 32 36 32.4477 36 33ZM6 11.25C6.41421 11.25 6.75 11.5858 6.75 12V18C6.75 18.4142 6.41421 18.75 6 18.75C5.58579 18.75 5.25 18.4142 5.25 18V12C5.25 11.5858 5.58579 11.25 6 11.25ZM9.75 12C9.75 11.5858 9.41421 11.25 9 11.25C8.58579 11.25 8.25 11.5858 8.25 12V18C8.25 18.4142 8.58579 18.75 9 18.75C9.41421 18.75 9.75 18.4142 9.75 18V12ZM42 15C42 15.5523 41.5523 16 41 16C40.4477 16 40 15.5523 40 15C40 14.4477 40.4477 14 41 14C41.5523 14 42 14.4477 42 15ZM35 16C35.5523 16 36 15.5523 36 15C36 14.4477 35.5523 14 35 14C34.4477 14 34 14.4477 34 15C34 15.5523 34.4477 16 35 16Z" fill="#03020D"/>
 </symbol><symbol fill="none" id="sprite-icon-display-shopping-cart" viewBox="0 0 48 48"><title>sprite-icon-display-shopping-cart</title>
 	<g clip-path="url(#clip0)">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M1 6.25C0.585786 6.25 0.25 6.58579 0.25 7C0.25 7.41421 0.585786 7.75 1 7.75H1.3917C2.87744 7.75 4.17402 8.75754 4.541 10.1972L10.24 32.555C9.35503 33.012 8.75 33.9353 8.75 35C8.75 36.5188 9.98122 37.75 11.5 37.75H42C42.4142 37.75 42.75 37.4142 42.75 37C42.75 36.5858 42.4142 36.25 42 36.25H11.5C10.8096 36.25 10.25 35.6904 10.25 35C10.25 34.3096 10.8096 33.75 11.5 33.75H37.8074C40.8679 33.75 43.5454 31.6909 44.3312 28.7329L48.0572 14.706C48.5208 12.9608 47.2051 11.25 45.3994 11.25H6.35732L5.99452 9.82673C5.45816 7.72255 3.56317 6.25 1.3917 6.25H1ZM6.73967 12.75L11.7103 32.25H37.8074C40.1878 32.25 42.2703 30.6485 42.8815 28.3478L46.6075 14.3209C46.8182 13.5276 46.2202 12.75 45.3994 12.75H6.73967ZM15 43.5C15.8284 43.5 16.5 42.8284 16.5 42C16.5 41.1716 15.8284 40.5 15 40.5C14.1716 40.5 13.5 41.1716 13.5 42C13.5 42.8284 14.1716 43.5 15 43.5ZM15 45C16.6569 45 18 43.6569 18 42C18 40.3431 16.6569 39 15 39C13.3431 39 12 40.3431 12 42C12 43.6569 13.3431 45 15 45ZM38.5 42C38.5 42.8284 37.8284 43.5 37 43.5C36.1716 43.5 35.5 42.8284 35.5 42C35.5 41.1716 36.1716 40.5 37 40.5C37.8284 40.5 38.5 41.1716 38.5 42ZM40 42C40 43.6569 38.6569 45 37 45C35.3431 45 34 43.6569 34 42C34 40.3431 35.3431 39 37 39C38.6569 39 40 40.3431 40 42Z" fill="#03020D"/>
@@ -90,12 +96,23 @@
   <path fill-rule="evenodd" clip-rule="evenodd" d="M17 10.5C17 14.0899 14.0899 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5ZM15.7618 17.1761C14.3145 18.3183 12.4869 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5C19 12.4869 18.3183 14.3146 17.176 15.7619L22.7071 21.293L21.2929 22.7072L15.7618 17.1761ZM9.5 9.5V6.5H11.5V9.5H14.5V11.5H11.5V14.5H9.5V11.5H6.5V9.5H9.5Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-external-link" viewBox="0 0 24 24"><title>sprite-icon-gui-external-link</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4C3 3.44772 3.44772 3 4 3H12V1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V12.4762H21V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4ZM15 3H19.6707L11.775 11.3113L13.225 12.6888L21 4.50456V10H23V2L22 1H15V3Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-history" viewBox="0 0 24 24"><title>sprite-icon-gui-history</title>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.4477 22.4477 11 23 11C23.5523 11 24 11.4477 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C12.5523 0 13 0.447715 13 1C13 1.55228 12.5523 2 12 2ZM12 4C12.5523 4 13 4.44772 13 5V11.0801C13 11.3721 13.1276 11.6494 13.3492 11.8394L16.1508 14.2407C16.5701 14.6002 16.6187 15.2315 16.2593 15.6508C15.8998 16.0701 15.2685 16.1187 14.8492 15.7593L12.0476 13.3579C11.3827 12.788 11 11.9559 11 11.0801V5C11 4.44772 11.4477 4 12 4ZM19.75 5.25C20.3023 5.25 20.75 4.80228 20.75 4.25C20.75 3.69772 20.3023 3.25 19.75 3.25C19.1977 3.25 18.75 3.69772 18.75 4.25C18.75 4.80228 19.1977 5.25 19.75 5.25ZM17.5 2C17.5 2.55228 17.0523 3 16.5 3C15.9477 3 15.5 2.55228 15.5 2C15.5 1.44772 15.9477 1 16.5 1C17.0523 1 17.5 1.44772 17.5 2ZM22 8.5C22.5523 8.5 23 8.05229 23 7.5C23 6.94772 22.5523 6.5 22 6.5C21.4477 6.5 21 6.94772 21 7.5C21 8.05229 21.4477 8.5 22 8.5Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-link-arrow" viewBox="0 0 24 24"><title>sprite-icon-gui-link-arrow</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9979 11H4V13H16.9979L14 16.331L15.4866 17.6689L19.9866 12.6689V11.331L15.4866 6.33099L14 7.66892L16.9979 11Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-minus" viewBox="0 0 24 24"><title>sprite-icon-gui-minus</title>
   <path fill-rule="evenodd" clip-rule="evenodd" d="M22 13H2V11H22V13Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-plus" viewBox="0 0 24 24"><title>sprite-icon-gui-plus</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13V22H13V13H22V11H13V2H11V11H2V13H11Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-refresh" viewBox="0 0 24 24"><title>sprite-icon-gui-refresh</title>
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6508 0.240762C10.2315 -0.118661 9.60017 -0.0700991 9.24075 0.349227C8.88132 0.768553 8.92989 1.39985 9.34921 1.75927L10.8721 3.06461C5.91928 3.63496 2 7.90866 2 13C2 18.4723 6.52771 23 12 23C17.4723 23 22 18.4723 22 13C22 12.4477 21.5523 12 21 12C20.4477 12 20 12.4477 20 13C20 17.3677 16.3677 21 12 21C7.63228 21 4 17.3677 4 13C4 8.96189 7.10476 5.5524 11.025 5.06081L9.2929 6.79291C8.90237 7.18344 8.90237 7.8166 9.2929 8.20712C9.68342 8.59765 10.3166 8.59765 10.7071 8.20712L14.2071 4.70713C14.4041 4.51016 14.51 4.23998 14.4993 3.96164C14.4886 3.6833 14.3623 3.42204 14.1508 3.24076L10.6508 0.240762Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="currentColor"/>
+</clipPath>
+</defs>
 </symbol><symbol fill="none" id="sprite-icon-gui-search" viewBox="0 0 24 24"><title>sprite-icon-gui-search</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M17 10.5C17 14.0899 14.0899 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5ZM15.7618 17.176C14.3145 18.3183 12.4869 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5C19 12.4869 18.3183 14.3145 17.176 15.7618L22.7071 21.2929L21.2929 22.7071L15.7618 17.176Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-tick" viewBox="0 0 24 24"><title>sprite-icon-gui-tick</title>

data/lib/ably_ui/core/styles.css

@@ -45,10 +45,27 @@
     --icon-color-github: #000000;
 
     --gradient-active-orange: linear-gradient(
-      62deg,
-      var(--color-active-orange) 0,
-      var(--color-active-orange) 60%,
-      var(--color-red-orange) 100%
+      61.2deg,
+      var(--color-active-orange) 10.46%,
+      #fe5215 38.63%,
+      #fc4a13 54.38%,
+      #f73c10 67.07%,
+      #f1280a 78.13%,
+      #e90f04 88.02%,
+      var(--color-red-orange) 92.73%
+    );
+
+    /* Used for smooth transitions from gradient to non-gradient backgrounds */
+    --gradient-transparent: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    );
+
+    --gradient-hot-pink: linear-gradient(
+      80.2deg,
+      var(--color-bright-red) 0%,
+      var(--color-jazzy-pink) 100%
     );
 
     --fs-title-xl: 4rem;
@@ -73,11 +90,15 @@
     --fs-overline2: 0.875rem;
     --fs-btn1: 1.125rem;
     --fs-btn2: 1rem;
+    --fs-btn3: 0.875rem;
     --fs-menu1: 1.125rem;
     --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.5rem;
+    --fs-code1: 1rem;
+    --fs-code2: 0.875rem;
 
+    --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
     --lh-normal: 1.25;
@@ -109,17 +130,24 @@
     --spacing-80: 5rem;
     --spacing-88: 5.5rem;
     --spacing-96: 6rem;
+    --spacing-128: 8rem;
     --spacing-160: 10rem;
     --spacing-256: 16rem;
 
-    --spacing-btn: 0.9375rem 1.5rem; /* 15px 24px */
-    --spacing-btn-small: 0.6875rem 1rem; /* 11px 16px */
+    --spacing-btn-small: 0.875rem 1.25rem; /* 14px 16px */
+    --spacing-btn-xsmall: 0.875rem 1rem; /* 14px 16px */
+    --spacing-btn: 0.875rem 1.5rem; /* 14px 24px */
+    --spacing-btn-large: 0.875rem 1.75rem; /* 14px 28px */
     --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
     --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
     --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
+    --spacing-chip-xsmall: 0.375rem 0.5rem; /* 6px 8px */
+    --spacing-chip-small: 0.5rem 0.75rem; /* 8px 12px */
+    --spacing-chip: 0.75rem 1rem; /* 6px 8px */
+    --spacing-chip-large: 1rem 1.25rem; /* 16px 20px */
 
     /* 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.
@@ -145,8 +173,39 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply flex items-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply focus:outline-gui-focus;
+    @apply flex items-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
   }
 
   .ui-btn-invert {
@@ -154,8 +213,9 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply flex items-center;
   }
 
   .ui-btn-secondary {
@@ -163,8 +223,9 @@
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
+    @apply flex items-center;
   }
 
   .ui-btn-secondary-invert {
@@ -172,9 +233,63 @@
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply flex items-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-24 h-24 mr-16;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-20 h-20 mr-12;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-16 h-16 mr-8;
+  }
+
+  .ui-chip {
+    @apply text-btn3 p-chip rounded text-cool-black;
+    @apply hover:bg-mid-grey;
+    @apply active:bg-red-orange active:text-white;
+    @apply focus:bg-red-orange focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
   }
+
+  .ui-chip[data-selected] {
+    @apply bg-active-orange text-white;
+  }
+
+  .ui-chip[data-selected]:hover {
+    @apply bg-mid-grey text-cool-black;
+  }
+
+  .ui-chip[data-selected]:focus {
+    @apply bg-red-orange text-white;
+  }
+
+  .ui-chip-alt {
+    @apply text-btn3 p-chip rounded text-white;
+    @apply hover:bg-gui-hover;
+    @apply active:bg-gui-active active:text-white;
+    @apply focus:bg-gui-active focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip-alt[data-selected] {
+    @apply bg-dark-grey text-white;
+  }
+  .ui-chip-alt[data-selected]:hover {
+    @apply bg-gui-hover text-white;
+  }
+
+  .ui-chip-alt[data-selected]:focus {
+    @apply bg-gui-active text-white;
+  }
 }
 @layer components {
   .ui-standard-container {
@@ -209,7 +324,7 @@
   .ui-text-h2 {
     @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
@@ -283,6 +398,119 @@
     @apply font-sans font-light text-cool-black;
     @apply text-menu3;
   }
+
+  .ui-text-code1 {
+    @apply font-mono font-normal text-code1;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
+  }
+
+  .ui-unordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
+  }
+
+  .ui-unordered-list ul {
+    @apply ml-24 mt-16 list-circle;
+  }
+
+  .ui-unordered-list ul ul {
+    @apply list-square;
+  }
+
+  .ui-unordered-list-with-emphasis {
+    @apply text-p1 font-light text-cool-black;
+    @apply list-disc ml-32 mt-32 -mb-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div {
+    @apply relative -top-12;
+  }
+
+  .ui-unordered-list-with-emphasis li div > strong {
+    @apply block;
+  }
+
+  .ui-unordered-list-with-emphasis ul {
+    margin-top: calc(var(--spacing-16) + var(--spacing-8));
+    @apply ml-24 list-disc;
+  }
+
+  .ui-unordered-list-with-emphasis ul ul {
+    @apply list-circle;
+  }
+
+  /* visited needs to come before :hover et all else it overrides them */
+  .ui-link:visited {
+    @apply text-gui-viewed;
+  }
+
+  .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;
+  }
+}
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-16 font-sans;
+  }
+
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-12 font-sans;
+  }
+
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-20 w-20;
+  }
+
+  .ui-checkbox-styled {
+    @apply w-20 h-20 mr-16;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
+
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-light text-cool-black;
+  }
+
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-light text-cool-black;
+  }
+
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
+
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
+
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
 }
 @layer components {
   .ui-input {

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '5.3.0'
+  VERSION = '6.0.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 5.3.0
+  version: 6.0.0
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-18 00:00:00.000000000 Z
+date: 2021-12-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component