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

package/dist/autocomplete/autocomplete.d.ts

@@ -3,16 +3,15 @@ import '@neovici/cosmoz-input';
 import { ItemRenderer } from '../listbox/item-renderer';
 import { ChipRenderer } from './selection';
 import './skeleton-span';
-import style from './style.css';
+import style from './styles.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;
@@ -25,5 +24,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 ["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"];
+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"];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -1,17 +1,15 @@
 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 './style.css';
+import style from './styles.css';
 import { useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
@@ -25,7 +23,7 @@ const shouldShowDropdown = ({ opened, isSingle, showSingle, hasResultsOrQuery, }
     return hasResultsOrQuery;
 };
 const autocomplete = (props) => {
-    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 { 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 hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
     return html `<cosmoz-dropdown-next
 			open-on-focus
@@ -40,8 +38,8 @@ const autocomplete = (props) => {
 				part="input"
 				.label=${label}
 				.placeholder=${isSingle ? undefined : placeholder}
-				hint=${ifDefined(hint)}
-				variant=${ifDefined(variant)}
+				?no-label-float=${noLabelFloat}
+				?always-float-label=${value?.length > 0 || alwaysFloatLabel}
 				?readonly=${isSingle}
 				?disabled=${disabled}
 				?invalid=${guard([source$, invalid], () => until(source$.then(() => invalid, () => true), invalid))}
@@ -54,13 +52,7 @@ const autocomplete = (props) => {
 				?data-single=${isSingle}
 			>
 				<slot name="prefix" slot="prefix"></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>
+				<slot name="suffix" slot="suffix"></slot>
 				${selection({
         value,
         min,
@@ -82,7 +74,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">
-											<span class="no-result">${t('No results found')}</span>
+											<p class="no-result">${t('No results found')}</p>
 										</slot>`))))}
 		</cosmoz-dropdown-next>`;
 }, Autocomplete = (props) => {
@@ -93,11 +85,10 @@ const autocomplete = (props) => {
     useOverflow(thru);
     return autocomplete(thru);
 }, observedAttributes = [
-    'variant',
     'disabled',
     'invalid',
-    'hint',
-    'error-message',
+    'no-label-float',
+    'always-float-label',
     'text-property',
     'value-property',
     'limit',
@@ -112,6 +103,5 @@ const autocomplete = (props) => {
     'item-limit',
     'wrap',
     'lazy-open',
-    'mode',
 ];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/chip.css.js

@@ -0,0 +1,57 @@
+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/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, className, hidden, slot, }: ChipProps<I>) => import("lit-html").TemplateResult<1>;
+export declare const chip: <I>({ content, onClear, disabled, hidden, className, slot, }: ChipProps<I>) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/autocomplete/chip.js

@@ -1,14 +1,61 @@
-import '@neovici/cosmoz-tag';
-import { html } from '@pionjs/pion';
+import { sheet } from '@neovici/cosmoz-utils';
+import { component, html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export const chip = ({ content, onClear, disabled, className = 'chip', hidden, slot, }) => html `<cosmoz-tag
+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
 		class=${ifDefined(className)}
 		slot=${ifDefined(slot)}
+		part="chip"
 		exportparts="chip-text, chip-clear"
 		?disabled=${disabled}
 		?hidden=${hidden}
-		?removable=${!!onClear && !disabled}
-		@remove=${onClear}
+		.onClear=${onClear}
 		title=${ifDefined(typeof content === 'string' ? content : undefined)}
-		>${content}</cosmoz-tag
+		>${content}</cosmoz-autocomplete-chip
 	>`;

package/dist/autocomplete/index.js

@@ -2,8 +2,7 @@ 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, mode, ...props } = host;
-    const isSelect = mode === 'select';
+    const { onChange, onText, ...props } = host;
     const [value, setValue] = useProperty('value');
     useEffect(() => {
         if (host.onChange == null)
@@ -13,12 +12,6 @@ const Standalone = (host) => {
     }, []);
     return Autocomplete({
         ...props,
-        ...(isSelect && {
-            limit: 1,
-            min: 1,
-            showSingle: true,
-        }),
-        mode,
         value,
         onChange: useCallback((value, ...args) => {
             setValue(value);

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

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

package/dist/autocomplete/styles.css.js

@@ -0,0 +1,66 @@
+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);
+	}
+`;

package/dist/autocomplete/use-overflow.js

@@ -5,8 +5,6 @@ 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,2 +1 @@
-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) ? 'error' : 'gray');
+const excludedState = (value, item) => (item && isItemExcluded(value, item) ? 'excluded' : nothing);
 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-tag
+const mkChipRenderer = (value, onClear) => ({ item, content, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
 			class=${ifDefined(className)}
 			slot=${ifDefined(slot)}
+			part="chip"
 			exportparts="chip-text, chip-clear"
-			color=${excludedState(value, item)}
+			data-state=${excludedState(value, item)}
 			?disabled=${disabled}
 			?hidden=${hidden}
-			?removable=${!!item}
-			@remove=${() => onClear(item)}
+			.onClear=${() => onClear(item)}
 			title=${ifDefined(typeof content === 'string' ? content : undefined)}
 		>
 			${content}
-		</cosmoz-tag>`;
+		</cosmoz-autocomplete-chip>`;
 const AutocompleteExcluding = (props) => {
     const { value, setValue, setExcludingValue } = useExcludingSelection('value');
     const [text, setText] = useProperty('text');

package/dist/excluding/style.css.js

@@ -5,14 +5,39 @@ 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 `
-	cosmoz-listbox::part(error)::before {
-		border-color: var(--cz-color-border-error);
+	.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)
+		);
 		/* prettier-ignore */
-		background: url("${clearSVG}") var(--cz-color-border-error) no-repeat 50%;
+		background: url("${clearSVG}") var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54)) no-repeat 50%;
 	}
 
-	cosmoz-listbox::part(error):hover {
-		background: var(--cz-color-bg-error);
+	cosmoz-listbox::part(excluded):hover {
+		background: var(
+			--cosmoz-listbox-excluded-active-color,
+			rgba(244, 67, 54, 0.1)
+		);
 	}
 `;
 export default excludingStyle;

package/dist/listbox/style.css.js

@@ -8,45 +8,38 @@ const checkSVG =
 const style = css `
 	:host {
 		display: block;
-		font-family: var(--cz-font-body);
-		background: var(--cz-color-bg-primary);
+		font-family: var(--paper-font-subhead_-_font-family, inherit);
+		background: var(
+			--cosmoz-autocomplete-listbox-bg,
+			rgba(255, 255, 255, 0.75)
+		);
 		backdrop-filter: blur(16px) saturate(180%);
 		-webkit-backdrop-filter: blur(16px) saturate(180%);
-		border-radius: var(--cz-radius-md);
-		box-shadow: 0 0 0 1px var(--cz-color-border-primary);
+		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);
 		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(--cz-text-sm);
-		line-height: var(--cz-text-sm-line-height);
-		font-weight: var(--cz-font-weight-regular);
+		font-size: var(--cosmoz-autocomplete-listbox-font-size, 13px);
+		font-weight: var(--cosmoz-autocomplete-listbox-font-weight, 400);
+		padding: 0 22px;
 		box-sizing: border-box;
-		border-radius: var(--cz-radius-sm);
-		width: calc(100% - var(--cz-spacing) * 3);
+		width: 100%;
 		cursor: pointer;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		transition: background 0.25s;
-		color: var(--cz-color-text-primary);
+		transition: background 0.2s;
+		color: var(--cosmoz-listbox-color, #101010);
 		overflow: hidden;
-		padding-inline: calc(var(--cz-spacing) * 2);
-		margin-block: 1px;
 	}
 
 	.sizer {
@@ -57,34 +50,39 @@ const style = css `
 		z-index: -1;
 		height: 0;
 		width: auto;
-		padding: 0 calc(var(--cz-spacing) * 5);
+		padding: 0 20px;
 		overflow: hidden;
 		max-width: inherit;
-		font-size: var(--cz-text-sm);
-		line-height: var(--cz-text-sm-line-height);
+		font-size: 14px;
 	}
 
 	:host(:not([multi])) .item[aria-selected] {
-		background: rgb(
-			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.25)
-		);
+		background: var(--cosmoz-listbox-single-selection-color, #dadada);
+	}
+
+	:host([multi]) .item {
+		padding-left: 0;
 	}
 
 	:host([multi]) .item::before {
 		content: '';
 		font-size: 0;
-		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);
+		padding: 7.5px;
+		margin: 0 8px;
+		background: #fff;
+		border: 1px solid #d6d6d5;
+		border-radius: 4px;
 		vertical-align: top;
 	}
 
 	:host([multi]) .item[aria-selected]::before {
-		border-color: var(--cz-color-bg-brand-solid);
+		border-color: #5881f6;
 		/* prettier-ignore */
-		background: url("${checkSVG}") var(--cz-color-bg-brand-solid) no-repeat 50%;
+		background: url("${checkSVG}") #5881f6 no-repeat 50%;
+	}
+
+	:host([multi]) .sizer {
+		padding-left: 33px;
 	}
 
 	[virtualizer-sizer]:not(.sizer) {
@@ -99,12 +97,11 @@ export const styles = ({ index, itemHeight, auto, }) => css `
 				height: ${itemHeight}px;
 			}
 		`)}
+
 	.item[data-index='${index || '0'}'] {
-		background: rgb(
-			from var(--cz-color-bg-brand-solid) r g b / calc(alpha * 0.15)
+		background: var(
+			--cosmoz-listbox-active-color,
+			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
 		);
 	}
-	.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-beta.1",
+	"version": "13.6.1",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [
@@ -48,6 +48,7 @@
 			"@semantic-release/npm",
 			"@semantic-release/git"
 		],
+		"branch": "master",
 		"preset": "conventionalcommits"
 	},
 	"publishConfig": {
@@ -78,14 +79,11 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.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-dropdown": "^7.5.0",
+		"@neovici/cosmoz-input": "^5.6.0",
 		"@neovici/cosmoz-utils": "^6.20.0",
 		"@pionjs/pion": "^2.7.1",
-		"i18next": "^23.16.8",
+		"i18next": ">=23.0.0 <27.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
@@ -95,7 +93,6 @@
 		"@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/style.css.js

@@ -1,91 +0,0 @@
-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);
-	}
-`;