multiselect style

src/components/Selector.vue

@@ -16,8 +16,19 @@
       :maxSelectedLabels="3"
       class="font-serif"
       :class="{ active: currentValue }"
+      data-icon="chevron-single-down"
       checkmark
-    />
+    >
+      <template #option="slotProps">
+        <img
+          alt=""
+          :src="getFrontViewUrl(slotProps.option)"
+          width="28"
+          height="28"
+        />
+        <p>{{ slotProps.option.title }}</p>
+      </template>
+    </MultiSelect>
 
     <Select
       v-else
@@ -190,39 +201,43 @@ function getFrontViewUrl(item) {
   background-position: center;
 }
 
-[role='combobox'],
-#selector-select_list {
+[role="combobox"],
+[id*="select_list"] {
   border: 1px solid var(--color-grey-200);
 }
-[role='combobox']:hover {
+[role="combobox"]:hover {
   outline: 0px solid var(--color-grey-400);
   border-color: var(--color-grey-400);
 }
-[role='combobox'][aria-expanded='true'] {
+[role="combobox"][aria-expanded="true"] {
   outline: 2px solid var(--color-focus-ring);
   outline-offset: -2px;
   border-color: transparent;
 }
 #selector-select,
-[role='combobox'] {
+#selector-multiselect,
+[role="combobox"] {
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
   cursor: pointer;
 }
-[role='combobox'] p {
+[role="combobox"] p {
   max-height: 1lh;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+#selector-select.active [role="combobox"] {
+  border-color: var(--color-focus-ring);
+}
 
 /* Icon */
-#selector-select svg {
+[data-pc-section="dropdown"] {
   display: none; /* Hide default component svg */
 }
-#selector-select[data-icon]::before {
+#selector-dropdown [data-icon]::before {
   --icon-color: var(--color-grey-700);
   position: absolute;
   right: var(--space-8);
@@ -242,14 +257,14 @@ function getFrontViewUrl(item) {
 }
 
 /* Options */
-#selector-select_list {
+[id*="select_list"] {
   margin-top: var(--space-4);
   border-radius: var(--rounded-md);
   background: var(--color-background);
   box-shadow: var(--shadow);
   padding: var(--space-8);
 }
-#selector-select_list > * {
+[id*="select_list"] > * {
   font-family: var(--font-serif);
   padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
   border-radius: var(--rounded-sm);
@@ -259,10 +274,10 @@ function getFrontViewUrl(item) {
   height: 2.75rem;
   cursor: pointer;
 }
-#selector-select_list > * + * {
+[id*="select_list"] > * + * {
   margin-top: var(--space-4);
 }
-#selector-select_list > *::before {
+[id*="select_list"] > *::before {
   content: '';
   position: absolute;
   left: var(--space-8);
@@ -275,30 +290,49 @@ function getFrontViewUrl(item) {
   background-size: cover;
   background-position: center;
 }
-#selector-select_list > *:hover {
+[id*="select_list"] > *:hover {
   background-color: var(--color-grey-50);
 }
-#selector-select_list > *:focus,
-#selector-select_list > *:focus-visible,
-#selector-select_list > [data-p-focused='true'] {
+[id*="select_list"] > *:focus,
+[id*="select_list"] > *:focus-visible,
+[id*="select_list"] > [data-p-focused="true"] {
   outline: 2px solid var(--color-focus-ring);
 }
 /* Check */
-#selector-select_list > * > svg {
+#selector-multiselect_list input[type="checkbox"] {
+  position: absolute;
+  left: var(--space-4);
+  top: calc(var(--space-4) + 1px);
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--rounded-sm);
+}
+#selector-multiselect_list input[type="checkbox"]:checked {
+  --icon-color: var(--color-focus-ring);
+}
+[id*="select_list"] > * > svg {
   position: absolute;
   left: 0.875rem;
   width: 1rem;
   height: 1rem;
   color: var(--color-grey-700);
 }
-#selector-select_list img {
+[id*="select_list"] img {
   position: absolute;
   left: 0.5rem;
   width: 1.75rem;
   height: 1.75rem;
   mix-blend-mode: multiply;
 }
-#selector-select_list [aria-selected='true'] img {
+[id*="select_list"] [aria-selected="true"] img,
+#selector-multiselect_list input[type="checkbox"] + [data-pc-section="box"] {
+  display: none;
+}
+#selector-multiselect_list [aria-selected="false"] input[type="checkbox"]::before {
+  --icon-color: transparent;
+}
+/* Overlay */
+[data-pc-section="overlay"] [data-pc-section="header"] {
   display: none;
 }
 </style>