@neovici/cosmoz-autocomplete 13.6.0 → 13.7.0-beta.1

package/dist/autocomplete/autocomplete.d.ts

@@ -3,15 +3,16 @@ import '@neovici/cosmoz-input';
 import { ItemRenderer } from '../listbox/item-renderer';
 import { ChipRenderer } from './selection';
 import './skeleton-span';
-import style from './styles.css';
+import style from './style.css';
 import { Props as Base, RProps } from './use-autocomplete';
 export interface Props<I> extends Base<I> {
+    mode?: 'select';
+    variant?: 'default' | 'cell' | 'inline';
     invalid?: boolean;
     errorMessage?: string;
+    hint?: string;
     label?: string;
     placeholder?: string;
-    noLabelFloat?: boolean;
-    alwaysFloatLabel?: boolean;
     showSingle?: boolean;
     itemHeight?: number | 'auto';
     itemLimit?: number;
@@ -24,5 +25,5 @@ export interface Props<I> extends Base<I> {
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;
 };
-declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "external-search", "item-height", "item-limit", "wrap", "lazy-open"];
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["variant", "disabled", "invalid", "hint", "error-message", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "external-search", "item-height", "item-limit", "wrap", "lazy-open", "mode"];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -1,15 +1,17 @@
 import '@neovici/cosmoz-dropdown/cosmoz-dropdown-next';
+import { chevronDownIcon } from '@neovici/cosmoz-icons/untitled';
 import '@neovici/cosmoz-input';
 import { t } from 'i18next';
 import { html } from 'lit-html';
 import { guard } from 'lit-html/directives/guard.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { live } from 'lit-html/directives/live.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
 import { listbox } from '../listbox';
 import { selection } from './selection';
 import './skeleton-span';
-import style from './styles.css';
+import style from './style.css';
 import { useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
@@ -23,7 +25,7 @@ const shouldShowDropdown = ({ opened, isSingle, showSingle, hasResultsOrQuery, }
     return hasResultsOrQuery;
 };
 const autocomplete = (props) => {
-    const { opened, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onToggle, onDeselect, value, limit, min, showSingle, items, source$, loading, chipRenderer, } = props, isOne = limit === 1, isSingle = isOne && value?.[0] != null;
+    const { variant, opened, invalid, errorMessage, hint, label, placeholder, disabled, textual, text, onText, onToggle, onDeselect, value, limit, min, showSingle, items, source$, loading, chipRenderer, mode, } = props, isOne = limit === 1, isSingle = isOne && value?.[0] != null;
     const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
     return html `<cosmoz-dropdown-next
 			open-on-focus
@@ -38,8 +40,8 @@ const autocomplete = (props) => {
 				part="input"
 				.label=${label}
 				.placeholder=${isSingle ? undefined : placeholder}
-				?no-label-float=${noLabelFloat}
-				?always-float-label=${value?.length > 0 || alwaysFloatLabel}
+				hint=${ifDefined(hint)}
+				variant=${ifDefined(variant)}
 				?readonly=${isSingle}
 				?disabled=${disabled}
 				?invalid=${guard([source$, invalid], () => until(source$.then(() => invalid, () => true), invalid))}
@@ -52,7 +54,13 @@ const autocomplete = (props) => {
 				?data-single=${isSingle}
 			>
 				<slot name="prefix" slot="prefix"></slot>
-				<slot name="suffix" slot="suffix"></slot>
+				<slot name="suffix" slot="suffix">
+					${when(mode === 'select', () => chevronDownIcon({
+        styles: 'margin-right: calc(var(--cz-spacing) * 2);color: var(--cz-color-text-secondary);',
+        width: '16',
+        height: '16',
+    }))}
+				</slot>
 				${selection({
         value,
         min,
@@ -74,7 +82,7 @@ const autocomplete = (props) => {
         items,
         multi: !isOne,
     }, when(loading, () => html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`, () => when(text != null && text.length > 0 && items.length === 0, () => html `<slot name="no-result">
-											<p class="no-result">${t('No results found')}</p>
+											<span class="no-result">${t('No results found')}</span>
 										</slot>`))))}
 		</cosmoz-dropdown-next>`;
 }, Autocomplete = (props) => {
@@ -85,10 +93,11 @@ const autocomplete = (props) => {
     useOverflow(thru);
     return autocomplete(thru);
 }, observedAttributes = [
+    'variant',
     'disabled',
     'invalid',
-    'no-label-float',
-    'always-float-label',
+    'hint',
+    'error-message',
     'text-property',
     'value-property',
     'limit',
@@ -103,5 +112,6 @@ const autocomplete = (props) => {
     'item-limit',
     'wrap',
     'lazy-open',
+    'mode',
 ];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/chip.d.ts

@@ -1,8 +1,8 @@
+import '@neovici/cosmoz-tag';
 interface Props {
     onClear?: false | (() => void);
     disabled?: boolean;
 }
-export declare const Chip: ({ onClear, disabled }: Props) => import("lit-html").TemplateResult<1>;
 export interface ChipProps<I> extends Props {
     item: I | null;
     slot?: string;
@@ -10,5 +10,5 @@ export interface ChipProps<I> extends Props {
     content: unknown;
     hidden?: boolean;
 }
-export declare const chip: <I>({ content, onClear, disabled, hidden, className, slot, }: ChipProps<I>) => import("lit-html").TemplateResult<1>;
+export declare const chip: <I>({ content, onClear, disabled, className, hidden, slot, }: ChipProps<I>) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/autocomplete/chip.js

@@ -1,61 +1,14 @@
-import { sheet } from '@neovici/cosmoz-utils';
-import { component, html } from '@pionjs/pion';
+import '@neovici/cosmoz-tag';
+import { html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { when } from 'lit-html/directives/when.js';
-import styles from './chip.css';
-const clear = html `
-	<svg
-		width="9"
-		height="8"
-		viewBox="0 0 9 8"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<line
-			x1="7.53033"
-			y1="0.994808"
-			x2="1.16637"
-			y2="7.35877"
-			stroke-width="1.5"
-		/>
-		<line
-			x1="7.46967"
-			y1="7.35882"
-			x2="1.10571"
-			y2="0.99486"
-			stroke-width="1.5"
-		/>
-	</svg>
-`;
-export const Chip = ({ onClear, disabled }) => html `
-	<div
-		class="content"
-		part="content chip-text"
-		@mousedown=${(ev) => ev.preventDefault()}
-	>
-		<slot></slot>
-	</div>
-	${when(onClear && !disabled, () => html `<span
-				class="clear"
-				part="clear chip-clear"
-				@mousedown=${(ev) => ev.preventDefault()}
-				@click=${onClear}
-			>
-				${clear}
-			</span>`)}
-`;
-customElements.define('cosmoz-autocomplete-chip', component(Chip, {
-    observedAttributes: ['disabled'],
-    styleSheets: [sheet(styles)],
-}));
-export const chip = ({ content, onClear, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
+export const chip = ({ content, onClear, disabled, className = 'chip', hidden, slot, }) => html `<cosmoz-tag
 		class=${ifDefined(className)}
 		slot=${ifDefined(slot)}
-		part="chip"
 		exportparts="chip-text, chip-clear"
 		?disabled=${disabled}
 		?hidden=${hidden}
-		.onClear=${onClear}
+		?removable=${!!onClear && !disabled}
+		@remove=${onClear}
 		title=${ifDefined(typeof content === 'string' ? content : undefined)}
-		>${content}</cosmoz-autocomplete-chip
+		>${content}</cosmoz-tag
 	>`;

package/dist/autocomplete/index.js

@@ -2,7 +2,8 @@ import { sheet } from '@neovici/cosmoz-utils';
 import { component, useCallback, useEffect, useProperty } from '@pionjs/pion';
 import { Autocomplete, observedAttributes, style } from './autocomplete';
 const Standalone = (host) => {
-    const { onChange, onText, ...props } = host;
+    const { onChange, onText, mode, ...props } = host;
+    const isSelect = mode === 'select';
     const [value, setValue] = useProperty('value');
     useEffect(() => {
         if (host.onChange == null)
@@ -12,6 +13,12 @@ const Standalone = (host) => {
     }, []);
     return Autocomplete({
         ...props,
+        ...(isSelect && {
+            limit: 1,
+            min: 1,
+            showSingle: true,
+        }),
+        mode,
         value,
         onChange: useCallback((value, ...args) => {
             setValue(value);

package/dist/autocomplete/style.css.js

@@ -0,0 +1,91 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+export default css `
+	:host {
+		display: block;
+		position: relative;
+		min-width: calc(var(--cz-spacing) * 9);
+	}
+
+	:host([mode='select']) {
+		--cosmoz-badge-border-color: transparent;
+		--cosmoz-badge-bg-color: transparent;
+	}
+
+	cosmoz-dropdown-next {
+		display: block;
+	}
+
+	:host(:not([variant='inline'])) cosmoz-listbox {
+		margin-top: var(--cz-spacing);
+	}
+
+	:host([error-message]) cosmoz-listbox,
+	:host([hint]) cosmoz-listbox {
+		margin-top: calc((var(--cz-spacing) * -5));
+	}
+
+	cosmoz-tag {
+		align-items: center;
+		margin-left: calc(var(--cz-spacing) * 2);
+	}
+
+	cosmoz-input::part(control) {
+		display: flex;
+		min-width: calc(var(--cz-spacing) * 9);
+	}
+
+	cosmoz-input[variant='inline']:has(cosmoz-tag[removable])::part(label),
+	cosmoz-input[variant='inline'][disabled]:has(cosmoz-tag)::part(label) {
+		transform: translate(var(--cz-spacing), -75%) scale(0.85);
+	}
+
+	cosmoz-input::part(input) {
+		flex: 1 calc(var(--cz-spacing) * 6);
+		min-width: 0;
+	}
+
+	cosmoz-input:not([data-one])::part(input):focus {
+		flex: 4 0.00001 calc(var(--cz-spacing) * 12.5);
+		min-width: calc(var(--cz-spacing) * 5);
+	}
+
+	.badge {
+		min-width: initial;
+		flex: none;
+		text-align: center;
+		padding: 0 var(--cz-spacing);
+	}
+
+	[data-single]::part(input) {
+		flex: 0;
+	}
+
+	[data-one] .badge {
+		display: none;
+	}
+
+	[hidden] {
+		display: none;
+	}
+
+	:host([wrap]) cosmoz-input::part(control) {
+		flex-wrap: wrap;
+		padding-right: calc(var(--cz-spacing) * 2);
+	}
+
+	:host([wrap]) cosmoz-tag {
+		padding-block: calc(var(--cz-spacing) * 1.5);
+	}
+
+	slot {
+		display: contents !important;
+	}
+
+	.no-result {
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
+		font-weight: var(--cz-font-weight-regular);
+		padding: 0 calc(var(--cz-spacing) * 3);
+		color: var(--cz-color-text-secondary);
+	}
+`;

package/dist/autocomplete/use-overflow.js

@@ -5,6 +5,8 @@ import { raf } from './util';
 const overflow = (host) => {
     const chips = host.shadowRoot.querySelectorAll('.chip');
     const badge = host.shadowRoot.querySelector('.badge');
+    if (!badge)
+        return;
     badge.hidden = true;
     for (const chip of chips) {
         chip.hidden = false;

package/dist/excluding/index.d.ts

@@ -1 +1,2 @@
+import '@neovici/cosmoz-tag';
 import '../autocomplete';

package/dist/excluding/index.js

@@ -1,5 +1,5 @@
+import '@neovici/cosmoz-tag';
 import { component, html, useCallback, useMemo, useProperty, } from '@pionjs/pion';
-import { nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import '../autocomplete';
 import { Autocomplete, observedAttributes, style, } from '../autocomplete/autocomplete';
@@ -7,7 +7,7 @@ import excludingStyle from './style.css';
 import { useExcludingSelection } from './use-excluding-selection';
 import { unwrap } from './utils';
 const isItemExcluded = (value, item) => value?.some((v) => v.item === item && v.excluded);
-const excludedState = (value, item) => (item && isItemExcluded(value, item) ? 'excluded' : nothing);
+const excludedState = (value, item) => (item && isItemExcluded(value, item) ? 'error' : 'gray');
 const mkItemRenderer = (value) => (item, i, { highlight, select, textual, isSelected }) => {
     const rendered = textual(item);
     return html `<div
@@ -24,19 +24,19 @@ const mkItemRenderer = (value) => (item, i, { highlight, select, textual, isSele
 			</div>
 			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
 };
-const mkChipRenderer = (value, onClear) => ({ item, content, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
+const mkChipRenderer = (value, onClear) => ({ item, content, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-tag
 			class=${ifDefined(className)}
 			slot=${ifDefined(slot)}
-			part="chip"
 			exportparts="chip-text, chip-clear"
-			data-state=${excludedState(value, item)}
+			color=${excludedState(value, item)}
 			?disabled=${disabled}
 			?hidden=${hidden}
-			.onClear=${() => onClear(item)}
+			?removable=${!!item}
+			@remove=${() => onClear(item)}
 			title=${ifDefined(typeof content === 'string' ? content : undefined)}
 		>
 			${content}
-		</cosmoz-autocomplete-chip>`;
+		</cosmoz-tag>`;
 const AutocompleteExcluding = (props) => {
     const { value, setValue, setExcludingValue } = useExcludingSelection('value');
     const [text, setText] = useProperty('text');

package/dist/excluding/style.css.js

@@ -5,39 +5,14 @@ const clearSVG =
     "d='M2.5 2.5L8.5 8.5M8.5 2.5L2.5 8.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E";
 /* eslint-enable quotes */
 const excludingStyle = css `
-	.chip[data-state='excluded'] {
-		background: var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54));
-	}
-
-	cosmoz-autocomplete-chip[data-state='excluded']::part(content) {
-		color: var(--cosmoz-autocomplete-excluded-chip-color, #fff);
-	}
-
-	cosmoz-autocomplete-chip[data-state='excluded']::part(clear) {
-		background-color: var(
-			--cosmoz-autocomplete-excluded-chip-clear-bg-color,
-			#fff
-		);
-		stroke: var(
-			--cosmoz-autocomplete-excluded-chip-clear-stroke,
-			var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54))
-		);
-	}
-
-	cosmoz-listbox::part(excluded)::before {
-		border-color: var(
-			--cosmoz-autocomplete-excluded-bg-color,
-			rgb(244, 67, 54)
-		);
+	cosmoz-listbox::part(error)::before {
+		border-color: var(--cz-color-border-error);
 		/* prettier-ignore */
-		background: url("${clearSVG}") var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54)) no-repeat 50%;
+		background: url("${clearSVG}") var(--cz-color-border-error) no-repeat 50%;
 	}
 
-	cosmoz-listbox::part(excluded):hover {
-		background: var(
-			--cosmoz-listbox-excluded-active-color,
-			rgba(244, 67, 54, 0.1)
-		);
+	cosmoz-listbox::part(error):hover {
+		background: var(--cz-color-bg-error);
 	}
 `;
 export default excludingStyle;

package/dist/listbox/style.css.js

@@ -8,38 +8,45 @@ const checkSVG =
 const style = css `
 	:host {
 		display: block;
-		font-family: var(--paper-font-subhead_-_font-family, inherit);
-		background: var(
-			--cosmoz-autocomplete-listbox-bg,
-			rgba(255, 255, 255, 0.75)
-		);
+		font-family: var(--cz-font-body);
+		background: var(--cz-color-bg-primary);
 		backdrop-filter: blur(16px) saturate(180%);
 		-webkit-backdrop-filter: blur(16px) saturate(180%);
-		border-radius: 6px;
-		box-shadow:
-			0 4px 24px 0 rgba(0, 0, 0, 0.18),
-			0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
-		border: 1px solid rgba(200, 200, 200, 0.25);
+		border-radius: var(--cz-radius-md);
+		box-shadow: 0 0 0 1px var(--cz-color-border-primary);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
 		overflow: hidden;
+		padding-block: var(--cz-spacing);
 	}
 	.items {
 		position: relative;
 		overflow-y: auto;
+		scrollbar-width: thin;
 		contain: layout paint !important;
+		padding-inline: calc(var(--cz-spacing) * 1.5);
+	}
+	:host(:focus-within) {
+		outline: none;
+		box-shadow: var(--cz-focus-ring);
+	}
+	.items:focus-visible {
+		outline: none;
 	}
 	.item {
-		font-size: var(--cosmoz-autocomplete-listbox-font-size, 13px);
-		font-weight: var(--cosmoz-autocomplete-listbox-font-weight, 400);
-		padding: 0 22px;
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
+		font-weight: var(--cz-font-weight-regular);
 		box-sizing: border-box;
-		width: 100%;
+		border-radius: var(--cz-radius-sm);
+		width: calc(100% - var(--cz-spacing) * 3);
 		cursor: pointer;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		transition: background 0.2s;
-		color: var(--cosmoz-listbox-color, #101010);
+		transition: background 0.25s;
+		color: var(--cz-color-text-primary);
 		overflow: hidden;
+		padding-inline: calc(var(--cz-spacing) * 2);
+		margin-block: 1px;
 	}
 
 	.sizer {
@@ -50,39 +57,34 @@ const style = css `
 		z-index: -1;
 		height: 0;
 		width: auto;
-		padding: 0 20px;
+		padding: 0 calc(var(--cz-spacing) * 5);
 		overflow: hidden;
 		max-width: inherit;
-		font-size: 14px;
+		font-size: var(--cz-text-sm);
+		line-height: var(--cz-text-sm-line-height);
 	}
 
 	:host(:not([multi])) .item[aria-selected] {
-		background: var(--cosmoz-listbox-single-selection-color, #dadada);
-	}
-
-	:host([multi]) .item {
-		padding-left: 0;
+		background: rgb(
+			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.25)
+		);
 	}
 
 	:host([multi]) .item::before {
 		content: '';
 		font-size: 0;
-		padding: 7.5px;
-		margin: 0 8px;
-		background: #fff;
-		border: 1px solid #d6d6d5;
-		border-radius: 4px;
+		padding: calc(var(--cz-spacing) * 2);
+		margin-right: calc(var(--cz-spacing) * 2);
+		background: var(--cz-color-bg-tertiary);
+		border: 1px solid var(--cz-color-bg-quaternary);
+		border-radius: var(--cz-radius-xs);
 		vertical-align: top;
 	}
 
 	:host([multi]) .item[aria-selected]::before {
-		border-color: #5881f6;
+		border-color: var(--cz-color-bg-brand-solid);
 		/* prettier-ignore */
-		background: url("${checkSVG}") #5881f6 no-repeat 50%;
-	}
-
-	:host([multi]) .sizer {
-		padding-left: 33px;
+		background: url("${checkSVG}") var(--cz-color-bg-brand-solid) no-repeat 50%;
 	}
 
 	[virtualizer-sizer]:not(.sizer) {
@@ -97,11 +99,12 @@ export const styles = ({ index, itemHeight, auto, }) => css `
 				height: ${itemHeight}px;
 			}
 		`)}
-
 	.item[data-index='${index || '0'}'] {
-		background: var(
-			--cosmoz-listbox-active-color,
-			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+		background: rgb(
+			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.15)
 		);
 	}
+	.item[data-index='${index || '0'}'][part~='error'] {
+		background: var(--cz-color-bg-error);
+	}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "13.6.0",
+	"version": "13.7.0-beta.1",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [
@@ -48,7 +48,6 @@
 			"@semantic-release/npm",
 			"@semantic-release/git"
 		],
-		"branch": "master",
 		"preset": "conventionalcommits"
 	},
 	"publishConfig": {
@@ -79,11 +78,14 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^7.5.0",
-		"@neovici/cosmoz-input": "^5.6.0",
+		"@neovici/cosmoz-dropdown": "^7.6.0",
+		"@neovici/cosmoz-icons": "^1.6.0",
+		"@neovici/cosmoz-input": "^6.0.0-beta.1",
+		"@neovici/cosmoz-tag": "^1.3.0",
+		"@neovici/cosmoz-tokens": "^3.4.0",
 		"@neovici/cosmoz-utils": "^6.20.0",
 		"@pionjs/pion": "^2.7.1",
-		"i18next": "^26.0.10",
+		"i18next": ">=23.0.0 <27.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
@@ -93,6 +95,7 @@
 		"@playwright/test": "^1.43.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
+		"@storybook/addon-a11y": "^10.3.4",
 		"@storybook/addon-docs": "^10.0.0",
 		"@storybook/addon-vitest": "^10.0.0",
 		"@storybook/web-components-vite": "^10.0.0",

package/dist/autocomplete/chip.css.js

@@ -1,57 +0,0 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
-export default css `
-	:host {
-		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
-		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		margin-bottom: 2px;
-		display: flex;
-		align-items: center;
-		flex: 0.0001 1 fit-content;
-		max-width: 18ch;
-		min-width: 40px;
-		padding-inline: 8px;
-		gap: 4px;
-		cursor: pointer;
-		transform: translateY(var(--cosmoz-autocomplete-chip-translate-y, 0));
-	}
-
-	.content {
-		color: var(--cosmoz-autocomplete-chip-color, #424242);
-		font-family: var(
-			--cosmoz-autocomplete-chip-text-font-family,
-			'Inter',
-			sans-serif
-		);
-		font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
-		font-weight: var(--cosmoz-autocomplete-chip-text-font-weight, 400);
-		line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		flex: auto;
-		min-width: 16px;
-	}
-
-	.clear {
-		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
-		border-radius: 50%;
-		cursor: pointer;
-		width: 16px;
-		height: 16px;
-		margin-right: -4px;
-		stroke: var(
-			--cosmoz-autocomplete-chip-clear-stroke,
-			var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
-		);
-		display: var(--cosmoz-autocomplete-chip-clear-display, block);
-		flex: none;
-	}
-
-	.clear:hover {
-		filter: brightness(90%);
-	}
-	.clear svg {
-		display: block;
-		transform: translate(3.5px, 3.5px);
-	}
-`;

package/dist/autocomplete/styles.css.d.ts

@@ -1,2 +0,0 @@
-declare const _default: string;
-export default _default;

package/dist/autocomplete/styles.css.js

@@ -1,66 +0,0 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
-export default css `
-	:host {
-		display: block;
-		position: relative;
-		min-width: 35px;
-	}
-
-	cosmoz-dropdown-next {
-		display: block;
-	}
-
-	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;
-	}
-
-	.no-result {
-		font-size: var(--cosmoz-autocomplete-listbox-font-size, 13px);
-		font-weight: var(--cosmoz-autocomplete-listbox-font-weight, 400);
-		padding: 0 22px;
-		color: var(--cosmoz-listbox-color, #101010);
-	}
-`;