diff --git a/pr/pr-180/cosmoz-autocomplete.stories-CpayrQf7.js b/pr/pr-180/cosmoz-autocomplete.stories-B-XW1aYu.js
similarity index 97%
rename from pr/pr-180/cosmoz-autocomplete.stories-CpayrQf7.js
rename to pr/pr-180/cosmoz-autocomplete.stories-B-XW1aYu.js
index 88699a5..41f7584 100644
--- a/pr/pr-180/cosmoz-autocomplete.stories-CpayrQf7.js
+++ b/pr/pr-180/cosmoz-autocomplete.stories-B-XW1aYu.js
@@ -1,4 +1,4 @@
-import { w, f as f$1, j, T, m as m$1, i as i$3, x, p, v, r as r$1, h as h$2 } from './lit-element-DB2L7MOw.js';
+import { w, f as f$1, j, T, m as m$1, x, i as i$3, p, v, r as r$1, h as h$2 } from './lit-element-DB2L7MOw.js';
 
 /**
  * @license
@@ -651,31 +651,13 @@ const { component, createContext } = pion({ render: j });
  * SPDX-License-Identifier: BSD-3-Clause
  */const l=e(class extends i$2{constructor(r){if(super(r),r.type!==t.PROPERTY&&r.type!==t.ATTRIBUTE&&r.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!f$1(r))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===w||t$1===T)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return w}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return w}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return w;return m$1(i),t$1}});
 
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class s{constructor(t){this.Y=t;}disconnect(){this.Y=void 0;}reconnect(t){this.Y=t;}deref(){return this.Y}}class i{constructor(){this.Z=void 0,this.q=void 0;}get(){return this.Z}pause(){this.Z??=new Promise((t=>this.q=t));}resume(){this.q?.(),this.Z=this.q=void 0;}}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const n$2=t=>!i$3(t)&&"function"==typeof t.then,h=1073741823;let c$1 = class c extends f{constructor(){super(...arguments),this._$Cwt=h,this._$Cbt=[],this._$CK=new s(this),this._$CX=new i;}render(...s){return s.find((t=>!n$2(t)))??w}update(s,i){const e=this._$Cbt;let r=e.length;this._$Cbt=i;const o=this._$CK,c=this._$CX;this.isConnected||this.disconnected();for(let t=0;t<i.length&&!(t>this._$Cwt);t++){const s=i[t];if(!n$2(s))return this._$Cwt=t,s;t<r&&s===e[t]||(this._$Cwt=h,r=0,Promise.resolve(s).then((async t=>{for(;c.get();)await c.get();const i=o.deref();if(void 0!==i){const e=i._$Cbt.indexOf(s);e>-1&&e<i._$Cwt&&(i._$Cwt=e,i.setValue(t));}})));}return w}disconnected(){this._$CK.disconnect(),this._$CX.pause();}reconnected(){this._$CK.reconnect(this),this._$CX.resume();}};const m=e(c$1);
+const o$1=new WeakMap,n$2=e(class extends f{render(i){return T}update(i,[s]){const e=s!==this.Y;return e&&void 0!==this.Y&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.Y=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),T}rt(t){if("function"==typeof this.Y){const i=this.ht??globalThis;let s=o$1.get(i);void 0===s&&(s=new WeakMap,o$1.set(i,s)),void 0!==s.get(this.Y)&&this.Y.call(this.ht,void 0),s.set(this.Y,t),void 0!==t&&this.Y.call(this.ht,t);}else this.Y.value=t;}get lt(){return "function"==typeof this.Y?o$1.get(this.ht??globalThis)?.get(this.Y):this.Y?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */
-function n$1(n,r,t){return n?r(n):t?.(n)}
-
-const useHost = hook(class extends Hook {
-    update() {
-        return this.state.host;
-    }
-});
+ */const o=o=>o??T;
 
 const useImperativeApi = hook(class extends Hook {
     values;
@@ -695,13 +677,11 @@ const useImperativeApi = hook(class extends Hook {
     }
 });
 
-const o$1=new WeakMap,n=e(class extends f{render(i){return T}update(i,[s]){const e=s!==this.Y;return e&&void 0!==this.Y&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.Y=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),T}rt(t){if("function"==typeof this.Y){const i=this.ht??globalThis;let s=o$1.get(i);void 0===s&&(s=new WeakMap,o$1.set(i,s)),void 0!==s.get(this.Y)&&this.Y.call(this.ht,void 0),s.set(this.Y,t),void 0!==t&&this.Y.call(this.ht,t);}else this.Y.value=t;}get lt(){return "function"==typeof this.Y?o$1.get(this.ht??globalThis)?.get(this.Y):this.Y?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=o=>o??T;
+const useHost = hook(class extends Hook {
+    update() {
+        return this.state.host;
+    }
+});
 
 const UPPER = /([A-Z])/gu;
 /* Emulate polymer notify props */
@@ -760,6 +740,13 @@ const useAllowedPattern = (allowedPattern) => useMemo(() => {
     };
 }, [allowedPattern]);
 
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n$1(n,r,t){return n?r(n):t?.(n)}
+
 const tagged = (strings, ...values) => strings.flatMap((s, i) => [s, values[i] || '']).join('');
 
 const sheet = (...styles) => {
@@ -1057,7 +1044,7 @@ const Input = (host) => {
     }, []);
     return render(x `
 			<input
-				${n(onRef)}
+				${n$2(onRef)}
 				style="--chars: ${value?.toString()?.length ?? 0}ch"
 				id="input"
 				part="input"
@@ -1114,7 +1101,7 @@ const Textarea = (host) => {
     useAutoHeight(host);
     return render(x `
 			<textarea id="input" part="input"
-				${n(onRef)}
+				${n$2(onRef)}
 				autocomplete=${o(autocomplete)}
 				placeholder=${placeholder || ' '}
 				rows=${rows ?? 1} cols=${o(cols)}
@@ -1124,296 +1111,100 @@ const Textarea = (host) => {
 };
 customElements.define('cosmoz-textarea', component(Textarea, { observedAttributes: observedAttributes$1 }));
 
-const identity = (obj) => obj;
+const style$2 = css`
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-size: 1000%;
+		background-position: right;
+		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
+		border-radius: 3px;
+		width: calc(100% - 50px);
+		max-width: 150px;
+		height: 20px;
+		margin: 10px 0 10px 33px;
+	}
 
-const isIterable = (x) => {
-    return typeof x === 'object' && x !== null && Symbol.iterator in x;
-};
-function array(arr) {
-    if (arr == null) {
-        return [];
-    }
-    if (Array.isArray(arr)) {
-        return arr;
-    }
-    if (typeof arr === 'string') {
-        return [arr];
-    }
-    if (isIterable(arr)) {
-        return Array.from(arr);
+	:host-context([show-single]) {
+		margin-left: 20px;
+	}
+
+	@keyframes sweep {
+		0% {
+			background-position: right;
+		}
+		100% {
+			background-position: left;
+		}
+	}
+`;
+customElements.define("cosmoz-autocomplete-skeleton-span", component(() => T, { styleSheets: [style$2] }));
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class s{constructor(t){this.Y=t;}disconnect(){this.Y=void 0;}reconnect(t){this.Y=t;}deref(){return this.Y}}class i{constructor(){this.Z=void 0,this.q=void 0;}get(){return this.Z}pause(){this.Z??=new Promise((t=>this.q=t));}resume(){this.q?.(),this.Z=this.q=void 0;}}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const n=t=>!i$3(t)&&"function"==typeof t.then,h=1073741823;let c$1 = class c extends f{constructor(){super(...arguments),this._$Cwt=h,this._$Cbt=[],this._$CK=new s(this),this._$CX=new i;}render(...s){return s.find((t=>!n(t)))??w}update(s,i){const e=this._$Cbt;let r=e.length;this._$Cbt=i;const o=this._$CK,c=this._$CX;this.isConnected||this.disconnected();for(let t=0;t<i.length&&!(t>this._$Cwt);t++){const s=i[t];if(!n(s))return this._$Cwt=t,s;t<r&&s===e[t]||(this._$Cwt=h,r=0,Promise.resolve(s).then((async t=>{for(;c.get();)await c.get();const i=o.deref();if(void 0!==i){const e=i._$Cbt.indexOf(s);e>-1&&e<i._$Cwt&&(i._$Cwt=e,i.setValue(t));}})));}return w}disconnected(){this._$CK.disconnect(),this._$CX.pause();}reconnected(){this._$CK.reconnect(this),this._$CX.resume();}};const m=e(c$1);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e(class extends i$2{constructor(e){if(super(e),e.type!==t.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p(s),{values:p$1,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m,y,x=0,j=d.length-1,k=0,w$1=p$1.length-1;for(;x<=j&&k<=w$1;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w$1])v$1[w$1]=v(d[j],p$1[w$1]),j--,w$1--;else if(h[x]===a[w$1])v$1[w$1]=v(d[x],p$1[w$1]),r$1(s,v$1[w$1+1],d[x]),x++,w$1--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),r$1(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w$1),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$1(s,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),r$1(s,d[x],t),d[e]=null;k++;}else h$2(d[j]),j--;else h$2(d[x]),x++;for(;k<=w$1;){const e=r$1(s,v$1[w$1+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&h$2(e);}return this.ut=a,m$1(s,v$1),w}});
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class RangeChangedEvent extends Event {
+    constructor(range) {
+        super(RangeChangedEvent.eventName, { bubbles: false });
+        this.first = range.first;
+        this.last = range.last;
     }
-    return [arr];
 }
-const without = (exclude, predicate = identity) => (list) => {
-    const excludes = array(exclude).map(predicate);
-    return array(list).filter((value) => !excludes.includes(predicate(value)));
-};
-
-/* eslint-disable no-use-before-define, import/group-exports */
-function prop(key) {
-    if (!key) {
-        return identity;
+RangeChangedEvent.eventName = 'rangeChanged';
+class VisibilityChangedEvent extends Event {
+    constructor(range) {
+        super(VisibilityChangedEvent.eventName, { bubbles: false });
+        this.first = range.first;
+        this.last = range.last;
     }
-    return (obj) => obj?.[key];
 }
-const strProp = (key) => {
-    const p = prop(key);
-    return (o) => {
-        if (typeof o === 'string') {
-            return o;
-        }
-        return p(o)?.toString() || '';
-    };
-};
-const props = (keys) => (obj) => {
-    const ret = {};
-    for (const key in obj) {
-        if (keys.includes(key)) {
-            ret[key] = obj[key];
-        }
+VisibilityChangedEvent.eventName = 'visibilityChanged';
+class UnpinnedEvent extends Event {
+    constructor() {
+        super(UnpinnedEvent.eventName, { bubbles: false });
     }
-    return ret;
-};
+}
+UnpinnedEvent.eventName = 'unpinned';
 
 /**
- * Copies properties of an Object into a memoized object.
- * Useful to create an object that does not change.
- *
- * @param {Object} meta - The source object
- * @returns {Object} The memoized object.
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
-const useMeta = (meta) => {
-    const ref = useMemo(() => ({}), []);
-    return useMemo(() => Object.assign(ref, meta), [ref, ...Object.values(meta)]);
-};
-
-const isFocused = (t) => t.matches(':focus-within');
-const useFocus = ({ disabled, onFocus }) => {
-    const [focusState, setState] = useState(), { focused: _focused, closed } = focusState || {}, focused = _focused && !disabled, meta = useMeta({ closed, onFocus }), setClosed = useCallback((closed) => setState((p) => ({ ...p, closed })), []), onToggle = useCallback((e) => {
-        const target = e.currentTarget;
-        return isFocused(target)
-            ? setState((p) => ({ focused: true, closed: !p?.closed }))
-            : target.focus();
-    }, []);
-    useEffect(() => {
-        if (!focused) {
-            return;
+class ScrollerShim {
+    constructor(element) {
+        this._element = null;
+        const node = element ?? window;
+        this._node = node;
+        if (element) {
+            this._element = element;
         }
-        const handler = (e) => {
-            if (e.defaultPrevented) {
-                return;
-            }
-            const { closed } = meta;
-            if (e.key === 'Escape' && !closed) {
-                e.preventDefault();
-                setClosed(true);
-            }
-            else if (['ArrowUp', 'Up'].includes(e.key) && closed) {
-                e.preventDefault();
-                setClosed(false);
-            }
-        };
-        document.addEventListener('keydown', handler, true);
-        return () => document.removeEventListener('keydown', handler, true);
-    }, [focused]);
-    return {
-        focused,
-        active: focused && !closed,
-        setClosed,
-        onToggle,
-        onFocus: useCallback((e) => {
-            const focused = isFocused(e.currentTarget);
-            setState({ focused });
-            meta.onFocus?.(focused);
-        }, [meta]),
-    };
-};
-
-const useKeys = ({ focused, empty, ...rest }) => {
-  const enabled = focused && empty, meta = useMeta(rest);
-  useEffect(() => {
-    if (!enabled) {
-      return;
     }
-    const handler = (e) => {
-      if (e.defaultPrevented) {
-        return;
-      }
-      const { key } = e, values = array(meta.value), isOne = meta.limit == 1;
-      if (values.length > 0 && (key === "Backspace" || isOne && key.length === 1)) {
-        return meta.onChange(values.slice(0, -1));
-      }
-    };
-    document.addEventListener("keydown", handler, true);
-    return () => document.removeEventListener("keydown", handler, true);
-  }, [enabled, meta]);
-};
-
-const search = (source, query, textual) => {
-  if (!query)
-    return source;
-  const qry = query.toLowerCase();
-  const matches = [];
-  for (const item of source) {
-    const index = textual(item).toLowerCase().indexOf(qry);
-    if (index < 0) {
-      continue;
-    }
-    matches.push({
-      item,
-      index
-    });
-  }
-  return matches.sort((a, b) => a.index - b.index).map(({ item }) => item);
-};
-const normalize = (source) => {
-  if (source === false || source == null)
-    return [];
-  return source;
-};
-const notify = (host, name, detail) => host.dispatchEvent(new CustomEvent(name, { detail }));
-const useNotify = (host, fn, name) => useCallback((val) => {
-  fn?.(val);
-  notify(host, name, val);
-}, [fn]);
-const EMPTY = [];
-const raf = (fn) => (...args) => {
-  let id;
-  const cleanup = () => {
-    if (id)
-      cancelAnimationFrame(id);
-  };
-  cleanup();
-  id = requestAnimationFrame(() => {
-    id = void 0;
-    fn(...args);
-  });
-  return cleanup;
-};
-
-const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
-  const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [text]), host = useHost(), onText = useNotify(host, _onText, "text"), onChange = useCallback((val) => {
-    _onChange?.(val, () => setClosed(true));
-    notify(host, "value", val);
-  }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === "function" ? source({ query, active }) : source).then(normalize), [source, active, query]), value = useMemo(() => array(_value), [_value]);
-  useEffect(() => source$.then(setOptions), [source$]);
-  useKeys({
-    focused,
-    empty,
-    limit,
-    value,
-    onChange,
-    onText
-  });
-  useEffect(() => {
-    if (!focused)
-      onText("");
-  }, [focused]);
-  const meta = useMeta({
-    onText,
-    onChange,
-    value,
-    limit,
-    min,
-    keepQuery,
-    keepOpened,
-    setClosed,
-    onSelect
-  });
-  return {
-    active,
-    query,
-    textual,
-    value,
-    source$,
-    items: useMemo(() => {
-      if (!active)
-        return EMPTY;
-      const items = preserveOrder ? options : [...value, ...without(value, prop(valueProperty))(options)];
-      return search(items, query, textual);
-    }, [
-      options,
-      active,
-      query,
-      textual,
-      empty,
-      value,
-      preserveOrder,
-      valueProperty
-    ]),
-    onClick: useCallback(() => setClosed(false), []),
-    onFocus,
-    onText: useCallback((e) => {
-      onText(e.target.value);
-      setClosed(false);
-    }, [onText, text, setClosed]),
-    onSelect: useCallback((newVal) => {
-      meta.onSelect?.(newVal, meta);
-      const { onChange: onChange2, onText: onText2, limit: limit2, min: min2, value: val, keepQuery: keepQuery2, keepOpened: keepOpened2, setClosed: setClosed2 } = meta;
-      if (!keepQuery2)
-        onText2("");
-      if (!keepOpened2)
-        setClosed2(true);
-      const value2 = array(val), deselect = value2.includes(newVal);
-      if (deselect && value2.length === min2)
-        return;
-      onChange2((deselect ? without(newVal)(value2) : [...value2, newVal]).slice(-limit2));
-    }, [meta]),
-    onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta])
-  };
-};
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e(class extends i$2{constructor(e){if(super(e),e.type!==t.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p(s),{values:p$1,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m,y,x=0,j=d.length-1,k=0,w$1=p$1.length-1;for(;x<=j&&k<=w$1;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w$1])v$1[w$1]=v(d[j],p$1[w$1]),j--,w$1--;else if(h[x]===a[w$1])v$1[w$1]=v(d[x],p$1[w$1]),r$1(s,v$1[w$1+1],d[x]),x++,w$1--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),r$1(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w$1),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$1(s,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),r$1(s,d[x],t),d[e]=null;k++;}else h$2(d[j]),j--;else h$2(d[x]),x++;for(;k<=w$1;){const e=r$1(s,v$1[w$1+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&h$2(e);}return this.ut=a,m$1(s,v$1),w}});
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class RangeChangedEvent extends Event {
-    constructor(range) {
-        super(RangeChangedEvent.eventName, { bubbles: false });
-        this.first = range.first;
-        this.last = range.last;
-    }
-}
-RangeChangedEvent.eventName = 'rangeChanged';
-class VisibilityChangedEvent extends Event {
-    constructor(range) {
-        super(VisibilityChangedEvent.eventName, { bubbles: false });
-        this.first = range.first;
-        this.last = range.last;
-    }
-}
-VisibilityChangedEvent.eventName = 'visibilityChanged';
-class UnpinnedEvent extends Event {
-    constructor() {
-        super(UnpinnedEvent.eventName, { bubbles: false });
-    }
-}
-UnpinnedEvent.eventName = 'unpinned';
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class ScrollerShim {
-    constructor(element) {
-        this._element = null;
-        const node = element ?? window;
-        this._node = node;
-        if (element) {
-            this._element = element;
-        }
-    }
-    get element() {
-        return (this._element || document.scrollingElement || document.documentElement);
+    get element() {
+        return (this._element || document.scrollingElement || document.documentElement);
     }
     get scrollTop() {
         return this.element.scrollTop || window.scrollY;
@@ -2440,11 +2231,39 @@ const useStyleSheet = (css) => {
     }, [css]);
 };
 
+const identity = (obj) => obj;
+
+/* eslint-disable no-use-before-define, import/group-exports */
+function prop(key) {
+    if (!key) {
+        return identity;
+    }
+    return (obj) => obj?.[key];
+}
+const strProp = (key) => {
+    const p = prop(key);
+    return (o) => {
+        if (typeof o === 'string') {
+            return o;
+        }
+        return p(o)?.toString() || '';
+    };
+};
+const props = (keys) => (obj) => {
+    const ret = {};
+    for (const key in obj) {
+        if (keys.includes(key)) {
+            ret[key] = obj[key];
+        }
+    }
+    return ret;
+};
+
 const svg = (
   /* eslint-disable quotes */
   "data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 1L5.20039 7.04766L1.66348 3.46152' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"
 );
-const style$2 = tagged`
+const style$1 = tagged`
 	:host {
 		position: fixed;
 		z-index: 1000;
@@ -2456,6 +2275,7 @@ const style$2 = tagged`
 			0 1px 8px 0 rgba(0, 0, 0, 0.12),
 			0 3px 3px -2px rgba(0, 0, 0, 0.4);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
+		overflow: hidden;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
@@ -2470,7 +2290,6 @@ const style$2 = tagged`
 		position: relative;
 		overflow-y: auto;
 		contain: layout paint !important;
-		height: 100%;
 	}
 	.item {
 		font-size: 14px;
@@ -2539,8 +2358,8 @@ const style$2 = tagged`
 `;
 const styles$1 = ({ index, height, itemHeight }) => tagged`
 	:host {
-		min-height: ${itemHeight}px;
-		height: ${height}px;
+		xmin-height: ${itemHeight}px;
+		xheight: ${height}px;
 	}
 
 	.item {
@@ -3119,6 +2938,29 @@ const usePosition = ({ anchor: anchorage, host, ...thru }) => {
     }, [anchorage, ...Object.values(thru)]);
 };
 
+const isIterable = (x) => {
+    return typeof x === 'object' && x !== null && Symbol.iterator in x;
+};
+function array(arr) {
+    if (arr == null) {
+        return [];
+    }
+    if (Array.isArray(arr)) {
+        return arr;
+    }
+    if (typeof arr === 'string') {
+        return [arr];
+    }
+    if (isIterable(arr)) {
+        return Array.from(arr);
+    }
+    return [arr];
+}
+const without = (exclude, predicate = identity) => (list) => {
+    const excludes = array(exclude).map(predicate);
+    return array(list).filter((value) => !excludes.includes(predicate(value)));
+};
+
 const byValue = (value, valueProperty) => {
   if (!valueProperty) {
     return (item) => array(value).includes(item);
@@ -3140,7 +2982,18 @@ const mark = (text, query) => {
     text.slice(end)
   ];
 };
-const loadingSymbol = Symbol("loading");
+
+/**
+ * Copies properties of an Object into a memoized object.
+ * Useful to create an object that does not change.
+ *
+ * @param {Object} meta - The source object
+ * @returns {Object} The memoized object.
+ */
+const useMeta = (meta) => {
+    const ref = useMemo(() => ({}), []);
+    return useMemo(() => Object.assign(ref, meta), [ref, ...Object.values(meta)]);
+};
 
 const useKeyboard = (handlers) => {
   const listeners = useMeta(handlers);
@@ -3199,37 +3052,7 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
   };
 };
 
-const style$1 = css`
-	:host {
-		display: inline-block;
-		vertical-align: middle;
-		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
-		background-size: 1000%;
-		background-position: right;
-		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
-		border-radius: 3px;
-		width: calc(100% - 35px);
-		max-width: 150px;
-		height: 20px;
-	}
-
-	@keyframes sweep {
-		0% {
-			background-position: right;
-		}
-		100% {
-			background-position: left;
-		}
-	}
-`;
-customElements.define("cosmoz-autocomplete-skeleton-span", component(() => T, { styleSheets: [style$1] }));
-
 const itemRenderer = (render = identity) => (item, i, { highlight, select, textual = identity, query, isSelected }) => {
-  if (item === loadingSymbol) {
-    return x`<div class="item">
-				<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>
-			</div>`;
-  }
   const text = textual(item), content = mark(text, query), rendered = render(content, item, i);
   return x` <div
 				class="item"
@@ -3268,9 +3091,9 @@ const properties = [
   "valueProperty",
   "loading"
 ];
-const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, loading, ...thru }) => {
-  const isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]), __items = useMemo(() => _items.slice(), [_items, isSelected]), items = useMemo(() => loading ? [...__items, loadingSymbol] : __items, [loading, __items]), { position, highlight, select } = useItems({
-    items: __items,
+const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, ...thru }) => {
+  const isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]), items = useMemo(() => _items.slice(), [_items, isSelected]), { position, highlight, select } = useItems({
+    items,
     onSelect,
     defaultIndex: isNaN(defaultIndex) ? void 0 : Number(defaultIndex)
   });
@@ -3313,18 +3136,19 @@ const Listbox = (props2) => {
     _itemSize: { height: itemHeight - 1e-5 }
   }), [itemHeight]);
   return x`<div
-		class="items"
-		${n((el) => listRef.current = el)}
-		style="min-height: ${height}px"
-	>
-		<div virtualizer-sizer></div>
-		${virtualize({
+			class="items"
+			${n$2((el) => listRef.current = el)}
+			style="min-height: ${height}px"
+		>
+			<div virtualizer-sizer></div>
+			${virtualize({
     items,
     renderItem,
     scroller: true,
     layout
   })}
-	</div>`;
+		</div>
+		<slot></slot>`;
 };
 const supportsPopover = () => {
   return HTMLElement.prototype.hasOwnProperty("popover");
@@ -3337,87 +3161,31 @@ const showPopover = (popover) => {
     });
   }
 };
-customElements.define("cosmoz-listbox", component(Listbox, { styleSheets: [sheet(style$2)] }));
-const listbox = ({ multi, ...thru }) => {
-  return x`<cosmoz-listbox
-		${n(showPopover)}
+customElements.define("cosmoz-listbox", component(Listbox, { styleSheets: [sheet(style$1)] }));
+const listbox = ({ multi, ...thru }, content) => x`<cosmoz-listbox
+		${n$2(showPopover)}
 		popover="manual"
 		part="listbox"
 		?multi=${multi}
 		...=${spreadProps(props(properties)(thru))}
-	></cosmoz-listbox>`;
-};
+		>${content}</cosmoz-listbox
+	>`;
 
-var style = tagged`
+var styles = tagged`
 	:host {
-		display: block;
-		position: relative;
-		min-width: 35px;
-	}
-
-	cosmoz-input::part(control) {
+		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
+		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
+		margin: 0px 0 2px 0;
 		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex: 0.0001 1 fit-content;
+		max-width: 18ch;
+		min-width: 40px;
+		padding: 0 4px 0 8px;
 		gap: 4px;
-		min-width: 35px;
-	}
-	cosmoz-input::part(input) {
-		flex: 1 24px;
-		min-width: 0;
-	}
-	cosmoz-input:not([data-one])::part(input):focus {
-		flex: 4 0.00001 50px;
-		min-width: 20px;
-	}
-	.badge {
-		min-width: initial;
-		flex: none;
-		text-align: center;
-		padding: 0 4px;
-	}
-
-	[data-single]::part(input) {
-		flex: 0;
-	}
-	[data-one] .chip {
-		max-width: initial;
-		flex: 1;
-	}
-
-	[data-one] .badge {
-		display: none;
-	}
-
-	[hidden] {
-		display: none;
-	}
-
-	:host([wrap]) cosmoz-input::part(control) {
-		flex-wrap: wrap;
-	}
-	:host([wrap]) .chip {
-		max-width: 100%;
-	}
-
-	slot {
-		display: contents !important;
-	}
-`;
-
-var styles = tagged`
-	:host {
-		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
-		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		margin: 0px 0 2px 0;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		flex: 0.0001 1 fit-content;
-		max-width: 18ch;
-		min-width: 40px;
-		padding: 0 4px 0 8px;
-		gap: 4px;
-		cursor: pointer;
-		transform: translateY(var(--cosmoz-autocomplete-chip-translate-y, 0));
+		cursor: pointer;
+		transform: translateY(var(--cosmoz-autocomplete-chip-translate-y, 0));
 	}
 	.content {
 		color: var(--cosmoz-autocomplete-chip-color, #424242);
@@ -3518,6 +3286,237 @@ const selection = ({ value: values, min = 0, onDeselect, textual, disabled }) =>
   })
 ];
 
+var style = tagged`
+	:host {
+		display: block;
+		position: relative;
+		min-width: 35px;
+	}
+
+	cosmoz-input::part(control) {
+		display: flex;
+		gap: 4px;
+		min-width: 35px;
+	}
+	cosmoz-input::part(input) {
+		flex: 1 24px;
+		min-width: 0;
+	}
+	cosmoz-input:not([data-one])::part(input):focus {
+		flex: 4 0.00001 50px;
+		min-width: 20px;
+	}
+	.badge {
+		min-width: initial;
+		flex: none;
+		text-align: center;
+		padding: 0 4px;
+	}
+
+	[data-single]::part(input) {
+		flex: 0;
+	}
+	[data-one] .chip {
+		max-width: initial;
+		flex: 1;
+	}
+
+	[data-one] .badge {
+		display: none;
+	}
+
+	[hidden] {
+		display: none;
+	}
+
+	:host([wrap]) cosmoz-input::part(control) {
+		flex-wrap: wrap;
+	}
+	:host([wrap]) .chip {
+		max-width: 100%;
+	}
+
+	slot {
+		display: contents !important;
+	}
+`;
+
+const isFocused = (t) => t.matches(':focus-within');
+const useFocus = ({ disabled, onFocus }) => {
+    const [focusState, setState] = useState(), { focused: _focused, closed } = focusState || {}, focused = _focused && !disabled, meta = useMeta({ closed, onFocus }), setClosed = useCallback((closed) => setState((p) => ({ ...p, closed })), []), onToggle = useCallback((e) => {
+        const target = e.currentTarget;
+        return isFocused(target)
+            ? setState((p) => ({ focused: true, closed: !p?.closed }))
+            : target.focus();
+    }, []);
+    useEffect(() => {
+        if (!focused) {
+            return;
+        }
+        const handler = (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            const { closed } = meta;
+            if (e.key === 'Escape' && !closed) {
+                e.preventDefault();
+                setClosed(true);
+            }
+            else if (['ArrowUp', 'Up'].includes(e.key) && closed) {
+                e.preventDefault();
+                setClosed(false);
+            }
+        };
+        document.addEventListener('keydown', handler, true);
+        return () => document.removeEventListener('keydown', handler, true);
+    }, [focused]);
+    return {
+        focused,
+        active: focused && !closed,
+        setClosed,
+        onToggle,
+        onFocus: useCallback((e) => {
+            const focused = isFocused(e.currentTarget);
+            setState({ focused });
+            meta.onFocus?.(focused);
+        }, [meta]),
+    };
+};
+
+const useKeys = ({ focused, empty, ...rest }) => {
+  const enabled = focused && empty, meta = useMeta(rest);
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const handler = (e) => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      const { key } = e, values = array(meta.value), isOne = meta.limit == 1;
+      if (values.length > 0 && (key === "Backspace" || isOne && key.length === 1)) {
+        return meta.onChange(values.slice(0, -1));
+      }
+    };
+    document.addEventListener("keydown", handler, true);
+    return () => document.removeEventListener("keydown", handler, true);
+  }, [enabled, meta]);
+};
+
+const search = (source, query, textual) => {
+  if (!query)
+    return source;
+  const qry = query.toLowerCase();
+  const matches = [];
+  for (const item of source) {
+    const index = textual(item).toLowerCase().indexOf(qry);
+    if (index < 0) {
+      continue;
+    }
+    matches.push({
+      item,
+      index
+    });
+  }
+  return matches.sort((a, b) => a.index - b.index).map(({ item }) => item);
+};
+const normalize = (source) => {
+  if (source === false || source == null)
+    return [];
+  return source;
+};
+const notify = (host, name, detail) => host.dispatchEvent(new CustomEvent(name, { detail }));
+const useNotify = (host, fn, name) => useCallback((val) => {
+  fn?.(val);
+  notify(host, name, val);
+}, [fn]);
+const EMPTY = [];
+const raf = (fn) => (...args) => {
+  let id;
+  const cleanup = () => {
+    if (id)
+      cancelAnimationFrame(id);
+  };
+  cleanup();
+  id = requestAnimationFrame(() => {
+    id = void 0;
+    fn(...args);
+  });
+  return cleanup;
+};
+
+const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
+  const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [text]), host = useHost(), onText = useNotify(host, _onText, "text"), onChange = useCallback((val) => {
+    _onChange?.(val, () => setClosed(true));
+    notify(host, "value", val);
+  }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === "function" ? source({ query, active }) : source).then(normalize), [source, active, query]), value = useMemo(() => array(_value), [_value]);
+  useEffect(() => source$.then(setOptions), [source$]);
+  useKeys({
+    focused,
+    empty,
+    limit,
+    value,
+    onChange,
+    onText
+  });
+  useEffect(() => {
+    if (!focused)
+      onText("");
+  }, [focused]);
+  const meta = useMeta({
+    onText,
+    onChange,
+    value,
+    limit,
+    min,
+    keepQuery,
+    keepOpened,
+    setClosed,
+    onSelect
+  });
+  return {
+    active,
+    query,
+    textual,
+    value,
+    source$,
+    items: useMemo(() => {
+      if (!active)
+        return EMPTY;
+      const items = preserveOrder ? options : [...value, ...without(value, prop(valueProperty))(options)];
+      return search(items, query, textual);
+    }, [
+      options,
+      active,
+      query,
+      textual,
+      empty,
+      value,
+      preserveOrder,
+      valueProperty
+    ]),
+    onClick: useCallback(() => setClosed(false), []),
+    onFocus,
+    onText: useCallback((e) => {
+      onText(e.target.value);
+      setClosed(false);
+    }, [onText, text, setClosed]),
+    onSelect: useCallback((newVal) => {
+      meta.onSelect?.(newVal, meta);
+      const { onChange: onChange2, onText: onText2, limit: limit2, min: min2, value: val, keepQuery: keepQuery2, keepOpened: keepOpened2, setClosed: setClosed2 } = meta;
+      if (!keepQuery2)
+        onText2("");
+      if (!keepOpened2)
+        setClosed2(true);
+      const value2 = array(val), deselect = value2.includes(newVal);
+      if (deselect && value2.length === min2)
+        return;
+      onChange2((deselect ? without(newVal)(value2) : [...value2, newVal]).slice(-limit2));
+    }, [meta]),
+    onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta])
+  };
+};
+
 const overflow = (host) => {
   const chips = host.shadowRoot.querySelectorAll(".chip");
   const badge = host.shadowRoot.querySelector(".badge");
@@ -3562,14 +3561,9 @@ const useOverflow = ({ value, active, wrap, limit }) => {
 };
 
 const inputParts = ["input", "control", "label", "line", "error", "wrap"].map((part) => `${part}: input-${part}`).join();
+const blank = () => T;
 const autocomplete = (props) => {
   const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$ } = props, host = useHost(), isOne = limit == 1, isSingle = isOne && value?.[0] != null, anchor = useCallback(() => host.shadowRoot.querySelector("#input"), [host, value]);
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    setLoading(true);
-    const endLoading = setLoading.bind(null, false);
-    source$.then(endLoading, endLoading);
-  }, [source$]);
   useImperativeApi({
     focus: () => host.shadowRoot?.querySelector("#input")?.focus()
   }, []);
@@ -3606,13 +3600,12 @@ const autocomplete = (props) => {
   })}
 			</cosmoz-input>
 
-			${n$1(active && (loading || items.length > 0) && !(isSingle && !showSingle), () => listbox({
+			${n$1(active && !(isSingle && !showSingle), () => listbox({
     ...props,
     anchor,
     items,
-    multi: !isOne,
-    loading
-  }))}`;
+    multi: !isOne
+  }, n$1(items.length < 5, () => m(source$.then(blank, blank), x`<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`))))}`;
 }, Autocomplete$1 = (props) => {
   const thru = {
     ...props,
diff --git a/pr/pr-180/inline-module-a412f23235eb971c4a27c3950e98fd49.js b/pr/pr-180/inline-module-a412f23235eb971c4a27c3950e98fd49.js
index 84358c4..55ebc6e 100644
--- a/pr/pr-180/inline-module-a412f23235eb971c4a27c3950e98fd49.js
+++ b/pr/pr-180/inline-module-a412f23235eb971c4a27c3950e98fd49.js
@@ -11,7 +11,7 @@ if (SERVER_CHANNEL_URL) {
 }
 
 const importers = {
-  "./stories/cosmoz-autocomplete.stories.js": () => import('./cosmoz-autocomplete.stories-CpayrQf7.js')
+  "./stories/cosmoz-autocomplete.stories.js": () => import('./cosmoz-autocomplete.stories-B-XW1aYu.js')
 };
 function importFn(path) {
   return importers[path]();
diff --git a/pr/pr-180/project.json b/pr/pr-180/project.json
index b291954..df203f2 100644
--- a/pr/pr-180/project.json
+++ b/pr/pr-180/project.json
@@ -1 +1 @@
-{"generatedAt":1731972524319,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.0"},"framework":{"name":"@web/storybook-framework-web-components"},"renderer":"@storybook/web-components","storybookVersion":"7.6.17","storybookVersionSpecifier":"7.6.17","language":"javascript","storybookPackages":{"@storybook/builder-vite":{"version":"7.6.17"},"@storybook/storybook-deployer":{"version":"2.8.16"},"@storybook/web-components":{"version":"7.6.17"},"@web/storybook-builder":{"version":null},"@web/storybook-framework-web-components":{"version":"0.1.2"},"storybook":{"version":"7.6.19"}},"addons":{"@storybook/addon-essentials":{"version":"7.6.19"},"@storybook/addon-links":{"version":"7.6.19"}}}
+{"generatedAt":1732016301919,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.0"},"framework":{"name":"@web/storybook-framework-web-components"},"renderer":"@storybook/web-components","storybookVersion":"7.6.17","storybookVersionSpecifier":"7.6.17","language":"javascript","storybookPackages":{"@storybook/builder-vite":{"version":"7.6.17"},"@storybook/storybook-deployer":{"version":"2.8.16"},"@storybook/web-components":{"version":"7.6.17"},"@web/storybook-builder":{"version":null},"@web/storybook-framework-web-components":{"version":"0.1.2"},"storybook":{"version":"7.6.19"}},"addons":{"@storybook/addon-essentials":{"version":"7.6.19"},"@storybook/addon-links":{"version":"7.6.19"}}}