@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.1

package/src/components/NumberInput.story.vue

@@ -1,7 +1,20 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import NumberInput from './NumberInput.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
+
+const sizeValues = ref<Record<string, number | undefined>>({ sm: 42, md: 42, lg: 42 })
+const samples = ref<number | undefined>(96)
+const temperature = ref<number | undefined>(37)
+const volume = ref<number | undefined>(100)
+const overMax = ref<number | undefined>(999)
+const empty = ref<number | undefined>(undefined)
+const mass = ref<number | undefined>(12.5)
+const ph = ref<number | undefined>(7.4)
+const wells = ref<number | undefined>(96)
+const sliderPh = ref<number | undefined>(7.4)
+const percent = ref<number | undefined>(45)
 </script>
 
 <template>
@@ -39,6 +52,9 @@ const sizes = ['sm', 'md', 'lg'] as const
         <HstCheckbox v-model="state.disabled" title="Disabled" />
         <HstCheckbox v-model="state.error" title="Error" />
       </template>
+      <template #initState>
+        {{ { value: 42, min: 0, max: 100, step: 1, size: 'md', placeholder: '', disabled: false, error: false } }}
+      </template>
     </Variant>
 
     <Variant title="Sizes">
@@ -47,7 +63,7 @@ const sizes = ['sm', 'md', 'lg'] as const
           <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
             {{ size }}
           </p>
-          <NumberInput :model-value="42" :size="size" />
+          <NumberInput v-model="sizeValues[size]" :size="size" />
         </div>
       </div>
     </Variant>
@@ -56,22 +72,22 @@ const sizes = ['sm', 'md', 'lg'] as const
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Sample count (0-384)</p>
-          <NumberInput :model-value="96" :min="0" :max="384" :step="1" placeholder="Samples" />
+          <NumberInput v-model="samples" :min="0" :max="384" :step="1" placeholder="Samples" />
         </div>
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Temperature (step 0.5)</p>
-          <NumberInput :model-value="37" :min="0" :max="100" :step="0.5" />
+          <NumberInput v-model="temperature" :min="0" :max="100" :step="0.5" />
         </div>
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Volume in uL (step 10)</p>
-          <NumberInput :model-value="100" :min="0" :max="1000" :step="10" />
+          <NumberInput v-model="volume" :min="0" :max="1000" :step="10" />
         </div>
       </div>
     </Variant>
 
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
-        <NumberInput :model-value="999" :max="100" error />
+        <NumberInput v-model="overMax" :max="100" error />
       </div>
     </Variant>
 
@@ -83,16 +99,16 @@ const sizes = ['sm', 'md', 'lg'] as const
 
     <Variant title="Empty with Placeholder">
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
-        <NumberInput placeholder="Enter value..." />
+        <NumberInput v-model="empty" placeholder="Enter value..." />
       </div>
     </Variant>
 
-    <Variant title="Hover-Reveal Steppers (default)">
+    <Variant title="Steppers (always visible)">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 1rem;">
           <NumberInput v-model="state.value" :step="0.5" />
           <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-            Hover or focus to reveal the ↑/↓ steppers. Rest = clean.
+            Two horizontal steppers, hairline-divided. Arrow keys, PageUp/PageDown also step.
           </p>
         </div>
       </template>
@@ -106,16 +122,19 @@ const sizes = ['sm', 'md', 'lg'] as const
 
     <Variant title="With unit suffix">
       <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 0.75rem;">
-        <NumberInput :model-value="12.5" unit="mg" :step="0.1" />
-        <NumberInput :model-value="7.4" unit="pH" :step="0.1" :min="0" :max="14" />
-        <NumberInput :model-value="96" unit="wells" :step="1" />
+        <NumberInput v-model="mass" unit="mg" :step="0.1" />
+        <NumberInput v-model="ph" unit="pH" :step="0.1" :min="0" :max="14" />
+        <NumberInput v-model="wells" unit="wells" :step="1" />
       </div>
     </Variant>
 
     <Variant title="Slider mode (min + max provided)">
       <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 1rem;">
-        <NumberInput :model-value="7.4" :min="0" :max="14" :step="0.1" unit="pH" />
-        <NumberInput :model-value="45" :min="0" :max="100" :step="1" unit="%" />
+        <NumberInput v-model="sliderPh" :min="0" :max="14" :step="0.1" unit="pH" />
+        <NumberInput v-model="percent" :min="0" :max="100" :step="1" unit="%" />
+        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Drag anywhere in the field (outside the text) to scrub. Home/End jump to min/max.
+        </p>
       </div>
     </Variant>
   </Story>

package/src/components/NumberInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Numeric input with increment/decrement buttons, optional unit label, and slider progress track. */
+/** Numeric input with always-visible steppers, optional unit label, and (with min+max) an in-field drag-to-scrub range fill. */
 import { computed } from 'vue'
 
 interface Props {
@@ -33,7 +33,7 @@ const sliderPercent = computed(() => {
   if (min === undefined || max === undefined || props.modelValue === undefined) return 0
   const range = max - min
   if (range === 0) return 0
-  return ((props.modelValue - min) / range) * 100
+  return Math.min(100, Math.max(0, ((props.modelValue - min) / range) * 100))
 })
 
 const canDecrement = computed(() => {
@@ -55,6 +55,17 @@ function clamp(value: number): number {
   return result
 }
 
+/** Clamp and trim float noise (0.1 + 0.2 → 0.3) without losing real precision. */
+function settle(value: number): number {
+  return Number(clamp(value).toFixed(10))
+}
+
+/** Snap to the step grid anchored at `min`, for pointer scrubbing. */
+function snap(value: number): number {
+  const origin = props.min ?? 0
+  return settle(origin + Math.round((value - origin) / props.step) * props.step)
+}
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   const value = target.value === '' ? undefined : Number(target.value)
@@ -65,24 +76,70 @@ function handleInput(event: Event) {
   }
 }
 
-function handleSliderInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = Number(target.value)
-  if (!isNaN(value)) {
-    emit('update:modelValue', clamp(value))
-  }
+function nudge(delta: number) {
+  if (props.disabled) return
+  if (delta < 0 && !canDecrement.value) return
+  if (delta > 0 && !canIncrement.value) return
+  const current = props.modelValue ?? (delta < 0 ? props.max ?? 0 : props.min ?? 0)
+  emit('update:modelValue', settle(current + delta))
 }
 
 function decrement() {
-  if (props.disabled || !canDecrement.value) return
-  const current = props.modelValue ?? (props.max ?? 0)
-  emit('update:modelValue', clamp(current - props.step))
+  nudge(-props.step)
 }
 
 function increment() {
-  if (props.disabled || !canIncrement.value) return
-  const current = props.modelValue ?? (props.min ?? 0)
-  emit('update:modelValue', clamp(current + props.step))
+  nudge(props.step)
+}
+
+// Home/End only apply on the slider surface: inside the text input they must
+// keep moving the caret.
+function handleKeydown(event: KeyboardEvent, allowJump = false) {
+  if (props.disabled) return
+  switch (event.key) {
+    case 'ArrowUp': increment(); break
+    case 'ArrowDown': decrement(); break
+    case 'PageUp': nudge(props.step * 10); break
+    case 'PageDown': nudge(-props.step * 10); break
+    case 'Home':
+      if (!allowJump || props.min === undefined) return
+      emit('update:modelValue', props.min)
+      break
+    case 'End':
+      if (!allowJump || props.max === undefined) return
+      emit('update:modelValue', props.max)
+      break
+    default:
+      return
+  }
+  event.preventDefault()
+}
+
+// Drag-to-scrub across the field. Pointerdown on the <input> itself is left
+// alone so click-to-place-caret and double-click-to-select keep working.
+function scrubTo(clientX: number, area: HTMLElement) {
+  const rect = area.getBoundingClientRect()
+  if (rect.width === 0 || props.min === undefined || props.max === undefined) return
+  const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+  emit('update:modelValue', snap(props.min + ratio * (props.max - props.min)))
+}
+
+function handleScrubStart(event: PointerEvent) {
+  if (props.disabled || !isSliderMode.value) return
+  if ((event.target as HTMLElement).tagName === 'INPUT') return
+  const area = event.currentTarget as HTMLElement
+  event.preventDefault()
+  area.setPointerCapture?.(event.pointerId)
+  scrubTo(event.clientX, area)
+  const move = (e: PointerEvent) => scrubTo(e.clientX, area)
+  const stop = () => {
+    area.removeEventListener('pointermove', move)
+    area.removeEventListener('pointerup', stop)
+    area.removeEventListener('pointercancel', stop)
+  }
+  area.addEventListener('pointermove', move)
+  area.addEventListener('pointerup', stop)
+  area.addEventListener('pointercancel', stop)
 }
 </script>
 
@@ -97,62 +154,66 @@ function increment() {
     ]"
   >
     <div class="mint-number-input__field">
-      <input
-        type="number"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-number-input__input',
-          `mint-number-input__input--${size}`,
-        ]"
-        @input="handleInput"
-      />
-
-      <span v-if="unit" class="mint-number-input__unit">{{ unit }}</span>
+      <div
+        class="mint-number-input__scrub"
+        :style="isSliderMode ? { '--mint-number-input-fill': `${sliderPercent}%` } : undefined"
+        :role="isSliderMode ? 'slider' : undefined"
+        :tabindex="isSliderMode && !disabled ? 0 : undefined"
+        :aria-valuenow="isSliderMode ? modelValue : undefined"
+        :aria-valuemin="isSliderMode ? min : undefined"
+        :aria-valuemax="isSliderMode ? max : undefined"
+        :aria-orientation="isSliderMode ? 'horizontal' : undefined"
+        @pointerdown="handleScrubStart"
+        @keydown.self="isSliderMode && handleKeydown($event, true)"
+      >
+        <template v-if="isSliderMode">
+          <span class="mint-number-input__wash" aria-hidden="true" />
+          <span class="mint-number-input__rule" aria-hidden="true" />
+        </template>
+        <input
+          type="number"
+          :value="modelValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :class="[
+            'mint-number-input__input',
+            `mint-number-input__input--${size}`,
+          ]"
+          @input="handleInput"
+          @keydown="handleKeydown"
+        />
+        <span v-if="unit" class="mint-number-input__unit">{{ unit }}</span>
+      </div>
 
       <div class="mint-number-input__steppers" aria-hidden="true">
         <button
           type="button"
           tabindex="-1"
-          aria-label="Increase value"
-          :disabled="disabled || !canIncrement"
-          class="mint-number-input__stepper mint-number-input__stepper--up"
-          @click="increment"
+          aria-label="Decrease value"
+          :disabled="disabled || !canDecrement"
+          class="mint-number-input__stepper mint-number-input__stepper--down"
+          @click="decrement"
         >
-          <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M1 5l4-4 4 4" />
+          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+            <path d="M2 5h6" />
           </svg>
         </button>
         <button
           type="button"
           tabindex="-1"
-          aria-label="Decrease value"
-          :disabled="disabled || !canDecrement"
-          class="mint-number-input__stepper mint-number-input__stepper--down"
-          @click="decrement"
+          aria-label="Increase value"
+          :disabled="disabled || !canIncrement"
+          class="mint-number-input__stepper mint-number-input__stepper--up"
+          @click="increment"
         >
-          <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M1 1l4 4 4-4" />
+          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+            <path d="M5 2v6" /><path d="M2 5h6" />
           </svg>
         </button>
       </div>
     </div>
-
-    <input
-      v-if="isSliderMode"
-      type="range"
-      :value="modelValue ?? min"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      :style="{ '--mint-slider-fill': `${sliderPercent}%` }"
-      class="mint-number-input__slider"
-      @input="handleSliderInput"
-    />
   </div>
 </template>

package/src/components/PlotlyChart.story.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type * as Plotly from 'plotly.js'
+
+import PlotlyChart from './PlotlyChart.vue'
+
+const data: Plotly.Data[] = [
+  {
+    type: 'scatter',
+    mode: 'lines+markers',
+    name: 'Control',
+    x: ['0 h', '6 h', '12 h', '24 h'],
+    y: [1, 1.3, 1.8, 2.1],
+  },
+  {
+    type: 'scatter',
+    mode: 'lines+markers',
+    name: 'Treatment',
+    x: ['0 h', '6 h', '12 h', '24 h'],
+    y: [1, 1.8, 3.1, 4.4],
+  },
+]
+
+const layout: Partial<Plotly.Layout> = {
+  margin: { t: 24, r: 24, b: 56, l: 56 },
+  xaxis: { title: { text: 'Time' } },
+  yaxis: { title: { text: 'Relative abundance' } },
+}
+</script>
+
+<template>
+  <Story title="Data Display/PlotlyChart">
+    <Variant title="Native Plotly">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart
+          title="Metabolite response"
+          description="Native Plotly traces with MINT theme and resize handling"
+          :data="data"
+          :layout="layout"
+          :config="{ toImageButtonOptions: { filename: 'metabolite-response' } }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart
+          title="Metabolite response"
+          :data="[]"
+          empty
+          empty-message="No measurements are available."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="max-width: 760px; margin: 0 auto; padding: 2rem;">
+        <PlotlyChart title="Loading measurements" :data="[]" loading />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/PlotlyChart.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+/**
+ * Render native Plotly data with MINT loading, empty, theme, and error states.
+ *
+ * Plotly is loaded only when the component is mounted, so importing the SDK does
+ * not add Plotly to the application's initial bundle.
+ *
+ * @example
+ * ```vue
+ * <PlotlyChart
+ *   title="QC overview"
+ *   :data="traces"
+ *   :layout="{ xaxis: { title: { text: 'Sample' } } }"
+ *   :config="{ toImageButtonOptions: { filename: 'qc-overview' } }"
+ * />
+ * ```
+ */
+import type * as PlotlyType from 'plotly.js'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+
+import ChartContainer from './ChartContainer.vue'
+
+interface Props {
+  data: PlotlyType.Data[]
+  layout?: Partial<PlotlyType.Layout>
+  config?: Partial<PlotlyType.Config>
+  title?: string
+  description?: string
+  loading?: boolean
+  empty?: boolean
+  emptyMessage?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({}),
+  config: () => ({}),
+  loading: false,
+  empty: false,
+  emptyMessage: 'No data available',
+  ariaLabel: 'Interactive Plotly chart',
+})
+
+const chartElement = ref<HTMLDivElement | null>(null)
+const failed = ref(false)
+let plotly: typeof PlotlyType | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let renderedElement: HTMLDivElement | null = null
+let rendering = false
+let disposed = false
+let revision = 0
+
+async function loadPlotly(): Promise<typeof PlotlyType> {
+  const module = await import('plotly.js-dist-min')
+  return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
+}
+
+function cssValue(name: string, fallback: string): string {
+  const value = getComputedStyle(chartElement.value ?? document.documentElement).getPropertyValue(name).trim()
+  return value || getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+
+// Unwrap nested Vue proxies while copying Plotly's mutable input tree. Keep
+// native dates/typed arrays and callbacks instead of round-tripping through JSON.
+function clonePlotlyInput<T>(value: T): T {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(clonePlotlyInput) as T
+  if (raw !== null && typeof raw === 'object') {
+    if (Object.getPrototypeOf(raw) === Object.prototype) {
+      return Object.fromEntries(Object.entries(raw).map(([key, item]) => [key, clonePlotlyInput(item)])) as T
+    }
+    return structuredClone(raw)
+  }
+  return raw
+}
+
+function themedLayout(): Partial<PlotlyType.Layout> {
+  const textColor = cssValue('--text-primary', '#1E293B')
+  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const layout = clonePlotlyInput(props.layout)
+  return {
+    autosize: true,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...layout,
+    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
+    xaxis: { gridcolor: gridColor, ...layout.xaxis },
+    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+  }
+}
+
+function purgeChart(): void {
+  resizeObserver?.disconnect()
+  if (renderedElement) plotly?.purge(renderedElement)
+  renderedElement = null
+}
+
+async function renderChart(): Promise<void> {
+  revision++
+  if (rendering || disposed || props.loading || props.empty) return
+  rendering = true
+  try {
+    while (!disposed && !props.loading && !props.empty) {
+      const currentRevision = revision
+      failed.value = false
+      await nextTick()
+      if (disposed || props.loading || props.empty) break
+      try {
+        plotly ??= await loadPlotly()
+        if (disposed || props.loading || props.empty) break
+        if (currentRevision !== revision) continue
+        const element = chartElement.value
+        if (!element) break
+        renderedElement = element
+        // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        await plotly.react(
+          element,
+          clonePlotlyInput(props.data),
+          themedLayout(),
+          { responsive: true, displaylogo: false, ...props.config },
+        )
+        if (disposed || props.loading || props.empty || element !== chartElement.value) {
+          purgeChart()
+        } else {
+          resizeObserver?.observe(element)
+        }
+      } catch {
+        purgeChart()
+        if (!disposed && currentRevision === revision) failed.value = true
+      }
+      if (currentRevision === revision) break
+    }
+  } finally {
+    rendering = false
+    if (disposed || props.loading || props.empty) purgeChart()
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      if (rendering || !plotly || !renderedElement) return
+      // A tab can become hidden or unmount before Plotly's async resize finishes.
+      void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
+    })
+  }
+
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => void renderChart())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+  }
+  void renderChart()
+})
+
+watch(
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  () => {
+    if (props.loading || props.empty) {
+      resizeObserver?.disconnect()
+      if (!rendering) purgeChart()
+    }
+    void renderChart()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+  // An in-flight react must finish before its resources can be purged completely.
+  if (!rendering) purgeChart()
+})
+</script>
+
+<template>
+  <ChartContainer
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :empty="empty"
+    :empty-message="emptyMessage"
+  >
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty" />
+    </template>
+
+    <template v-if="failed">
+      <slot name="error">
+        <div class="mint-plotly-chart__error">
+          <p role="alert">Unable to display this chart.</p>
+        </div>
+      </slot>
+    </template>
+    <div
+      ref="chartElement"
+      v-show="!failed"
+      class="mint-plotly-chart__plot"
+      role="group"
+      :aria-label="ariaLabel"
+    />
+
+    <template v-if="$slots.legend" #legend>
+      <slot name="legend" />
+    </template>
+  </ChartContainer>
+</template>
+
+<style scoped>
+.mint-plotly-chart__plot {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-plotly-chart__error {
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--mint-error-border);
+  border-radius: 0.75rem;
+  background: var(--mint-error-bg);
+  color: var(--mint-error-hover);
+}
+
+.mint-plotly-chart__error :deep(p) {
+  margin: 0;
+}
+</style>

package/src/components/PluginWorkspaceView.props.ts

@@ -97,9 +97,9 @@ export interface PluginWorkspaceViewProps {
   sidebarSubtitle?: string
   /** Optional compact badge/count rendered in the sidebar header. */
   sidebarBadge?: string | number
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar language. */
+  /** @deprecated No-op. AppSidebar has one look now; the former `analysis` preset is the default. */
   sidebarVariant?: PluginWorkspaceSidebarVariant
-  /** Sidebar CSS width. Defaults to AppSidebar's variant width. */
+  /** Sidebar CSS width. Defaults to AppSidebar's width. */
   sidebarWidth?: string
   /** Sidebar position in AppLayout. */
   sidebarPosition?: 'left' | 'right'
@@ -113,7 +113,7 @@ export interface PluginWorkspaceViewProps {
   sidebarContentId?: string
   /** Compact AppSidebar density. */
   dense?: boolean
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to AppSidebar's variant behavior. */
+  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true. */
   sidebarCollapsible?: boolean
   /** Sidebar width when collapsed. */
   sidebarCollapsedWidth?: string

package/src/components/SegmentedControl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Renders a segmented button group for single-option selection, with simple or solid variants. */
+/** Renders a segmented button group for single-option selection, defaulting to the card variant. */
 import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'simple',
+  variant: 'card',
   size: 'md',
   fullWidth: false,
   disabled: false,