@morscherlab/mld-sdk 0.7.6 → 0.7.7

package/dist/styles.css

@@ -1205,7 +1205,7 @@ html.dark .focus\:ring-offset-2:focus {
   transform: translateX(0.75rem);
 }
 .mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__content {
-  padding: 0 0.75rem 0.75rem;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -3285,6 +3285,9 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 .mld-modal__container {
   position: relative;
   width: 100%;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
   background-color: var(--bg-card);
   border-radius: var(--mld-radius-lg);
   box-shadow: var(--mld-shadow-lg);
@@ -3342,6 +3345,9 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 /* Modal Body */
 .mld-modal__body {
   padding: 1rem 1.5rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 /* Modal Footer */
 .mld-modal__footer {
@@ -3399,6 +3405,11 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 .mld-number-input--disabled {
   opacity: 0.5;
 }
+.mld-number-input__buttons {
+  display: flex;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border-color);
+}
 .mld-number-input__button {
   display: flex;
   align-items: center;
@@ -3421,9 +3432,6 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 .mld-number-input__button--decrement {
   border-right: 1px solid var(--border-color);
 }
-.mld-number-input__button--increment {
-  border-left: 1px solid var(--border-color);
-}
 .mld-number-input__button--sm {
   width: 1.75rem;
 }
@@ -3440,7 +3448,7 @@ html.dark .mld-checkbox__native:focus-visible + .mld-checkbox__box {
 .mld-number-input__input {
   flex: 1;
   min-width: 0;
-  text-align: center;
+  text-align: left;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
   border: none;
@@ -5959,7 +5967,10 @@ html.dark .mld-toggle__track:focus-visible {
 }
 /* AutoGroupModal - Smart grouping wizard */
 .mld-auto-group {
-  min-height: 400px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 /* --- Mode toggle --- */
 .mld-auto-group__mode-toggle {
@@ -6301,9 +6312,7 @@ html.dark .mld-toggle__track:focus-visible {
 .mld-auto-group__preview-groups {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  max-height: 320px;
-  overflow-y: auto;
+  gap: 0.5rem;
 }
 .mld-auto-group__preview-group {
   border: 1px solid var(--border-color);
@@ -10887,9 +10896,12 @@ html.dark .mld-settings-modal__option-btn--active {
   flex-direction: column;
   gap: 1.5rem;
   outline: none;
+  flex: 1;
+  min-height: 0;
 }
 /* Progress indicator */
 .mld-wizard__progress {
+  flex-shrink: 0;
 }
 .mld-wizard__steps-indicator {
   display: flex;
@@ -10970,6 +10982,7 @@ html.dark .mld-settings-modal__option-btn--active {
 .mld-wizard__body {
   flex: 1;
   min-height: 0;
+  overflow-y: auto;
 }
 /* Navigation */
 .mld-wizard__navigation {
@@ -10978,6 +10991,7 @@ html.dark .mld-settings-modal__option-btn--active {
   gap: 0.5rem;
   padding-top: 1rem;
   border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 .mld-wizard__nav-btn {
   padding: 0.5rem 1rem;
@@ -13469,6 +13483,9 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
 .mld-modal__container {
   position: relative;
   width: 100%;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
   background-color: var(--bg-card);
   border-radius: var(--mld-radius-lg);
   box-shadow: var(--mld-shadow-lg);
@@ -13528,6 +13545,9 @@ html.dark .mld-radio-option__native:focus-visible + .mld-radio-option__circle {
 /* Modal Body */
 .mld-modal__body {
   padding: 1rem 1.5rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 /* Modal Footer */
@@ -15249,6 +15269,11 @@ to { transform: rotate(360deg);
 .mld-number-input--disabled {
   opacity: 0.5;
 }
+.mld-number-input__buttons {
+  display: flex;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border-color);
+}
 .mld-number-input__button {
   display: flex;
   align-items: center;
@@ -15271,9 +15296,6 @@ to { transform: rotate(360deg);
 .mld-number-input__button--decrement {
   border-right: 1px solid var(--border-color);
 }
-.mld-number-input__button--increment {
-  border-left: 1px solid var(--border-color);
-}
 .mld-number-input__button--sm {
   width: 1.75rem;
 }
@@ -15290,7 +15312,7 @@ to { transform: rotate(360deg);
 .mld-number-input__input {
   flex: 1;
   min-width: 0;
-  text-align: center;
+  text-align: left;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
   border: none;
@@ -16829,7 +16851,7 @@ html.dark .mld-settings-modal__option-btn--active {
   transform: translateX(0.75rem);
 }
 .mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__content {
-  padding: 0 0.75rem 0.75rem;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -19454,10 +19476,13 @@ to {
   flex-direction: column;
   gap: 1.5rem;
   outline: none;
+  flex: 1;
+  min-height: 0;
 }
 
 /* Progress indicator */
 .mld-wizard__progress {
+  flex-shrink: 0;
 }
 .mld-wizard__steps-indicator {
   display: flex;
@@ -19540,6 +19565,7 @@ to {
 .mld-wizard__body {
   flex: 1;
   min-height: 0;
+  overflow-y: auto;
 }
 
 /* Navigation */
@@ -19549,6 +19575,7 @@ to {
   gap: 0.5rem;
   padding-top: 1rem;
   border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 .mld-wizard__nav-btn {
   padding: 0.5rem 1rem;
@@ -19612,7 +19639,10 @@ to {
 }
 /* AutoGroupModal - Smart grouping wizard */
 .mld-auto-group {
-  min-height: 400px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 /* --- Mode toggle --- */
@@ -19960,9 +19990,7 @@ to {
 .mld-auto-group__preview-groups {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  max-height: 320px;
-  overflow-y: auto;
+  gap: 0.5rem;
 }
 .mld-auto-group__preview-group {
   border: 1px solid var(--border-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/composables/useAutoGroup.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import {
   analyzeDelimiter,
   detectOutliers,
+  classifyOutlierAction,
   extractColumns,
   parseCSV,
   parseCSVLine,
@@ -373,3 +374,135 @@ describe('computeGroups', () => {
     expect(treatGroup?.samples).toHaveLength(3)
   })
 })
+
+describe('classifyOutlierAction', () => {
+  it('should return qc for samples containing QC keywords', () => {
+    expect(classifyOutlierAction('LT_13102025_EQC_Jurkat_1_2', '_')).toBe('qc')
+    expect(classifyOutlierAction('LT_13102025_IQC_Pool_1', '_')).toBe('qc')
+    expect(classifyOutlierAction('Blank_001', '_')).toBe('qc')
+    expect(classifyOutlierAction('STD_Low_1', '_')).toBe('qc')
+    expect(classifyOutlierAction('test_EQC_Jurkat_02', '_')).toBe('qc')
+  })
+
+  it('should match case-insensitively', () => {
+    expect(classifyOutlierAction('LT_eqc_Pool', '_')).toBe('qc')
+    expect(classifyOutlierAction('LT_EQC_Pool', '_')).toBe('qc')
+    expect(classifyOutlierAction('LT_Eqc_Pool', '_')).toBe('qc')
+    expect(classifyOutlierAction('BLANK_001', '_')).toBe('qc')
+    expect(classifyOutlierAction('Test_Sample', '_')).toBe('qc')
+  })
+
+  it('should match against individual segments only', () => {
+    // "eqc" embedded inside a segment should NOT match
+    expect(classifyOutlierAction('LT_SEQC123_Pool', '_')).toBe('include')
+    // "std" as standalone segment should match
+    expect(classifyOutlierAction('LT_std_Pool', '_')).toBe('qc')
+  })
+
+  it('should return include for regular experimental samples', () => {
+    expect(classifyOutlierAction('LT_13102025_212_WT_Glu', '_')).toBe('include')
+    expect(classifyOutlierAction('Control_Rep1', '_')).toBe('include')
+    expect(classifyOutlierAction('Treatment_High_Rep3', '_')).toBe('include')
+  })
+
+  it('should work with different delimiters', () => {
+    expect(classifyOutlierAction('LT-EQC-Pool', '-')).toBe('qc')
+    expect(classifyOutlierAction('blank.001', '.')).toBe('qc')
+    expect(classifyOutlierAction('Control-Rep1', '-')).toBe('include')
+  })
+})
+
+describe('integration: mixed experimental + QC + test samples', () => {
+  // Simulates the real dataset pattern:
+  // 154 experimental (11 fields), ~15 QC (6-7 fields), 3 test (4 fields)
+  const experimental = [
+    'LT_13102025_212_WT_Glu_3_20_S_091123_T1_33',
+    'LT_13102025_213_WT_Glu_3_20_S_091123_T1_34',
+    'LT_13102025_214_KI_Glu_3_20_S_091123_T1_35',
+    'LT_13102025_215_KI_Glu_6_40_L_091123_T1_36',
+    'LT_13102025_216_WT_Glu_6_40_L_091123_T1_37',
+    'LT_13102025_217_WT_Glu_6_40_L_091123_T2_38',
+    'LT_13102025_218_KI_Glu_3_20_S_091123_T2_39',
+  ]
+  const qcSamples = [
+    'LT_13102025_EQC_Jurkat_1_2',
+    'LT_13102025_IQC_Pool_3',
+  ]
+  const testSamples = [
+    'test_EQC_Jurkat_02',
+  ]
+  const allLines = [...experimental, ...qcSamples, ...testSamples]
+
+  it('should detect dominantFieldCount=11 and flag QC/test as outliers', () => {
+    const analysis = analyzeDelimiter(allLines)
+    expect(analysis.delimiter).toBe('_')
+    expect(analysis.dominantFieldCount).toBe(11)
+
+    const outliers = detectOutliers(allLines, '_', analysis.dominantFieldCount)
+    // QC samples (6 fields) and test samples (4 fields) are outliers
+    expect(outliers).toHaveLength(qcSamples.length + testSamples.length)
+
+    // Experimental samples should NOT be flagged
+    const outlierIndices = new Set(outliers.map(o => o.index))
+    for (let i = 0; i < experimental.length; i++) {
+      expect(outlierIndices.has(i)).toBe(false)
+    }
+  })
+
+  it('should auto-classify QC/test outliers with smart defaults', () => {
+    const analysis = analyzeDelimiter(allLines)
+    const outliers = detectOutliers(allLines, '_', analysis.dominantFieldCount)
+
+    for (const outlier of outliers) {
+      outlier.action = classifyOutlierAction(outlier.sample, '_')
+    }
+
+    // All QC and test samples should be classified as 'qc'
+    expect(outliers.every(o => o.action === 'qc')).toBe(true)
+  })
+
+  it('should produce 11 columns from conforming samples', () => {
+    const analysis = analyzeDelimiter(allLines)
+    const outliers = detectOutliers(allLines, '_', analysis.dominantFieldCount)
+    const conforming = allLines.filter(
+      (_, i) => !outliers.some(o => o.index === i)
+    )
+
+    const conformingFieldCounts = conforming.map(s => s.split('_').length)
+    const effectiveMinFieldCount = Math.min(...conformingFieldCounts)
+
+    const columns = extractColumns(conforming, '_', effectiveMinFieldCount)
+    expect(columns).toHaveLength(11)
+  })
+
+  it('should auto-disable constant columns (cardinality 1)', () => {
+    const analysis = analyzeDelimiter(allLines)
+    const outliers = detectOutliers(allLines, '_', analysis.dominantFieldCount)
+    const conforming = allLines.filter(
+      (_, i) => !outliers.some(o => o.index === i)
+    )
+
+    const conformingFieldCounts = conforming.map(s => s.split('_').length)
+    const effectiveMinFieldCount = Math.min(...conformingFieldCounts)
+
+    const columns = extractColumns(conforming, '_', effectiveMinFieldCount)
+
+    // Auto-disable: only enable columns with cardinality > 1
+    const enabled = new Set(
+      columns.filter(f => f.cardinality > 1).map(f => f.index)
+    )
+
+    // Constant columns (LT, 13102025, Glu, 091123) should be disabled
+    const constantCols = columns.filter(c => c.cardinality === 1)
+    for (const col of constantCols) {
+      expect(enabled.has(col.index)).toBe(false)
+    }
+
+    // Variable columns should be enabled
+    const variableCols = columns.filter(c => c.cardinality > 1)
+    for (const col of variableCols) {
+      expect(enabled.has(col.index)).toBe(true)
+    }
+    expect(variableCols.length).toBeGreaterThan(0)
+  })
+})

package/src/components/AutoGroupModal.story.vue

@@ -19,6 +19,29 @@ const withOutliersSamples = [
   'Ctrl_Brain_D1_Rep1', 'Ctrl_Brain_D1_Rep2',
 ]
 
+// Real-world mixed dataset: 11-field experimental + 6-field QC + 4-field test
+// This exercises the dominantFieldCount outlier fix
+const mixedFieldCountSamples = [
+  // Experimental (11 fields each)
+  'LT_13102025_212_WT_Glu_3_20_S_091123_T1_33',
+  'LT_13102025_213_WT_Glu_3_20_S_091123_T1_34',
+  'LT_13102025_214_KI_Glu_3_20_S_091123_T1_35',
+  'LT_13102025_215_KI_Glu_6_40_L_091123_T1_36',
+  'LT_13102025_216_WT_Glu_6_40_L_091123_T1_37',
+  'LT_13102025_217_WT_Glu_6_40_L_091123_T2_38',
+  'LT_13102025_218_KI_Glu_3_20_S_091123_T2_39',
+  'LT_13102025_219_KI_Glu_6_40_L_091123_T2_40',
+  'LT_13102025_220_WT_Glu_3_20_S_091123_T2_41',
+  'LT_13102025_221_WT_Glu_6_40_L_091123_T2_42',
+  // QC samples (6 fields)
+  'LT_13102025_EQC_Jurkat_1_2',
+  'LT_13102025_EQC_Jurkat_2_8',
+  'LT_13102025_IQC_Pool_1_5',
+  // Test samples (4 fields)
+  'test_EQC_Jurkat_02',
+  'test_Blank_Run_01',
+]
+
 // Hyphen-delimited samples
 const hyphenSamples = [
   'WT-Vehicle-1', 'WT-Vehicle-2', 'WT-Vehicle-3',
@@ -35,10 +58,10 @@ function handleApply(result: AutoGroupResult) {
   console.log('AutoGroupModal result:', result)
 }
 
-function initState() {
+function initState(samples: string[] = proteomicsSamples) {
   return {
-    isOpen: false,
-    samples: proteomicsSamples,
+    isOpen: true,
+    samples,
     lastResult: null as AutoGroupResult | null,
   }
 }
@@ -46,7 +69,7 @@ function initState() {
 
 <template>
   <Story title="Lab/AutoGroupModal">
-    <Variant title="Playground" :init-state="initState">
+    <Variant title="Playground" :init-state="() => ({ isOpen: false, samples: proteomicsSamples, lastResult: null as AutoGroupResult | null })">
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <button
@@ -80,53 +103,98 @@ function initState() {
       </template>
       <template #controls="{ state }">
         <HstSelect
-          :model-value="state.samples === proteomicsSamples ? 'proteomics' : state.samples === withOutliersSamples ? 'outliers' : 'hyphen'"
+          :model-value="state.samples === proteomicsSamples ? 'proteomics' : state.samples === withOutliersSamples ? 'outliers' : state.samples === mixedFieldCountSamples ? 'mixed' : 'hyphen'"
           title="Sample Set"
           :options="[
             { value: 'proteomics', label: 'Proteomics (clean)' },
             { value: 'outliers', label: 'With QC/Blanks' },
+            { value: 'mixed', label: 'Mixed Field Counts (11 + 6 + 4)' },
             { value: 'hyphen', label: 'Hyphen-delimited' },
           ]"
           @update:model-value="(v: string) => {
             if (v === 'proteomics') state.samples = proteomicsSamples
             else if (v === 'outliers') state.samples = withOutliersSamples
+            else if (v === 'mixed') state.samples = mixedFieldCountSamples
             else state.samples = hyphenSamples
           }"
         />
       </template>
     </Variant>
 
-    <Variant title="Pre-filled (Proteomics)">
-      <div style="padding: 2rem;">
-        <AutoGroupModal
-          :model-value="true"
-          :samples="proteomicsSamples"
-          @update:model-value="() => {}"
-          @apply="handleApply"
-        />
-      </div>
+    <Variant title="Pre-filled (Proteomics)" :init-state="() => initState(proteomicsSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
     </Variant>
 
-    <Variant title="With Outliers (QC/Blanks)">
-      <div style="padding: 2rem;">
-        <AutoGroupModal
-          :model-value="true"
-          :samples="withOutliersSamples"
-          @update:model-value="() => {}"
-          @apply="handleApply"
-        />
-      </div>
+    <Variant title="With Outliers (QC/Blanks)" :init-state="() => initState(withOutliersSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
     </Variant>
 
-    <Variant title="Hyphen-Delimited">
-      <div style="padding: 2rem;">
-        <AutoGroupModal
-          :model-value="true"
-          :samples="hyphenSamples"
-          @update:model-value="() => {}"
-          @apply="handleApply"
-        />
-      </div>
+    <Variant title="Mixed Field Counts (Smart Outlier Detection)" :init-state="() => initState(mixedFieldCountSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
+    </Variant>
+
+    <Variant title="Hyphen-Delimited" :init-state="() => initState(hyphenSamples)">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :samples="state.samples"
+            @apply="handleApply"
+          />
+        </div>
+      </template>
     </Variant>
 
     <Variant title="Empty (Manual Paste)">

package/src/components/AutoGroupModal.vue

@@ -38,7 +38,7 @@ watch(() => props.modelValue, (open) => {
       autoGroup.rawText.value = props.samples.join('\n')
     }
   }
-})
+}, { immediate: true })
 
 // Dynamic steps: skip outlier step when no outliers
 const allSteps: WizardStep[] = [
@@ -239,7 +239,7 @@ const isFirstStep = computed(() => currentStep.value === 0)
             <div class="mld-auto-group__outlier-banner">
               {{ autoGroup.outliers.value.length }} of {{ autoGroup.samples.value.length }}
               samples have irregular structure
-              (fewer than {{ autoGroup.minFieldCount.value }} fields, delimiter
+              (fewer than {{ autoGroup.dominantFieldCount.value }} fields, delimiter
               <code>{{ autoGroup.delimiter.value }}</code>)
             </div>
 

package/src/components/NumberInput.vue

@@ -74,22 +74,6 @@ function increment() {
       disabled ? 'mld-number-input--disabled' : '',
     ]"
   >
-    <button
-      type="button"
-      aria-label="Decrease value"
-      :disabled="disabled || !canDecrement"
-      :class="[
-        'mld-number-input__button',
-        'mld-number-input__button--decrement',
-        `mld-number-input__button--${size}`,
-      ]"
-      @click="decrement"
-    >
-      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-        <path d="M5 12h14" />
-      </svg>
-    </button>
-
     <input
       type="number"
       :value="modelValue"
@@ -106,21 +90,39 @@ function increment() {
       @input="handleInput"
     />
 
-    <button
-      type="button"
-      aria-label="Increase value"
-      :disabled="disabled || !canIncrement"
-      :class="[
-        'mld-number-input__button',
-        'mld-number-input__button--increment',
-        `mld-number-input__button--${size}`,
-      ]"
-      @click="increment"
-    >
-      <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-        <path d="M5 12h14" /><path d="M12 5v14" />
-      </svg>
-    </button>
+    <div class="mld-number-input__buttons">
+      <button
+        type="button"
+        aria-label="Decrease value"
+        :disabled="disabled || !canDecrement"
+        :class="[
+          'mld-number-input__button',
+          'mld-number-input__button--decrement',
+          `mld-number-input__button--${size}`,
+        ]"
+        @click="decrement"
+      >
+        <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M5 12h14" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        aria-label="Increase value"
+        :disabled="disabled || !canIncrement"
+        :class="[
+          'mld-number-input__button',
+          'mld-number-input__button--increment',
+          `mld-number-input__button--${size}`,
+        ]"
+        @click="increment"
+      >
+        <svg class="mld-number-input__button-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <path d="M5 12h14" /><path d="M12 5v14" />
+        </svg>
+      </button>
+    </div>
   </div>
 </template>