@bluerobotics/bluevue 0.2.1 → 0.2.3

package/src/components/BlueSlider.vue

@@ -6,19 +6,28 @@
     <div
       v-if="label"
       class="min-w-0 max-w-[45%] shrink-0"
+      :style="labelWidth ? { minWidth: labelWidth } : undefined"
     >
       <label
+        :for="sliderId"
         class="block truncate text-start mr-6"
         :title="label"
         :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
       >{{ label }}</label>
     </div>
-    <div class="flex w-1/2 min-w-0 items-center justify-between">
+    <!-- Half the row, so a column of sliders reads as one block against the panel's midline, until
+         half of it is less than a track can be aimed at. Whichever is larger then takes over and
+         the track runs to the right edge, and past even that floor it shrinks rather than
+         overflowing, down to the 140px below. -->
+    <div class="flex basis-[max(50%,320px)] min-w-[140px] items-center justify-start">
+      <!-- isolate keeps the pill and the min/max labels stacked against the track alone: without
+           it their z-index is resolved against the page, and they paint over whatever chrome the
+           host has floating above the row. -->
       <div
         name="slider-track"
-        class="relative overflow-visible rounded-[6px] bluevue-elevation-1 min-w-[140px] max-w-full"
+        class="relative isolate w-full overflow-visible rounded-[6px] bluevue-elevation-1 min-w-[140px]"
         :class="[theme === 'dark' ? 'bg-[#464646AA]' : 'bg-[#00000011]', disabled ? 'opacity-30' : '']"
-        :style="{ width: width || '100%', height: height || '30px', cursor: disabled ? 'not-allowed' : 'pointer' }"
+        :style="{ maxWidth: width || '100%', height: height || '30px', cursor: disabled ? 'not-allowed' : 'pointer' }"
       >
         <div class="absolute inset-x-[18%] top-1/2 -translate-y-1/2 flex justify-between pointer-events-none">
           <div
@@ -42,7 +51,8 @@
         >
           <div v-if="!isEditingCurrentSliderValue">
             <p
-              class="font-bold leading-none select-none"
+              class="leading-none select-none"
+              :class="valueWeight === 'regular' ? 'font-normal' : 'font-bold'"
               draggable="false"
             >
               {{ formatDisplay ? formatDisplay(scaledValue) : scaledValue.toFixed(defaultDecimals) }}
@@ -53,6 +63,7 @@
               ref="editInput"
               v-model.number="editedDisplayValue"
               type="number"
+              :aria-label="label"
               :min="displayMin"
               :max="displayMax"
               :step="displayStep"
@@ -60,11 +71,12 @@
               class="bg-white border border-gray-300 rounded px-1 py-0.5"
               @input="clampEditedValue"
               @keydown="handleValueChange"
-              @blur="isEditingCurrentSliderValue = false"
+              @blur="onEditBlur"
             >
           </div>
         </div>
         <input
+          :id="sliderId"
           v-model.number="currentSliderValue"
           type="range"
           class="absolute inset-0 w-full h-full opacity-0"
@@ -107,6 +119,8 @@
 <script setup lang="ts">
 import { ref, watch, onBeforeUnmount, computed } from 'vue'
 
+import { nextElementId } from '../utils/id'
+
 const props = defineProps<{
   /** Pill color override. */
   color?: string
@@ -116,6 +130,8 @@ const props = defineProps<{
   height?: string
   /** Main Label text on the left. */
   label?: string
+  /** Floor for the label column, so a column of sliders starts its tracks at one place. */
+  labelWidth?: string
   /** Custom text for the max label. */
   labelMax?: string
   /** Custom text for the min label. */
@@ -132,7 +148,9 @@ const props = defineProps<{
   keyboardStepMultiplierLimit?: number
   /** 'light' or 'dark' theme. (default 'light')*/
   theme?: 'light' | 'dark' | 'transparent'
-  /** Container width (default '100%'). */
+  /** Weight of the value in the pill (default 'bold'). */
+  valueWeight?: 'regular' | 'bold'
+  /** How wide the track may get before the row stops giving it room (default '100%'). */
   width?: string
   /** Model value for v-model */
   modelValue: number | null
@@ -148,6 +166,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: number | null): void
 }>()
 
+const editInput = ref<HTMLInputElement | null>(null)
+const sliderId = nextElementId('slider')
+
 const decimalsFromStep = (step: number): number => {
   if (!Number.isFinite(step) || step <= 0) return 0
   const s = step.toString()
@@ -257,8 +278,10 @@ const approxEqual = (a: number, b: number): boolean => {
 
 // Pill position logic
 const fillWidth = computed(() => {
+  const span = props.max - props.min
+  if (!(span > 0)) return 0
   const val = currentSliderValue.value
-  return ((val - props.min) / (props.max - props.min)) * 100
+  return ((val - props.min) / span) * 100
 })
 const staticFillWidth = ref<number>(0)
 
@@ -269,8 +292,13 @@ const pillLeft = computed(() =>
       : fillWidth.value) / 100})`
 )
 
+const skipEditCommit = ref(false)
+
+// A fraction of a step apart is the same value: an exact comparison lets float drift through as a
+// fresh commit.
 const sendValue = (val: number) => {
-  if (val === lastSentValue.value) return
+  const eps = Math.max(1e-6, rawStep.value * 0.25)
+  if (Math.abs(val - lastSentValue.value) <= eps) return
   lastSentValue.value = val
   emit('update:modelValue', val)
 }
@@ -289,7 +317,9 @@ const clearCommitLock = (): void => {
 }
 
 const setCommitLock = (val: number): void => {
-  const lockMs = 2000
+  // Long enough to swallow the echo of our own commit, short enough that a value the host drives
+  // on its own (a correlated axis, a preset being applied) is not held off the control.
+  const lockMs = 400
   commitLockValue.value = val
   commitLockUntilMs.value = Date.now() + lockMs
   if (commitLockTimeout) clearTimeout(commitLockTimeout)
@@ -313,6 +343,8 @@ const onSliderChange = (): void => {
 
 // Clamp during input
 const clampEditedValue = () => {
+  // An emptied number input reads as NaN, which must not be clamped into the value.
+  if (!Number.isFinite(editedDisplayValue.value)) return
   editedDisplayValue.value = Math.min(Math.max(editedDisplayValue.value, displayMin.value), displayMax.value)
 }
 
@@ -347,7 +379,12 @@ const flushPendingValue = (): void => {
   sendValue(toSend)
 }
 
+// Reached from the pointer, from the range input's blur and from its change event, so it has to
+// settle the interaction once however many of those arrive.
 const endInteracting = (): void => {
+  window.removeEventListener('pointerup', handlePointerUp)
+  window.removeEventListener('pointercancel', handlePointerCancel)
+  if (!isInteracting.value) return
   isInteracting.value = false
 
   const clamped = Math.min(Math.max(currentSliderValue.value, props.min), props.max)
@@ -363,10 +400,11 @@ const handlePointerCancel = (): void => endInteracting()
 
 const startInteracting = (): void => {
   if (props.disabled || isEditingCurrentSliderValue.value) return
+  if (isInteracting.value) return
   isInteracting.value = true
   clearCommitLock()
-  window.addEventListener('pointerup', handlePointerUp, { once: true })
-  window.addEventListener('pointercancel', handlePointerCancel, { once: true })
+  window.addEventListener('pointerup', handlePointerUp)
+  window.addEventListener('pointercancel', handlePointerCancel)
 }
 
 const isArrowKey = (key: string): boolean =>
@@ -412,17 +450,28 @@ const onRangeKeyup = (e: KeyboardEvent): void => {
   endInteracting()
 }
 
-// Keyboard handling
+// Keyboard handling for the edit input.
 const handleValueChange = (e: KeyboardEvent): void => {
   if (e.key === 'Escape') {
-    isEditingCurrentSliderValue.value = false
+    // Restore before leaving edit mode, so the watcher below has nothing to commit.
     editedDisplayValue.value = props.scaleFn ? props.scaleFn(lastSentValue.value) : lastSentValue.value
     currentSliderValue.value = lastSentValue.value
+    skipEditCommit.value = true
+    isEditingCurrentSliderValue.value = false
   } else if (e.key === 'Enter') {
     isEditingCurrentSliderValue.value = false
   }
 }
 
+// A native number spinner blurs the input before it applies the step, so leaving edit mode waits
+// long enough for the value that click was for to arrive.
+const onEditBlur = (): void => {
+  window.setTimeout(() => {
+    if (document.activeElement === editInput.value) return
+    isEditingCurrentSliderValue.value = false
+  }, 150)
+}
+
 // Sync from parent
 watch(
   () => props.modelValue,
@@ -431,12 +480,15 @@ watch(
     if (isEditingCurrentSliderValue.value || isInteracting.value) return
     if (
       commitLockValue.value !== null &&
-      Date.now() < commitLockUntilMs.value &&
-      !approxEqual(next, commitLockValue.value)
+      Date.now() < commitLockUntilMs.value
     ) {
-      return
+      // The echo of our own commit is already on screen; anything else is the host speaking and
+      // outranks the lock.
+      if (approxEqual(next, commitLockValue.value)) return
+      clearCommitLock()
     }
     currentSliderValue.value = next
+    lastSentValue.value = next
   },
   { immediate: true }
 )
@@ -446,6 +498,13 @@ watch(isEditingCurrentSliderValue, (isEditing) => {
     editedDisplayValue.value = displayValue.value
     staticFillWidth.value = fillWidth.value
   } else {
+    if (skipEditCommit.value) {
+      skipEditCommit.value = false
+      return
+    }
+    if (!Number.isFinite(editedDisplayValue.value)) {
+      editedDisplayValue.value = displayValue.value
+    }
     const raw = props.unscaleFn ? props.unscaleFn(editedDisplayValue.value) : editedDisplayValue.value
     currentSliderValue.value = Math.min(Math.max(raw, props.min), props.max)
     sendValue(currentSliderValue.value)

package/src/components/BlueSwitch.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex w-full justify-between items-center">
-    <!-- shrink-0 keeps the label at its natural width: letting flex shrink it by the fraction
-         of a pixel that rounding introduces is enough for Chromium to ellipsize a label that
-         fits. The cap is what makes an outsized label ellipsize instead of eating the row. -->
+    <!-- No cap: the control beside it yields a thousand times more readily, so the label keeps its
+         full text until the track is down to its own minimum, and only then does it ellipsize. -->
     <div
       v-if="label"
-      class="min-w-0 max-w-[45%] shrink-0"
+      class="min-w-0"
     >
       <label
+        :id="labelId"
         class="block truncate text-start mr-6"
         :title="label"
         :class="[theme === 'dark' ? 'text-white' : 'text-black', disabled ? 'opacity-30' : '']"
@@ -28,45 +28,60 @@
           :class="[disabled ? 'opacity-30' : 'opacity-60', theme === 'dark' ? 'text-white' : 'text-black']"
         />
       </BlueTooltip>
-      <!-- Both labels are laid out rather than drawn over: two equal columns take their width
-           from the longer of the two, so the track grows to whatever it has to say and the knob
-           covering either side has the same room. -->
+      <!-- The knob carries the state's own name and slides over a track that only says what the
+           other position would be, so the switch reads as one word rather than two competing ones. -->
       <div
         name="switch-track"
-        class="relative grid grid-cols-2 rounded-[8px] bluevue-elevation-1 cursor-pointer overflow-hidden"
+        role="switch"
+        :aria-labelledby="label ? labelId : undefined"
+        :aria-label="label ? undefined : name"
+        :aria-checked="modelValue"
+        :aria-disabled="disabled === true"
+        :tabindex="disabled ? -1 : 0"
+        class="relative inline-grid shrink-0 grid-cols-[1fr_1fr] rounded-[8px] bluevue-elevation-1 cursor-pointer overflow-hidden"
         :class="[theme === 'dark' ? 'bg-[#464646AA]' : 'bg-[#00000011]', disabled ? 'opacity-30 cursor-not-allowed' : '']"
-        :style="{ minWidth: width || '75px', height: height || '30px' }"
+        :style="{ height: height || '30px' }"
         @click="toggleSwitch"
+        @keydown="onSwitchKeydown"
       >
+        <!-- The knob has to clear its own word by 5px at either end of its travel, and an absolute
+             child cannot tell the track how wide that is. These two carry the knob's own type,
+             unseen, so the equal columns measure the longer word and the track is born to fit. -->
+        <span
+          aria-hidden="true"
+          class="invisible whitespace-nowrap px-[7px] text-[14px]"
+        >{{ labelOff || 'Off' }}</span>
+        <span
+          aria-hidden="true"
+          class="invisible whitespace-nowrap px-[7px] text-[14px]"
+        >{{ labelOn || 'On' }}</span>
+        <span
+          class="absolute left-[8px] top-1/2 -translate-y-1/2 text-[11px] pointer-events-none"
+          :class="trackLabelClass"
+        >{{ labelOff || '' }}</span>
+        <span
+          class="absolute right-[8px] top-1/2 -translate-y-1/2 text-[11px] pointer-events-none"
+          :class="trackLabelClass"
+        >{{ labelOn || '' }}</span>
         <div
-          class="absolute top-[4px] bottom-[4px] w-[calc(50%-4px)] rounded-[8px] bluevue-elevation-1 transition-all duration-300"
+          class="absolute top-[4px] bottom-[4px] left-[4px] flex items-center justify-center whitespace-nowrap rounded-[8px] px-[5px] text-[14px] text-white bluevue-elevation-1 transition-all duration-300 pointer-events-none"
           :style="{
-            left: modelValue ? 'calc(50% + 2px)' : '2px',
+            width: 'calc(50% - 4px)',
+            transform: modelValue ? 'translateX(100%)' : 'none',
             backgroundColor: modelValue ? color || 'var(--bluevue-primary)' : '#777777',
           }"
-        />
-        <!-- 9px, of which the knob's 2px inset takes the first two: what is left is the 7px the
-             label keeps from the knob's edge. -->
-        <span
-          class="relative flex items-center justify-center px-[9px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
-          :class="labelClass(!modelValue)"
         >
-          {{ labelOff || 'Off' }}
-        </span>
-        <span
-          class="relative flex items-center justify-center px-[9px] text-[14px] whitespace-nowrap pointer-events-none transition-opacity duration-300"
-          :class="labelClass(modelValue)"
-        >
-          {{ labelOn || 'On' }}
-        </span>
+          {{ modelValue ? labelOn || 'On' : labelOff || 'Off' }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
+import { nextElementId } from '../utils/id'
 import BlueIcon from './BlueIcon.vue'
 import BlueTooltip from './BlueTooltip.vue'
 
@@ -91,8 +106,6 @@ const props = defineProps<{
   name: string
   /** Theme of the component. */
   theme?: 'light' | 'dark'
-  /** Minimum width of the container. */
-  width?: string
 }>()
 
 const emit = defineEmits<{
@@ -100,11 +113,11 @@ const emit = defineEmits<{
 }>()
 
 const modelValue = ref(props.modelValue || false)
+const labelId = nextElementId('switch-label')
 
-// The label the knob sits under is white against its fill; the other one stays as a dim
-// reminder of what the far position says.
-const labelClass = (active: boolean): string[] =>
-  active ? ['text-white'] : ['opacity-20', props.theme === 'dark' ? 'text-white' : 'text-black']
+const trackLabelClass = computed(() =>
+  props.theme === 'dark' ? 'text-[#ffffff44]' : 'text-[#00000066]'
+)
 
 const toggleSwitch = (): void => {
   if (props.disabled) return
@@ -112,6 +125,14 @@ const toggleSwitch = (): void => {
   emit('update:modelValue', modelValue.value)
 }
 
+// The track is a div, so the keys a native checkbox would answer to have to be handled here.
+const onSwitchKeydown = (event: KeyboardEvent): void => {
+  if (props.disabled) return
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  toggleSwitch()
+}
+
 watch(
   () => props.modelValue,
   (v) => (modelValue.value = v ?? false),

package/src/components/BlueTooltip.vue

@@ -73,9 +73,11 @@ onBeforeUnmount(cancelOpen)
       :style="floatingStyles"
       @toggle="onToggle"
     >
+      <!-- pre-wrap so a caller can break the hint into lines, and hold a column of figures on a
+           tab stop, with one string and no markup. Long prose still wraps at the cap. -->
       <div
         role="tooltip"
-        class="bluevue-elevation-5 max-w-[280px] rounded-[4px] px-2 py-1 text-xs leading-snug transition-opacity duration-150"
+        class="bluevue-elevation-5 max-w-[280px] whitespace-pre-wrap rounded-[4px] px-2 py-1 text-xs leading-snug transition-opacity duration-150"
         :class="[
           theme === 'light' ? 'bg-white text-black' : 'bg-[#333333f2] text-white',
           isPositioned ? 'opacity-100' : 'opacity-0',

package/src/components/BlueWindRose.vue

@@ -21,6 +21,8 @@ const CARDINALS: { label: string; deg: number }[] = [
  */
 const props = defineProps<{
   modelValue: number | null
+  /** Marks the heading with a plain bar, for a value that is an angle rather than a wind. */
+  angle?: boolean
   label?: string
   name?: string
   /** Start of the circle (default 0). */
@@ -125,6 +127,20 @@ function tickPoint(deg: number, radius: number): { x: number; y: number } {
   const rad = ((deg - 90) * Math.PI) / 180
   return { x: CENTER + Math.cos(rad) * radius, y: CENTER + Math.sin(rad) * radius }
 }
+
+// A wind is named for where it comes from, so the arrow flies inward: the tail sits on the rim at
+// the heading and the head reaches the centre. An angle comes from nowhere, so it loses the head
+// and the bar simply marks the direction it points in.
+const indicatorPath = computed(() => {
+  const rim = 18
+  const shaft = 2.2
+  if (props.angle) {
+    return `M ${CENTER - shaft} ${rim} L ${CENTER + shaft} ${rim} L ${CENTER + shaft} ${CENTER} L ${CENTER - shaft} ${CENTER} Z`
+  }
+  const barb = 7
+  const neck = CENTER - 18
+  return `M ${CENTER} ${CENTER} L ${CENTER + barb} ${neck} L ${CENTER + shaft} ${neck} L ${CENTER + shaft} ${rim} L ${CENTER - shaft} ${rim} L ${CENTER - shaft} ${neck} L ${CENTER - barb} ${neck} Z`
+})
 </script>
 
 <template>
@@ -252,7 +268,7 @@ function tickPoint(deg: number, radius: number): { x: number; y: number } {
             :filter="`url(#${popoverId}-arrow-shadow)`"
           >
             <path
-              :d="`M ${CENTER} 18 L ${CENTER + 7} 36 L ${CENTER + 2.2} 36 L ${CENTER + 2.2} ${CENTER} L ${CENTER - 2.2} ${CENTER} L ${CENTER - 2.2} 36 L ${CENTER - 7} 36 Z`"
+              :d="indicatorPath"
               fill="#F5C400"
             />
             <circle

package/src/index.ts

@@ -10,6 +10,12 @@ export { default as BlueConfirmDialog } from './components/BlueConfirmDialog.vue
 export { default as BlueDialog } from './components/BlueDialog.vue'
 export { default as BlueExpansiblePanel } from './components/BlueExpansiblePanel.vue'
 export { default as BlueFileDrop } from './components/BlueFileDrop.vue'
+export { default as BlueHeader } from './components/BlueHeader.vue'
+export { default as BlueHeaderMenu } from './components/BlueHeaderMenu.vue'
+export {
+  default as BlueHeaderSelector,
+  type BlueHeaderSelectorItem,
+} from './components/BlueHeaderSelector.vue'
 export { default as BlueIcon } from './components/BlueIcon.vue'
 export { default as BlueInput } from './components/BlueInput.vue'
 export { default as BlueStepsDialog, type BlueStep } from './components/BlueStepsDialog.vue'

package/src/styles/bluevue.css

@@ -9,9 +9,12 @@
   --bluevue-accent: #6699CC;
   --bluevue-panel-bg: rgba(30, 30, 30, 0.96);
   --bluevue-hairline: rgba(255, 255, 255, 0.08);
-  /* Material's three-part shadow, at the two depths the controls use: a resting control, and
-     one raised above its neighbours (a selected segment, an open menu). */
+  /* Material's three-part shadow, across the five depths a control can rest at: 1 sits a hair off
+     the surface, 5 floats above its neighbours (a selected segment, an open menu). */
   --bluevue-elevation-1: 0 2px 1px -1px #0003, 0 1px 1px 0 #00000024, 0 1px 3px 0 #0000001f;
+  --bluevue-elevation-2: 0 3px 1px -2px #0003, 0 2px 2px 0 #00000024, 0 1px 5px 0 #0000001f;
+  --bluevue-elevation-3: 0 3px 3px -2px #0003, 0 3px 4px 0 #00000024, 0 1px 8px 0 #0000001f;
+  --bluevue-elevation-4: 0 2px 4px -1px #0003, 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f;
   --bluevue-elevation-5: 0 3px 5px -1px #0003, 0 5px 8px 0 #00000024, 0 1px 14px 0 #0000001f;
   /* The opposite of an elevation: a well cut into the surface, for somewhere a value is typed
      rather than somewhere that is pressed. The light line along the bottom edge is what sells
@@ -26,6 +29,18 @@
   box-shadow: var(--bluevue-elevation-1);
 }
 
+.bluevue-elevation-2 {
+  box-shadow: var(--bluevue-elevation-2);
+}
+
+.bluevue-elevation-3 {
+  box-shadow: var(--bluevue-elevation-3);
+}
+
+.bluevue-elevation-4 {
+  box-shadow: var(--bluevue-elevation-4);
+}
+
 .bluevue-elevation-5 {
   box-shadow: var(--bluevue-elevation-5);
 }
@@ -38,11 +53,13 @@
   box-shadow: var(--bluevue-elevation-1-soft);
 }
 
-/* The surface the dialogs are built on: a frosted near-black card with a hairline edge. */
+/* The surface the dialogs are built on: a frosted near-black card with a hairline edge.
+   The -webkit- spelling goes first here and below: written the other way round, minification keeps
+   only the last of the pair, and Chromium dropped the prefixed alias, so the frosting was lost. */
 .bluevue-panel {
   background-color: var(--bluevue-panel-bg);
-  backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
   border: 1px solid var(--bluevue-hairline);
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
 }
@@ -59,9 +76,18 @@
   overflow: visible;
 }
 
-/* showModal() moves focus into the dialog, and with nothing focusable inside it the dialog
-   itself takes it and the browser rings the whole panel. The ring belongs on controls, not on
-   the surface holding them, and the controls inside keep their own. */
+/* The cap above has to reach the panel, or a tall dialog paints its footer past the viewport with
+   nothing able to scroll it back: an element in the top layer does not move with the page. A column
+   here hands the panel the dialog's own height, and the panel scrolls its body instead. Written
+   against [open] so the closed element keeps the display: none the UA gives it. */
+.bluevue-dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* showModal() moves focus into the dialog, and the dialog itself is what takes it, so the browser
+   rings the whole panel. The ring belongs on controls, not on the surface holding them, and the
+   controls inside keep their own. */
 .bluevue-dialog:focus,
 .bluevue-dialog:focus-visible,
 .bluevue-popover:focus,
@@ -71,8 +97,8 @@
 
 .bluevue-dialog::backdrop {
   background: rgba(0, 0, 0, 0.88);
-  backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
 }
 
 /* A popover is promoted to the top layer, so it needs no z-index and is not clipped by the
@@ -91,8 +117,8 @@
    backdrop at half its weight, since the page under it stays live and clickable. */
 .bluevue-popover--dimmed::backdrop {
   background: rgba(0, 0, 0, 0.44);
-  backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
 }
 
 /* An icon is a box the size of its em, not of however wide its glyph advances, so a row of them
@@ -224,23 +250,14 @@
   position: absolute;
 }
 
-/* BlueExpansiblePanel's open and close. */
+/* BlueExpansiblePanel's open and close. The two ends are set from the panel's measured height by
+   the component, so only the transition itself lives here. */
 .bluevue-expand-enter-active,
 .bluevue-expand-leave-active {
   transition: max-height 0.3s ease;
   overflow: hidden;
 }
 
-.bluevue-expand-enter-from,
-.bluevue-expand-leave-to {
-  max-height: 0;
-}
-
-.bluevue-expand-enter-to,
-.bluevue-expand-leave-from {
-  max-height: 500px;
-}
-
 /* BlueLoadingDialog's mark is a propeller, so it turns like one: a creep of 80 degrees over two
    seconds, then the balance of four turns over the next two, carrying it round to where it
    started. */

package/src/utils/id.ts

@@ -0,0 +1,15 @@
+let counter = 0
+
+/**
+ * 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 function nextElementId(prefix: string): string {
+  counter += 1
+  return `bluevue-${prefix}-${counter}`
+}