@reuters-graphics/graphics-components 0.0.6 → 0.0.9

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -62,9 +62,6 @@ export default class Index extends SvelteComponentTyped<{
         index: any;
         value: string;
     };
-    'no-results': {
-        value: string;
-    };
 }> {
 }
 export type IndexProps = typeof __propDef.props;
@@ -135,9 +132,6 @@ declare const __propDef: {
             index: any;
             value: string;
         };
-        'no-results': {
-            value: string;
-        };
     };
 };
 export {};

package/dist/components/Framer/Typeahead/index.svelte

@@ -171,7 +171,8 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown="{results.length > 0}"
-  aria-expanded="{showResults}"
+  aria-expanded="{showResults ||
+    (isFocused && value.length > 0 && results.length === 0)}"
   id="{id}-typeahead"
 >
   <Search
@@ -257,28 +258,25 @@
         </li>
       {/each}
     {/if}
-    {#if $$slots['no-results'] && !hideDropdown && value.length > 0 && results.length === 0}
-      <div class:no-results="{true}">
-        <slot name="no-results" value="{value}" />
-      </div>
+    {#if value.length > 0 && results.length === 0}
+      <li class="no-results disabled">No embeds found...</li>
     {/if}
   </ul>
 </div>
 
 <style>[data-svelte-typeahead] {
   position: relative;
-  background-color: #fff;
 }
 
 ul {
   position: absolute;
   top: 100%;
   left: 0;
-  width: calc(100% - 2px);
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  background-color: inherit;
+  background-color: #fff;
 }
 
 [aria-expanded=true] ul {
@@ -289,12 +287,18 @@ ul {
 }
 
 li,
-.no-results {
+li.no-results {
   padding: 0.25rem 1rem;
   font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
   color: #333;
 }
 
+li.no-results {
+  color: #333;
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
 li {
   cursor: pointer;
 }
@@ -339,6 +343,7 @@ li:hover {
   font-size: 1rem;
   border: 0;
   border-radius: 0 !important;
+  background-color: #fff;
   border: 1px solid #ddd;
   font-family: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",