@bluerobotics/bluevue 0.2.0 → 0.2.2

package/dist/utils/id.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A document-unique id, for wiring a label to the control it names.
+ *
+ * Stands in for Vue's `useId`, which arrived in 3.5 and so is out of reach of the 3.4 baseline
+ * this package supports.
+ *
+ * @param prefix - Short name of the control asking for it, so ids stay readable in the DOM.
+ * @returns The generated id.
+ */
+export declare function nextElementId(prefix: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluerobotics/bluevue",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Blue Robotics Vue components for common UI",
   "license": "MIT",
   "repository": {

package/src/components/BlueButton.vue

@@ -28,6 +28,11 @@ const props = defineProps<{
   disabled?: boolean
   /** Takes the whole width it is given, for a button ending a narrow panel. */
   block?: boolean
+  /**
+   * Shadow depth, 1 (a hair off the surface) to 5. Chips default to 1; text and icon buttons have
+   * no chip to lift, so they default to none. A disabled button is never raised.
+   */
+  elevation?: 1 | 2 | 3 | 4 | 5
   /** Hover text, and the name assistive technology reads on an icon button. */
   tooltip?: string
   theme?: 'light' | 'dark'
@@ -57,7 +62,7 @@ const look = computed(() => {
   }
   switch (variant.value) {
     case 'filled':
-      return 'bluevue-elevation-1 cursor-pointer text-white hover:brightness-125'
+      return 'cursor-pointer text-white hover:brightness-125'
     case 'text':
       return isDark.value
         ? 'cursor-pointer text-[#ffffffcc] hover:bg-[#ffffff11] hover:text-white'
@@ -75,6 +80,21 @@ const look = computed(() => {
 
 const fill = computed(() => (variant.value === 'filled' && !props.disabled ? props.color || 'var(--bluevue-primary)' : undefined))
 
+const ELEVATION = {
+  1: 'bluevue-elevation-1',
+  2: 'bluevue-elevation-2',
+  3: 'bluevue-elevation-3',
+  4: 'bluevue-elevation-4',
+  5: 'bluevue-elevation-5',
+} as const
+
+const elevationClass = computed(() => {
+  if (props.disabled) return ''
+  const hasChip = variant.value === 'filled' || variant.value === 'tonal'
+  const level = props.elevation ?? (hasChip ? 1 : 0)
+  return level ? ELEVATION[level] : ''
+})
+
 // The glyph of a text or icon button follows the colour it was given; a filled one draws its
 // contents in white over the fill, and a tonal one in the theme's own text colour.
 const glyphColor = computed(() =>
@@ -95,6 +115,7 @@ const glyphColor = computed(() =>
       variant === 'icon' ? 'rounded-[6px]' : 'rounded-[4px]',
       variant === 'icon' ? '' : PADDING[density],
       block ? 'w-full' : '',
+      elevationClass,
       // A button waiting on its own result stays where it is and reads as busy rather than
       // inviting a second press.
       loading ? 'pointer-events-none' : '',

package/src/components/BlueButtonGroup.vue

@@ -14,7 +14,7 @@
         ref="labelRef"
         class="block truncate text-start mr-6"
         :title="label"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
       >{{ label }}</label>
     </div>
     <div v-else />
@@ -32,15 +32,15 @@
           name="mdi-information-outline"
           :size="16"
           :label="infoTooltip"
-          class="opacity-60 cursor-help"
-          :class="theme === 'dark' ? 'text-white' : 'text-black'"
+          class="cursor-help"
+          :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
         />
       </BlueTooltip>
       <div
         ref="trackRef"
-        class="relative flex min-w-0 justify-end overflow-hidden rounded-[6px] bluevue-elevation-1 z-[666]"
+        class="relative isolate flex min-w-0 justify-end overflow-hidden rounded-[6px] bluevue-elevation-1"
         :class="[theme === 'dark' ? 'bg-[#464646AA]' : 'bg-[#00000011]', disabled ? 'opacity-30 pointer-events-none' : '']"
-        :style="{ height: height || (density === 'compact' ? '24px' : '30px') }"
+        :style="{ height: height || (density === 'compact' ? '24px' : '30px'), width }"
       >
         <div
           id="border-releif"
@@ -53,7 +53,7 @@
           <button
             :disabled="disabled || btn.disabled"
             :title="btn.name"
-            class="flex min-w-0 items-center justify-center text-sm font-medium transition-colors duration-200"
+            class="flex min-w-0 items-center justify-center font-normal transition-colors duration-200"
             :class="[
               // A group with no room left falls back to the tightest inset whatever the
               // density asks for, since the alternative is cutting into the names.
@@ -61,6 +61,9 @@
               // The active choice is the one worth reading at a glance, so it keeps its full
               // name and the rest give up the room a crowded group needs.
               selected[idx] ? 'shrink-0' : '',
+              // A group given a width shares the surplus between its buttons rather than
+              // leaving it as dead track behind them.
+              width ? 'grow' : '',
               selected[idx] ? 'text-white' : theme === 'dark' ? 'text-[#ffffff99]' : 'text-[#00000066]',
               selected[idx] && type === 'switch' ? 'bluevue-elevation-5' : '',
               disabled || btn.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
@@ -86,7 +89,7 @@
               <span
                 data-bbg-label
                 class="block truncate"
-                :class="[density === 'compact' ? 'text-[10px]' : 'text-xs', isWide ? 'max-w-[150px]' : '']"
+                :class="[density === 'compact' ? 'text-[13px]' : 'text-base', isWide ? 'max-w-[150px]' : '']"
               >
                 {{ btn.name }}
               </span>
@@ -205,6 +208,12 @@ const props = defineProps<{
   type: 'switch' | 'toggle'
   /** Height of the button group container */
   height?: string
+  /**
+   * Width of the button group container. The buttons share whatever it grants beyond their
+   * natural size, so the selected one still reaches the group's edge. It is a starting width
+   * rather than a fixed one, so a narrow row can still shrink the group.
+   */
+  width?: string
   /** Label text on the left side of the button group */
   label?: string
   /** Optional info tooltip shown via an info icon next to the control. */
@@ -246,9 +255,9 @@ let longPressFired = false
 // The inset each density gives a button name, paired with the total width it costs so the
 // measurements below can reason about the group without reading it back from the DOM.
 const DENSITY_PADDING = {
-  compact: { class: 'px-[11px]', total: 22 },
-  regular: { class: 'px-[15px]', total: 30 },
-  comfortable: { class: 'px-[19px]', total: 38 },
+  compact: { class: 'px-[8px]', total: 16 },
+  regular: { class: 'px-[12px]', total: 24 },
+  comfortable: { class: 'px-[16px]', total: 32 },
 } as const
 
 // Once the buttons' natural width would exceed this, cap each label so long names

package/src/components/BlueCheckbox.vue

@@ -59,8 +59,8 @@ const toggle = (): void => {
           name="mdi-information-outline"
           :size="16"
           :label="infoTooltip"
-          class="opacity-60 cursor-help"
-          :class="theme === 'dark' ? 'text-white' : 'text-black'"
+          class="cursor-help"
+          :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
         />
       </BlueTooltip>
 

package/src/components/BlueDialog.vue

@@ -9,7 +9,7 @@ import BlueIcon from './BlueIcon.vue'
  * with an optional header, a body and an optional footer. Being a native modal, it dims the page
  * itself, traps focus, and closes on Escape and on the backdrop unless it is told not to.
  */
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   modelValue: boolean
   /** The heading. Without one, and without a header slot, the dialog is only its body. */
   title?: string
@@ -25,9 +25,30 @@ const props = defineProps<{
   persistent?: boolean
   /** Panel width (default '624px'). It never exceeds the viewport. */
   width?: string
+  /** Replaces the header's own inset, for a header holding a mark rather than a title row. */
+  headerClass?: string
   /** Replaces the body's own inset, for a dialog laying its contents out differently. */
   bodyClass?: string
-}>()
+  /** Replaces the footer's own inset. */
+  footerClass?: string
+  /**
+   * The rule under the header, on unless it is passed false. A header that reads as part of the
+   * body, such as a centred mark above a title, wants none.
+   */
+  headerDivider?: boolean
+}>(), {
+  // An absent boolean prop is `false` unless a default says otherwise, which would leave every
+  // header unruled.
+  title: undefined,
+  icon: undefined,
+  iconColor: undefined,
+  subtitle: undefined,
+  width: undefined,
+  headerClass: undefined,
+  bodyClass: undefined,
+  footerClass: undefined,
+  headerDivider: undefined,
+})
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
@@ -38,10 +59,18 @@ const dialogRef = ref<HTMLDialogElement | null>(null)
 
 const hasHeader = computed(() => Boolean(props.title || slots.header))
 
+const hasHeaderDivider = computed(() => hasHeader.value && (props.headerDivider ?? true))
+
 const sync = (show: boolean): void => {
   const el = dialogRef.value
   if (!el) return
-  if (show && !el.open) el.showModal()
+  if (show && !el.open) {
+    el.showModal()
+    // showModal() hands focus to the first control inside, which rings a button nobody asked for.
+    // Chromium ignores autofocus on the dialog itself, so the surface has to claim focus back:
+    // still inside the trap and still announced, with nothing preselected.
+    el.focus()
+  }
   if (!show && el.open) el.close()
 }
 
@@ -66,20 +95,23 @@ defineExpose({ close })
 </script>
 
 <template>
+  <!-- tabindex is what lets the surface hold the focus that sync() moves to it on open. -->
   <dialog
     ref="dialogRef"
+    tabindex="-1"
     class="bluevue-dialog"
     @close="emit('update:modelValue', false)"
     @cancel="onCancel"
     @click="onBackdropClick"
   >
     <div
-      class="bluevue-panel relative max-w-full rounded-lg text-white"
+      class="bluevue-panel relative flex min-h-0 max-w-full flex-col rounded-lg text-white"
       :style="{ width: width || '624px' }"
     >
       <header
         v-if="hasHeader"
-        class="flex items-start gap-3 px-5 pt-4 pb-3"
+        class="flex shrink-0 items-start gap-3"
+        :class="headerClass || 'px-5 pt-4 pb-3'"
       >
         <slot name="header">
           <BlueIcon
@@ -120,13 +152,20 @@ defineExpose({ close })
         @click="close"
       />
 
-      <div :class="[bodyClass || 'px-5 py-4', hasHeader ? 'border-t border-[#ffffff0d]' : '']">
+      <div
+        :class="[
+          'min-h-0 flex-1 overflow-y-auto',
+          bodyClass || 'px-5 py-4',
+          hasHeaderDivider ? 'border-t border-[var(--bluevue-hairline)]' : '',
+        ]"
+      >
         <slot />
       </div>
 
       <footer
         v-if="slots.footer"
-        class="flex items-center justify-between gap-3 border-t border-[#ffffff0d] px-5 py-3"
+        class="flex shrink-0 items-center justify-between gap-3 border-t border-[var(--bluevue-hairline)]"
+        :class="footerClass || 'px-5 py-3'"
       >
         <slot name="footer" />
       </footer>

package/src/components/BlueExpansiblePanel.vue

@@ -4,17 +4,22 @@
       class="flex items-center justify-between bg-transparent cursor-pointer select-none px-3 my-2"
       @click="togglePanel"
     >
-      <div class="flex-1 flex items-center">
+      <div
+        class="flex-1 flex items-center"
+        :class="props.headerAlign === 'end' ? 'justify-end' : ''"
+      >
         <div
+          v-if="props.headerAlign !== 'end'"
           class="flex-1 h-px"
           :class="props.theme === 'dark' ? 'bg-[#ffffff22]' : 'bg-[#00000033]'"
         />
         <span
-          class="mx-3 min-w-0 truncate text-sm font-medium opacity-60"
+          class="mx-3 min-w-0 truncate text-base font-normal opacity-60"
           :title="title"
           :class="props.theme === 'dark' ? 'text-white' : 'text-black'"
         >{{ title }}</span>
         <div
+          v-if="props.headerAlign !== 'end'"
           class="flex-1 h-px"
           :class="props.theme === 'dark' ? 'bg-[#ffffff11]' : 'bg-[#00000033]'"
         />
@@ -27,13 +32,28 @@
         ]"
       />
     </div>
-    <transition name="bluevue-expand">
-      <div
-        v-show="isOpen"
-        class="px-13 my-6 pb-2"
-        :class="props.theme === 'dark' ? 'border-[#555555]' : 'border-[#dddddd]'"
-      >
-        <slot />
+    <transition
+      name="bluevue-expand"
+      @enter="openTo"
+      @leave="closeFrom"
+      @after-enter="releaseHeight"
+      @after-leave="releaseHeight"
+      @enter-cancelled="releaseHeight"
+      @leave-cancelled="releaseHeight"
+    >
+      <!-- The animated box holds no inset of its own. max-height cannot take an element below its
+           own padding, so padding here would strand the collapse at that height for the rest of
+           the run, and a margin would outlive it altogether. -->
+      <div v-show="isOpen">
+        <div
+          :class="[
+            'flex flex-col gap-[15px]',
+            props.bodyClass || 'px-13 pt-4 pb-8',
+            props.theme === 'dark' ? 'border-[#555555]' : 'border-[#dddddd]',
+          ]"
+        >
+          <slot />
+        </div>
       </div>
     </transition>
   </div>
@@ -47,6 +67,17 @@ const props = defineProps<{
   title: string
   /** Initial open state */
   expanded?: boolean
+  /**
+   * Replaces the body's own inset, for a panel nested inside one that already insets its content.
+   * The column gap between the panel's children is kept either way. Use padding rather than
+   * margin: the body collapses by animating its own height, which a margin would not follow.
+   */
+  bodyClass?: string
+  /**
+   * 'full' (default) rules the title off across the panel; 'end' drops the rules and tucks the
+   * title against the right edge, for a secondary panel nested inside another one.
+   */
+  headerAlign?: 'full' | 'end'
   /** 'light' or 'dark' theme */
   theme?: 'light' | 'dark'
 }>()
@@ -57,6 +88,29 @@ const emit = defineEmits<{
 
 const isOpen = ref(props.expanded ?? true)
 
+// max-height cannot animate to or from a keyword, so every open and close is driven from the
+// panel's own measured height. A fixed ceiling instead would either clip a panel taller than it
+// or open a short one in a fraction of the duration and then sit still for the rest.
+const openTo = (el: Element): void => {
+  const panel = el as HTMLElement
+  panel.style.maxHeight = '0px'
+  const target = panel.scrollHeight
+  panel.getBoundingClientRect()
+  panel.style.maxHeight = `${target}px`
+}
+
+const closeFrom = (el: Element): void => {
+  const panel = el as HTMLElement
+  panel.style.maxHeight = `${panel.scrollHeight}px`
+  panel.getBoundingClientRect()
+  panel.style.maxHeight = '0px'
+}
+
+// Left in place, the cap would keep the panel from growing with whatever the slot renders next.
+const releaseHeight = (el: Element): void => {
+  ;(el as HTMLElement).style.maxHeight = ''
+}
+
 const togglePanel = (): void => {
   isOpen.value = !isOpen.value
   emit('update:expanded', isOpen.value)

package/src/components/BlueHeader.vue

@@ -0,0 +1,42 @@
+<template>
+  <header
+    class="flex w-full items-center justify-between rounded-t-[8px]"
+    :class="isDark ? 'text-white' : 'text-black'"
+    :style="{ minHeight: height || '56px', backgroundColor: background || defaultBackground }"
+  >
+    <!-- The rule runs under the whole cluster rather than under the selector alone, so the subject
+         of the panel reads as one field however many controls make it up. -->
+    <div
+      class="flex min-w-0 items-center gap-3 self-stretch border-b border-solid pl-4"
+      :class="[leadingWidth ? '' : 'flex-1', isDark ? 'border-[#ffffff88]' : 'border-[#00000066]']"
+      :style="leadingWidth ? { width: leadingWidth, maxWidth: '100%' } : undefined"
+    >
+      <slot name="leading" />
+    </div>
+    <div class="flex shrink-0 items-center gap-2 pr-4">
+      <slot />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * The bar a panel opens with: what the panel is about on the left, and the controls that act on it
+ * on the right. It only lays the two out, so the subject can be a BlueHeaderSelector, a title, or
+ * anything else the panel names itself by.
+ */
+const props = defineProps<{
+  /** How tall the bar may not go under (default '56px'). */
+  height?: string
+  /** Caps the leading cluster, so a long name cannot push the controls off the bar. */
+  leadingWidth?: string
+  /** Overrides the bar's own fill. */
+  background?: string
+  theme?: 'light' | 'dark'
+}>()
+
+const isDark = computed(() => props.theme !== 'light')
+const defaultBackground = computed(() => (isDark.value ? '#15151577' : '#00000008'))
+</script>

package/src/components/BlueHeaderMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <BlueMenu
+    :model-value="isOpen"
+    :items="items"
+    @update:model-value="(value: boolean) => (isOpen = value)"
+  >
+    <template #activator="{ props: activatorProps }">
+      <button
+        v-bind="activatorProps"
+        type="button"
+        :disabled="disabled"
+        :title="tooltip"
+        :aria-label="tooltip"
+        class="flex shrink-0 items-center justify-center rounded-[6px] transition-colors"
+        :class="[
+          disabled ? 'cursor-not-allowed opacity-30' : 'cursor-pointer',
+          isDark ? 'text-[#ffffffcc] hover:text-white' : 'text-[#000000cc] hover:text-black',
+        ]"
+        :style="{ width: `${size}px`, height: `${size}px` }"
+      >
+        <span
+          class="mdi leading-none"
+          :class="isOpen ? 'mdi-menu-open' : 'mdi-menu-close'"
+          :style="{ fontSize: `${size}px` }"
+        />
+      </button>
+    </template>
+  </BlueMenu>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import BlueMenu, { type BlueMenuItem } from './BlueMenu.vue'
+
+/**
+ * The actions a header offers, behind the glyph that turns as they open. Sized for a header rather
+ * than for a row, which is why it is not an icon BlueButton.
+ */
+const props = defineProps<{
+  items: BlueMenuItem[]
+  /** Edge of the square the glyph fills, in pixels (default 24). */
+  iconSize?: number
+  /** Hover text, and the name assistive technology reads. */
+  tooltip?: string
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+}>()
+
+const isOpen = ref(false)
+const isDark = computed(() => props.theme !== 'light')
+const size = computed(() => props.iconSize ?? 24)
+</script>

package/src/components/BlueHeaderSelector.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    ref="anchorRef"
+    class="min-w-0 flex-1"
+  >
+    <button
+      v-bind="activatorProps"
+      type="button"
+      :disabled="disabled"
+      class="group relative flex h-[56px] w-full min-w-0 flex-col justify-center bg-transparent pr-8 pl-4 text-left transition-colors"
+      :class="[
+        disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+        isDark ? 'hover:bg-[#ffffff08]' : 'hover:bg-[#00000008]',
+      ]"
+    >
+      <span
+        v-if="label"
+        class="block truncate text-[12px] leading-none"
+        :class="isDark ? 'text-[#ffffffb3]' : 'text-[#00000099]'"
+      >{{ label }}</span>
+      <span
+        class="mt-[6px] flex min-w-0 items-center gap-1 text-[16px] leading-none"
+        :class="isDark ? 'text-white' : 'text-black'"
+      >
+        <span
+          v-if="selectedItem?.icon"
+          class="mdi shrink-0 text-[16px] leading-none opacity-70"
+          :class="selectedItem.icon"
+        />
+        <span class="truncate">{{ selectedItem?.name ?? placeholder }}</span>
+      </span>
+      <span
+        class="mdi mdi-menu-down absolute right-2 top-1/2 -translate-y-1/2 text-[24px] leading-none transition-transform"
+        :class="[isDark ? 'text-[#ffffffb3]' : 'text-[#00000099]', isOpen ? 'rotate-180' : '']"
+      />
+    </button>
+
+    <div
+      :id="popoverId"
+      ref="popoverRef"
+      popover
+      class="bluevue-popover"
+      :style="floatingStyles"
+      @toggle="onToggle"
+    >
+      <ul
+        class="bluevue-elevation-5 max-h-[60vh] overflow-y-auto rounded-[4px] border border-[#FFFFFF22]"
+        :class="[
+          isDark ? 'bg-[var(--bluevue-surface)]' : 'bg-white',
+          isPositioned ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        <li
+          v-for="item in items"
+          :key="String(item.value ?? item.name)"
+        >
+          <button
+            type="button"
+            :disabled="item.disabled"
+            class="flex w-full items-start gap-2 px-4 py-2 text-left"
+            :class="[
+              isDark ? 'text-white' : 'text-black',
+              item.disabled
+                ? 'cursor-not-allowed opacity-30'
+                : isDark ? 'cursor-pointer hover:bg-[#ffffff11]' : 'cursor-pointer hover:bg-gray-100',
+            ]"
+            @click="selectItem(item)"
+          >
+            <span
+              v-if="item.icon"
+              class="mdi mt-[2px] shrink-0 text-[16px] leading-none opacity-70"
+              :class="item.icon"
+            />
+            <span class="min-w-0">
+              <span class="block truncate text-[14px] leading-snug">{{ item.name }}</span>
+              <span
+                v-if="item.subtitle"
+                class="block truncate text-[11px]"
+                :class="isDark ? 'text-[#ffffff66]' : 'text-[#00000066]'"
+              >{{ item.subtitle }}</span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useBluePopover } from '../composables/useBluePopover'
+
+/**
+ * One choice in the header selector.
+ */
+export interface BlueHeaderSelectorItem {
+  /** What the row reads. */
+  name: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any
+  /** An mdi class marking the row, such as one still being looked for. */
+  icon?: string
+  /** A second line under the name, for what the row is rather than what it is called. */
+  subtitle?: string
+  disabled?: boolean
+}
+
+/**
+ * The subject a header is about, named above the value the way a filled form field is, so the
+ * heading and the choice occupy one control instead of a label and a dropdown side by side.
+ */
+const props = defineProps<{
+  items: BlueHeaderSelectorItem[]
+  /** The name above the value. */
+  label?: string
+  /** Stands in for the value until something is chosen. */
+  placeholder?: string
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue?: any
+}>()
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const {
+  anchorRef,
+  popoverRef,
+  popoverId,
+  activatorProps,
+  isOpen,
+  isPositioned,
+  floatingStyles,
+  hide,
+  onToggle,
+} = useBluePopover({ matchAnchorWidth: true })
+
+const isDark = computed(() => props.theme !== 'light')
+
+const selectedItem = computed(() =>
+  props.items.find((item) => (item.value ?? item.name) === props.modelValue)
+)
+
+const selectItem = (item: BlueHeaderSelectorItem): void => {
+  if (item.disabled) return
+  hide()
+  emit('update:modelValue', item.value ?? item.name)
+}
+</script>

package/src/components/BlueInput.vue

@@ -11,7 +11,7 @@
         :for="name"
         class="block truncate text-start mr-6"
         :title="label"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
       >
         {{ label }}
       </label>
@@ -29,8 +29,8 @@
         name="mdi-information-outline"
         :size="16"
         :label="infoTooltip"
-        class="opacity-60 cursor-help"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        class="cursor-help"
+        :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
       />
     </BlueTooltip>
 

package/src/components/BlueLoadingDialog.vue

@@ -37,7 +37,7 @@ const emit = defineEmits<{
     >
     <span
       v-if="message"
-      class="mt-[15px] text-center text-base text-white"
+      class="mt-[5px] text-center text-base text-white"
     >
       {{ message }}
     </span>

package/src/components/BlueSelect.vue

@@ -28,8 +28,8 @@
         name="mdi-information-outline"
         :size="16"
         :label="infoTooltip"
-        class="opacity-60 cursor-help"
-        :class="theme === 'dark' ? 'text-white' : 'text-black'"
+        class="cursor-help"
+        :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
       />
     </BlueTooltip>