@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/SampleHierarchyTree.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Collapsible tree visualizing the biological sample hierarchy (study → experiment → plate → sample → cell line → passage → clone → treatment). */
-import { h, Transition, type VNode } from 'vue'
+import { h, Transition, useId, type VNode } from 'vue'
 import type { TreeNodeType, BadgeVariant, TreeNode } from '../types'
 import { useExpansionSet } from '../composables/useExpansionSet'
 import DataStateInternal from './internal/DataStateInternal.vue'
@@ -24,6 +24,12 @@ interface Props {
    * `null`/`undefined` renders normally.
    */
   error?: string | null
+  /**
+   * Selected node id; bind it with v-model on selected-id. Binding it, even to
+   * `null`, turns on selection. The matching row is highlighted, rows take
+   * keyboard focus and Enter or Space selects. Left unbound, rows are not selectable.
+   */
+  selectedId?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +46,7 @@ const emit = defineEmits<{
   'node-click': [node: TreeNode]
   'expand': [nodeId: string]
   'collapse': [nodeId: string]
+  'update:selectedId': [nodeId: string]
 }>()
 
 // Default icons by type (Lucide SVG paths - arrays to support multi-path icons)
@@ -64,13 +71,13 @@ const typeIcons: Record<TreeNodeType, IconElement[]> = {
     { tag: 'rect', attrs: { width: '7', height: '7', x: '3', y: '14', rx: '1' } },
   ],
   sample: [
-    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
-    { tag: 'path', attrs: { d: 'M12 6v6l4 2' } },
+    { tag: 'path', attrs: { d: 'M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2' } },
+    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
+    { tag: 'path', attrs: { d: 'M14.5 16h-5' } },
   ],
   cell_line: [
-    { tag: 'path', attrs: { d: 'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5' } },
-    { tag: 'path', attrs: { d: 'M9 18h6' } },
-    { tag: 'path', attrs: { d: 'M10 22h4' } },
+    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+    { tag: 'circle', attrs: { cx: '12', cy: '12', r: '3' } },
   ],
   passage: [
     { tag: 'path', attrs: { d: 'M3 5h.01' } },
@@ -85,9 +92,12 @@ const typeIcons: Record<TreeNodeType, IconElement[]> = {
     { tag: 'path', attrs: { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' } },
   ],
   treatment: [
-    { tag: 'path', attrs: { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' } },
-    { tag: 'path', attrs: { d: 'M6.453 15h11.094' } },
-    { tag: 'path', attrs: { d: 'M8.5 2h7' } },
+    { tag: 'path', attrs: { d: 'm18 2 4 4' } },
+    { tag: 'path', attrs: { d: 'm17 7 3-3' } },
+    { tag: 'path', attrs: { d: 'M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5' } },
+    { tag: 'path', attrs: { d: 'm9 11 4 4' } },
+    { tag: 'path', attrs: { d: 'm5 19-3 3' } },
+    { tag: 'path', attrs: { d: 'm14 4 6 6' } },
   ],
   folder: [
     { tag: 'path', attrs: { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' } },
@@ -132,6 +142,15 @@ function toggleExpand(node: TreeNode) {
 
 function handleNodeClick(node: TreeNode) {
   emit('node-click', node)
+  emit('update:selectedId', node.id)
+}
+
+function handleHeaderKeydown(event: KeyboardEvent, node: TreeNode) {
+  // Keys pressed on the nested expand toggle belong to the toggle.
+  if (props.selectedId === undefined || event.target !== event.currentTarget) return
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleNodeClick(node)
 }
 
 function getIconElements(node: TreeNode): IconElement[] {
@@ -161,6 +180,8 @@ function canShowChildren(node: TreeNode, depth: number): boolean {
   return isExpanded(node.id)
 }
 
+const treeId = useId()
+
 // Render tree node recursively
 function renderNode(node: TreeNode, depth: number): VNode {
   const children = node.children
@@ -170,12 +191,23 @@ function renderNode(node: TreeNode, depth: number): VNode {
   const badge = getBadgeContent(node)
   const badgeVar = getBadgeVariant(node)
   const iconElements = getIconElements(node)
+  const selectable = props.selectedId !== undefined
+  const selected = selectable && props.selectedId === node.id
+  // The child group sits beside the header, so the header treeitem claims it with aria-owns.
+  const groupId = `${treeId}-group-${encodeURIComponent(node.id)}`
 
   const header = h(
     'div',
     {
-      class: 'mint-sample-tree__node-header',
+      class: ['mint-sample-tree__node-header', selected ? 'mint-sample-tree__node-header--selected' : ''],
+      // The focusable header is the treeitem, so its selected state is announced on focus.
+      role: 'treeitem',
+      'aria-expanded': canExpand ? expanded : undefined,
+      'aria-selected': selectable ? selected : undefined,
+      'aria-owns': showChildNodes ? groupId : undefined,
+      tabindex: selectable ? 0 : undefined,
       onClick: () => handleNodeClick(node),
+      onKeydown: (e: KeyboardEvent) => handleHeaderKeydown(e, node),
     },
     [
       canExpand
@@ -204,7 +236,7 @@ function renderNode(node: TreeNode, depth: number): VNode {
             ),
           ])
         : null,
-      h('span', { class: 'mint-sample-tree__label' }, node.label),
+      h('span', { class: ['mint-sample-tree__label', `mint-sample-tree__label--${node.type || 'custom'}`] }, node.label),
       badge !== undefined
         ? h('span', { class: ['mint-sample-tree__badge', `mint-sample-tree__badge--${badgeVar}`] }, String(badge))
         : null,
@@ -216,7 +248,10 @@ function renderNode(node: TreeNode, depth: number): VNode {
       ? h(
           Transition,
           { enterActiveClass: 'mint-sample-tree__children--entering', leaveActiveClass: 'mint-sample-tree__children--leaving' },
-          () => h('div', { class: 'mint-sample-tree__children' }, children.map((child) => renderNode(child, depth + 1)))
+          // The inner wrapper is the single grid row the 0fr → 1fr expand animates (4c).
+          () => h('div', { id: groupId, class: 'mint-sample-tree__children', role: 'group' }, [
+            h('div', { class: 'mint-sample-tree__children-inner' }, children.map((child) => renderNode(child, depth + 1))),
+          ])
         )
       : null
 
@@ -225,8 +260,6 @@ function renderNode(node: TreeNode, depth: number): VNode {
     {
       key: node.id,
       class: ['mint-sample-tree__node', expanded ? 'mint-sample-tree__node--expanded' : '', !canExpand ? 'mint-sample-tree__node--leaf' : ''],
-      role: 'treeitem',
-      'aria-expanded': canExpand ? expanded : undefined,
     },
     [header, childNodes]
   )

package/src/components/SampleLegend.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. */
 import type { SampleType } from '../types'
-import { SAMPLE_COLOR_SCALE } from '../utils/color'
+import { SAMPLE_GROUP_TOKENS } from '../utils/color'
+import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 
 interface Props {
   modelValue?: string
@@ -18,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   samples: () => [],
   showCounts: true,
   editable: false,
-  colorPalette: () => [...SAMPLE_COLOR_SCALE],
+  colorPalette: () => [...SAMPLE_GROUP_TOKENS],
   size: 'md',
   orientation: 'vertical',
 })
@@ -36,6 +37,11 @@ function getSampleColor(sample: SampleType, index: number): string {
   return sample.color || props.colorPalette[index % props.colorPalette.length]
 }
 
+/** Same marker as the well: the id doubles as the sample type, as in WellPlate. */
+function getSampleMarker(sample: SampleType, index: number) {
+  return sampleTypeMarker(sample.id, getSampleColor(sample, index))
+}
+
 function handleSampleClick(sample: SampleType) {
   const newValue = props.modelValue === sample.id ? undefined : sample.id
   emit('sample-click', sample)
@@ -68,10 +74,12 @@ function handleAdd() {
       @click="handleSampleClick(sample)"
     >
       <span
+        v-for="marker in [getSampleMarker(sample, index)]"
+        :key="sample.id"
         :class="['mint-sample-legend__swatch', `mint-sample-legend__swatch--${size}`]"
-        :style="{ backgroundColor: getSampleColor(sample, index) }"
+        :style="marker.style"
         :aria-hidden="true"
-      />
+      >{{ marker.glyph }}</span>
 
       <span :class="['mint-sample-legend__name', `mint-sample-legend__name--${size}`]">
         {{ sample.name }}

package/src/components/SampleSelector.story.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import SampleSelector from './SampleSelector.vue'
 import type { SampleGroup } from '../types'
 import type { AutoGroupResult } from '../types/auto-group'
@@ -10,6 +11,9 @@ const mockSamples = [
   'Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3',
 ]
 
+/** Selection for the pre-defined groups variant, so tri-state propagation is clickable. */
+const groupedSelection = ref(['Control_Rep1', 'Treatment_Low_Rep1'])
+
 const mockGroups: SampleGroup[] = [
   { name: 'Control', color: '#3B82F6', samples: ['Control_Rep1', 'Control_Rep2', 'Control_Rep3'] },
   { name: 'Treatment_Low', color: '#10B981', samples: ['Treatment_Low_Rep1', 'Treatment_Low_Rep2', 'Treatment_Low_Rep3'] },
@@ -124,7 +128,7 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
     <Variant title="With Pre-defined Groups">
       <div style="padding: 2rem; max-width: 400px;">
         <SampleSelector
-          :model-value="['Control_Rep1', 'Treatment_Low_Rep1']"
+          v-model="groupedSelection"
           :samples="mockSamples"
           :groups="mockGroups"
         />

package/src/components/SampleSelector.vue

@@ -2,6 +2,7 @@
 /** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
 import { ref, computed } from 'vue'
 import BaseButton from './BaseButton.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 import BaseInput from './BaseInput.vue'
 import AutoGroupModal from './AutoGroupModal.vue'
 import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
@@ -254,6 +255,9 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+/** Selected samples among the resolved list, for the select-all header. */
+const selectedCount = computed(() => resolvedSamples.value.filter(s => props.modelValue.includes(s)).length)
+
 /** True while a loading, error or empty placeholder stands in for the body. */
 const isPlaceholderState = computed(() =>
   props.loading || Boolean(props.error) || resolvedSamples.value.length === 0,
@@ -282,17 +286,24 @@ defineExpose({ handleSmartGroupApply })
       </slot>
     </div>
 
-    <!-- Select All Row -->
-    <label v-if="!isPlaceholderState" class="mint-sample-selector__select-all">
-      <input
-        type="checkbox"
-        :checked="isAllSelected"
-        @change="toggleSelectAll"
+    <!-- Select-all header row -->
+    <div
+      v-if="!isPlaceholderState"
+      :class="['mint-sample-selector__select-all', { 'mint-sample-selector__select-all--grouped': groupingEnabled }]"
+      @click="toggleSelectAll"
+    >
+      <BaseCheckbox
+        :model-value="isAllSelected"
+        :indeterminate="selectedCount > 0 && !isAllSelected"
+        size="sm"
+        aria-label="Select all samples"
         class="mint-sample-selector__checkbox"
+        @click.stop
+        @update:model-value="toggleSelectAll"
       />
-      <span class="mint-sample-selector__select-all-label">Select All</span>
-      <span class="mint-sample-selector__select-all-count">{{ resolvedSamples.length }} samples</span>
-    </label>
+      <span class="mint-sample-selector__select-all-label">All samples</span>
+      <span class="mint-sample-selector__select-all-count">{{ selectedCount }} / {{ resolvedSamples.length }}</span>
+    </div>
 
     <!-- Action Buttons Row -->
     <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
@@ -395,7 +406,6 @@ defineExpose({ handleSmartGroupApply })
               :sample="sample"
               :selected="modelValue.includes(sample)"
               :dragging="draggingSample === sample"
-              checkbox-size="small"
               @dragstart="handleDragStart(sample, null, $event)"
               @dragend="handleDragEnd"
               @toggle="toggleSample(sample)"
@@ -457,12 +467,12 @@ defineExpose({ handleSmartGroupApply })
           :title="sample"
           :aria-label="`Sample: ${sample}`"
         >
-          <input
-            type="checkbox"
-            :checked="modelValue.includes(sample)"
-            class="mint-sample-selector__checkbox"
+          <BaseCheckbox
+            :model-value="modelValue.includes(sample)"
+            size="sm"
             :aria-label="`Select ${sample}`"
-            @change="toggleSample(sample)"
+            class="mint-sample-selector__checkbox"
+            @update:model-value="toggleSample(sample)"
           />
           <span class="mint-sample-selector__flat-name">{{ sample }}</span>
         </div>

package/src/components/SampleSelectorGroupNode.vue

@@ -8,6 +8,7 @@
  * levels in between are pure path nodes that aggregate their descendants.
  */
 import { computed } from 'vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 import SampleSelectorSampleRow from './SampleSelectorSampleRow.vue'
 import type { SampleGroupNode } from '../composables/useSampleGroups'
 import { collectLeafGroupNames, type SampleGroupTreeContext } from './SampleSelector.tree'
@@ -24,6 +25,7 @@ const isRoot = computed(() => props.depth === 0)
 const isLeaf = computed(() => props.node.children.length === 0)
 const expanded = computed(() => props.ctx.isExpanded(props.node.key))
 const leafGroupNames = computed(() => collectLeafGroupNames(props.node))
+const selectedCount = computed(() => props.node.allSamples.filter(props.ctx.isSampleSelected).length)
 /** Roots reorder as a family, leaves as individual groups; path nodes stay put. */
 const dragKind = computed(() => (isRoot.value ? 'major' : isLeaf.value ? 'sub' : null))
 /** Reorder drags address a family by its label but a group by its full name. */
@@ -62,6 +64,8 @@ function onHeaderKeydown(event: KeyboardEvent) {
     props.ctx.onGroupReorderKeydown(dragName.value, dragKind.value, event)
     return
   }
+  // Keys from the checkbox or colour button inside the header are theirs, not the header's.
+  if (event.target !== event.currentTarget) return
   if (event.key !== 'Enter' && event.key !== ' ') return
   event.preventDefault()
   props.ctx.toggleExpanded(props.node.key)
@@ -118,18 +122,14 @@ function onHeaderKeydown(event: KeyboardEvent) {
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
       </svg>
 
-      <input
-        type="checkbox"
-        :checked="ctx.isFullySelected(node.allSamples)"
+      <BaseCheckbox
+        :model-value="ctx.isFullySelected(node.allSamples)"
         :indeterminate="ctx.isPartiallySelected(node.allSamples)"
-        :class="[
-          'mint-sample-selector__checkbox',
-          isRoot ? '' : 'mint-sample-selector__checkbox--small',
-        ]"
-        :style="{ accentColor: node.color }"
+        size="sm"
         :aria-label="`Select ${node.label}`"
+        class="mint-sample-selector__checkbox"
         @click.stop
-        @change="ctx.toggleSamples(node.allSamples)"
+        @update:model-value="ctx.toggleSamples(node.allSamples)"
       />
 
       <button
@@ -153,15 +153,7 @@ function onHeaderKeydown(event: KeyboardEvent) {
         :title="node.group?.name ?? node.label"
       >{{ node.label }}</span>
 
-      <span
-        :class="[
-          'mint-sample-selector__count-badge',
-          isRoot ? '' : 'mint-sample-selector__count-badge--small',
-        ]"
-        :style="{ backgroundColor: node.displayBg, color: node.color }"
-      >
-        {{ node.allSamples.length }}
-      </span>
+      <span class="mint-sample-selector__count-badge">{{ selectedCount }} / {{ node.allSamples.length }}</span>
 
       <button
         type="button"
@@ -202,8 +194,6 @@ function onHeaderKeydown(event: KeyboardEvent) {
           :sample="sample"
           :selected="ctx.isSampleSelected(sample)"
           :dragging="ctx.draggingSample() === sample"
-          :accent-color="node.color"
-          checkbox-size="tiny"
           removable
           @dragstart="(e: DragEvent) => ctx.onSampleDragStart(sample, node.group!.name, e)"
           @dragend="ctx.onSampleDragEnd"

package/src/components/SampleSelectorSampleRow.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
 /** Single draggable sample row used by grouped and ungrouped SampleSelector lists. */
-import { computed } from 'vue'
-
-type CheckboxSize = 'small' | 'tiny'
+import BaseCheckbox from './BaseCheckbox.vue'
 
 interface Props {
   sample: string
   selected: boolean
   dragging?: boolean
-  accentColor?: string
-  checkboxSize?: CheckboxSize
   removable?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   dragging: false,
-  checkboxSize: 'tiny',
   removable: false,
 })
 
@@ -23,11 +18,6 @@ const emit = defineEmits<{
   toggle: []
   remove: []
 }>()
-
-const checkboxClasses = computed(() => [
-  'mint-sample-selector__checkbox',
-  `mint-sample-selector__checkbox--${props.checkboxSize}`,
-])
 </script>
 
 <template>
@@ -43,13 +33,12 @@ const checkboxClasses = computed(() => [
     <svg class="mint-sample-selector__drag-handle" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
     </svg>
-    <input
-      type="checkbox"
-      :checked="selected"
-      :class="checkboxClasses"
-      :style="accentColor ? { accentColor } : undefined"
+    <BaseCheckbox
+      :model-value="selected"
+      size="sm"
       :aria-label="`Select sample ${sample}`"
-      @change="emit('toggle')"
+      class="mint-sample-selector__checkbox"
+      @update:model-value="emit('toggle')"
     />
     <span class="mint-sample-selector__sample-name">{{ sample }}</span>
     <button

package/src/components/ScheduleCalendar.story.vue

@@ -197,5 +197,19 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Event Statuses">
+      <div style="padding: 1rem; height: 600px;">
+        <ScheduleCalendar
+          :model-value="today"
+          view="week"
+          :events="mockEvents"
+          :day-start-hour="8"
+          :day-end-hour="17"
+          :show-now-indicator="false"
+          readonly
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ScheduleCalendar.vue

@@ -226,6 +226,18 @@ function onEventKeydown(event: ScheduleEvent, e: KeyboardEvent) {
     : `${event.title} cannot move further.`)
 }
 
+/** Status written next to the time so it never rests on color alone (3c). Confirmed is the default and stays unlabeled. */
+const STATUS_TEXT: Partial<Record<NonNullable<ScheduleEvent['status']>, string>> = {
+  pending: 'Pending',
+  'in-progress': 'In progress',
+  cancelled: 'Cancelled',
+}
+
+function eventTimeText(event: ScheduleEvent): string {
+  const status = event.status && STATUS_TEXT[event.status]
+  return status ? `${formatEventTime(event)} · ${status}` : formatEventTime(event)
+}
+
 /** Instructions announced with each event. */
 function eventLabel(event: ScheduleEvent): string {
   const base = `${event.title}, ${formatEventTime(event)}`
@@ -398,7 +410,7 @@ onUnmounted(() => {
                   @pointerdown="onResizePointerDown(event, 'top', dayIdx, $event)"
                 />
                 <div class="mint-schedule__event-title">{{ event.title }}</div>
-                <div class="mint-schedule__event-time">{{ formatEventTime(event) }}</div>
+                <div class="mint-schedule__event-time">{{ eventTimeText(event) }}</div>
                 <div
                   v-if="!readonly && event.resizable !== false"
                   class="mint-schedule__event-resize-handle mint-schedule__event-resize-handle--bottom"

package/src/components/ScientificNumber.story.vue

@@ -78,7 +78,7 @@ const notations: NumberNotation[] = ['auto', 'scientific', 'engineering', 'compa
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 1.125rem;">
         <div style="display: flex; gap: 0.5rem; align-items: baseline;">
           <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Avogadro:</span>
-          <ScientificNumber :value="6.022e23" unit="mol-1" notation="scientific" />
+          <ScientificNumber :value="6.022e23" unit="mol⁻¹" notation="scientific" />
         </div>
         <div style="display: flex; gap: 0.5rem; align-items: baseline;">
           <span style="min-width: 140px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Boltzmann:</span>
@@ -97,12 +97,25 @@ const notations: NumberNotation[] = ['auto', 'scientific', 'engineering', 'compa
 
     <Variant title="Copyable">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 1.125rem;">
-        <ScientificNumber :value="6.022e23" unit="mol-1" copyable />
+        <ScientificNumber :value="6.022e23" unit="mol⁻¹" copyable />
         <ScientificNumber :value="0.00042" unit="M" copyable />
         <ScientificNumber :value="1234567" copyable />
       </div>
     </Variant>
 
+    <Variant title="Selection Copy">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: var(--text-primary, #1e293b);">
+        <p style="margin: 0;">
+          Avogadro's constant is <ScientificNumber :value="6.022e23" unit="mol⁻¹" /> and the IC50 is
+          <ScientificNumber :value="4.2e-4" unit="M" />.
+        </p>
+        <p style="margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--text-secondary, #64748b);">
+          Selecting one number copies <code>6.022e23 mol⁻¹</code>; copying the whole sentence keeps
+          the exponents as <code>10^23</code> and <code>10^−4</code>, never <code>1023</code>.
+        </p>
+      </div>
+    </Variant>
+
     <Variant title="Special Values">
       <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center; font-size: 1.125rem;">
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.25rem;">

package/src/components/ScientificNumber.vue

@@ -18,20 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const copied = ref(false)
-
-const SUPERSCRIPT_DIGITS: Record<string, string> = {
-  '0': '\u2070',
-  '1': '\u00B9',
-  '2': '\u00B2',
-  '3': '\u00B3',
-  '4': '\u2074',
-  '5': '\u2075',
-  '6': '\u2076',
-  '7': '\u2077',
-  '8': '\u2078',
-  '9': '\u2079',
-  '-': '\u207B',
-}
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
 
 const SI_SUFFIXES: [number, string][] = [
   [1e12, 'T'],
@@ -44,13 +31,6 @@ const SI_SUFFIXES: [number, string][] = [
   [1e-12, 'p'],
 ]
 
-function toSuperscript(exp: number): string {
-  return String(exp)
-    .split('')
-    .map(ch => SUPERSCRIPT_DIGITS[ch] ?? ch)
-    .join('')
-}
-
 function roundToPrecision(n: number, digits: number): string {
   return n.toFixed(digits).replace(/\.?0+$/, '') || '0'
 }
@@ -107,7 +87,7 @@ const formatted = computed<FormattedNumber>(() => {
     type: 'scientific',
     mantissa: mantissaStr,
     exponent: exp,
-    exponentStr: toSuperscript(exp),
+    exponentStr: String(exp).replace('-', '\u2212'), // raised by CSS; true minus sign
   }
 })
 
@@ -133,11 +113,23 @@ const plainTextValue = computed(() => {
   return text
 })
 
+const rootEl = ref<HTMLElement>()
+
+/** A selection inside the number copies the same canonical string as the button; a wider one is left to the browser. */
+function onSelectionCopy(event: ClipboardEvent) {
+  const selection = document.getSelection()
+  const root = rootEl.value
+  if (!selection || selection.isCollapsed || !root?.contains(selection.anchorNode) || !root.contains(selection.focusNode)) return
+  event.clipboardData?.setData('text/plain', plainTextValue.value)
+  event.preventDefault()
+}
+
 async function copyToClipboard() {
   try {
     await navigator.clipboard.writeText(plainTextValue.value)
     copied.value = true
-    setTimeout(() => { copied.value = false }, 1500)
+    clearTimeout(copiedTimer)
+    copiedTimer = setTimeout(() => { copied.value = false }, 1500)
   } catch {
     // clipboard not available
   }
@@ -145,7 +137,7 @@ async function copyToClipboard() {
 </script>
 
 <template>
-  <span class="mint-sci-number">
+  <span ref="rootEl" class="mint-sci-number" @copy="onSelectionCopy">
     <!-- Special values: NaN, Infinity -->
     <template v-if="specialDisplay">
       <span class="mint-sci-number__plain">{{ specialDisplay }}</span>
@@ -156,7 +148,9 @@ async function copyToClipboard() {
       <span class="mint-sci-number__mantissa">{{ formatted.mantissa }}</span>
       <span class="mint-sci-number__times">&times;</span>
       <span class="mint-sci-number__base">10</span>
-      <span class="mint-sci-number__exponent">{{ formatted.exponentStr }}</span>
+      <!-- The raised digits are CSS-generated so no selection copies "1023"; the hidden "^n" carries the value with an ASCII minus. -->
+      <span class="mint-sci-number__sr">^{{ formatted.exponent }}</span>
+      <span class="mint-sci-number__exponent" :data-exponent="formatted.exponentStr" aria-hidden="true" />
     </template>
 
     <!-- Compact notation with SI suffix -->
@@ -178,7 +172,8 @@ async function copyToClipboard() {
       v-if="copyable"
       :class="['mint-sci-number__copy-btn', { 'mint-sci-number__copy-btn--copied': copied }]"
       type="button"
-      :title="copied ? 'Copied!' : 'Copy value'"
+      title="Copy value"
+      aria-label="Copy value"
       @click.stop="copyToClipboard"
     >
       <svg v-if="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -189,5 +184,6 @@ async function copyToClipboard() {
         <polyline points="20 6 9 17 4 12" />
       </svg>
     </button>
+    <span v-if="copied" class="mint-sci-number__copied" role="status">Copied {{ plainTextValue }}</span>
   </span>
 </template>