frappe-ui 1.0.0-beta.17 → 1.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [

package/src/components/Autocomplete/Autocomplete.vue

@@ -118,9 +118,9 @@
                 >
                   <li
                     :class="[
-                      'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base',
+                      'flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base transition-colors duration-100 ease-out',
                       {
-                        'bg-surface-gray-3': active,
+                        'bg-surface-alpha-gray-2': active,
                         'opacity-50': option.disabled,
                       },
                     ]"

package/src/components/Select/Select.vue

@@ -33,6 +33,7 @@ import PopoverPanel from '../shared/popover/PopoverPanel.vue'
 import {
   EMPTY_VALUE_PREFIX,
   inputFontSizeClasses,
+  itemClasses,
   itemRootSizeClasses,
   toItemListSize,
   triggerBaseClasses,
@@ -366,8 +367,7 @@ defineSlots<SelectSlots>()
                   :disabled="internalOption.option.disabled"
                   :value="internalOption.internalValue"
                   data-slot="item"
-                  :class="itemRootClasses"
-                  class="select-none rounded border-0 text-base text-ink-gray-9 data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4"
+                  :class="[itemClasses, itemRootClasses]"
                 >
                   <ItemListRow
                     :size="itemSize"

package/src/components/Select/utils.ts

@@ -2,6 +2,7 @@ import type { SelectionSize, SelectionVariant } from '../shared/selection/utils'
 
 export {
   inputFontSizeClasses,
+  itemClasses,
   itemRootSizeClasses,
   toItemListSize,
   triggerSizeClasses,

package/src/components/TextEditor/components/MediaNodeView.vue

@@ -381,7 +381,7 @@ const wrapperClasses = (float: string) => [
       </div>
       <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
         <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
-        <div v-if="node.attrs.error" class="text-sm text-ink-red-8">Upload failed: {{ node.attrs.error }}</div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-8">{{ node.attrs.error }}</div>
       </div>
 
       <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"

package/src/components/shared/selection/utils.ts

@@ -76,7 +76,7 @@ export const triggerBaseClassesFocusWithin =
   'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:focus-ring data-[state=open]:focus-ring'
 
 export const itemClasses =
-  'select-none rounded border-0 text-base text-ink-gray-9 transition-colors duration-100 ease-out data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4'
+  'select-none rounded border-0 text-base text-ink-gray-9 transition-colors duration-100 ease-out data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-alpha-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4'
 
 /**
  * Case-insensitive substring match against an option's label and value.