From 675e18b8d164081e25fddf4c49221d3dbdce3f4c Mon Sep 17 00:00:00 2001
From: Luki Centuri <lukicenturi@gmail.com>
Date: Thu, 14 Dec 2023 18:13:30 +0700
Subject: [PATCH] feat(Chip)!: add closeable, readonly, and close-icon props
 (#150)

---
 example/src/views/ChipView.vue                | 534 ++++++++----------
 src/components/chips/Chip.spec.ts             |  51 +-
 src/components/chips/Chip.stories.ts          | 144 +++--
 src/components/chips/Chip.vue                 | 136 +++--
 .../auto-complete/AutoCompleteSelection.vue   |  18 +-
 5 files changed, 472 insertions(+), 411 deletions(-)

diff --git a/example/src/views/ChipView.vue b/example/src/views/ChipView.vue
index 530c49b5..2de7e5ed 100644
--- a/example/src/views/ChipView.vue
+++ b/example/src/views/ChipView.vue
@@ -8,530 +8,549 @@ const chips = ref<ChipProps[]>([
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
+  },
+  {
+    disabled: false,
+    color: 'primary',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+  {
+    disabled: false,
+    color: 'secondary',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+  {
+    disabled: false,
+    color: 'error',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+  {
+    disabled: false,
+    color: 'warning',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+  {
+    disabled: false,
+    color: 'info',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+  {
+    disabled: false,
+    color: 'success',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+  },
+
+  {
+    disabled: false,
+    color: 'primary',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
+  },
+  {
+    disabled: false,
+    color: 'secondary',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
+  },
+  {
+    disabled: false,
+    color: 'error',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
+  },
+  {
+    disabled: false,
+    color: 'warning',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
+  },
+  {
+    disabled: false,
+    color: 'info',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
+  },
+  {
+    disabled: false,
+    color: 'success',
+    variant: 'filled',
+    closeable: false,
+    tile: true,
+    clickable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
 ]);
 
@@ -539,542 +558,470 @@ const prependChips = ref<ChipProps[]>([
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'filled',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: true,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: true,
+    closeable: true,
   },
   {
     disabled: false,
     color: 'primary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'secondary',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'error',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'warning',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'info',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
   {
     disabled: false,
     color: 'success',
-    label: 'Chip',
     variant: 'outlined',
     size: 'sm',
-    dismissible: false,
+    closeable: false,
   },
 ]);
 
@@ -1092,7 +1039,13 @@ const onRemove = (identifier: number | string) => {
     <h2 class="text-h4 mb-6" data-cy="chips">Chips</h2>
     <div class="grid gap-6 grid-cols-6">
       <div v-for="(chip, i) in chips" :key="i">
-        <RuiChip :data-cy="`chip-${i}`" v-bind="chip" @remove="onRemove(i)" />
+        <RuiChip
+          :data-cy="`chip-${i}`"
+          v-bind="chip"
+          @click:close="onRemove(i)"
+        >
+          Chip
+        </RuiChip>
         <div v-if="dismissed[i]">{{ dismissed[i] }} times</div>
       </div>
     </div>
@@ -1102,11 +1055,12 @@ const onRemove = (identifier: number | string) => {
         <RuiChip
           :data-cy="`pre-chip-${i}`"
           v-bind="chip"
-          @remove="onRemove(`pre-${i}`)"
+          @click:close="onRemove(`pre-${i}`)"
         >
           <template #prepend>
             <span>OP</span>
           </template>
+          Chip
         </RuiChip>
         <div v-if="dismissed[`pre-${i}`]">
           {{ dismissed[`pre-${i}`] }} times
diff --git a/src/components/chips/Chip.spec.ts b/src/components/chips/Chip.spec.ts
index 791b308d..a7d6302f 100644
--- a/src/components/chips/Chip.spec.ts
+++ b/src/components/chips/Chip.spec.ts
@@ -9,32 +9,30 @@ describe('Chips/Chip', () => {
   it('renders properly', () => {
     const label = 'Chip';
     const wrapper = createWrapper({
-      props: {
-        label,
+      slots: {
+        default: label,
       },
     });
     expect(wrapper.find('span[class*=_label]').text()).toContain(label);
   });
 
-  it('shows dismiss icon', async () => {
+  it('shows close icon', async () => {
     const wrapper = createWrapper({
       props: {
-        label: 'Chip',
-        dismissible: true,
+        closeable: true,
       },
     });
 
     expect(wrapper.find('button').attributes().disabled).toBeUndefined();
 
     await wrapper.find('button').trigger('click');
-    expect(wrapper.emitted()).toHaveProperty('remove');
+    expect(wrapper.emitted()).toHaveProperty('click:close');
   });
 
-  it("disabled chip can't dismiss dismiss", async () => {
+  it("disabled chip can't be closed", async () => {
     const wrapper = createWrapper({
       props: {
-        label: 'Chip',
-        dismissible: true,
+        closeable: true,
         disabled: true,
       },
     });
@@ -42,6 +40,39 @@ describe('Chips/Chip', () => {
     expect(wrapper.find('button').attributes().disabled).toBe('');
 
     await wrapper.find('button').trigger('click');
-    expect(wrapper.emitted()).not.toHaveProperty('remove');
+    expect(wrapper.emitted()).not.toHaveProperty('click:close');
+  });
+
+  it("disabled chip doesn't emit click event", async () => {
+    const wrapper = createWrapper({
+      props: {
+        disabled: true,
+        clickable: true,
+      },
+    });
+
+    await wrapper.find('div[role=button]').trigger('click');
+    expect(wrapper.emitted()).not.toHaveProperty('click');
+
+    await wrapper.setProps({ disabled: false });
+
+    await wrapper.find('div[role=button]').trigger('click');
+    expect(wrapper.emitted()).toHaveProperty('click');
+  });
+
+  it("not `clickable` chip doesn't emit click event", async () => {
+    const wrapper = createWrapper({
+      props: {
+        clickable: false,
+      },
+    });
+
+    await wrapper.find('div[role=button]').trigger('click');
+    expect(wrapper.emitted()).not.toHaveProperty('click');
+
+    await wrapper.setProps({ clickable: true });
+
+    await wrapper.find('div[role=button]').trigger('click');
+    expect(wrapper.emitted()).toHaveProperty('click');
   });
 });
diff --git a/src/components/chips/Chip.stories.ts b/src/components/chips/Chip.stories.ts
index c2d7d1b7..a7a8c92f 100644
--- a/src/components/chips/Chip.stories.ts
+++ b/src/components/chips/Chip.stories.ts
@@ -2,7 +2,7 @@ import { type Meta, type StoryFn, type StoryObj } from '@storybook/vue3';
 import Chip, { type Props as ChipProps } from '@/components/chips/Chip.vue';
 import { contextColors } from '@/consts/colors';
 
-type Props = ChipProps & { prepend: string };
+type Props = ChipProps & { prepend: string; children: string };
 
 const render: StoryFn<Props> = (args) => ({
   components: { Chip },
@@ -20,6 +20,7 @@ const render: StoryFn<Props> = (args) => ({
     <div>
     <Chip v-if="show" v-bind="args" @remove="hideShow()">
       <template #prepend v-if="args.prepend">{{ args.prepend }}</template>
+      {{ args.children }}
     </Chip>
     </div>`,
 });
@@ -30,9 +31,11 @@ const meta: Meta<Props> = {
   tags: ['autodocs'],
   render,
   argTypes: {
-    label: { control: 'text' },
+    tile: { control: 'boolean' },
+    children: { control: 'string' },
     prepend: { control: 'text' },
-    dismissible: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    closeable: { control: 'boolean' },
     disabled: { control: 'boolean' },
     size: {
       control: 'select',
@@ -60,9 +63,32 @@ type Story = StoryObj<Props>;
 
 export const Default: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: false,
+    closeable: false,
+    disabled: false,
+    size: 'md',
+    color: 'grey',
+  },
+};
+
+export const Tile: Story = {
+  args: {
+    children: 'Chip',
+    tile: true,
+    variant: 'filled',
+    closeable: false,
+    disabled: false,
+    size: 'md',
+    color: 'grey',
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    children: 'Chip',
+    variant: 'filled',
+    clickable: true,
     disabled: false,
     size: 'md',
     color: 'grey',
@@ -71,9 +97,9 @@ export const Default: Story = {
 
 export const Dismissible: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'grey',
@@ -82,9 +108,9 @@ export const Dismissible: Story = {
 
 export const DismissiblePrefix: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'grey',
@@ -94,9 +120,9 @@ export const DismissiblePrefix: Story = {
 
 export const SmallDismissible: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'grey',
@@ -105,9 +131,9 @@ export const SmallDismissible: Story = {
 
 export const SmallDismissiblePrefix: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'grey',
@@ -117,9 +143,9 @@ export const SmallDismissiblePrefix: Story = {
 
 export const Primary: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'primary',
@@ -128,9 +154,9 @@ export const Primary: Story = {
 
 export const PrimarySmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'primary',
@@ -139,9 +165,9 @@ export const PrimarySmall: Story = {
 
 export const PrimarySmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'primary',
@@ -150,9 +176,9 @@ export const PrimarySmallDisabled: Story = {
 
 export const Secondary: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'secondary',
@@ -161,9 +187,9 @@ export const Secondary: Story = {
 
 export const SecondarySmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'secondary',
@@ -172,9 +198,9 @@ export const SecondarySmall: Story = {
 
 export const SecondarySmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'secondary',
@@ -183,9 +209,9 @@ export const SecondarySmallDisabled: Story = {
 
 export const Error: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'error',
@@ -194,9 +220,9 @@ export const Error: Story = {
 
 export const ErrorSmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'error',
@@ -205,9 +231,9 @@ export const ErrorSmall: Story = {
 
 export const ErrorSmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'filled',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'error',
@@ -216,9 +242,9 @@ export const ErrorSmallDisabled: Story = {
 
 export const OutlinedDefault: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: false,
+    closeable: false,
     disabled: false,
     size: 'md',
     color: 'grey',
@@ -227,9 +253,9 @@ export const OutlinedDefault: Story = {
 
 export const OutlinedDismissible: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'grey',
@@ -238,9 +264,9 @@ export const OutlinedDismissible: Story = {
 
 export const OutlinedSmallDismissible: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'grey',
@@ -249,9 +275,9 @@ export const OutlinedSmallDismissible: Story = {
 
 export const OutlinedPrimary: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'primary',
@@ -260,9 +286,9 @@ export const OutlinedPrimary: Story = {
 
 export const OutlinedPrimarySmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'primary',
@@ -271,9 +297,9 @@ export const OutlinedPrimarySmall: Story = {
 
 export const OutlinedPrimarySmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'primary',
@@ -282,9 +308,9 @@ export const OutlinedPrimarySmallDisabled: Story = {
 
 export const OutlinedSecondary: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'secondary',
@@ -293,9 +319,9 @@ export const OutlinedSecondary: Story = {
 
 export const OutlinedSecondarySmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'secondary',
@@ -304,9 +330,9 @@ export const OutlinedSecondarySmall: Story = {
 
 export const OutlinedSecondarySmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'secondary',
@@ -315,9 +341,9 @@ export const OutlinedSecondarySmallDisabled: Story = {
 
 export const OutlinedError: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'error',
@@ -326,9 +352,9 @@ export const OutlinedError: Story = {
 
 export const OutlinedErrorPrefix: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'md',
     color: 'error',
@@ -338,9 +364,9 @@ export const OutlinedErrorPrefix: Story = {
 
 export const OutlinedErrorSmall: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: false,
     size: 'sm',
     color: 'error',
@@ -349,9 +375,9 @@ export const OutlinedErrorSmall: Story = {
 
 export const OutlinedErrorSmallDisabled: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'error',
@@ -360,9 +386,9 @@ export const OutlinedErrorSmallDisabled: Story = {
 
 export const OutlinedErrorSmallDisabledPrefixed: Story = {
   args: {
-    label: 'Chip',
+    children: 'Chip',
     variant: 'outlined',
-    dismissible: true,
+    closeable: true,
     disabled: true,
     size: 'sm',
     color: 'error',
diff --git a/src/components/chips/Chip.vue b/src/components/chips/Chip.vue
index d821acb9..a3013920 100644
--- a/src/components/chips/Chip.vue
+++ b/src/components/chips/Chip.vue
@@ -1,33 +1,72 @@
 <script lang="ts" setup>
+import { type StyleValue } from 'vue';
+import { logicNot, logicOr } from '@vueuse/math';
+import { objectOmit } from '@vueuse/shared';
 import { type ContextColorsType } from '@/consts/colors';
 import Icon from '@/components/icons/Icon.vue';
+import { type RuiIcons } from '~/src';
 
 export interface Props {
-  label?: string;
-  dismissible?: boolean;
+  tile?: boolean;
+  clickable?: boolean;
+  closeable?: boolean;
   disabled?: boolean;
   size?: 'sm' | 'md';
   variant?: 'filled' | 'outlined';
   color?: 'grey' | ContextColorsType;
+  closeIcon?: RuiIcons;
+  bgColor?: string;
+  textColor?: string;
 }
 
 defineOptions({
   name: 'RuiChip',
+  inheritAttrs: false,
 });
 
-withDefaults(defineProps<Props>(), {
-  label: '',
+const props = withDefaults(defineProps<Props>(), {
+  label: false,
   size: 'md',
   color: 'grey',
-  dismissible: false,
+  clickable: false,
+  closeable: false,
   disabled: false,
   variant: 'filled',
+  closeIcon: 'close-circle-line',
+  bgColor: undefined,
+  textColor: undefined,
 });
 
-const emit = defineEmits<{ (event: 'remove'): void }>();
+const emit = defineEmits<{
+  (event: 'click:close'): void;
+  (event: 'click'): void;
+}>();
+
+const { clickable, disabled, bgColor, textColor } = toRefs(props);
+
+const click = () => {
+  if (get(logicOr(logicNot(clickable), disabled))) {
+    return;
+  }
+  emit('click');
+};
 
 const css = useCssModule();
 const slots = useSlots();
+const attrs = useAttrs();
+
+const style: ComputedRef<Partial<StyleValue>> = computed(() => {
+  const style: Partial<StyleValue> = {};
+  const bg = get(bgColor);
+  const text = get(textColor);
+  if (bg) {
+    style.backgroundColor = bg;
+  }
+  if (text) {
+    style.color = text;
+  }
+  return style;
+});
 </script>
 
 <template>
@@ -37,27 +76,35 @@ const slots = useSlots();
       css[color ?? ''],
       css[size ?? ''],
       css[variant ?? ''],
-      { [css.disabled]: disabled },
+      {
+        [css.disabled]: disabled,
+        [css.tile]: tile,
+        [css.readonly]: !clickable,
+      },
     ]"
+    :style="style"
     role="button"
     tabindex="0"
+    v-bind="objectOmit(attrs, ['onClick'])"
+    @click="click()"
   >
     <div v-if="slots.prepend" :class="css.chip__prepend">
       <slot name="prepend" />
     </div>
     <span :class="css.chip__label">
-      <slot>{{ label }}</slot>
+      <slot />
     </span>
     <button
-      v-if="dismissible"
+      v-if="closeable"
       :class="css.chip__close"
       :disabled="disabled"
-      @click.stop="emit('remove')"
+      type="button"
+      @click.stop="emit('click:close')"
     >
       <Icon
         :class="css.chip__close_icon"
         :size="size === 'sm' ? 16 : 24"
-        name="close-circle-line"
+        :name="closeIcon"
       />
     </button>
   </div>
@@ -70,26 +117,46 @@ const slots = useSlots();
   @apply inline-flex items-center justify-between rounded-full px-1.5 py-[0.25rem] transition-all cursor-default;
   @apply max-w-full truncate;
 
+  &.tile {
+    @apply rounded-sm;
+  }
+
   &.grey {
     @apply text-rui-text;
 
     &.filled {
-      @apply bg-black/[0.08] hover:bg-black/[0.12] focus:bg-black/[0.20];
+      @apply bg-black/[0.08];
+
+      &:not(.readonly):not(.disabled) {
+        @apply hover:bg-black/[0.12] focus:bg-black/[0.20];
+      }
     }
 
     &.outlined {
-      @apply border border-black/[0.26] bg-transparent hover:bg-black/[0.04] focus:bg-black/[0.12];
+      @apply border border-black/[0.26] bg-transparent;
+
+      &:not(.readonly):not(.disabled) {
+        @apply hover:bg-black/[0.04] focus:bg-black/[0.12];
+      }
     }
   }
 
   @each $color in c.$context-colors {
     &.#{$color} {
       &.filled {
-        @apply text-rui-dark-text bg-rui-#{$color} hover:bg-rui-#{$color}-darker;
+        @apply text-rui-dark-text bg-rui-#{$color};
+
+        &:not(.readonly):not(.disabled) {
+          @apply hover:bg-rui-#{$color}-darker;
+        }
       }
 
       &.outlined {
-        @apply border text-rui-#{$color} border-rui-#{$color}/50 bg-transparent hover:bg-rui-#{$color}/[0.04];
+        @apply border text-rui-#{$color} border-rui-#{$color}/50 bg-transparent;
+
+        &:not(.readonly):not(.disabled) {
+          @apply hover:bg-rui-#{$color}/[0.04];
+        }
       }
     }
   }
@@ -132,33 +199,10 @@ const slots = useSlots();
       @apply -mr-1.5;
     }
   }
-}
 
-.disabled {
-  &.chip {
-    @apply opacity-40 cursor-default;
-
-    &.grey {
-      &.filled {
-        @apply hover:bg-black/[0.08] focus:bg-black/[0.08];
-      }
-
-      &.outlined {
-        @apply hover:bg-transparent focus:bg-transparent;
-      }
-    }
-
-    @each $color in c.$context-colors {
-      &.#{$color} {
-        &.filled {
-          @apply hover:bg-rui-#{$color};
-        }
-
-        &.outlined {
-          @apply hover:bg-transparent;
-        }
-      }
-    }
+  &.disabled,
+  &.readonly {
+    @apply cursor-default;
 
     &__close {
       @apply cursor-default;
@@ -168,12 +212,20 @@ const slots = useSlots();
       }
     }
   }
+
+  &.disabled {
+    @apply opacity-40;
+  }
 }
 
 :global(.dark) {
   .chip {
     &.grey {
-      @apply bg-white/[0.16] hover:bg-white/[0.20] focus:bg-white/[0.24];
+      @apply bg-white/[0.16];
+
+      &:not(.readonly):not(.disabled) {
+        @apply hover:bg-white/[0.20] focus:bg-white/[0.24];
+      }
     }
 
     @each $color in (warning, success, info) {
diff --git a/src/components/forms/auto-complete/AutoCompleteSelection.vue b/src/components/forms/auto-complete/AutoCompleteSelection.vue
index d7d170da..a9b0db20 100644
--- a/src/components/forms/auto-complete/AutoCompleteSelection.vue
+++ b/src/components/forms/auto-complete/AutoCompleteSelection.vue
@@ -125,22 +125,20 @@ watch([data, wrapperWidth], () => {
           :key="chip[keyProp]"
           :class="css.chip"
           :disabled="!!itemDisabledProp && chip[itemDisabledProp]"
-          :label="chip[textProp] ?? ''"
           :size="dense ? 'sm' : 'md'"
-          dismissible
-          @remove="emit('remove', chip)"
-        />
+          closeable
+          @click:close="emit('remove', chip)"
+        >
+          {{ chip[textProp] ?? '' }}
+        </Chip>
         <div
           v-if="data.length > maxChipsToRender"
           ref="more"
           :class="css.remaining"
         >
-          <Chip
-            :class="css.chip"
-            :label="`+${data.length - maxChipsToRender}`"
-            :size="dense ? 'sm' : 'md'"
-            color="secondary"
-          />
+          <Chip :class="css.chip" :size="dense ? 'sm' : 'md'" color="secondary">
+            {{ `+${data.length - maxChipsToRender}` }}
+          </Chip>
         </div>
       </div>
     </div>