@neovici/cosmoz-autocomplete 10.4.0 → 10.5.0

package/dist/autocomplete/autocomplete.js

@@ -71,7 +71,7 @@ const autocomplete = (props) => {
     })}
 			</cosmoz-input>
 
-			${when(active && !(isSingle && !showSingle), () => listbox({
+			${when(active && !(isSingle && !showSingle) && items.length > 0, () => listbox({
         ...props,
         items,
         multi: !isOne,

package/dist/listbox/item-renderer.js

@@ -4,17 +4,18 @@ import { mark } from './util';
 export const itemRenderer = (render = identity) => (item, i, { highlight, select, textual = identity, query, isSelected, }) => {
     const text = textual(item), content = mark(text, query), rendered = render(content, item, i);
     return html `<div
-			class="item"
-			role="option"
-			part="option"
-			?aria-selected=${isSelected(item)}
-			data-index=${i}
-			@mouseenter=${() => highlight(i)}
-			@click=${() => select(item)}
-			@mousedown=${(e) => e.preventDefault()}
-			title=${text}
-		>
-			${rendered}
-		</div>`;
+				class="item"
+				role="option"
+				part="option"
+				?aria-selected=${isSelected(item)}
+				data-index=${i}
+				@mouseenter=${() => highlight(i)}
+				@click=${() => select(item)}
+				@mousedown=${(e) => e.preventDefault()}
+				title=${text}
+			>
+				${rendered}
+			</div>
+			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
 };
 export default itemRenderer();

package/dist/listbox/style.css.d.ts

@@ -1,6 +1,6 @@
 declare const style: string;
 export default style;
-export declare const styles: ({ index, itemHeight, auto }: {
+export declare const styles: ({ index, itemHeight, auto, }: {
     index?: number;
     itemHeight: number;
     auto: boolean;

package/dist/listbox/style.css.js

@@ -1,4 +1,4 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
+import { css } from '@pionjs/pion';
 import { when } from 'lit-html/directives/when.js';
 const svg = 
 /* eslint-disable quotes */
@@ -20,12 +20,23 @@ const style = css `
 			0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
 		overflow: hidden;
+		transition:
+			opacity 150ms ease-in-out,
+			transform 100ms ease-in-out;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
 		border: 1px solid rgba(200, 200, 200, 0.25);
+
+		opacity: 1;
+		transform: translateY(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(-50px);
+		}
 	}
 	:host([popover]) {
 		padding: 0;
@@ -49,6 +60,20 @@ const style = css `
 		overflow: hidden;
 	}
 
+	.sizer {
+		position: relative;
+		visibility: hidden;
+		opacity: 0;
+		pointer-events: none;
+		z-index: -1;
+		height: 0;
+		width: auto;
+		padding: 0 20px;
+		overflow: hidden;
+		max-width: inherit;
+		font-size: 14px;
+	}
+
 	:host(:not([multi])) .item[aria-selected] {
 		background: var(--cosmoz-listbox-single-selection-color, #dadada);
 	}
@@ -71,6 +96,9 @@ const style = css `
 		/* prettier-ignore */
 		background: url("${svg}") #5881f6 no-repeat 50%;
 	}
+	:host([multi]) .sizer {
+		padding-left: 33px;
+	}
 	.swatch {
 		width: 18px;
 		height: 18px;
@@ -79,12 +107,12 @@ const style = css `
 		vertical-align: middle;
 		border-radius: 50%;
 	}
-	[virtualizer-sizer] {
+	[virtualizer-sizer]:not(.sizer) {
 		line-height: 1;
 	}
 `;
 export default style;
-export const styles = ({ index, itemHeight, auto }) => css `
+export const styles = ({ index, itemHeight, auto, }) => css `
 	${when(!auto, () => css `
 			.item {
 				line-height: ${itemHeight}px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "10.4.0",
+	"version": "10.5.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",